Changeset 6611


Ignore:
Timestamp:
Nov 20, 2014, 2:53:55 PM (8 years ago)
Author:
Nicklas Nordborg
Message:

References #1890: Improve skinnability of BASE

Bioplate wizards and data files selection.

Location:
trunk/www
Files:
12 edited

Legend:

Unmodified
Added
Removed
  • trunk/www/biomaterials/bioplates/view_bioplate.jsp

    r6605 r6611  
    124124    <t:tab id="properties" title="Properties">
    125125      <div>
    126       <table class="fullform">
     126      <table class="fullform bottomborder">
    127127      <tr>
    128128        <th class="itemstatus">
     
    145145            visible="<%=isRemoved && isUsed%>" />
    146146        </th>
    147         <td style="padding: 0px;">
     147        <td style="padding: 0px;" colspan="2">
    148148          <tbl:toolbar subclass="bottomborder bg-filled-50">
    149149            <tbl:button
     
    234234        </td>
    235235      </tr>
    236     </table>
    237     <table style="width: 100%; height: <%=geometry.getRows()*35+20 %>px;" class="bottomborder">
    238     <tr style="vertical-align: top;">
    239       <td style="width: 50%; height: 100%;">
    240       <table class="fullform" >
    241236      <tr>
    242237        <th>Name</th>
    243238        <td><%=HTML.encodeTags(bioplate.getName())%></td>
    244       </tr>
    245       <tr>
    246         <th>Barcode</th>
    247         <td><%=HTML.encodeTags(bioplate.getBarcode())%></td>
    248       </tr>
    249       <tr>
    250         <th>Created</th>
    251         <td><%=dateFormatter.format(bioplate.getEventDate())%></td>
    252       </tr>
    253       <tr>
    254         <th>Registered</th>
    255         <td><%=dateFormatter.format(bioplate.getEntryDate())%></td>
    256       </tr>
    257       <tr>
    258         <th>Destroyed</th>
    259         <td><%=bioplate.isDestroyed() ? "yes" : "no"%></td>
    260       </tr>
    261       <tr>
    262         <th>Bioplate type</th>
    263         <td><base:propertyvalue item="<%=bioplate%>" property="bioPlateType" /></td>
    264       </tr>
    265       <tr>
    266         <th>Geometry</th>
    267         <td><base:propertyvalue item="<%=bioplate%>" property="plateGeometry" /></td>
    268       </tr>
    269       <tr>
    270         <th>Free (total) wells</th>
    271         <td><%=bioplate.getFreeWells()%> (<%=bioplate.getTotalWells()%>)</td>
    272       </tr>
    273       <tr>
    274         <th>Storage location</th>
    275         <td><base:propertyvalue item="<%=bioplate%>" property="freezer" /></td>
    276       </tr>
    277       <tr>
    278         <th class="subprompt"></th>
    279         <td>
    280           <b>Section</b>: <%=HTML.encodeTags(Values.getString(bioplate.getSection(), "-")) %>;
    281           <b>Tray</b>: <%=HTML.encodeTags(Values.getString(bioplate.getTray(), "-")) %>;
    282           <b>Position</b>: <%=HTML.encodeTags(Values.getString(bioplate.getPosition(), "-")) %>
    283         </td>
    284       </tr>
    285       <tr>
    286         <th>Owner</th>
    287         <td><base:propertyvalue item="<%=bioplate%>" property="owner" /></td>
    288       </tr>
    289       <tr>
    290         <th>Permissions</th>
    291         <td><%=PermissionUtil.getFullPermissionNames(bioplate)%></td>
    292       </tr>
    293       <tr class="dynamic">
    294         <th>Description</th>
    295         <td><%=HTML.niceFormat(bioplate.getDescription())%></td>
    296       </tr>
    297       </table>
    298       </td>
    299       <td style="width: 50%; padding: 1em;" id="bioplate">
     239        <td rowspan="12" style="width: 50%; vertical-align: top;">
     240       
    300241        <div class="postit" id="wellInfo" style="display:none; width: 20em; min-height: 3em;"></div>
    301         <table class="plate">
     242        <table class="plate" style="margin-top: 1em;" id="bioplate">
    302243        <%
    303244        int columns = geometry.getColumns();
     
    306247        WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
    307248        %>
    308         <tr><td></td>
     249        <tr><td class="bg-filled-100"></td>
    309250        <%
    310251        for (int c = 0; c < columns; ++c)
    311252        {
    312253          %>
    313           <td class="columnheader"><%=colF.format(c)%></td>
     254          <td class="columnheader bg-filled-100"><%=colF.format(c)%></td>
    314255          <%
    315256        }
     
    321262          String row = rowF.format(r);
    322263          %>
    323           <tr><td class="rowheader"><%=row%></td>
     264          <tr><td class="rowheader bg-filled-100"><%=row%></td>
    324265          <%
    325266          for (int c = 0; c < columns; ++c)
     
    415356        %>
    416357        </table>
    417       </td>
    418     </tr>
     358       
     359       
     360        </td>
     361      </tr>
     362      <tr>
     363        <th>Barcode</th>
     364        <td><%=HTML.encodeTags(bioplate.getBarcode())%></td>
     365      </tr>
     366      <tr>
     367        <th>Created</th>
     368        <td><%=dateFormatter.format(bioplate.getEventDate())%></td>
     369      </tr>
     370      <tr>
     371        <th>Registered</th>
     372        <td><%=dateFormatter.format(bioplate.getEntryDate())%></td>
     373      </tr>
     374      <tr>
     375        <th>Destroyed</th>
     376        <td><%=bioplate.isDestroyed() ? "yes" : "no"%></td>
     377      </tr>
     378      <tr>
     379        <th>Bioplate type</th>
     380        <td><base:propertyvalue item="<%=bioplate%>" property="bioPlateType" /></td>
     381      </tr>
     382      <tr>
     383        <th>Geometry</th>
     384        <td><base:propertyvalue item="<%=bioplate%>" property="plateGeometry" /></td>
     385      </tr>
     386      <tr>
     387        <th>Free (total) wells</th>
     388        <td><%=bioplate.getFreeWells()%> (<%=bioplate.getTotalWells()%>)</td>
     389      </tr>
     390      <tr>
     391        <th>Storage location</th>
     392        <td><base:propertyvalue item="<%=bioplate%>" property="freezer" /></td>
     393      </tr>
     394      <tr>
     395        <th class="subprompt"></th>
     396        <td>
     397          <b>Section</b>: <%=HTML.encodeTags(Values.getString(bioplate.getSection(), "-")) %>;
     398          <b>Tray</b>: <%=HTML.encodeTags(Values.getString(bioplate.getTray(), "-")) %>;
     399          <b>Position</b>: <%=HTML.encodeTags(Values.getString(bioplate.getPosition(), "-")) %>
     400        </td>
     401      </tr>
     402      <tr>
     403        <th>Owner</th>
     404        <td><base:propertyvalue item="<%=bioplate%>" property="owner" /></td>
     405      </tr>
     406      <tr>
     407        <th>Permissions</th>
     408        <td><%=PermissionUtil.getFullPermissionNames(bioplate)%></td>
     409      </tr>
     410      <tr class="dynamic">
     411        <th>Description</th>
     412        <td><%=HTML.niceFormat(bioplate.getDescription())%></td>
     413      </tr>
    419414    </table>
    420415    </div>
    421416     
    422       <jsp:include page="../../common/anytoany/list_anytoany.jsp">
    423         <jsp:param name="ID" value="<%=ID%>" />
    424         <jsp:param name="item_type" value="<%=itemType.name()%>" />
    425         <jsp:param name="item_id" value="<%=itemId%>" />
    426         <jsp:param name="title" value="Other items related to this bioplate" />
    427       </jsp:include>
    428       <jsp:include page="../../common/share/list_share.jsp">
    429         <jsp:param name="ID" value="<%=ID%>" />
    430         <jsp:param name="item_type" value="<%=itemType.name()%>" />
    431         <jsp:param name="item_id" value="<%=itemId%>" />
    432         <jsp:param name="title" value="Shared to" />
    433       </jsp:include>
     417        <jsp:include page="../../common/anytoany/list_anytoany.jsp">
     418          <jsp:param name="ID" value="<%=ID%>" />
     419          <jsp:param name="item_type" value="<%=itemType.name()%>" />
     420          <jsp:param name="item_id" value="<%=itemId%>" />
     421          <jsp:param name="title" value="Other items related to this bioplate" />
     422        </jsp:include>
     423        <jsp:include page="../../common/share/list_share.jsp">
     424          <jsp:param name="ID" value="<%=ID%>" />
     425          <jsp:param name="item_type" value="<%=itemType.name()%>" />
     426          <jsp:param name="item_id" value="<%=itemId%>" />
     427          <jsp:param name="title" value="Shared to" />
     428        </jsp:include>
    434429      </t:tab>
    435430     
  • trunk/www/biomaterials/wizards/create_child_bioplate.js

    r6400 r6611  
    866866        frm.plate_barcode.value = editingPlate.barcode;
    867867      }
    868       Doc.show('childplate.info');
     868      Doc.show('childplate.info', 'table');
    869869    }
    870870    if (editingWell && !isBioAssayEvent)
    871871    {
    872872      frm.biomaterial_name.value = editingWell.childName;
    873       Doc.show('childbiomaterial.info');
     873      Doc.show('childbiomaterial.info', 'table');
    874874    }
    875875  }
  • trunk/www/biomaterials/wizards/create_child_bioplate_step2.jsp

    r6397 r6611  
    116116   
    117117    <div class="content">
    118       <div class="absolutefull filled" style="height: 3em;">
    119         <tbl:toolbar id="toolbar.mappings" subclass="bottomborder">
     118      <div class="absolutefull bg-filled-50" style="height: 1.8em;">
     119        <tbl:toolbar id="toolbar.mappings" subclass="bottomborder" style="height: 100%;">
    120120          <tbl:button
    121121            id="btnClearMapping"
     
    145145      </div>
    146146 
    147       <div class="absolutefull" style="top: 3em; bottom: 10em;">
     147      <div class="absolutefull bottomborder" style="top: 1.8em;">
    148148 
    149149        <div class="absolutefull" style="width: 50%;">
    150           <div class="absolutefull filled" style="height: 2em;">
     150          <div class="absolutefull bg-filled-100" style="height: 2em;">
    151151            <div class="padded">
    152152            <b>Source plate:</b> <span id="plate.src.name"></span>
     
    154154          </div>
    155155         
    156           <div class="absolutefull topborder" style="top: 2em;">
    157             <table style="margin: auto; xheight: 100%;"><tr><td>
     156          <div class="absolutefull topborder rightborder" style="top: 2em; bottom: 10em;">
     157            <table style="margin: auto;"><tr><td>
    158158              <div id="plate.src" style="margin-top: 1em;"></div>
    159159            </td></tr></table>
    160160          </div>
    161         </div>
    162  
    163         <div class="absolutefull" style="left: auto; width: 50%;">
    164           <div class="absolutefull filled" style="height: 2em;">
    165             <div class="padded">
    166               <b><%=isBioAssayEvent ?
    167                 "Physical bioassay(s)" : "Destination plate(s):"%></b>
    168                 <span id="plate.dest.info"><i>not created</i></span>
    169             </div>
    170           </div>
    171            
    172           <div class="absolutefull leftborder topborder" style="top: 2em;">
    173             <table style="margin: auto;"><tr><td>
    174               <div id="plate.dest" style="margin-top: 1em;"></div>
    175               <div id="plate.dest.options" style="display: none;">
    176                 <input type="checkbox" name="showSourceCoordinates" id="showSourceCoordinates"
    177                   <%=showSourceCoordinates ? "checked" : ""%> value="1"><label for="showSourceCoordinates">Show source coordinates</label>
    178               </div>
    179             </td></tr></table>
    180           </div>
    181         </div>
    182       </div>
    183 
    184       <div class="absolutefull filled topborder bottomborder" style="top: auto; height: 10em;">
    185         <div class="absolutefull rightborder" style="width: 50%; display: none;" id="childplate.info">
    186           <table class="fullform input100 smaller">
     161         
     162          <div class="absolutefull rightborder" style="top: auto; height: 10em;" >
     163          <table class="fullform input100 smaller topborder" id="childplate.info" style="display: none;">
    187164            <tbody class="sectionheader">
    188165              <tr>
     
    214191            </tr>
    215192          </table>
     193          </div>
    216194        </div>
    217        
    218         <div class="absolutefull" style="left: auto; width: 50%; display: none;" id="childbiomaterial.info">
    219           <table class="fullform input100 smaller">
     195 
     196        <div class="absolutefull" style="left: auto; width: 50%;">
     197          <div class="absolutefull bg-filled-100" style="height: 2em;">
     198            <div class="padded">
     199              <b><%=isBioAssayEvent ?
     200                "Physical bioassay(s)" : "Destination plate(s):"%></b>
     201                <span id="plate.dest.info"><i>not created</i></span>
     202            </div>
     203          </div>
     204           
     205          <div class="absolutefull topborder" style="top: 2em;">
     206            <table style="margin: auto;"><tr><td>
     207              <div id="plate.dest" style="margin-top: 1em;"></div>
     208              <div id="plate.dest.options" style="display: none;">
     209                <input type="checkbox" name="showSourceCoordinates" id="showSourceCoordinates"
     210                  <%=showSourceCoordinates ? "checked" : ""%> value="1"><label for="showSourceCoordinates">Show source coordinates</label>
     211              </div>
     212            </td></tr></table>
     213          </div>
     214         
     215
     216          <div class="absolutefull" style="top: auto; height: 10em;">
     217          <table class="fullform input100 smaller topborder" id="childbiomaterial.info" style="display: none;">
    220218            <tbody class="sectionheader">
    221219              <tr>
     
    235233            </tr>
    236234          </table>
    237        
     235          </div>
    238236        </div>
    239237      </div>
    240 
    241238
    242239    </div>
  • trunk/www/biomaterials/wizards/move_biomaterial.js

    r6400 r6611  
    154154    // Create html table representing the bioplate
    155155    var html = '<table class="'+plateClass+'">';
    156     html += '<tr><td></td>';
     156    html += '<tr><td class="bg-filled-100"></td>';
    157157    for (var c = 0; c < plate.columns; c++)
    158158    {
    159       html += '<td class="columnheader">' + (c+1) + '</td>';
     159      html += '<td class="columnheader bg-filled-100">' + (c+1) + '</td>';
    160160    }
    161161    html += '</tr>';
    162162    for (var r = 0; r < plate.rows; r++)
    163163    {
    164       html += '<tr><td class="rowheader">' + Plates.toAlphaCoordinate[r] + '</td>';
     164      html += '<tr><td class="rowheader bg-filled-100">' + Plates.toAlphaCoordinate[r] + '</td>';
    165165      for (var c = 0; c < plate.columns; c++)
    166166      {
     
    286286    var row = Data.int(event.currentTarget, 'row');
    287287    var column = Data.int(event.currentTarget, 'column');
    288    
     288    App.debug(row+':'+column);
    289289    var well = sourcePlate.getWell(row, column);
    290290    if (!well) return;
  • trunk/www/biomaterials/wizards/move_biomaterial.jsp

    r6396 r6611  
    142142   
    143143    <div class="content" >
    144       <div class="absolutefull filled" style="height: 10em;">
    145         <table style="width: 100%; background: #FFFFFF;" class="input100">
    146         <tr>
    147           <td style="width: 50%;">
    148             <table class="fullform smaller">
    149               <tr>
    150                 <th>Event name</th>
    151                 <td><input class="text required" type="text" name="name"
    152                   value="Move biomaterial"
    153                   maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
    154               </tr>
    155               <tr>
    156                 <th>Event date</th>
    157                 <td>
    158                   <table>
    159                   <tr>
    160                   <td>
    161                     <input class="text" type="text" name="event_date" id="event_date" style="width: 15em;"
    162                       value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>"
    163                       maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
    164                   </td>
    165                   <td>
    166                     <base:calendar textarea="event_date" title="Event date" />
    167                   </td>
    168                   </tr>
    169                   </table>
    170                 </td>
    171               </tr>
    172               <tr>
    173                 <th>Protocol</th>
    174                 <td>
    175                   <base:select
    176                     id="protocol_id"
    177                     clazz="selectionlist"
    178                     required="false"
    179                     current="<%=null%>"
    180                     recent="<%=recentProtocols%>"
    181                   />
    182                 </td>
    183               </tr>
    184               <tr>
    185                 <th>Hardware</th>
    186                 <td>
    187                   <base:select
    188                     id="hardware_id"
    189                     clazz="selectionlist"
    190                     required="false"
    191                     current="<%=null%>"
    192                     recent="<%=recentHardware%>"
    193                   />
    194                 </td>
    195               </tr>
    196               </table>
    197             </td>
    198             <td style="width: 50%;">
    199               <table style="width: 100%;">
    200               <tr>
    201                 <td><b>Description</b><br>
    202                   <textarea class="text" rows="4" name="description" id="description"
    203                   ></textarea></td>
    204                 <td style="width: 20px;">
    205                   <base:zoom textarea="description" title="Description" />
    206                 </td>
    207               </tr>
    208               </table>
    209             </td>
     144      <div class="absolutefull" style="height: 10em;">
     145        <div class="absolutefull" style="width: 50%; bottom: 2em;">
     146          <table class="fullform input100 smaller">
     147          <tr>
     148            <th>Event name</th>
     149            <td><input class="text required" type="text" name="name"
     150              value="Move biomaterial"
     151              maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
     152          </tr>
     153          <tr>
     154            <th>Event date</th>
     155            <td>
     156              <input class="text" type="text" name="event_date" id="event_date" style="width: 15em;"
     157                value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>"
     158                maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
     159              <base:calendar textarea="event_date" title="Event date" />
     160            </td>
     161          </tr>
     162          <tr>
     163            <th>Protocol</th>
     164            <td>
     165              <base:select
     166                id="protocol_id"
     167                clazz="selectionlist"
     168                required="false"
     169                current="<%=null%>"
     170                recent="<%=recentProtocols%>"
     171              />
     172            </td>
     173          </tr>
     174          <tr>
     175            <th>Hardware</th>
     176            <td>
     177              <base:select
     178                id="hardware_id"
     179                clazz="selectionlist"
     180                required="false"
     181                current="<%=null%>"
     182                recent="<%=recentHardware%>"
     183              />
     184            </td>
     185          </tr>
    210186          </table>
    211           <tbl:toolbar id="toolbar.mappings" subclass="topborder bottomborder">
     187        </div>
     188        <div class="absolutefull" style="left: 50%; width: 50%;">
     189          <table style="width: 100%;">
     190          <tr>
     191            <td><b>Description</b><br>
     192              <textarea class="text" rows="4" name="description" id="description" style="width: calc(100% - 10px);"
     193              ></textarea></td>
     194            <td style="width: 20px;">
     195              <base:zoom textarea="description" title="Description" />
     196            </td>
     197          </tr>
     198          </table>
     199        </div>
     200        <div class="absolutefull" style="top: auto; height: 2em;">
     201          <tbl:toolbar id="toolbar.mappings" subclass="topborder bottomborder bg-filled-50" style="height: 100%;">
    212202            <tbl:button
    213203              id="btnSelectPlate"
     
    241231            />
    242232          </tbl:toolbar>
     233        </div>
    243234      </div>
    244235      <div class="absolutefull bottomborder" style="top: 10em;">
    245236        <div class="absolutefull" style="width: 50%;">
    246           <div class="absolutefull filled" style="height: 2em;">
     237          <div class="absolutefull bg-filled-100" style="height: 2em;">
    247238            <div class="padded">
    248239            <b>Source plate:</b> <span id="plate.src.name"></span>
     
    260251        </div>
    261252        <div class="absolutefull" style="left: auto; width: 50%;">
    262           <div class="absolutefull filled" style="height: 2em;">
     253          <div class="absolutefull bg-filled-100" style="height: 2em;">
    263254            <div class="padded">
    264255            <b>Destination plate:</b> <span id="plate.dest.name" tabindex="0"><i>not selected</i></span>
  • trunk/www/biomaterials/wizards/place_on_plate.js

    r6397 r6611  
    143143    // Create html table representing the bioplate
    144144    var html = '<table class="'+plateClass+'">';
    145     html += '<tr><td></td>';
     145    html += '<tr><td class="bg-filled-100"></td>';
    146146    for (var c = 0; c < plate.columns; c++)
    147147    {
    148       html += '<td class="columnheader">' + (c+1) + '</td>';
     148      html += '<td class="columnheader bg-filled-100">' + (c+1) + '</td>';
    149149    }
    150150    html += '</tr>';
    151151    for (var r = 0; r < plate.rows; r++)
    152152    {
    153       html += '<tr><td class="rowheader">' + Plates.toAlphaCoordinate[r] + '</td>';
     153      html += '<tr><td class="rowheader bg-filled-100">' + Plates.toAlphaCoordinate[r] + '</td>';
    154154      for (var c = 0; c < plate.columns; c++)
    155155      {
  • trunk/www/biomaterials/wizards/place_on_plate.jsp

    r6396 r6611  
    143143    {
    144144      %>
     145      <div class="absolutefull bg-filled-50 bottomborder">
    145146      <div class="messagecontainer error">
    146147      No biomaterial selected. Please close this window and select one or more items that
    147148      are not already placed on a plate.
     149      </div>
    148150      </div>
    149151      <%
     
    152154    {
    153155      %>
    154       <div class="absolutefull filled" style="height: 10em;">
    155           <table style="width: 100%; background: #FFFFFF;" class="input100">
    156           <tr>
    157             <td style="width: 50%;">
    158               <table class="fullform smaller">
    159               <tr>
    160                 <th>Event name</th>
    161                 <td><input class="text required" type="text" name="name"
    162                   value="Place biomaterial on plate"
    163                   maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
    164               </tr>
    165               <tr>
    166                 <th>Event date</th>
    167                 <td>
    168                   <table>
    169                   <tr>
    170                   <td>
    171                     <input class="text" type="text" name="event_date" id="event_date" style="width: 15em;"
    172                       value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>"
    173                       maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
    174                   </td>
    175                   <td>
    176                     <base:calendar textarea="event_date" title="Event date" />
    177                   </td>
    178                   </tr>
    179                   </table>
    180                 </td>
    181               </tr>
    182               <tr>
    183                 <th>Protocol</th>
    184                 <td>
    185                   <base:select
    186                     id="protocol_id"
    187                     clazz="selectionlist"
    188                     required="false"
    189                     current="<%=null%>"
    190                     recent="<%=recentProtocols%>"
    191                   />
    192                 </td>
    193               </tr>
    194               <tr>
    195                 <th>Hardware</th>
    196                 <td>
    197                   <base:select
    198                     id="hardware_id"
    199                     clazz="selectionlist"
    200                     required="false"
    201                     current="<%=null%>"
    202                     recent="<%=recentHardware%>"
    203                   />
    204                 </td>
    205               </tr>
    206               </table>
     156      <div class="absolutefull" style="height: 10em;">
     157        <div class="absolutefull" style="width: 50%; bottom: 2em;">
     158          <table class="fullform input100 smaller">
     159          <tr>
     160            <th>Event name</th>
     161            <td><input class="text required" type="text" name="name"
     162              value="Place biomaterial on plate"
     163              maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
     164          </tr>
     165          <tr>
     166            <th>Event date</th>
     167            <td>
     168              <input class="text" type="text" name="event_date" id="event_date" style="width: 15em;"
     169                value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>"
     170                maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
     171              <base:calendar textarea="event_date" title="Event date" />
    207172            </td>
    208             <td style="width: 50%;">
    209               <table style="width: 100%;">
    210               <tr>
    211                 <td><b>Description</b><br>
    212                   <textarea class="text" rows="4" name="description" id="description"
    213                   ></textarea></td>
    214                 <td style="width: 20px;">
    215                   <base:zoom textarea="description" title="Description" />
    216                 </td>
    217               </tr>
    218               </table>
     173          </tr>
     174          <tr>
     175            <th>Protocol</th>
     176            <td>
     177              <base:select
     178                id="protocol_id"
     179                clazz="selectionlist"
     180                required="false"
     181                current="<%=null%>"
     182                recent="<%=recentProtocols%>"
     183              />
    219184            </td>
     185          </tr>
     186          <tr>
     187            <th>Hardware</th>
     188            <td>
     189              <base:select
     190                id="hardware_id"
     191                clazz="selectionlist"
     192                required="false"
     193                current="<%=null%>"
     194                recent="<%=recentHardware%>"
     195              />
     196            </td>
     197          </tr>
    220198          </table>
    221           <tbl:toolbar id="toolbar.mappings" subclass="topborder bottomborder">
     199        </div>
     200        <div class="absolutefull" style="left: 50%; width: 50%;">
     201          <table style="width: 100%;">
     202          <tr>
     203            <td><b>Description</b><br>
     204              <textarea class="text" rows="4" name="description" id="description" style="width: calc(100% - 10px);"
     205              ></textarea></td>
     206            <td style="width: 20px;">
     207              <base:zoom textarea="description" title="Description" />
     208            </td>
     209          </tr>
     210          </table>
     211        </div>
     212        <div class="absolutefull" style="top: auto; height: 2em;">
     213          <tbl:toolbar id="toolbar.mappings" subclass="topborder bottomborder bg-filled-50" style="height: 100%;">
    222214            <tbl:button
    223215              id="btnSelectPlate"
     
    245237            />
    246238          </tbl:toolbar>
     239        </div>
    247240      </div>
    248241     
    249242      <div class="absolutefull bottomborder" style="top: 10em;">
    250243        <div class="absolutefull rightborder" style="width: 280px;">
    251           <div class="absolutefull filled" style="height: 2em;">
     244          <div class="absolutefull bg-filled-100" style="height: 2em;">
    252245            <div class="padded">
    253246            <b>Items to place</b> <%=commonSubtype != null ? "<span class=\"itemsubtype\">[" + HTML.encodeTags(commonSubtype.getName()) + "]</span>" : "" %>
     
    257250          <div id="itemlist" class="absolutefull biomateriallist topborder"
    258251            style="top: 2em; bottom: 2em;">
    259               <table style="width: 100%; height: 100%;">
     252              <table style="width: 100%; height: 100%; border-collapse: separate;">
    260253              <%
    261254              for (MeasuredBioMaterial bm : bioMaterial)
     
    270263                  style="height: 1.5em;" title="<%=fullLabel == label ? "" : HTML.encodeTags(fullLabel)%>"
    271264                  >
    272                   <td class="info" id="itemlist.<%=itemId%>.info"></td>
    273                   <td class="label" id="itemlist.<%=itemId%>.label"><%=HTML.encodeTags(label)%></td>
     265                  <td class="info bg-filled-100" id="itemlist.<%=itemId%>.info"></td>
     266                  <td class="label interactable" id="itemlist.<%=itemId%>.label"><%=HTML.encodeTags(label)%></td>
    274267                </tr>
    275268                <%
     
    282275              </table>
    283276          </div>
    284           <div class="absolutefull filled topborder" style="top: auto; height: 2em;">
     277          <div class="absolutefull bg-filled-100 topborder" style="top: auto; height: 2em;">
    285278              <input type="checkbox" name="autoSelectUnmappedItem" id="autoSelectUnmappedItem"
    286279                <%=autoSelectUnmappedItem ? "checked" : ""%> value="1"><label for="autoSelectUnmappedItem">Auto-select next unmapped item</label>
     
    288281        </div>
    289282        <div class="absolutefull" style="left: 280px;">
    290           <div class="absolutefull filled" style="height: 2em;">
     283          <div class="absolutefull bg-filled-100" style="height: 2em;">
    291284            <div class="padded">
    292285            <b>Destination plate:</b> <span id="plate.name"><i>no plate selected</i></span>
  • trunk/www/common/datafiles/datafiles.js

    r6400 r6611  
    9292     
    9393    recentDiv.style.top = (pos.bottom-2) + 'px';
    94     recentDiv.style.left = (pos.left) + 'px';
    95     recentDiv.style.width = (pos.width-2) + 'px';
     94    recentDiv.style.left = (pos.left+2) + 'px';
     95    recentDiv.style.width = (pos.width-4) + 'px';
    9696
    9797    visibleRecentFilesDiv = recentDiv;
  • trunk/www/common/datafiles/select_files.jsp

    r6256 r6611  
    158158  .filelist
    159159  {
    160     margin-top: 1px;
    161   }
    162 
    163   .files
    164   {
    165     border: 1px solid #A0A0A0;
    166     border-right: 0px;
    167     border-radius: 4px 0px 0px 4px;
    168     padding: 1px 2px 1px 2px;
     160    margin: 1px;
     161    border-width: 1px;
     162    border-radius: 4px;
     163  }
     164
     165  .filelist:hover
     166  {
     167    margin: 0;
     168    border-width: 2px;
    169169  }
    170170 
     
    179179    text-align: center;
    180180    white-space: nowrap;
    181     background-color: #E8E8E8;
    182     border: 1px solid #A0A0A0;
    183     border-radius: 0px 4px 4px 0px;
    184181  }
    185182 
     
    187184  {
    188185    vertical-align: middle;
    189   }
    190  
    191   .filelist:hover .files
    192   {
    193     border-color: #2288AA;
    194   }
    195  
    196    .filelist:hover .fileaction, .filelist.required .fileaction
    197    {
    198     border-color: #2288AA;
    199     border-left-color: #A0A0A0;
    200    }
    201  
    202   .filelist.required .files
    203   {
    204     background: #D0F0FF;
    205     border-color: #2288AA;
    206186  }
    207187 
     
    210190    position: absolute;
    211191    top: 0px;
    212     left: 0px;
    213     border: 1px solid #A0A0A0;
    214     border-radius: 0px 0px 4px 4px;
    215     background-color: #F0F0F0;
     192    left: 10px;
     193    border-width: 1px;
     194    border-top-width: 0;
     195    background-color: #FFFFFF;
     196    color: #000000;
     197    box-shadow: 3px 3px 5px #CCCCCC;
    216198    text-align: left;
    217199  }
     
    219201  {
    220202    padding: 2px;
    221     border-top: 1px dotted #A0A0A0;
    222   }
    223  
    224   .recentfiles .recentfile:first-child
    225   {
    226     border-top: 1px solid transparent;
    227203  }
    228204 
     
    230206  {
    231207    cursor: pointer;
    232     padding: 1px 0px 0px 0px;
    233     border: 2px solid #2288AA;
     208    padding: 0;
     209    border-width: 2px;
    234210    border-radius: 4px;
    235211  }
     212 
    236213  </style>
    237214  </base:head>
    238215  <base:body>
    239216    <form name="datafiles">
    240     <div class="absolutefull filled">
     217    <div class="absolutefull">
    241218    <%
    242219    boolean hasNonPlatformFiles = false;     
     
    254231      }
    255232      %>
     233      <div class="absolutefull bg-filled-50">
    256234      <div class="messagecontainer error">
    257235        The <%=what%> doesn't define any file types for
    258236        <%=itemType.toString() %> items.
    259237      </div>
     238      </div>
    260239      <%
    261240    }
     
    263242    {
    264243      %>
     244      <div class="absolutefull bg-filled-50">
    265245      <div class="messagecontainer error">Denied</div>
     246      </div>
    266247      <%
    267248    }
     
    317298              <base:icon image="warning.png"
    318299                tooltip="This file is not part of the platform/subtype"
    319                 style="float: left; margin-right: 2px; vertical-align: top;"
     300                style="float: left; margin-right: 4px; vertical-align: top;"
    320301                />
    321302              <%
     
    325306          </th>
    326307          <td>
    327             <div class="filelist <%=isRequired ? "required" : "" %>" id="container.<%=dftId%>">
     308            <div class="filelist input interactable <%=isRequired ? "required" : "" %>" id="container.<%=dftId%>">
    328309            <table style="width: 100%;">
    329310            <tr><td id="filelist.<%=dftId%>" class="files">
     
    372353
    373354            <div id="recentfiles.<%=dftId%>" style="display: none;" class="recentfiles">
    374               <div class="recentfile"
     355              <div class="recentfile interactable"
    375356                data-file-id="0"
    376357                id="recentfile.<%=dftId%>.0"
     
    380361              {
    381362                %>
    382                 <div class="recentfile"
     363                <div class="recentfile interactable"
    383364                  data-file-id="<%=recent.getId()%>"
    384365                  id="recentfile.<%=dftId%>.<%=recent.getId()%>"
     
    410391      <tr class="dynamic">
    411392        <th></th>
    412         <td></td>
    413       </tr>
    414       <%
    415       if (hasNonPlatformFiles)
    416       {
    417         if (platform != null)
    418         {
     393        <td style="vertical-align: bottom;">
     394          <%
     395          if (hasNonPlatformFiles)
     396          {
     397            if (platform != null)
     398            {
     399              %>
     400              <div class="legend">
     401              <base:icon image="warning.png" />
     402              = the file type is not part of the <i><%=HTML.encodeTags(platform.getName())%></i> platform
     403              </div>
     404              <%
     405            }
     406            else if (itemSubtype != null)
     407            {
     408              %>
     409              <div class="legend" style="padding: 3px;">
     410              <base:icon image="warning.png" />
     411              = the file type is not part of the <i><%=HTML.encodeTags(itemSubtype.getName())%></i> subtype
     412              </div>
     413              <%
     414            }
     415          }
    419416          %>
    420           <div class="legend">
    421           <base:icon image="warning.png" />
    422           = the file type is not part of the <i><%=HTML.encodeTags(platform.getName())%></i> platform
    423           </div>
    424417          <%
    425418        }
    426         else if (itemSubtype != null)
    427         {
    428           %>
    429           <div class="legend">
    430           <base:icon image="warning.png" />
    431           = the file type is not part of the <i><%=HTML.encodeTags(itemSubtype.getName())%></i> subtype
    432           </div>
    433           <%
    434         }
    435       }
    436       %>
     419        %>
     420        </td>
     421      </tr>
    437422      </table>
    438       <%
    439     }
    440     %>
    441423    </div>
    442424    </form>
  • trunk/www/common/datafiles/wait.jsp

    r5915 r6611  
    2828<base:head />
    2929<base:body>
    30   <div class="filled absolutefull">
     30  <div class="bg-filled-50 absolutefull">
    3131    <table style="margin: auto; height: 100%;"><tr><td>
    3232    <b>Please wait. The data files are loading...</b>
  • trunk/www/include/styles/main.css

    r6610 r6611  
    481481
    482482/* Regular text-field controls + selection list */
    483 input, textarea, select
     483input, textarea, select, .input
    484484{
    485485  /* content-box, otherwise the content will jump around when we modify border */
     
    500500
    501501/* Make a bigger blue-ish border when the field is active */
    502 input:focus, textarea:focus, select:focus
     502input:focus, textarea:focus, select:focus, .input:focus
    503503{
    504504  margin: 0;
     
    538538
    539539/* Disabled input fields are grayed out and inactive */
    540 input:disabled, textarea:disabled, select:disabled, input.disabled
     540input:disabled, textarea:disabled, select:disabled, input.disabled, .input.disabled
    541541{
    542542  border-width: 1px;
     
    570570
    571571/* required fields have a blue-ish background and solid border */
    572 input.required, select.required, textarea.required 
     572input.required, select.required, textarea.required, .input.required
    573573{
    574574  background-color: #D0F0FF;
  • trunk/www/include/styles/plate.css

    r6178 r6611  
    2525  @author Nicklas
    2626*/
    27 /* Main plate has light gray background with a border */
    2827.plate
    2928{
    30   background: #E8E8E8;
    31   border: 1px solid #A0A0A0;
     29  background-color: #FFFFFF;
     30  color: #000000;
     31  border-width: 1px;
     32  border-collapse: separate;
    3233}
    3334
     
    3637{
    3738  font-weight: bold;
    38   border-bottom: 1px solid #A0A0A0;
     39  border-bottom-width: 1px;
    3940  padding: 1px 1px 1px 8px;
    4041  height: 1.5em;
     
    197198  overflow: auto;
    198199  background: #FFFFFF;
     200  color: #000000;
    199201}
    200202
     
    207209{
    208210  cursor: pointer;
    209   border: 2px dashed #2288AA;
     211  border-width: 2px;
     212  border-style: dashed;
    210213  border-radius: 4px;
    211214  padding: 0px;
     
    214217.biomateriallist .item:hover .label
    215218{
    216   border-style: solid !important;
     219  border-style: solid;
    217220}
    218221
     
    231234  padding-left: 3px;
    232235  padding-right: 3px;
    233   border-right: 1px solid #A0A0A0;
    234   background: #E8E8E8;
     236  border-right-width: 1px;
    235237  text-align: center;
    236238  vertical-align: middle;
Note: See TracChangeset for help on using the changeset viewer.