Changeset 4336

Timestamp:

01/24/14 15:21:06 (10 years ago)

Author:

twagoo

Message:

mockup: search results pagination

Location:

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

Files:

• index.html (modified) (6 diffs)
• style/style.css (modified) (1 diff)
• style/vlo-collections.css (modified) (1 diff)
• style/vlo-search.css (modified) (3 diffs)

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

@@ -67 +67 @@
                         <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>
+                    </ul> 
                     <div id="collections-end"></div>
                 </form>
@@ -147 +147 @@
                         <span id="searchresultcount">606156 results</span>
                         <span id="searchresultpagecount">Showing 1 to 30</span>
-                    </div>
+
+                        <div class="searchresultpagination">
+                            &lt;&lt;
+                            &lt;
+                            1
+                            <a href="">2</a>
+                            <a href="">3</a>
+                            <a href="">4</a>
+                            <a href="">5</a>
+                            <a href="">6</a>
+                            <a href="">7</a>
+                            <a href="">8</a>
+                            <a href="">9</a>
+                            <a href="">10</a>
+                            <a href="">&gt;</a>
+                            <a href="">&gt;&gt;</a>
+                        </div>
+
+                    </div> 
+
                     <ul id="searchresultitems">
                         <li class="searchresultitem">
@@ -158 +177 @@
                             </p>
                             <p class="searchresultresources">
-                                Resources: 1 written resource, 1 audio file
+                                Resources: <a href="">1 written resource</a>, <a href="">1 audio file</a>
                             </p>
                         </li>
@@ -170 +189 @@
                             </p>
                             <p class="searchresultresources">
-                                Resources: 1 written resource, 1 audio file
+                                Resources: <a href="">1 written resource</a>, <a href="">1 audio file</a>
                             </p>
                         </li>
@@ -182 +201 @@
                             </p>
                             <p class="searchresultresources">
-                                Resources: 1 written resource, 1 audio file
+                                Resources: <a href="">1 written resource</a>, <a href="">1 audio file</a>
                             </p>
                         </li>
@@ -194 +213 @@
                             </p>
                             <p class="searchresultresources">
-                                Resources: 1 written resource, 1 audio file
+                                Resources: <a href="">1 written resource</a>, <a href="">1 audio file</a>
                             </p>
                         </li>
                     </ul>
+                    <div id="searchresultpagination">
+                        &lt;&lt;
+                        &lt;
+                        1
+                        <a href="">2</a>
+                        <a href="">3</a>
+                        <a href="">4</a>
+                        <a href="">5</a>
+                        <a href="">6</a>
+                        <a href="">7</a>
+                        <a href="">8</a>
+                        <a href="">9</a>
+                        <a href="">10</a>
+                        <a href="">&gt;</a>
+                        <a href="">&gt;&gt;</a>
+                    </div>
                 </div>
             </div>

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

@@ -218 +218 @@
 #content
 { text-align: justify;
-  width: 474px; /* used to be 384px  */
-  padding: 26px 9px 15px 9px;
+  width: 483px; /* used to be 384px  */
+  padding: 26px 0px 15px 9px;
   float: left;
   min-height: 500px;

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

@@ -26 +26 @@
     display: block;
     width: 28%;
-    margin: .5em 2%;
-    margin-top: .2em;
-    margin-bottom: .2em;
+    margin: 0 2%;
     float: left;
     overflow: no-content;

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

@@ -35 +35 @@
     border-bottom: 1px solid;
     height: 1em;
+    padding-bottom: .5em;
+}
+
+#searchresultsheader .searchresultpagination {
+    padding: 0;
+    margin: 0;
+    float: right;
+    height: 1em;
 }
 
@@ -40 +48 @@
     float: left;
     height: 1em;
+    width: 30%;
 }
 
 #searchresultpagecount{
-    float: right;
+    float: left;
     height: 1em;
+    width: 30%;
+    text-align: center;
 }
 
 ul#searchresultitems {
     margin: 0;
-    padding: 0;
-    height: 500px;
-    overflow-y: auto;
+    padding: 0 1em 0 0;
+    /*    height: 500px;
+        overflow-y: auto;*/
 }
 
@@ -76 +87 @@
     clear: both;
 }
+
+#searchresultpagination{
+    clear: both;
+    text-align: right;
+}