Changeset 4332

Timestamp:

01/24/14 12:58:39 (10 years ago)

Author:

twagoo

Message:

collapse/expand link in mockup. made page wider

Location:

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

Files:

• index.html (modified) (6 diffs)
• style/style.css (modified) (4 diffs)
• style/vlo.css (modified) (2 diffs)

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

@@ -94 +94 @@
                 <form action="" id="collections">
                     <ul>
-                        <li class="allcollections"><input type="checkbox" checked="checked" />Search in all collections (604056)<a href="#" id="showcollections">or select...</a></li>
+                        <li class="allcollections"><input type="checkbox" checked="checked" />Search in all collections (604056) <a href="#" id="showcollections">or select...</a></li>
                         <li class="collection"><input type="checkbox"/>Meertens collection: Liederenbank (243129)</li>
                         <li class="collection"><input type="checkbox"/>UBU Clarin Set (69311)</li>
@@ -104 +104 @@
                         <li class="collection"><input type="checkbox"/>Bavarian Archive for Speech Signals (BAS) (14416)</li>
                         <li class="collection"><input type="checkbox"/>TLA: Acquisition (14363)</li>
-                        <li class="collection"><input type="checkbox"/>Institut fÌr Deutsche Sprache, CLARIN-D Zentrum, Mannheim (14320)</li>
+                        <li class="collection"><input type="checkbox"/>Institut fÃŒr Deutsche Sprache, CLARIN-D Zentrum, Mannheim (14320)</li>
                         <li class="collection"><input type="checkbox"/>Meertens collection: Liederenbank (243129)</li>
                     </ul>
@@ -129 +129 @@
                             <li><a href="">Turkish (4968) </a></li>
                             <li><a href="">Chinese (1971)</a></li>
-                            <li class="more-link"><a href="">more...</a></li>
+                            <li class="more-link"><a href="#">more...</a></li>
                         </ul>
                     </div>
@@ -149 +149 @@
                             <li><a href="">Televisie (1695)</a></li>
                             <li><a href="">niet van toepassing (1185)</a></li>
-                            <li class="more-link"><a href="">more...</a></li>
+                            <li class="more-link"><a href="#">more...</a></li>
                         </ul>
                     </div>
@@ -175 +175 @@
                     <!-- rounded corners - top **** -->
                     <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
-                    <a href="#" class="expandfacet">expand</a>
-                    <a href="#" class="collapsefacet">collapse</a>
+                    <a href="#" class="expandfacet"><span>expand</span></a>
+                    <a href="#" class="collapsefacet"><span>collapse</span></a>
                     <h1>Genre</h1>
                     <div class="sbilinks">
@@ -189 +189 @@
                             <li><a href="">liefdeslied (8381)</a></li>
                             <li><a href="">stimuli (8103)</a></li>
-                            <li class="more-link"><a href="">more...</a></li>
+                            <li class="more-link"><a href="#">more...</a></li>
                         </ul>
                     </div>

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

@@ -88 +88 @@
 
 /* main container */
-#main{width: 850px;}
+#main{
+    width: 980px; /* used to be 850px */
+}
 
 /* header */
@@ -169 +171 @@
 .sidebar
 { float: left;
-  width: 194px;
+  width: 214px; /*  used to be 194px */
   padding: 16px 15px 15px 15px;
 }
@@ -176 +178 @@
 .sidebaritem
 { text-align: left;
-  width: 194px;
+  width: 100%; /*  used to be 194px */
   float: left;
   margin: 0px 0px 11px 0px;
@@ -216 +218 @@
 #content
 { text-align: justify;
-  width: 384px;
+  width: 474px; /* used to be 384px  */
   padding: 26px 9px 15px 9px;
   float: left;

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

@@ -20 +20 @@
 */
 
-li.more-link {
-    width: 100%;
-    text-align: right;
-}
-
-li.more-link a {
-    margin-right: 1em;
-}
+/* collection selection */
 
 form#collections ul li {
@@ -50 +43 @@
 }
 
+/* facet links */
+
+li.more-link {
+    width: 100%;
+    text-align: right;
+}
+
+li.more-link a {
+    margin-right: 1em;
+}
+
+/* facet collapse/expand */
+
 a.expandfacet, a.collapsefacet {
     float: right;
+    margin-top: .5em;
     margin-right: 1em;
+}
+
+a.expandfacet span, a.collapsefacet span{
+    /* don't show expand/collapse label */
+    display: none;
+}
+
+a.expandfacet:after {
+    /* show BLACK DOWN-POINTING TRIANGLE character */
+    content: "\25BC";
+}
+
+a.collapsefacet:after {
+    /* show BLACK UP-POINTING TRIANGLE  character*/
+    content: "\25B2";
 }