Changeset 5569


Ignore:
Timestamp:
08/19/14 08:53:01 (10 years ago)
Author:
Twan Goosen
Message:

Styling of collections table: icons, sorting
Refs #594

Location:
VirtualCollectionRegistry/trunk/VirtualCollectionRegistry
Files:
11 added
7 deleted
4 edited
1 moved

Legend:

Unmodified
Added
Removed

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/java/eu/clarin/cmdi/virtualcollectionregistry/gui/table/VirtualCollectionTable.html

    r981 r5569  
    99    <div wicket:id="filterForm"></div>
    1010  </div>
    11   <table wicket:id="table" class="collectionsTable"></table>
     11  <table wicket:id="table" class="collectionsTable display"></table>
    1212</wicket:panel>
    1313</body>

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/webapp/css/table.scss

    r5562 r5569  
    1515along with this program.  If not, see <http://www.gnu.org/licenses/>.
    1616*/
     17@import 'globals';
    1718
    18 table td.action {
    19     width: 8em;
    20     text-align: right;
     19table {
     20    td.action {
     21        width: 8em;
     22        text-align: right;
     23    }
     24
     25    td.type {
     26        width: 60px;
     27    }
    2128}
    2229
    23 table.resourcesTable td.move {
    24     width: 5em;
     30table.moving {
     31
     32    tr:hover td {
     33        border-top: 6px solid #ccc;
     34    }
     35
     36    tr.moving:hover td {
     37        border-top: 0px;
     38    }
    2539}
    2640
    27 table.resourcesTable tr.moving {
    28     background: #ccc;
    29 }
     41table.resourcesTable {
    3042
    31 table.moving tr:hover td {
    32     border-top: 6px solid #ccc;
    33 }
     43    td.move {
     44        width: 5em;
     45    }
    3446
    35 table.moving tr.moving:hover td {
    36     border-top: 0px;
    37 }
     47    tr.moving {
     48        background: #ccc;
    3849
    39 table.resourcesTable tr.moving td, table.resourcesTable tr.moving td a {
    40     color: #333;
    41 }
     50        td, td a {
     51            color: #333;
     52        }
     53    }
    4254
    43 /*
    44 table td.norecords-td {
    45     text-align: center;
    46     color: inherit;
    47     background-color: #FFFFFF;
    48 }
     55} //table.resourcesTable
    4956
    50 table thead tr.navigation {
    51     border-bottom: 1px dotted #BBBBBB;
    52 }
     57table.creatorsTable {
    5358
    54 table tr.navigation div {
    55     clear: none !important;
    56 }
    57 */
     59    width: 805px;
    5860
    59 table.creatorsTable,
    60 table.resourcesTable {
    61     width: 805px;
    62 }
     61    td {
     62        width: 252px;
     63        overflow: hidden;
     64    }
     65} //table.resourcesTable
    6366
    64 table.creatorsTable td {
    65     width: 252px;
    66     overflow: hidden;
    67 }
     67table.collectionsTable {
    6868
    69 table td.type {
    70     width: 60px;
    71 }
     69    width: 100%;
     70    table-layout: fixed;
     71
     72    th, td {
     73        vertical-align: top;
     74        padding-left: .5em;
     75    }
     76
     77    td.name div.name {
     78        padding-left: 16px;
     79        /* icon from GLYPHICONS.com */
     80        background-image: url('../icons/glyphicons_367_expand.png');
     81        background-size: $iconsize;
     82        background-repeat: no-repeat;
     83        background-position: center left;
     84        cursor: pointer;
     85    }
     86
     87    td.name div.name:hover {
     88        color: #AE0000;
     89        background-color: inherit;
     90    }
     91
     92    td.name div.name.detailsShown {
     93        padding-left: 16px;
     94        /* icon from GLYPHICONS.com */
     95        background-image: url('../icons/glyphicons_369_collapse_top.png');
     96        background-size: $iconsize;
     97        background-repeat: no-repeat;
     98        background-position: center left;
     99    }
     100
     101    td.name div.name.noDetails{
     102        background-image: none;
     103    }
     104
     105    td.name div.details {
     106        margin-left: 16px;
     107        margin-right: -248px;
     108        width: 964px;
     109    }
     110
     111    td.name div.desc {
     112        text-align: justify;
     113        padding: 4px 0 0 0;
     114    }
     115
     116    td.name div.actions {
     117        margin: 4px 0 2px 0;
     118    }
     119
     120    th.state, td.state {
     121        width: 5em;
     122    }
     123
     124    th.type, td.type {
     125        width: 7em;
     126    }
     127
     128    th.created, td.created {
     129        width: 7em;
     130    }
     131
     132    td.action, th.action {
     133        width: 2em;
     134    }
     135
     136    &.public td.action span,
     137    &.private td.action div.popupTrigger span {
     138        display: none;
     139    }
     140
     141    &.public td.action a, &.private td.action div.popupTrigger {
     142        display: block;
     143        width: $iconsize;
     144        height: $iconsize;
     145        background: transparent no-repeat center center;
     146        background-size: $iconsize;
     147        margin-right: 2px;
     148        margin-top: 3px;
     149    }
     150   
     151    &.public td.action a {
     152        /* icon from GLYPHICONS.com */
     153        background-image: url('../icons/glyphicons_236_zoom_in.png');
     154    }
     155
     156    &.private td.action div.popupTrigger {
     157        /* icon from GLYPHICONS.com */
     158        background-image: url('../icons/glyphicons_136_cogwheel.png');
     159    }
     160} //table.collectionsTable
    72161
    73162/* ORDERING */
    74163
    75 tr.headers a.wicket_orderNone {
    76     padding-right: 7px;
    77     background: transparent url('../icons/order_none.png') no-repeat center right;
     164tr.headers {
     165
     166    a.wicket_orderNone, a.wicket_orderUp, a.wicket_orderDown {       
     167        padding-right: 18px;
     168        background-color: transparent;
     169        background-repeat: no-repeat;
     170        background-position: center right;
     171    }
     172
     173    a.wicket_orderNone {
     174        background-image: url('../icons/sort_both.png');
     175    }
     176
     177    a.wicket_orderUp {
     178        background-image: url('../icons/sort_asc.png');
     179    }
     180
     181    a.wicket_orderDown {
     182        background-image: url('../icons/sort_desc.png');
     183    }
    78184}
    79 
    80 tr.headers a.wicket_orderUp {
    81     padding-right: 7px;
    82     background: transparent url('../icons/order_up.png') no-repeat center right;
    83 }
    84 
    85 tr.headers a.wicket_orderDown {
    86     padding-right: 7px;
    87     background: transparent url('../icons/order_down.png') no-repeat center right;
    88 }
    89 
    90 /* COLLECTIONS TABLE */
    91 
    92 table.collectionsTable {
    93     width: 100%;
    94     table-layout: fixed;
    95 }
    96 
    97 table.collectionsTable th,
    98 table.collectionsTable td {
    99     vertical-align: top;
    100 }
    101 
    102 table.collectionsTable td.name div.name {
    103     padding-left: 16px;
    104     background-image: url('../icons/bullet_arrow_down.png');
    105     background-repeat: no-repeat;
    106     background-position: center left;
    107     cursor: pointer;
    108 }
    109 
    110 table.collectionsTable td.name div.name:hover {
    111     color: #AE0000;
    112     background-color: inherit;
    113 }
    114 
    115 table.collectionsTable td.name div.name.detailsShown {
    116     padding-left: 16px;
    117     background-image: url('../icons/bullet_arrow_up.png');
    118     background-repeat: no-repeat;
    119     background-position: center left;
    120 }
    121 
    122 table.collectionsTable td.name div.name.noDetails{
    123     background-image: none;
    124 }
    125 
    126 table.collectionsTable td.name div.details {
    127     margin-left: 16px;
    128     margin-right: -248px;
    129     width: 964px;
    130 }
    131 
    132 table.collectionsTable td.name div.desc {
    133     text-align: justify;
    134     padding: 4px 0 0 0;
    135 }
    136 
    137 table.collectionsTable td.name div.actions {
    138     margin: 4px 0 2px 0;
    139 }
    140 
    141 table.collectionsTable th.state,
    142 table.collectionsTable td.state {
    143     width: 5em;
    144 }
    145 
    146 table.collectionsTable th.type,
    147 table.collectionsTable td.type {
    148     width: 7em;
    149 }
    150 
    151 table.collectionsTable th.created,
    152 table.collectionsTable td.created {
    153     width: 7em;
    154 }
    155 
    156 table.collectionsTable td.action,
    157 table.collectionsTable th.action {
    158     width: 2em;
    159 }
    160 
    161 table.collectionsTable.public td.action span,
    162 table.collectionsTable.private td.action div.popupTrigger span {
    163     display: none;
    164 }
    165 
    166 table.collectionsTable.public td.action a {
    167     display: block;
    168     width: 12px;
    169     height: 12px;
    170     margin-right: 2px;
    171     background: transparent url('../icons/magnifier.png') no-repeat center center;
    172 }
    173 
    174 table.collectionsTable.private td.action div.popupTrigger {
    175     display: block;
    176     width: 12px;
    177     height: 12px;
    178     margin-right: 2px;
    179     background: transparent url('../icons/wrench.png') no-repeat center center;
    180 }

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/webapp/css/toggleborder.scss

    r5562 r5569  
    1616*/
    1717
     18@import 'globals';
     19
    1820div.toggleBorder {
    1921    border-top: 1px solid #000000;
    … …  
    2628    color: inherit;
    2729    background-color: #D4DEEF;
    28     background-image: url('../icons/bullet_arrow_up.png');
     30    /* icon from GLYPHICONS.com */
     31    background-image: url('../icons/glyphicons_369_collapse_top.png');
     32    background-size: $iconsize;
    2933    background-repeat: no-repeat;
    3034    background-position: center left;
    … …  
    3741
    3842div.toggleBorder div.toggleBorderHeader.collapsed {
    39     background-image: url('../icons/bullet_arrow_down.png');
     43    /* icon from GLYPHICONS.com */
     44    background-image: url('../icons/glyphicons_367_expand.png');
     45    background-size: $iconsize;
    4046    background-repeat: no-repeat;
    4147    background-position: center left;

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/webapp/css/vcr.scss

    r5562 r5569  
    11@import 'CLARIN';
     2@import 'globals';
     3
    24@import 'toggleborder';
    35@import 'table';
Note: See TracChangeset for help on using the changeset viewer.