Changeset 5573


Ignore:
Timestamp:
08/19/14 15:31:00 (10 years ago)
Author:
Twan Goosen
Message:

Styling of the VC details page
Refs #594

Location:
VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/java/eu/clarin/cmdi/virtualcollectionregistry/gui/pages/VirtualCollectionDetailsPage.html

    r5478 r5573  
    11<?xml version="1.0" encoding="UTF-8"?>
    22<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3                       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     3    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    44<html xmlns="http://www.w3.org/1999/xhtml"
    55      xmlns:wicket="http://wicket.apache.org/">
    6 <head />
    7 <body>
    8 <wicket:extend>
    9   <div wicket:id="generalBorder">
    10     <div class="property">
    11       <label>Name</label>
    12       <div wicket:id="name"></div>
    13     </div>
    14     <div class="property">
    15        <label>Type</label>
    16        <div wicket:id="type"></div>
    17     </div>
    18     <div class="property">
    19       <label>Creation Date</label>
    20       <div wicket:id="creationDate"></div>
    21     </div>
    22     <wicket:enclosure child="description">
    23       <div class="property">
    24         <label>Description</label>
    25         <div wicket:id="description"></div>
    26       </div>
    27     </wicket:enclosure>
    28     <wicket:enclosure child="purpose">
    29       <div class="property">
    30         <label>Purpose</label>
    31         <div wicket:id="purpose"></div>
    32       </div>
    33     </wicket:enclosure>
    34     <wicket:enclosure child="reproducibility">
    35       <div class="property">
    36         <label>Reproducibility</label>
    37         <div wicket:id="reproducibility"></div>
    38       </div>
    39     </wicket:enclosure>
    40     <wicket:enclosure child="reproducibilityNotice">
    41       <div class="property">
    42         <label>Reproducibility Notice</label>
    43         <div wicket:id="reproducibilityNotice"></div>
    44       </div>
    45     </wicket:enclosure>
    46     <wicket:enclosure child="pidLink">
    47       <div class="property">
    48         <label>Persistent identifier</label>
    49         <div>
    50             <a wicket:id="pidLink"><wicket:container wicket:id="persistentIdentifier.URI">1234/5678</wicket:container></a>
    51         </div>
    52       </div>
    53     </wicket:enclosure>     
    54     <wicket:enclosure child="keywords">
    55       <div class="property">
    56         <label>Keywords</label>
    57         <div>
    58           <ul class="keywords"><li wicket:id="keywords"><span wicket:id="keyword"></span></li></ul>
    59         </div>
    60       </div>
    61     </wicket:enclosure>
    62   </div>
     6    <head />
     7    <body>
     8        <wicket:extend>
     9            <h2 wicket:id="name">Title</h2>
     10            <div wicket:id="generalBorder">
     11                <div class="property">
     12                    <label>Name</label>
     13                    <div wicket:id="name"></div>
     14                </div>
     15                <div class="property">
     16                    <label>Type</label>
     17                    <div wicket:id="type"></div>
     18                </div>
     19                <div class="property">
     20                    <label>Creation Date</label>
     21                    <div wicket:id="creationDate"></div>
     22                </div>
     23                <wicket:enclosure child="description">
     24                    <div class="property">
     25                        <label>Description</label>
     26                        <div wicket:id="description"></div>
     27                    </div>
     28                </wicket:enclosure>
     29                <wicket:enclosure child="purpose">
     30                    <div class="property">
     31                        <label>Purpose</label>
     32                        <div wicket:id="purpose"></div>
     33                    </div>
     34                </wicket:enclosure>
     35                <wicket:enclosure child="reproducibility">
     36                    <div class="property">
     37                        <label>Reproducibility</label>
     38                        <div wicket:id="reproducibility"></div>
     39                    </div>
     40                </wicket:enclosure>
     41                <wicket:enclosure child="reproducibilityNotice">
     42                    <div class="property">
     43                        <label>Reproducibility Notice</label>
     44                        <div wicket:id="reproducibilityNotice"></div>
     45                    </div>
     46                </wicket:enclosure>
     47                <wicket:enclosure child="pidLink">
     48                    <div class="property">
     49                        <label>Persistent identifier</label>
     50                        <div>
     51                            <a wicket:id="pidLink"><wicket:container wicket:id="persistentIdentifier.URI">1234/5678</wicket:container></a>
     52                        </div>
     53                    </div>
     54                </wicket:enclosure>     
     55                <wicket:enclosure child="keywords">
     56                    <div class="property">
     57                        <label>Keywords</label>
     58                        <div>
     59                            <ul class="keywords"><li wicket:id="keywords"><span wicket:id="keyword"></span></li></ul>
     60                        </div>
     61                    </div>
     62                </wicket:enclosure>
     63            </div>
    6364
    64   <div wicket:id="creatorsBorder">
    65     <ul class="creators">
    66       <li wicket:id="creators">
    67         <div class="property">
    68           <label>Person</label>
    69           <div wicket:id="person"></div>
    70         </div>
    71         <wicket:enclosure child="address">
    72           <div class="property">
    73             <label>Address</label>
    74             <div wicket:id="address"></div>
    75           </div>
    76         </wicket:enclosure>
    77         <wicket:enclosure child="email">
    78           <div class="property">
    79             <label>Email</label>
    80             <div wicket:id="email"></div>
    81           </div>
    82         </wicket:enclosure>
    83         <wicket:enclosure child="organisation">
    84           <div class="property">
    85             <label>Organisation</label>
    86             <div wicket:id="organisation"></div>
    87           </div>
    88         </wicket:enclosure>
    89         <wicket:enclosure child="telephone">
    90           <div class="property">
    91             <label>Telephone</label>
    92             <div wicket:id="telephone"></div>
    93           </div>
    94         </wicket:enclosure>
    95         <wicket:enclosure child="website">
    96           <div class="property">
    97             <label>Website</label>
    98             <div><a wicket:id="website"></a></div>
    99           </div>
    100         </wicket:enclosure>
    101         <wicket:enclosure child="role">
    102           <div class="property">
    103             <label>Role</label>
    104             <div wicket:id="role"></div>
    105           </div>
    106         </wicket:enclosure>
    107       </li>
    108     </ul>
    109   </div>
     65            <div wicket:id="creatorsBorder">
     66                <ul class="creators">
     67                    <li wicket:id="creators">
     68                        <div class="property">
     69                            <label>Person</label>
     70                            <div wicket:id="person"></div>
     71                        </div>
     72                        <wicket:enclosure child="address">
     73                            <div class="property">
     74                                <label>Address</label>
     75                                <div wicket:id="address"></div>
     76                            </div>
     77                        </wicket:enclosure>
     78                        <wicket:enclosure child="email">
     79                            <div class="property">
     80                                <label>Email</label>
     81                                <div wicket:id="email"></div>
     82                            </div>
     83                        </wicket:enclosure>
     84                        <wicket:enclosure child="organisation">
     85                            <div class="property">
     86                                <label>Organisation</label>
     87                                <div wicket:id="organisation"></div>
     88                            </div>
     89                        </wicket:enclosure>
     90                        <wicket:enclosure child="telephone">
     91                            <div class="property">
     92                                <label>Telephone</label>
     93                                <div wicket:id="telephone"></div>
     94                            </div>
     95                        </wicket:enclosure>
     96                        <wicket:enclosure child="website">
     97                            <div class="property">
     98                                <label>Website</label>
     99                                <div><a wicket:id="website"></a></div>
     100                            </div>
     101                        </wicket:enclosure>
     102                        <wicket:enclosure child="role">
     103                            <div class="property">
     104                                <label>Role</label>
     105                                <div wicket:id="role"></div>
     106                            </div>
     107                        </wicket:enclosure>
     108                    </li>
     109                </ul>
     110            </div>
    110111
    111   <div wicket:id="resourcesBorder">
    112     <table wicket:id="resourcesTable"></table>
    113   </div>
     112            <div wicket:id="resourcesBorder">
     113                <table wicket:id="resourcesTable" class="display resources"></table>
     114            </div>
    114115
    115   <div wicket:id="generatedByBorder">
    116     <div class="property">
    117       <label>Description</label>
    118       <div wicket:id="generatedBy.description"></div>
    119     </div>
    120     <wicket:enclosure child="generatedBy.uri">
    121       <div class="property">
    122         <label>URI</label>
    123         <div wicket:id="generatedBy.uri"></div>
    124       </div>
    125     </wicket:enclosure>
    126     <wicket:enclosure child="generatedBy.query.profile">
    127       <div class="property">
    128         <label>Profile</label>
    129         <div wicket:id="generatedBy.query.profile"></div>
    130       </div>
    131     </wicket:enclosure>
    132     <wicket:enclosure child="generatedBy.query.value">
    133       <div class="property">
    134         <label>Value</label>
    135         <div wicket:id="generatedBy.query.value"></div>
    136       </div>
    137     </wicket:enclosure>
    138   </div>
     116            <div wicket:id="generatedByBorder">
     117                <div class="property">
     118                    <label>Description</label>
     119                    <div wicket:id="generatedBy.description"></div>
     120                </div>
     121                <wicket:enclosure child="generatedBy.uri">
     122                    <div class="property">
     123                        <label>URI</label>
     124                        <div wicket:id="generatedBy.uri"></div>
     125                    </div>
     126                </wicket:enclosure>
     127                <wicket:enclosure child="generatedBy.query.profile">
     128                    <div class="property">
     129                        <label>Profile</label>
     130                        <div wicket:id="generatedBy.query.profile"></div>
     131                    </div>
     132                </wicket:enclosure>
     133                <wicket:enclosure child="generatedBy.query.value">
     134                    <div class="property">
     135                        <label>Value</label>
     136                        <div wicket:id="generatedBy.query.value"></div>
     137                    </div>
     138                </wicket:enclosure>
     139            </div>
    139140
    140   <div class="collectionDetails buttons">
    141     <a wicket:id="back" href="#">[return to previous page]</a>
    142   </div>
    143 </wicket:extend>
    144 </body>
     141            <div class="collectionDetails buttons">
     142                <a wicket:id="back" href="#">[return to previous page]</a>
     143            </div>
     144        </wicket:extend>
     145    </body>
    145146</html>

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/java/eu/clarin/cmdi/virtualcollectionregistry/gui/pages/VirtualCollectionDetailsPage.java

    r5504 r5573  
    161161        add(backLink);
    162162
     163        add(new Label("name"));
     164       
    163165        addGeneralProperties(model);
    164166        addCreators();
    … …  
    274276            }
    275277
     278            @Override
     279            public String getCssClass() {
     280                return "reference";
     281            }
     282
    276283        };
    277284

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

    r5572 r5573  
    1616*/
    1717
     18div.collectionDetails {
    1819
     20    div.property {
     21        clear: both;
     22        font-size: 100%;
     23        border: none;
     24        padding: 0 10px 0 10px;
     25        margin: 0 0 4px 0;
    1926
    20 div.collectionDetails div.property {
    21     clear: both;
    22     font-size: 100%;
    23     border: none;
    24     padding: 0 10px 0 10px;
    25     margin: 0 0 4px 0;
    26 }
     27        label, div {
     28            line-height: 1.5em;
     29        }
    2730
    28 div.collectionDetails div label {
    29     display: block;
    30     float: left;
    31     width: 140px;
    32     padding: 0px 2px;
    33     margin: 0;
    34     text-align: right;
    35     font-weight: normal;
    36 }
     31        label {
     32            display: block;
     33            float: left;
     34            width: 140px;
     35            padding: 0px 2px;
     36            margin: 0;
     37            text-align: right;
     38            font-weight: normal;
    3739
    38 div.collectionDetails div label:after {
    39     content: ':';
    40 }
     40            &:after {
     41                content: ':';
     42            }
     43        }
    4144
    42 div.collectionDetails div div {
    43     display: block;
    44     clear: none;
    45     padding: 0px 2px;
    46     margin-left: 144px;
    47 }
     45        div {
     46            display: block;
     47            clear: none;
     48            padding: 0px 2px;
     49            margin-left: 144px;
     50        }
    4851
    49 div.collectionDetails ul.keywords {
    50     margin: 0 0 0 16px;
    51     padding: 0;
    52     list-style: square;
    53 }
     52    } //div.collectionDetails div.property
    5453
    55 div.collectionDetails ul.creators {
    56     margin: 0;
    57     padding: 0;
    58     list-style: none;
    59 }
     54    ul {
    6055
    61 div.collectionDetails ul.creators li {
    62     border-top: 1px dotted #000000;
    63     margin-top: 4px;
    64     padding-top: 4px;
    65 }
     56        &.keywords {
     57            margin: 0 0 0 16px;
     58            padding: 0;
     59            list-style: square;
     60        }
    6661
    67 div.collectionDetails ul.creators li.first {
    68     border-top: none;
    69     margin-top: 0;
    70     padding-top: 0;
    71 }
     62        &.creators {
     63            margin: 0;
     64            padding: 0;
     65            list-style: none;
    7266
    73 div.collectionDetails.resources {
    74     padding: 0 !important;
    75 }
     67            li {
     68                border-top: 1px dotted #000000;
     69                margin-top: 4px;
     70                padding-top: 4px;
     71            }
    7672
    77 div.collectionDetails.resources table {
    78     width: 100%;
    79 }
     73            li.first {
     74                border-top: none;
     75                margin-top: 0;
     76                padding-top: 0;
     77            }
     78        }
     79    } //div.collectionDetails ul
    8080
    81 div.collectionDetails.buttons {
    82     margin: 10px 0 10px 0;
    83     text-align: center;
    84 }
     81    &.resources {
     82        padding-left: 1em !important;
     83
     84        table {
     85            width: 100%;
     86            table-layout: fixed;
     87
     88            td, th {
     89                padding-left: .5em;
     90                width: auto;
     91
     92                &.reference {
     93                    width: auto;
     94                }
     95
     96                &.type {
     97                    width: 9em;
     98                }
     99            }
     100        }
     101
     102    } //div.collectionDetails.resources
     103
     104    &.buttons {
     105        margin: 10px 0 10px 0;
     106        text-align: center;
     107    } //div.collectionDetails.buttons
     108
     109} //div.collectionDetails

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

    r5572 r5573  
    2323
    2424    td.type {
    25         width: 60px;
     25        width: 5em;
    2626    }
    2727}
    … …  
    6262        overflow: hidden;
    6363    }
    64 } //table.resourcesTable
     64} //table.creatorsTable
    6565
    6666table.collectionsTable {
    … …  
    7373        vertical-align: top;
    7474        padding-left: .5em;
     75
     76        &.state {
     77            width: 5em;
     78        }
     79
     80        &.type {
     81            width: 7em;
     82        }
     83
     84        &.created {
     85            width: 7em;
     86        }
     87
     88        &.action {
     89            width: 2em;
     90        }
    7591    }
    7692
    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     }
     93    td.name {
    8694
    87     td.name div.name:hover {
    88         color: #AE0000;
    89         background-color: inherit;
    90     }
     95        width: auto;
     96       
     97        div.name {
     98            padding-left: 16px;
     99            /* icon from GLYPHICONS.com */
     100            background-image: url('../icons/glyphicons_367_expand.png');
     101            background-size: $iconsize;
     102            background-repeat: no-repeat;
     103            background-position: center left;
     104            cursor: pointer;
    91105
    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     }
    100106
    101     td.name div.name.noDetails{
    102         background-image: none;
    103     }
    104107
    105     td.name div.details {
    106         margin-left: 16px;
    107         margin-right: -248px;
    108         width: 964px;
    109     }
     108            &:hover {
     109                color: #AE0000;
     110                background-color: inherit;
     111            }
    110112
    111     td.name div.desc {
    112         text-align: justify;
    113         padding: 4px 0 0 0;
    114     }
     113            &.detailsShown {
     114                padding-left: 16px;
     115                /* icon from GLYPHICONS.com */
     116                background-image: url('../icons/glyphicons_369_collapse_top.png');
     117                background-size: $iconsize;
     118                background-repeat: no-repeat;
     119                background-position: center left;
     120            }
    115121
    116     td.name div.actions {
    117         margin: 4px 0 2px 0;
    118     }
     122            &.noDetails{
     123                background-image: none;
     124            }
    119125
    120     th.state, td.state {
    121         width: 5em;
    122     }
     126        }
    123127
    124     th.type, td.type {
    125         width: 7em;
    126     }
     128        div.details {
     129            margin-left: 16px;
     130            margin-right: -248px;
     131            width: 964px;
     132        }
    127133
    128     th.created, td.created {
    129         width: 7em;
    130     }
     134        div.desc {
     135            text-align: justify;
     136            padding: 4px 0 0 0;
     137        }
    131138
    132     td.action, th.action {
    133         width: 2em;
    134     }
     139        div.actions {
     140            margin: 4px 0 2px 0;
     141        }
     142    } //td.name
     143
    135144
    136145    &.public td.action span,
Note: See TracChangeset for help on using the changeset viewer.