Changeset 4403

Timestamp:

01/30/14 15:57:43 (10 years ago)

Author:

twagoo

Message:

added expandable details for records in search results in mockup

Location:

vlo/branches/vlo-3.0/vlo-web-app/src/main/html

Files:

• index.html (modified) (5 diffs)
• js/vlo-search.js (modified) (1 diff)
• style/style.css (modified) (1 diff)
• style/vlo-record.css (modified) (1 diff)
• style/vlo-search.css (modified) (2 diffs)

vlo/branches/vlo-3.0/vlo-web-app/src/main/html/index.html

@@ -149 +149 @@
                     <div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
                 </div>
-                
+
                 <div class="sidebaritem facet collapsedfacet">
                     <!-- rounded corners - top **** -->
@@ -178 +178 @@
                     <div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
                 </div>
-                
-                
+
+
                 <div class="sidebaritem facet collapsedfacet">
                     <!-- rounded corners - top **** -->
@@ -355 +355 @@
                                 <a href="record1.html">"Chinese Democratie en de Transformatie"</a>
                             </h2>
-                            <div class="searchresultcollection">UBU CLARIN</div>
-                            <p class="searchresultdescription">
-                                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 '78-'79.
-                            </p>
-                            <p class="searchresultresources">
-                                Resources: <a href="record1.html">1 written resource</a>, <a href="record1.html">1 audio file</a>
-                            </p>
+                            <div class="searchresultitembrief">
+                                <div class="searchresultcollection">UBU CLARIN</div>
+                                <p class="searchresultdescription">
+                                    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...
+                                </p>
+                                <p class="searchresultresources">
+                                    Resources: <a href="record1.html">1 written resource</a>, <a href="record1.html">1 audio file</a>
+                                </p>
+                                <p class="searchresultmoreless"><a href="#" class="searchresultdetailstoggle">more detail</a></p>
+                            </div>
+
+                            <div class="searchresultitemextended">
+                                <div class="searchresultcollection">UBU CLARIN</div>
+                                <p class="searchresultdescription">
+                                    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 '78-'79.
+                                </p>
+                                <p class="searchresultattributes">
+                                    <table class="recorddetailstable">
+                                        <tbody class="attributesTbody">
+                                            <tr>
+                                                <td class="attribute">
+                                                    <div>Genre</div>
+                                                </td><td class="attributeValue">
+                                                    <div>info:eu-repo/semantics/bachelorthesis <a class="recordfacetselect" title="Search for similar" href="index.html"><span>[search for similar]</span></a></div>
+                                                </td>
+                                            </tr><tr>
+                                                <td class="attribute">
+                                                    <div>Languages</div>
+                                                </td><td class="attributeValue">
+                                                    <div>Dutch <a class="recordattributeinfo" href="http://infra.clarin.eu/service/language/info.php?code=nld"><span>[info]</span></a> <a class="recordfacetselect" title="Search for similar" href="index.html"><span>[search for similar]</span></a></div>
+                                                </td>
+                                            </tr><tr>
+                                                <td class="attribute">
+                                                    <div>National project</div>
+                                                </td><td class="attributeValue">
+                                                    <div>CLARIN-NL <a class="recordfacetselect" title="Search for similar" href="index.html"><span>[search for similar]</span></a></div>
+                                                </td>
+                                            </tr><tr>
+                                                <td class="attribute">
+                                                    <div>Resource class</div>
+                                                </td><td class="attributeValue">
+                                                    <div>text <a class="recordfacetselect" title="Search for similar" href="index.html"><span>[search for similar]</span></a></div>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+
+                                    <h3>Resources</h3>
+                                    <ul>
+                                        <li class="writtenresource"><a href="">http://dspace.library.uu.nl/bitstream/1874/235456/1/Bachelorscriptie+Rene+Witteveen+3375005.docx</a></li>
+                                        <li class="audioresource"><a href="">http://corpus1.mpi.nl/qfs1/media-archive/dobes_data/Ache/Documentaci_n_-_Documentation/Comunidades_-_Communities/Cerro_Moroti/Media/002-djawu_klluu-2011-09-01.wav</a></li>
+                                        <li class="annotationresource"><a href="">http://corpus1.mpi.nl/qfs1/media-archive/dobes_data/Ache/Documentaci_n_-_Documentation/Comunidades_-_Communities/Cerro_Moroti/Annotations/002-djawu_klluu-2011-09-01.eaf</a></li>
+                                    </ul>
+
+                                </p>
+
+                                <p class="searchresultfullrecord">
+                                    <a href="record1.html">View full record</a>
+                                </p>
+                                <p class="searchresultmoreless">
+                                    <a href="#" class="searchresultdetailstoggle">less detail</a>
+                                </p>
+                            </div>
+                            <div class="searchresultitemend"></div>
                         </li>
                         <li class="searchresultitem">
