Global issues view - pagination, #169

webcompat · Oct 24, 2014 · 80b95ec · 80b95ec
1 parent 8ca1443
commit 80b95ec
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/webcompat/static/css/development/page/issue-list.css b/webcompat/static/css/development/page/issue-list.css
@@ -83,6 +83,22 @@
   background-color:#F0F0F0;
   padding:3em 0 .5em 0;
 }
+/* Pagniation */
+.IssueList-pagination {
+  text-align:right;
+  font-size:1.6rem;
+}
+  .IssueList-pagination-link {
+    display:inline-block;
+    vertical-align:middle;
+    padding: 0.7em 0px;
+    font-weight:700;
+    font-size:1em;
+    margin-top:.2em;
+  }
+  .IssueList-pagination-link + .IssueList-pagination-link {
+    margin-left:1em;
+  }
 
 /* List of issue */
 .IssueList-displayed {

diff --git a/webcompat/templates/issue-list.html b/webcompat/templates/issue-list.html
@@ -27,17 +27,27 @@
     <div class="IssueList-search js-issuelist-search">
       <script type="text/template" id="issuelist-search-tmpl">
       <div class="wc-content">
-        <input type=="text" class="IssueList-search-form mousetrap" placeholder="Search by keyword">
+        <input type="text" class="IssueList-search-form mousetrap" placeholder="Search by keyword">
       </div>
       </script>
     </div>
-    <div class="IssueList-sorting js-issue-sorting">
-      <script type="text/template" id="issuelist-sorting-tmpl">
+    <div class="IssueList-sorting">
       <div class="wc-content">
-        <div class="Dropdown wc-inline-block js-dropdown-wrapper js-dropdown-pagination"></div>
-        <div class="Dropdown wc-inline-block js-dropdown-wrapper js-dropdown-sort"></div>
+        <div class="Grid">
+          <div class="Grid-cell u-size1of2 u-sm-sizeFull">
+            <div class="js-issue-sorting">
+              <script type="text/template" id="issuelist-sorting-tmpl">
+                <div class="Dropdown wc-inline-block js-dropdown-wrapper js-dropdown-pagination"></div>
+                <div class="Dropdown wc-inline-block js-dropdown-wrapper js-dropdown-sort"></div>
+              </script>
+            </div>
+          </div>
+          <div class="Grid-cell u-size1of2 u-sm-sizeFull IssueList-pagination">
+            <a class="IssueList-pagination-link" href="#">previous</a>
+            <a class="IssueList-pagination-link" href="#">next</a>
+          </div>
+        </div>
       </div>
-      </script>
     </div>
     <div class="IssueList-displayed">
       <div class="wc-content js-issue-list">