Changeset 4450


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

separated full cmdi content section of record page mockup from technical details

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

    r4394 r4450  
    1616 */
    1717
    18 $(document).ready(function() {
    19     $("#recordtechnicaldetails").hide();
    20     $("#hiderecordtechnicaldetails").hide();
     18$(document).ready(function() {   
     19    $("#recordtechnicaldetails, #recordcmdi").hide();
     20    $("#hiderecordtechnicaldetails, #hiderecordcmdi").hide();
     21    $("#recordcmditoggle a").click(function(event){
     22        event.preventDefault();
     23        $("#recordcmdi").toggle();
     24        $("#recordcmditoggle a").toggle();
     25    });
    2126    $("#recordtechnicaldetailstoggle a").click(function(event){
    2227        event.preventDefault();

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

    r4449 r4450  
    127127                </div>
    128128
    129                 <p id="recordtechnicaldetailstoggle">
    130                     <a href="#" id="showrecordtechnicaldetails">Show technical details</a>
    131                     <a href="#" id="hiderecordtechnicaldetails">Hide technical details</a>
     129                <p id="recordcmditoggle" class="recordtogglelinks">
     130                    <a href="#" id="showrecordcmdi" class="recordshowlink">Show all metadata fields</a>
     131                    <a href="#" id="hiderecordcmdi" class="recordhidelink">Hide all metadata fields</a>
     132                </p>
     133                <div id="recordcmdi">
     134                    <h2>CMDI Metadata</h2>
     135                    <!--<p><a href="#" id="recordcmditoggle">View/Hide CMDI metadata</a></p>-->
     136                    <article xmlns:cmd="http://www.clarin.eu/cmd/" xmlns:fn="http://www.w3.org/2005/xpath-functions" style="background-color:#EEEEEE">
     137                        <div class="endgame">
     138                            <p>
     139                                <h1>Resources</h1>
     140                                <table>
     141                                    <caption>Resources</caption>
     142                                    <thead>
     143                                        <tr>
     144                                            <th class="attribute">Reference to resource</th>
     145                                            <th class="attribute">Resource description</th>
     146                                            <th class="attribute">Resource MIME type</th>
     147                                            <th class="attribute">Resource Proxy ID</th>
     148                                        </tr>
     149                                    </thead>
     150                                    <tbody class="attributesTbody">
     151                                        <tr>
     152                                            <td class="attributeValue"><a href="http://dspace.library.uu.nl/handle/1874/205294">http://dspace.library.uu.nl/handle/1874/205294</a></td>
     153                                            <td class="attributeValue">LandingPage</td>
     154                                            <td class="attributeValue">text/html</td>
     155                                            <td class="attributeValue">h.1874.205294</td>
     156                                        </tr>
     157                                        <tr>
     158                                            <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>
     159                                            <td class="attributeValue">Resource</td>
     160                                            <td class="attributeValue">application/octet-stream</td>
     161                                            <td class="attributeValue">h.1874.205294.1</td>
     162                                        </tr>
     163                                    </tbody>
     164                                </table>
     165                            </p>
     166                        </div>
     167                        <p>
     168                            <h1>Metadata content</h1>
     169                            <ul>
     170                                <li><code class="node">mods
     171                                        <div class="attributes">version="3.2"
     172
     173                                        </div></code><ul>
     174                                        <ul>
     175                                            <li><code class="node">edboOverlap </code><div class="Component_tree_node_content"><code class="leaf">no</code></div>
     176                                            </li>
     177                                            <li><code class="node">machineReadable </code><div class="Component_tree_node_content"><code class="leaf">unknown</code></div>
     178                                            </li>
     179                                            <li><code class="node">typeOfResource </code><div class="Component_tree_node_content"><code class="leaf">text</code></div>
     180                                            </li>
     181                                            <li><code class="node">genre </code><div class="Component_tree_node_content"><code class="leaf">info:eu-repo/semantics/masterThesis</code></div>
     182                                            </li>
     183                                            <li><code class="node">titleInfo </code><ul>
     184                                                    <ul>
     185                                                        <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>
     186                                                        </li>
     187                                                    </ul>
     188                                                </ul>
     189                                            </li>
     190                                            <li><code class="node">name
     191                                                    <div class="attributes">ID="n205294_aut_1"
     192                                                        type="personal"
     193
     194                                                    </div></code><ul>
     195                                                    <ul>
     196                                                        <li><code class="node">namePart
     197                                                                <div class="attributes">type="family"
     198
     199                                                                </div></code><div class="Component_tree_node_content"><code class="leaf">Wall</code></div>
     200                                                        </li>
     201                                                        <li><code class="node">namePart
     202                                                                <div class="attributes">type="given"
     203
     204                                                                </div></code><div class="Component_tree_node_content"><code class="leaf"> C.J. van de</code></div>
     205                                                        </li>
     206                                                        <li><code class="node">role </code><ul>
     207                                                                <ul>
     208                                                                    <li><code class="node">roleTerm
     209                                                                            <div class="attributes">authority="marcrelator"
     210                                                                                type="code"
     211
     212                                                                            </div></code><div class="Component_tree_node_content"><code class="leaf">aut</code></div>
     213                                                                    </li>
     214                                                                </ul>
     215                                                            </ul>
     216                                                        </li>
     217                                                    </ul>
     218                                                </ul>
     219                                            </li>
     220                                            <li><code class="node">name
     221                                                    <div class="attributes">ID="n205294_ths_1"
     222                                                        type="personal"
     223
     224                                                    </div></code><ul>
     225                                                    <ul>
     226                                                        <li><code class="node">namePart
     227                                                                <div class="attributes">type="family"
     228
     229                                                                </div></code><div class="Component_tree_node_content"><code class="leaf">Knies</code></div>
     230                                                        </li>
     231                                                        <li><code class="node">namePart
     232                                                                <div class="attributes">type="given"
     233
     234                                                                </div></code><div class="Component_tree_node_content"><code class="leaf"> E.</code></div>
     235                                                        </li>
     236                                                        <li><code class="node">role </code><ul>
     237                                                                <ul>
     238                                                                    <li><code class="node">roleTerm
     239                                                                            <div class="attributes">authority="marcrelator"
     240                                                                                type="code"
     241
     242                                                                            </div></code><div class="Component_tree_node_content"><code class="leaf">ths</code></div>
     243                                                                    </li>
     244                                                                </ul>
     245                                                            </ul>
     246                                                        </li>
     247                                                    </ul>
     248                                                </ul>
     249                                            </li>
     250                                            <li><code class="node">originInfo </code><ul>
     251                                                    <ul>
     252                                                        <li><code class="node">dateCreated
     253                                                                <div class="attributes">encoding="iso8601"
     254
     255                                                                </div></code><div class="Component_tree_node_content"><code class="leaf">2011-03-31</code></div>
     256                                                        </li>
     257                                                        <li><code class="node">dateCreated
     258                                                                <div class="attributes">encoding="iso8601"
     259
     260                                                                </div></code><div class="Component_tree_node_content"><code class="leaf">2011-05-31</code></div>
     261                                                        </li>
     262                                                    </ul>
     263                                                </ul>
     264                                            </li>
     265                                            <li><code class="node">language </code><ul>
     266                                                    <ul>
     267                                                        <li><code class="node">languageTerm
     268                                                                <div class="attributes">authority="rfc3066"
     269                                                                    type="code"
     270
     271                                                                </div></code><div class="Component_tree_node_content"><code class="leaf">nl</code></div>
     272                                                        </li>
     273                                                    </ul>
     274                                                </ul>
     275                                            </li>
     276                                            <li><code class="node">subject </code><ul>
     277                                                    <ul>
     278                                                        <li><code class="node">topic </code><div class="Component_tree_node_content"><code class="leaf">professionaliteit, ziekenhuis, medisch specialisten, management, Klink, loondienst,
     279                                                                    maatschappen, autonomie, kwaliteit zorg, motivatie, ondersteunend personeel</code></div>
     280                                                        </li>
     281                                                    </ul>
     282                                                </ul>
     283                                            </li>
     284                                        </ul>
     285                                    </ul>
     286                                </li>
     287                            </ul>
     288                        </p>
     289                    </article>
     290                </div> <!-- recordcmdi -->
     291
     292                <p id="recordtechnicaldetailstoggle" class="recordtogglelinks">
     293                    <a href="#" id="showrecordtechnicaldetails" class="recordshowlink">Show technical details</a>
     294                    <a href="#" id="hiderecordtechnicaldetails" class="recordhidelink">Hide technical details</a>
    132295                </p>
    133296                <div id="recordtechnicaldetails">
    134                     <h2>Additional attributes</h2>
     297                    <h2>Technical details</h2>
    135298
    136299                    <div id="recordtechnicalattributes">
    … …  
    159322                        </table>
    160323                    </div>
    161 
    162                     <div id="recordcmdi">
    163                         <h2>CMDI Metadata</h2>
    164                         <!--<p><a href="#" id="recordcmditoggle">View/Hide CMDI metadata</a></p>-->
    165                         <article xmlns:cmd="http://www.clarin.eu/cmd/" xmlns:fn="http://www.w3.org/2005/xpath-functions" style="background-color:#EEEEEE">
    166                             <div class="endgame">
    167                                 <p>
    168                                     <h1>Resources</h1>
    169                                     <table>
    170                                         <caption>Resources</caption>
    171                                         <thead>
    172                                             <tr>
    173                                                 <th class="attribute">Reference to resource</th>
    174                                                 <th class="attribute">Resource description</th>
    175                                                 <th class="attribute">Resource MIME type</th>
    176                                                 <th class="attribute">Resource Proxy ID</th>
    177                                             </tr>
    178                                         </thead>
    179                                         <tbody class="attributesTbody">
    180                                             <tr>
    181                                                 <td class="attributeValue"><a href="http://dspace.library.uu.nl/handle/1874/205294">http://dspace.library.uu.nl/handle/1874/205294</a></td>
    182                                                 <td class="attributeValue">LandingPage</td>
    183                                                 <td class="attributeValue">text/html</td>
    184                                                 <td class="attributeValue">h.1874.205294</td>
    185                                             </tr>
    186                                             <tr>
    187                                                 <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>
    188                                                 <td class="attributeValue">Resource</td>
    189                                                 <td class="attributeValue">application/octet-stream</td>
    190                                                 <td class="attributeValue">h.1874.205294.1</td>
    191                                             </tr>
    192                                         </tbody>
    193                                     </table>
    194                                 </p>
    195                             </div>
    196                             <p>
    197                                 <h1>Metadata content</h1>
    198                                 <ul>
    199                                     <li><code class="node">mods
    200                                             <div class="attributes">version="3.2"
    201 
    202                                             </div></code><ul>
    203                                             <ul>
    204                                                 <li><code class="node">edboOverlap </code><div class="Component_tree_node_content"><code class="leaf">no</code></div>
    205                                                 </li>
    206                                                 <li><code class="node">machineReadable </code><div class="Component_tree_node_content"><code class="leaf">unknown</code></div>
    207                                                 </li>
    208                                                 <li><code class="node">typeOfResource </code><div class="Component_tree_node_content"><code class="leaf">text</code></div>
    209                                                 </li>
    210                                                 <li><code class="node">genre </code><div class="Component_tree_node_content"><code class="leaf">info:eu-repo/semantics/masterThesis</code></div>
    211                                                 </li>
    212                                                 <li><code class="node">titleInfo </code><ul>
    213                                                         <ul>
    214                                                             <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>
    215                                                             </li>
    216                                                         </ul>
    217                                                     </ul>
    218                                                 </li>
    219                                                 <li><code class="node">name
    220                                                         <div class="attributes">ID="n205294_aut_1"
    221                                                             type="personal"
    222 
    223                                                         </div></code><ul>
    224                                                         <ul>
    225                                                             <li><code class="node">namePart
    226                                                                     <div class="attributes">type="family"
    227 
    228                                                                     </div></code><div class="Component_tree_node_content"><code class="leaf">Wall</code></div>
    229                                                             </li>
    230                                                             <li><code class="node">namePart
    231                                                                     <div class="attributes">type="given"
    232 
    233                                                                     </div></code><div class="Component_tree_node_content"><code class="leaf"> C.J. van de</code></div>
    234                                                             </li>
    235                                                             <li><code class="node">role </code><ul>
    236                                                                     <ul>
    237                                                                         <li><code class="node">roleTerm
    238                                                                                 <div class="attributes">authority="marcrelator"
    239                                                                                     type="code"
    240 
    241                                                                                 </div></code><div class="Component_tree_node_content"><code class="leaf">aut</code></div>
    242                                                                         </li>
    243                                                                     </ul>
    244                                                                 </ul>
    245                                                             </li>
    246                                                         </ul>
    247                                                     </ul>
    248                                                 </li>
    249                                                 <li><code class="node">name
    250                                                         <div class="attributes">ID="n205294_ths_1"
    251                                                             type="personal"
    252 
    253                                                         </div></code><ul>
    254                                                         <ul>
    255                                                             <li><code class="node">namePart
    256                                                                     <div class="attributes">type="family"
    257 
    258                                                                     </div></code><div class="Component_tree_node_content"><code class="leaf">Knies</code></div>
    259                                                             </li>
    260                                                             <li><code class="node">namePart
    261                                                                     <div class="attributes">type="given"
    262 
    263                                                                     </div></code><div class="Component_tree_node_content"><code class="leaf"> E.</code></div>
    264                                                             </li>
    265                                                             <li><code class="node">role </code><ul>
    266                                                                     <ul>
    267                                                                         <li><code class="node">roleTerm
    268                                                                                 <div class="attributes">authority="marcrelator"
    269                                                                                     type="code"
    270 
    271                                                                                 </div></code><div class="Component_tree_node_content"><code class="leaf">ths</code></div>
    272                                                                         </li>
    273                                                                     </ul>
    274                                                                 </ul>
    275                                                             </li>
    276                                                         </ul>
    277                                                     </ul>
    278                                                 </li>
    279                                                 <li><code class="node">originInfo </code><ul>
    280                                                         <ul>
    281                                                             <li><code class="node">dateCreated
    282                                                                     <div class="attributes">encoding="iso8601"
    283 
    284                                                                     </div></code><div class="Component_tree_node_content"><code class="leaf">2011-03-31</code></div>
    285                                                             </li>
    286                                                             <li><code class="node">dateCreated
    287                                                                     <div class="attributes">encoding="iso8601"
    288 
    289                                                                     </div></code><div class="Component_tree_node_content"><code class="leaf">2011-05-31</code></div>
    290                                                             </li>
    291                                                         </ul>
    292                                                     </ul>
    293                                                 </li>
    294                                                 <li><code class="node">language </code><ul>
    295                                                         <ul>
    296                                                             <li><code class="node">languageTerm
    297                                                                     <div class="attributes">authority="rfc3066"
    298                                                                         type="code"
    299 
    300                                                                     </div></code><div class="Component_tree_node_content"><code class="leaf">nl</code></div>
    301                                                             </li>
    302                                                         </ul>
    303                                                     </ul>
    304                                                 </li>
    305                                                 <li><code class="node">subject </code><ul>
    306                                                         <ul>
    307                                                             <li><code class="node">topic </code><div class="Component_tree_node_content"><code class="leaf">professionaliteit, ziekenhuis, medisch specialisten, management, Klink, loondienst,
    308                                                                         maatschappen, autonomie, kwaliteit zorg, motivatie, ondersteunend personeel</code></div>
    309                                                             </li>
    310                                                         </ul>
    311                                                     </ul>
    312                                                 </li>
    313                                             </ul>
    314                                         </ul>
    315                                     </li>
    316                                 </ul>
    317                             </p>
    318                         </article>
    319                     </div> <!-- recordcmdi -->
    320 
    321324                </div> <!-- content -->
    322325            </div> <!-- recordtechnicaldetails -->

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

    r4449 r4450  
    148148/* Technical details */
    149149
    150 #recordtechnicaldetailstoggle {
     150.recordtogglelinks {
    151151    clear: both;
    152     padding: 4em 0 0 0;
     152    padding: 0 0 1em 0;
    153153}
    154154
    155 #showrecordtechnicaldetails:before {
     155#recordcmditoggle {
     156    padding-top: 4em;
     157}
     158
     159a.recordshowlink:before {
    156160    content: '+ ';
    157161}
    158162
    159 
    160 #hiderecordtechnicaldetails:before {
     163a.recordhidelink:before {
    161164    content: '- ';
    162165}
    163166
    164 #recordtechnicaldetails {
     167#recordtechnicaldetails, #recordcmdi {
    165168    border-top: 1px dashed;
    166169    padding: 1em 0;
    167170}
    168171
    169 #recordcmdi {
    170     margin-top: 2em;
    171 }
    172 
    173172#recordcmdi article {
    174     /*  max-height: 400px;
    175         overflow: auto;*/
     173    max-height: 400px;
     174    overflow: auto;
    176175    margin-top: 1em;
    177176    padding: 1em;
Note: See TracChangeset for help on using the changeset viewer.