Merge pull request #2520 from /issues/2512

Fixes #2512 - Use flexbox for sorting area
webcompat · Jun 27, 2018 · a0dde5e · a0dde5e
2 parents 011183b + 96c09b7
commit a0dde5e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/webcompat/static/css/src/issues-list.css b/webcompat/static/css/src/issues-list.css
@@ -1,3 +1,20 @@
+.issue-controls {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}
+
+.issue-controls > .grid-cell {
+  flex: 1 0 100%;
+  min-width: 0;
+}
+
+@media screen and (min-width: 665px) {
+  .issue-controls > .grid-cell {
+    flex: 1 0 auto;
+  }
+}
+
 .issues-list .issue {
   border-bottom: 5px solid var(--color-bg-page);
 }

diff --git a/webcompat/static/css/src/pagination.css b/webcompat/static/css/src/pagination.css
@@ -24,4 +24,5 @@
 
 .pagination .pagination-next {
   float: right;
+  margin-left: 40px;
 }
diff --git a/webcompat/templates/list-issue.html b/webcompat/templates/list-issue.html
@@ -11,14 +11,14 @@
     </section>
 
     <section class="grid">
-      <div class="grid-row sorting">
-        <div class="grid-cell x1 js-SearchIssue-sorting">
+      <div class="grid-row sorting issue-controls">
+        <div class="grid-cell js-SearchIssue-sorting">
           {% include "list-issue/issuelist-sorting.jst" %}
         </div>
-        <div class="grid-cell x1 nav-right js-SearchForm">
+        <div class="grid-cell nav-right js-SearchForm">
           {% include "list-issue/issuelist-search.jst" %}
         </div>
-        <div class="grid-cell x1 pagination">
+        <div class="grid-cell pagination">
           <div class="js-Pagination-controls">
             {% include "web_modules/pagination.html" %}
           </div>