Changeset 6615


Ignore:
Timestamp:
Nov 24, 2014, 8:10:02 AM (8 years ago)
Author:
Nicklas Nordborg
Message:

References #1890: Improve skinnability of BASE

Notification used when information is missing.

Location:
trunk/www
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/www/biomaterials/bioplates/bioplates.js

    r6400 r6615  
    178178    var contentPos = Doc.getElementPosition('main.content');
    179179    var pos = Doc.getElementPosition(wellTd);
    180     wellInfo.style.left = (pos.left + pos.width - 5 - contentPos.left) + 'px';
    181     wellInfo.style.top = (pos.top + 10-contentPos.top) + 'px';
     180    var wiPos = Doc.getElementPosition('wellInfo');
     181    wellInfo.style.left = (pos.left + pos.width - contentPos.left - 5) + 'px';
     182    wellInfo.style.top = (pos.top - contentPos.top - 10) + 'px';
    182183    Doc.show('wellInfo');
    183184
  • trunk/www/biomaterials/bioplates/view_bioplate.jsp

    r6611 r6615  
    239239        <td rowspan="12" style="width: 50%; vertical-align: top;">
    240240       
    241         <div class="postit" id="wellInfo" style="display:none; width: 20em; min-height: 3em;"></div>
    242241        <table class="plate" style="margin-top: 1em;" id="bioplate">
    243242        <%
     
    247246        WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
    248247        %>
    249         <tr><td class="bg-filled-100"></td>
     248        <tr>
     249          <td class="bg-filled-100">
     250            <div class="notify" id="wellInfo" style="display:none; width: 20em; min-height: 3em;"></div>
     251          </td>
    250252        <%
    251253        for (int c = 0; c < columns; ++c)
  • trunk/www/include/styles/main.css

    r6613 r6615  
    334334}
    335335
    336 /* A "postit" style message that is made visible when mouse is over an element */
    337 .postit
    338 {
    339   position: absolute;
    340   width: 20em;
    341   background: #F8F8E8;
    342   border: 1px solid #A0A0A0;
    343   padding: 2px;
    344   overflow: auto;
    345 }
    346336
    347337/* A notification with a small pointer to indicate an invalid form value */
     
    350340  position: absolute;
    351341  width: 20em;
    352   border: 2px solid #AA8844;
    353   background: #FFD8D8;
     342  background-color: #FFD8D8;
    354343  color: #000000;
     344  border-color: #AA8844;
     345  border-width: 2px;
    355346  font-weight: bold;
    356347  padding: 4px;
    357348  border-radius: 4px;
    358   box-shadow: 0px 0px 1px 7px #FFFFFF;
     349  box-shadow: 0px 0px 2px 5px #FFFFFF;
     350}
     351
     352/* First child div is the outermost "pointer" */
     353.notify > div:first-child
     354{
     355  border-color: inherit;
     356  border-width: 6px;
     357}
     358
     359/*
     360  Second child div is the innermost "pointer" and should use
     361  the same color as the 'notify' background
     362*/
     363.notify > div:first-child > div
     364{
     365  border-color: #FFD8D8;
     366  border-width: 6px;
    359367}
    360368
     
    366374
    367375/* The pointer is above the 'notify' message */
    368 .notify .pointer-above
     376.notify > div.pointer-above
    369377{
    370378  position: absolute; 
     
    373381  top: -8px;
    374382  left: 10px;
    375   background: none;
    376   border-left: 6px solid transparent; 
    377   border-right: 6px solid transparent; 
    378   border-bottom: 6px solid #AA8844;
    379383  border-top-width: 0;
     384  border-left-color:  transparent !important;
     385  border-right-color: transparent !important
    380386}
    381387
    382388/* Inner div is filling the pointer with the same background as the notification */
    383 .notify .pointer-above div
     389.notify > div.pointer-above > div
    384390{
    385391  position: absolute;
     
    387393  height: 0;
    388394  left: -6px;
    389   top: 2px;
    390   border-left: 6px solid transparent;
    391   border-right: 6px solid transparent;
    392   border-bottom: 6px solid #FFD8D8;
    393   border-top-width: 0;
     395  top: 3px;
     396  border-top-width: 0;
     397  border-left-color: transparent !important;
     398  border-right-color: transparent !important;
    394399}
    395400
    396401/* The pointer is below the 'notify' message */
    397 .notify .pointer-below
     402.notify > div.pointer-below
    398403{
    399404  position: absolute; 
     
    402407  bottom: -8px;
    403408  left: 10px;
    404   background: none;
    405   border-left: 6px solid transparent; 
    406   border-right: 6px solid transparent; 
    407   border-top: 6px solid #AA8844;
    408409  border-bottom-width: 0;
     410  border-left-color:  transparent !important;
     411  border-right-color: transparent !important;
    409412}
    410413
    411414/* Inner div is filling the pointer with the same background as the notification */
    412 .notify .pointer-below div
     415.notify > div.pointer-below > div
    413416{
    414417  position: absolute;
     
    416419  height: 0;
    417420  left: -6px;
    418   bottom: 2px;
    419   border-left: 6px solid transparent;
    420   border-right: 6px solid transparent;
    421   border-top: 6px solid #FFD8D8;
    422   border-bottom-width: 0;
     421  bottom: 3px;
     422  border-bottom-width: 0;
     423  border-left-color:  transparent !important;
     424  border-right-color: transparent !important;
    423425}
    424426
    425427/* The pointer is to the left the 'notify' message */
    426 .notify .pointer-left
     428.notify > div.pointer-left
    427429{
    428430  position: absolute; 
     
    431433  top: 10px;
    432434  left: -8px;
    433   background: none;
    434   border-top: 6px solid transparent; 
    435   border-bottom: 6px solid transparent; 
    436   border-right: 6px solid #AA8844;
    437435  border-left-width: 0;
     436  border-top-color:  transparent !important;
     437  border-bottom-color: transparent !important;
    438438}
    439439
    440440/* Inner div is filling the pointer with the same background as the notification */
    441 .notify .pointer-left div
     441.notify > div.pointer-left > div
    442442{
    443443  position: absolute;
     
    445445  height: 0;
    446446  top: -6px;
    447   left: 2px;
    448   border-top: 6px solid transparent;
    449   border-bottom: 6px solid transparent;
    450   border-right: 6px solid #FFD8D8;
    451   border-left-width: 0;
     447  left: 3px;
     448  border-left-width: 0;
     449  border-top-color: transparent !important;
     450  border-bottom-color: transparent !important;
    452451}
    453452
Note: See TracChangeset for help on using the changeset viewer.