Changeset 4393


Ignore:
Timestamp:
01/29/14 16:02:05 (10 years ago)
Author:
twagoo
Message:

Separated and hid technical details for record in mockup

Location:
vlo/branches/vlo-3.0/vlo-web-app/src/main/html
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/html/js/vlo-record.js

    r4347 r4393  
    1717
    1818$(document).ready(function() {
    19     $("#recordcmdi article").hide();
    20     $("a#recordcmditoggle").click(function(event) {
     19    $("#recordtechnicaldetails").hide();
     20    $("#recordtechnicaldetailstoggle a").click(function(event){
    2121        event.preventDefault();
    22         $("#recordcmdi article").toggle();
     22        $("#recordtechnicaldetails").toggle();
    2323    });
    2424});

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/html/record1.html

    r4392 r4393  
    113113                <h1 id="recordtitle">&quot;Chinese Democratie en de Transformatie&quot;</h1>
    114114                <div id="recorddetails">
    115                     <table>
    116                         <thead>
    117                             <tr class="headers">
    118                                 <th class="attribute"><span>Field</span></th>
    119                                 <th class="attributeValue"><span>Value</span></th>
    120                             </tr>
    121                         </thead>
    122 
     115                    <table class="recorddetailstable">
    123116                        <tbody class="attributesTbody">
    124117                            <tr>
    125118                                <td class="attribute">
    126                                     <div>name</div>
     119                                    <div>Name</div>
    127120                                </td><td class="attributeValue">
    128121                                    <div>&quot;Chinese Democratie en de Transformatie&quot;</div>
    … …  
    130123                            </tr><tr>
    131124                                <td class="attribute">
    132                                     <div>description</div>
     125                                    <div>Description</div>
    133126                                </td><td class="attributeValue">
    134127                                    <div>In China (and specifically in Beijing) of the late seventies, the call for a democracy movement was growing ever stronger, before finally being silenced by the new regime under Deng Xiaoping. This paper exmaines both the historical sources and the eventual outcome of this movement during the anxious years of &#039;78-&#039;79.</div>
    … …  
    136129                            </tr><tr>
    137130                                <td class="attribute">
    138                                     <div>id</div>
    139                                 </td><td class="attributeValue">
    140                                     <div>oai:dspace.library.uu.nl:1874/235456</div>
    141                                 </td>
    142                             </tr><tr>
    143                                 <td class="attribute">
    144                                     <div>collection</div>
     131                                    <div>Collection</div>
    145132                                </td><td class="attributeValue">
    146133                                    <div>UBU Clarin Set</div>
    … …  
    148135                            </tr><tr>
    149136                                <td class="attribute">
    150                                     <div>dataProvider</div>
    151                                 </td><td class="attributeValue">
    152                                     <div>CMDI Providers</div>
    153                                 </td>
    154                             </tr><tr>
    155                                 <td class="attribute">
    156                                     <div>genre</div>
     137                                    <div>Genre</div>
    157138                                </td><td class="attributeValue">
    158139                                    <div>info:eu-repo/semantics/bachelorthesis</div>
    … …  
    160141                            </tr><tr>
    161142                                <td class="attribute">
    162                                     <div>languages</div>
     143                                    <div>Languages</div>
    163144                                </td><td class="attributeValue">
    164145                                    <div><a href="http://infra.clarin.eu/service/language/info.php?code=nld">Dutch</a></div>
    … …  
    166147                            </tr><tr>
    167148                                <td class="attribute">
    168                                     <div>metadataSource</div>
    169                                 </td><td class="attributeValue">
    170                                     <div><a href="http://catalog.clarin.eu/oai-harvester/cmdi-providers/harvested/results/cmdi/Universiteit_Utrecht/oai_dspace_library_uu_nl_1874_235456.xml">http://catalog.clarin.eu/oai-harvester/cmdi-providers/harvested/results/cmdi/Universiteit_Utrecht/oai_dspace_library_uu_nl_1874_235456.xml</a></div>
    171                                 </td>
    172                             </tr><tr>
    173                                 <td class="attribute">
    174                                     <div>nationalProject</div>
     149                                    <div>National project</div>
    175150                                </td><td class="attributeValue">
    176151                                    <div>CLARIN-NL</div>
    … …  
    178153                            </tr><tr>
    179154                                <td class="attribute">
    180                                     <div>resourceClass</div>
     155                                    <div>Resource class</div>
    181156                                </td><td class="attributeValue">
    182157                                    <div>text</div>
    … …  
    200175                </div>
    201176
    202                 <div id="recordcmdi">
    203                     <h2>CMDI Metadata</h2>
    204                     <p><a href="#" id="recordcmditoggle">View/Hide CMDI metadata</a></p>
    205                     <article xmlns:cmd="http://www.clarin.eu/cmd/" xmlns:fn="http://www.w3.org/2005/xpath-functions" style="background-color:#EEEEEE">
    206                         <div class="endgame">
     177                <p id="recordtechnicaldetailstoggle"><a href="#" >Show technical details</a></p>
     178                <div id="recordtechnicaldetails">
     179                    <h2>Additional attributes</h2>
     180
     181                    <div id="recordtechnicalattributes">
     182                        <table class="recorddetailstable">
     183                            <tbody>
     184                                <tr>
     185                                    <td class="attribute">
     186                                        <div>ID</div>
     187                                    </td><td class="attributeValue">
     188                                        <div>oai:dspace.library.uu.nl:1874/235456</div>
     189                                    </td>
     190                                </tr><tr>
     191                                    <td class="attribute">
     192                                        <div>Data provider</div>
     193                                    </td><td class="attributeValue">
     194                                        <div>CMDI Providers</div>
     195                                    </td>
     196                                </tr><tr>
     197                                    <td class="attribute">
     198                                        <div>Metadata source</div>
     199                                    </td><td class="attributeValue">
     200                                        <div><a href="http://catalog.clarin.eu/oai-harvester/cmdi-providers/harvested/results/cmdi/Universiteit_Utrecht/oai_dspace_library_uu_nl_1874_235456.xml">http://catalog.clarin.eu/oai-harvester/cmdi-providers/harvested/results/cmdi/Universiteit_Utrecht/oai_dspace_library_uu_nl_1874_235456.xml</a></div>
     201                                    </td>
     202                                </tr>
     203                            </tbody>
     204                        </table>
     205                    </div>
     206
     207                    <div id="recordcmdi">
     208                        <h2>CMDI Metadata</h2>
     209                        <!--<p><a href="#" id="recordcmditoggle">View/Hide CMDI metadata</a></p>-->
     210                        <article xmlns:cmd="http://www.clarin.eu/cmd/" xmlns:fn="http://www.w3.org/2005/xpath-functions" style="background-color:#EEEEEE">
     211                            <div class="endgame">
     212                                <p>
     213                                    <h1>Resources</h1>
     214                                    <table>
     215                                        <caption>Resources</caption>
     216                                        <thead>
     217                                            <tr>
     218                                                <th class="attribute">Reference to resource</th>
     219                                                <th class="attribute">Resource description</th>
     220                                                <th class="attribute">Resource MIME type</th>
     221                                                <th class="attribute">Resource Proxy ID</th>
     222                                            </tr>
     223                                        </thead>
     224                                        <tbody class="attributesTbody">
     225                                            <tr>
     226                                                <td class="attributeValue"><a href="http://dspace.library.uu.nl/handle/1874/205294">http://dspace.library.uu.nl/handle/1874/205294</a></td>
     227                                                <td class="attributeValue">LandingPage</td>
     228                                                <td class="attributeValue">text/html</td>
     229                                                <td class="attributeValue">h.1874.205294</td>
     230                                            </tr>
     231                                            <tr>
     232                                                <td class="attributeValue"><a href="http://dspace.library.uu.nl/bitstream/1874/205294/1/Masterthesis+Carolyn+van+de+Wall.docx">http://dspace.library.uu.nl/bitstream/1874/205294/1/Masterthesis+Carolyn+van+de+Wall.docx</a></td>
     233                                                <td class="attributeValue">Resource</td>
     234                                                <td class="attributeValue">application/octet-stream</td>
     235                                                <td class="attributeValue">h.1874.205294.1</td>
     236                                            </tr>
     237                                        </tbody>
     238                                    </table>
     239                                </p>
     240                            </div>
    207241                            <p>
    208                                 <h1>Resources</h1>
    209                                 <table>
    210                                     <caption>Resources</caption>
    211                                     <thead>
    212                                         <tr>
    213                                             <th class="attribute">Reference to resource</th>
    214                                             <th class="attribute">Resource description</th>
    215                                             <th class="attribute">Resource MIME type</th>
    216                                             <th class="attribute">Resource Proxy ID</th>
    217                                         </tr>
    218                                     </thead>
    219                                     <tbody class="attributesTbody">
    220                                         <tr>
    221                                             <td class="attributeValue"><a href="http://dspace.library.uu.nl/handle/1874/205294">http://dspace.library.uu.nl/handle/1874/205294</a></td>
    222                                             <td class="attributeValue">LandingPage</td>
    223                                             <td class="attributeValue">text/html</td>
    224                                             <td class="attributeValue">h.1874.205294</td>
    225                                         </tr>
    226                                         <tr>
    227                                             <td class="attributeValue"><a href="http://dspace.library.uu.nl/bitstream/1874/205294/1/Masterthesis+Carolyn+van+de+Wall.docx">http://dspace.library.uu.nl/bitstream/1874/205294/1/Masterthesis+Carolyn+van+de+Wall.docx</a></td>
    228                                             <td class="attributeValue">Resource</td>
    229                                             <td class="attributeValue">application/octet-stream</td>
    230                                             <td class="attributeValue">h.1874.205294.1</td>
    231                                         </tr>
    232                                     </tbody>
    233                                 </table>
     242                                <h1>Metadata content</h1>
     243                                <ul>
     244                                    <li><code class="node">mods
     245                                            <div class="attributes">version="3.2"
     246
     247                                            </div></code><ul>
     248                                            <ul>
     249                                                <li><code class="node">edboOverlap </code><div class="Component_tree_node_content"><code class="leaf">no</code></div>
     250                                                </li>
     251                                                <li><code class="node">machineReadable </code><div class="Component_tree_node_content"><code class="leaf">unknown</code></div>
     252                                                </li>
     253                                                <li><code class="node">typeOfResource </code><div class="Component_tree_node_content"><code class="leaf">text</code></div>
     254                                                </li>
     255                                                <li><code class="node">genre </code><div class="Component_tree_node_content"><code class="leaf">info:eu-repo/semantics/masterThesis</code></div>
     256                                                </li>
     257                                                <li><code class="node">titleInfo </code><ul>
     258                                                        <ul>
     259                                                            <li><code class="node">title </code><div class="Component_tree_node_content"><code class="leaf">" De professionaliteit van medisch specialisten onder de loep"</code></div>
     260                                                            </li>
     261                                                        </ul>
     262                                                    </ul>
     263                                                </li>
     264                                                <li><code class="node">name
     265                                                        <div class="attributes">ID="n205294_aut_1"
     266                                                            type="personal"
     267
     268                                                        </div></code><ul>
     269                                                        <ul>
     270                                                            <li><code class="node">namePart
     271                                                                    <div class="attributes">type="family"
     272
     273                                                                    </div></code><div class="Component_tree_node_content"><code class="leaf">Wall</code></div>
     274                                                            </li>
     275                                                            <li><code class="node">namePart
     276                                                                    <div class="attributes">type="given"
     277
     278                                                                    </div></code><div class="Component_tree_node_content"><code class="leaf"> C.J. van de</code></div>
     279                                                            </li>
     280                                                            <li><code class="node">role </code><ul>
     281                                                                    <ul>
     282                                                                        <li><code class="node">roleTerm
     283                                                                                <div class="attributes">authority="marcrelator"
     284                                                                                    type="code"
     285
     286                                                                                </div></code><div class="Component_tree_node_content"><code class="leaf">aut</code></div>
     287                                                                        </li>
     288                                                                    </ul>
     289                                                                </ul>
     290                                                            </li>
     291                                                        </ul>
     292                                                    </ul>
     293                                                </li>
     294                                                <li><code class="node">name
     295                                                        <div class="attributes">ID="n205294_ths_1"
     296                                                            type="personal"
     297
     298                                                        </div></code><ul>
     299                                                        <ul>
     300                                                            <li><code class="node">namePart
     301                                                                    <div class="attributes">type="family"
     302
     303                                                                    </div></code><div class="Component_tree_node_content"><code class="leaf">Knies</code></div>
     304                                                            </li>
     305                                                            <li><code class="node">namePart
     306                                                                    <div class="attributes">type="given"
     307
     308                                                                    </div></code><div class="Component_tree_node_content"><code class="leaf"> E.</code></div>
     309                                                            </li>
     310                                                            <li><code class="node">role </code><ul>
     311                                                                    <ul>
     312                                                                        <li><code class="node">roleTerm
     313                                                                                <div class="attributes">authority="marcrelator"
     314                                                                                    type="code"
     315
     316                                                                                </div></code><div class="Component_tree_node_content"><code class="leaf">ths</code></div>
     317                                                                        </li>
     318                                                                    </ul>
     319                                                                </ul>
     320                                                            </li>
     321                                                        </ul>
     322                                                    </ul>
     323                                                </li>
     324                                                <li><code class="node">originInfo </code><ul>
     325                                                        <ul>
     326                                                            <li><code class="node">dateCreated
     327                                                                    <div class="attributes">encoding="iso8601"
     328
     329                                                                    </div></code><div class="Component_tree_node_content"><code class="leaf">2011-03-31</code></div>
     330                                                            </li>
     331                                                            <li><code class="node">dateCreated
     332                                                                    <div class="attributes">encoding="iso8601"
     333
     334                                                                    </div></code><div class="Component_tree_node_content"><code class="leaf">2011-05-31</code></div>
     335                                                            </li>
     336                                                        </ul>
     337                                                    </ul>
     338                                                </li>
     339                                                <li><code class="node">language </code><ul>
     340                                                        <ul>
     341                                                            <li><code class="node">languageTerm
     342                                                                    <div class="attributes">authority="rfc3066"
     343                                                                        type="code"
     344
     345                                                                    </div></code><div class="Component_tree_node_content"><code class="leaf">nl</code></div>
     346                                                            </li>
     347                                                        </ul>
     348                                                    </ul>
     349                                                </li>
     350                                                <li><code class="node">subject </code><ul>
     351                                                        <ul>
     352                                                            <li><code class="node">topic </code><div class="Component_tree_node_content"><code class="leaf">professionaliteit, ziekenhuis, medisch specialisten, management, Klink, loondienst,
     353                                                                        maatschappen, autonomie, kwaliteit zorg, motivatie, ondersteunend personeel</code></div>
     354                                                            </li>
     355                                                        </ul>
     356                                                    </ul>
     357                                                </li>
     358                                            </ul>
     359                                        </ul>
     360                                    </li>
     361                                </ul>
    234362                            </p>
    235                         </div>
    236                         <p>
    237                             <h1>Metadata content</h1>
    238                             <ul>
    239                                 <li><code class="node">mods
    240                                         <div class="attributes">version="3.2"
    241 
    242                                         </div></code><ul>
    243                                         <ul>
    244                                             <li><code class="node">edboOverlap </code><div class="Component_tree_node_content"><code class="leaf">no</code></div>
    245                                             </li>
    246                                             <li><code class="node">machineReadable </code><div class="Component_tree_node_content"><code class="leaf">unknown</code></div>
    247                                             </li>
    248                                             <li><code class="node">typeOfResource </code><div class="Component_tree_node_content"><code class="leaf">text</code></div>
    249                                             </li>
    250                                             <li><code class="node">genre </code><div class="Component_tree_node_content"><code class="leaf">info:eu-repo/semantics/masterThesis</code></div>
    251                                             </li>
    252                                             <li><code class="node">titleInfo </code><ul>
    253                                                     <ul>
    254                                                         <li><code class="node">title </code><div class="Component_tree_node_content"><code class="leaf">" De professionaliteit van medisch specialisten onder de loep"</code></div>
    255                                                         </li>
    256                                                     </ul>
    257                                                 </ul>
    258                                             </li>
    259                                             <li><code class="node">name
    260                                                     <div class="attributes">ID="n205294_aut_1"
    261                                                         type="personal"
    262 
    263                                                     </div></code><ul>
    264                                                     <ul>
    265                                                         <li><code class="node">namePart
    266                                                                 <div class="attributes">type="family"
    267 
    268                                                                 </div></code><div class="Component_tree_node_content"><code class="leaf">Wall</code></div>
    269                                                         </li>
    270                                                         <li><code class="node">namePart
    271                                                                 <div class="attributes">type="given"
    272 
    273                                                                 </div></code><div class="Component_tree_node_content"><code class="leaf"> C.J. van de</code></div>
    274                                                         </li>
    275                                                         <li><code class="node">role </code><ul>
    276                                                                 <ul>
    277                                                                     <li><code class="node">roleTerm
    278                                                                             <div class="attributes">authority="marcrelator"
    279                                                                                 type="code"
    280 
    281                                                                             </div></code><div class="Component_tree_node_content"><code class="leaf">aut</code></div>
    282                                                                     </li>
    283                                                                 </ul>
    284                                                             </ul>
    285                                                         </li>
    286                                                     </ul>
    287                                                 </ul>
    288                                             </li>
    289                                             <li><code class="node">name
    290                                                     <div class="attributes">ID="n205294_ths_1"
    291                                                         type="personal"
    292 
    293                                                     </div></code><ul>
    294                                                     <ul>
    295                                                         <li><code class="node">namePart
    296                                                                 <div class="attributes">type="family"
    297 
    298                                                                 </div></code><div class="Component_tree_node_content"><code class="leaf">Knies</code></div>
    299                                                         </li>
    300                                                         <li><code class="node">namePart
    301                                                                 <div class="attributes">type="given"
    302 
    303                                                                 </div></code><div class="Component_tree_node_content"><code class="leaf"> E.</code></div>
    304                                                         </li>
    305                                                         <li><code class="node">role </code><ul>
    306                                                                 <ul>
    307                                                                     <li><code class="node">roleTerm
    308                                                                             <div class="attributes">authority="marcrelator"
    309                                                                                 type="code"
    310 
    311                                                                             </div></code><div class="Component_tree_node_content"><code class="leaf">ths</code></div>
    312                                                                     </li>
    313                                                                 </ul>
    314                                                             </ul>
    315                                                         </li>
    316                                                     </ul>
    317                                                 </ul>
    318                                             </li>
    319                                             <li><code class="node">originInfo </code><ul>
    320                                                     <ul>
    321                                                         <li><code class="node">dateCreated
    322                                                                 <div class="attributes">encoding="iso8601"
    323 
    324                                                                 </div></code><div class="Component_tree_node_content"><code class="leaf">2011-03-31</code></div>
    325                                                         </li>
    326                                                         <li><code class="node">dateCreated
    327                                                                 <div class="attributes">encoding="iso8601"
    328 
    329                                                                 </div></code><div class="Component_tree_node_content"><code class="leaf">2011-05-31</code></div>
    330                                                         </li>
    331                                                     </ul>
    332                                                 </ul>
    333                                             </li>
    334                                             <li><code class="node">language </code><ul>
    335                                                     <ul>
    336                                                         <li><code class="node">languageTerm
    337                                                                 <div class="attributes">authority="rfc3066"
    338                                                                     type="code"
    339 
    340                                                                 </div></code><div class="Component_tree_node_content"><code class="leaf">nl</code></div>
    341                                                         </li>
    342                                                     </ul>
    343                                                 </ul>
    344                                             </li>
    345                                             <li><code class="node">subject </code><ul>
    346                                                     <ul>
    347                                                         <li><code class="node">topic </code><div class="Component_tree_node_content"><code class="leaf">professionaliteit, ziekenhuis, medisch specialisten, management, Klink, loondienst,
    348                                                                     maatschappen, autonomie, kwaliteit zorg, motivatie, ondersteunend personeel</code></div>
    349                                                         </li>
    350                                                     </ul>
    351                                                 </ul>
    352                                             </li>
    353                                         </ul>
    354                                     </ul>
    355                                 </li>
    356                             </ul>
    357                         </p>
    358                     </article>
    359                 </div> <!-- recordcmdi -->
    360 
    361             </div> <!-- content -->
     363                        </article>
     364                    </div> <!-- recordcmdi -->
     365
     366                </div> <!-- content -->
     367            </div> <!-- recordtechnicaldetails -->
    362368
    363369            <div id="footer">

  • vlo/branches/vlo-3.0/vlo-web-app/src/main/html/style/vlo-record.css

    r4392 r4393  
    7979}
    8080
     81#recorddetails, #recordtechnicalattributes {
     82    padding-right: 2em;
     83    margin-top: 1em;
     84}
     85
     86table.recorddetailstable {
     87    border-collapse: collapse;
     88    border-top: 1px solid #999;
     89}
     90
     91table.recorddetailstable td, table.recorddetailstable th {
     92    border-bottom: 1px solid #999;
     93}
     94
     95table.recorddetailstable td.attribute {
     96    width: 25%;
     97    vertical-align: top;
     98}
     99
    81100/* icons for record references */
    82101#recordlandingpage div {
    … …  
    100119}
    101120
     121#recordtechnicaldetailstoggle{
     122    margin-top: 2em;
     123    padding-bottom: 0px;
     124}
     125
     126#recordtechnicaldetails {
     127    border-top: 1px dashed;
     128    padding-top: 1em;
     129}
     130
    102131#recordcmdi {
    103132    margin-top: 2em;
    … …  
    106135#recordcmdi article {
    107136    position: relative;
    108     left: -80px;  /* sidebar */
    109     width: 720px;
     137    max-height: 400px;
     138    overflow: auto;
     139    margin-top: 1em;
    110140}
Note: See TracChangeset for help on using the changeset viewer.