Changeset 13272

Timestamp:

04/16/2022 10:55:58 AM (3 years ago)

Author:

imath

Message:

BP Nouveau: improve group members management screen display in TT2

Edit the Twenty Twenty-Two custom stylesheet to improve how the group members management screen is displayed into this theme.

Fixes #8684 (10.0 branch)

Location:

branches/10.0/src/bp-templates/bp-nouveau

Files:

• css/twentytwentytwo-rtl.css (modified) (2 diffs)
• css/twentytwentytwo.css (modified) (2 diffs)
• sass/twentytwentytwo.scss (modified) (2 diffs)

branches/10.0/src/bp-templates/bp-nouveau/css/twentytwentytwo-rtl.css

@@ -49 +49 @@
 
 7.0 - Tables -  General
+    7.0.1 - Group - Manage Members
 
 8.0 - Classes - Messages, Ajax, Widgets, Buttons, Tooltips
@@ -1442 +1443 @@
 #buddypress.twentytwentytwo table.forum tbody tr.alt {
     background: transparent;
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @subsection 7.0.1 - Group - Manage Members
+*-------------------------------------------------------------------------------
+*/
+#buddypress.twentytwentytwo table#group-members-list-table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+#buddypress.twentytwentytwo table#group-members-list-table a:hover,
+#buddypress.twentytwentytwo table#group-members-list-table a:focus {
+    text-decoration: underline;
+    -webkit-text-decoration-style: dashed;
+    text-decoration-style: dashed;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.25ch;
+}
+
+#buddypress.twentytwentytwo table#group-members-list-table .row-actions a {
+    font-size: 90%;
+}
+
+#buddypress.twentytwentytwo table#group-members-list-table th,
+#buddypress.twentytwentytwo table#group-members-list-table td {
+    padding: 0.5em;
+    border: 1px solid var(--wp--preset--color--primary);
+    word-break: break-all;
+}
+
+#buddypress.twentytwentytwo table#group-members-list-table th.uname-column,
+#buddypress.twentytwentytwo table#group-members-list-table td.uname-column {
+    width: 60%;
+}
+
+#buddypress.twentytwentytwo table#group-members-list-table td img.avatar {
+    display: block;
+    height: calc(2.25 * 1rem);
+    min-height: inherit;
+    width: calc(2.25 * 1rem);
+}
+
+#buddypress.twentytwentytwo table#group-members-list-table td img.alignleft {
+    float: right;
+}
+
+@media screen and (min-width: 46.8em) {
+    #buddypress.twentytwentytwo table#group-members-list-table td img.alignleft {
+        margin-left: calc(2 * 1rem);
+    }
 }
 

branches/10.0/src/bp-templates/bp-nouveau/css/twentytwentytwo.css

@@ -49 +49 @@
 
 7.0 - Tables -  General
+    7.0.1 - Group - Manage Members
 
 8.0 - Classes - Messages, Ajax, Widgets, Buttons, Tooltips
@@ -1442 +1443 @@
 #buddypress.twentytwentytwo table.forum tbody tr.alt {
     background: transparent;
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @subsection 7.0.1 - Group - Manage Members
+*-------------------------------------------------------------------------------
+*/
+#buddypress.twentytwentytwo table#group-members-list-table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+#buddypress.twentytwentytwo table#group-members-list-table a:hover,
+#buddypress.twentytwentytwo table#group-members-list-table a:focus {
+    text-decoration: underline;
+    -webkit-text-decoration-style: dashed;
+    text-decoration-style: dashed;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.25ch;
+}
+
+#buddypress.twentytwentytwo table#group-members-list-table .row-actions a {
+    font-size: 90%;
+}
+
+#buddypress.twentytwentytwo table#group-members-list-table th,
+#buddypress.twentytwentytwo table#group-members-list-table td {
+    padding: 0.5em;
+    border: 1px solid var(--wp--preset--color--primary);
+    word-break: break-all;
+}
+
+#buddypress.twentytwentytwo table#group-members-list-table th.uname-column,
+#buddypress.twentytwentytwo table#group-members-list-table td.uname-column {
+    width: 60%;
+}
+
+#buddypress.twentytwentytwo table#group-members-list-table td img.avatar {
+    display: block;
+    height: calc(2.25 * 1rem);
+    min-height: inherit;
+    width: calc(2.25 * 1rem);
+}
+
+#buddypress.twentytwentytwo table#group-members-list-table td img.alignleft {
+    float: left;
+}
+
+@media screen and (min-width: 46.8em) {
+    #buddypress.twentytwentytwo table#group-members-list-table td img.alignleft {
+        margin-right: calc(2 * 1rem);
+    }
 }
 

branches/10.0/src/bp-templates/bp-nouveau/sass/twentytwentytwo.scss

@@ -61 +61 @@
 
 7.0 - Tables -  General
+    7.0.1 - Group - Manage Members
 
 8.0 - Classes - Messages, Ajax, Widgets, Buttons, Tooltips
@@ -1908 +1909 @@
             tr.alt {
                 background: transparent;
+            }
+        }
+    }
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @subsection 7.0.1 - Group - Manage Members
+*-------------------------------------------------------------------------------
+*/
+
+#buddypress.twentytwentytwo {
+
+    table#group-members-list-table {
+        border-collapse: collapse;
+        width: 100%;
+
+        a:hover,
+        a:focus {
+            text-decoration: underline;
+            text-decoration-style: dashed;
+            text-decoration-thickness: 1px;
+            text-underline-offset: 0.25ch;
+        }
+
+        .row-actions a {
+            font-size: 90%;
+        }
+
+        th,
+        td {
+            padding: 0.5em;
+            border: 1px solid var(--wp--preset--color--primary);
+            word-break: break-all;
+
+            &.uname-column {
+                width: 60%;
+            }
+        }
+
+        td {
+
+            img {
+
+                &.avatar {
+                    display: block;
+                    height: calc(2.25 * 1rem);
+                    min-height: inherit;
+                    width: calc(2.25 * 1rem);
+                }
+
+                &.alignleft {
+                    float: left;
+
+                    @media screen and (min-width: 46.8em) {
+
+                        margin-right: calc(2 * 1rem);
+                    }
+                }
             }
         }