Changeset 9620 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support/sass/site/_bbpress.scss

Timestamp:

03/23/2020 05:54:51 AM (5 years ago)

Author:

dd32

Message:

Support: Better styling for pagination on smaller screen widths.

Props dufresnesteven, kjellr.
See #2822.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support/sass/site/_bbpress.scss (modified) (6 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support/sass/site/_bbpress.scss

@@ -12 +12 @@
     overflow: inherit;
 }
+
+$paginationBreakPoint: "600px";
 
 .three-up { //3-columns section
@@ -473 +475 @@
         .create-topic {
             font-size: 0.8rem;
-            float: left;
+
+            @media (min-width: $paginationBreakPoint) {
+                float: left;
+            }
 
             &::before {
@@ -488 +493 @@
             float: none;
             width: auto;
+            display: flex;
+            flex-direction: column;
+
+            @media (min-width: $paginationBreakPoint) {
+                float: right;
+                display: inline-block;
+            }
 
             .page-numbers {
@@ -498 +510 @@
                 margin-left: -1px;
                 opacity: 1;
+                flex: 1;
+
+                @media (min-width: $paginationBreakPoint) {
+                    flex: inherit;
+                }
 
                 &:not(.current):not(.dots):hover {
@@ -529 +546 @@
             border: 1px solid #ddd;
         }
+    }
+
+    #bbpress-forums .bbp-pagination-links {
+        display: flex;
+        text-align: center;
+        flex-wrap: wrap;
     }
 
@@ -737 +760 @@
     padding-top: 1rem;
     border-top: 1px solid #eee;
+    clear: both;
 }