@@ -369 +426 @@
                             <div class="searchresultcollection">UBU CLARIN</div>
                             <p class="searchresultdescription">
-                                Mogelijke implicaties van het 'zichzelf zien'(zoals de vroege romanticus Jean Paul Richter het dubbelgangermotief benoemde), werkte E.T.A. Hoffmann uit in de experimentele tekst PRINZESSIN BRAMBILLA. Daarin verbindt de auteur genoemd motief met de thema's carnaval, theater en de nieuwe romantische mythe. Deze variant van het literaire motief werd geanalyseerd in het licht van Lacans theorie (zoals specifiek vastgelegd in twee van diens artikelen) over het 'spiegelstadium'. Dit heeft bijgedragen aan de 'ontginning' van een zeldzame variant van de dubbelformatie in de literatuur en heeft daarbij Lacans theorie over de orde van het imaginaire in de context van dit onderzoek tastbaarder gemaakt.
+                                Mogelijke implicaties van het 'zichzelf zien'(zoals de vroege romanticus Jean Paul Richter het dubbelgangermotief benoemde), werkte E.T.A. Hoffmann uit in de experimentele tekst PRINZESSIN BRAMBILLA. Daarin verbindt de auteur...
                             </p>
                             <p class="searchresultresources">
@@ -393 +450 @@
                             <div class="searchresultcollection">UBU CLARIN</div>
                             <p class="searchresultdescription">
-                                Presentatie: Felix Meurders. Hij wordt bijgestaan door een Mediaraad, die gedurende het programma commentaar levert op de onderwerpen. Vaste onderdelen: deleugenregeert.nl en een media-analyse door Francisco van Jole. 
-                                Serie praatprogramma's over de berichtgeving van het nieuws door de Nederlandse media. Presentatie: Felix Meurders. De Mediaraad geeft gedurende de gehele uitzending commentaar op de gespreksonderwerpen.
-                                In deze aflevering, waarin de Mediaraad bestaat uit journalist Tijs van den Brink (EO) en freelance journalist Ton van Dijk:
+                                Presentatie: Felix Meurders. Hij wordt bijgestaan door een Mediaraad, die gedurende het programma commentaar levert op de onderwerpen. Vaste onderdelen: deleugenregeert.nl en een media-analyse door Francisco van Jole. Serie...
                             </p>
                             <p class="searchresultresources">

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

@@ -18 +18 @@
 
 $(document).ready(function() {
-    $(".searchresultdescription").addClass("truncate");
-    // extend on hover? not so nice this way, disabled for now
-//    $(".searchresultdescription").hover(
-//            function() {
-//                /* in */
-//                $(this).removeClass("truncate");
-//                $(this).addClass("extended");
-//            },
-//            function() {
-//                /* out */
-//                $(this).addClass("truncate");
-//                $(this).removeClass("extended");
-//            });
+    $(".searchresultitemextended").hide();
+    
+    $("a.searchresultdetailstoggle").click(function(event) {
+        event.preventDefault();
+        var item = $(this).parents(".searchresultitem");
+        item.find(".searchresultitembrief").toggle();
+        item.find(".searchresultitemextended").toggle();
+    });
 });

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

@@ -220 +220 @@
 /* page content (centre) */
 #content
-{ text-align: justify;
+{
   width: 697px; /* used to be 384px  */
   padding: 26px 0px 15px 9px;

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

@@ -84 +84 @@
     border-collapse: collapse;
     border-top: 1px solid #999;
+    width: 100%;
 }
 

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

@@ -96 +96 @@
 }
 
-.truncate {
-    /* limit description to one line */
-    white-space: nowrap;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-height: 1em;
+p.searchresultresources, p.searchresultfullrecord {
+    width: 70%;
+    float: left;
+    clear: left;
+    padding: 0px;
+}
+
+p.searchresultattributes {
+    padding: 0px 0px 8px 0px;
+}
+
+p.searchresultmoreless {
+    width: 20%;
+    float: right;
+    text-align: right;
+    padding: 0px;
 }
 
@@ -109 +118 @@
     text-align: center;
 }
+
+
+div.searchresultitemend {
+    clear: both;
+    height: 0px;
+    margin: 0px;
+    padding: 0px;
+    width: 0px;
+}