search

Soil-Carbon-Coalition / atlasbiowork

App framework based on wq for entering georeferenced data about landscape function
4 stars 2 forks source link

changing appearances #8

Closed managingwholes closed 8 years ago

managingwholes commented 8 years ago

To change the index page, e.g. "Welcome to atlasbiowork," which of the three files where it occurs is the original or template for the other two?

In addition, I am trying to change the length of some of the input fields, e.g. to have "minutes" and "seconds" on the same line. Writing 'size = "5"' inside the input tag seems to have no effect, or do I need to deploy.sh again?

sheppard commented 8 years ago

The HTML files are the source templates - templates/index.html in this case. The templates are collected into a JSON object app/js/data/templates.js, which is then combined with all of the other JavaScript during the optimize step to create htdocs/js/atlasbiowork.js. Thus, everything under app/js/data and under htdocs is auto-generated on build and should not be edited directly.

It's a bit messy to directly change the width of an <input> since it's appearance is primarily controlled by the <div class=ui-input-text> that jQuery Mobile automatically wraps it with to add a mobile-friendly border. It's not particularly easy to reference the <div> directly in CSS since it contains (rather than is contained by) the element we want to style. One option is to disable jQuery Mobile's transformation of the element entirely (<input data-role='none'>) but that doesn't look very great.

The best solution I've come up with is to add a class to the parent <li> and then and add a CSS rule overriding any jQuery Mobile input divs that appear inside the <li>.

So, the form would have this added:

<li class="ui-field-contain numeric">
  <label for='firstmin'>1st inch, minutes:seconds</label>
  <input id='firstmin' type='number' ...>

And app/css/atlasbiowork/main.css would have (something like) this added:

li.ui-field-contain.numeric .ui-input-text {
    width: 5em !important;
    float: none;
    vertical-align: middle;
    display: inline-block;
}
managingwholes commented 8 years ago

OK, great. This worked.