Merge pull request #76 from oarepo/stojanovic/fe-253-community-member…

…s-layout-issues

fixed members table layout issues

oarepo_communities/ui/communities_components/semantic-ui/less/oarepo_communities/themes/default/collections/table.overrides

@@ -0,0 +1,97 @@
+#community-members-search-root {
+  .ui.table {
+    @media all and (max-width: @largestTabletScreen) {
+      &:not(.unstackable) {
+        thead {
+          display: none !important; // Responsive: header is hidden and data-label is aligned with the table data.
+        }
+
+        tbody {
+          tr {
+            padding-top: 0;
+            padding-bottom: 0;
+            box-shadow: none !important; // overriding !important on .ui.table:not(.unstackable) tr
+
+            &:not(:first-child) {
+              border-top: 1px solid @borderColor;
+            }
+
+            td {
+              border-top: 0px;
+              width: 100% !important;
+              padding: 1rem !important; // overriding !important on .ui.table:not(.unstackable) tr > td
+
+              &:nth-child(2n + 1) {
+                background-color: lighten(@borderColor, 75%);
+              }
+
+              &.right.aligned {
+                &[data-label]::before {
+                  text-align: left;
+                }
+              }
+              &:not(.right.aligned) {
+                text-align: left;
+              }
+
+              &[data-label] {
+                display: inline-grid !important;
+                grid-template-columns: [col1-start] 30% [col2-start] 70% [end];
+
+                &:before {
+                  content: attr(data-label);
+                  font-weight: bold;
+                  margin-right: 1rem;
+                  width: inherit;
+                }
+
+                .ui.fitted.checkbox {
+                  padding-top: 0.2rem;
+                }
+              }
+
+              &.file-upload-pending {
+                width: 100%;
+              }
+            }
+          }
+        }
+
+        tbody,
+        tr,
+        tr > th,
+        tr > td {
+          width: auto;
+          display: block;
+        }
+      }
+    }
+  }
+
+  @media all and (min-width: @computerBreakpoint) {
+    table.fixed-header {
+      height: 47vh; // <-- Select the height of the table
+      display: block;
+      width: 100% !important;
+      tbody {
+        overflow-y: scroll;
+        height: 40vh; //  <-- Select the height of the body
+        width: 98%;
+        position: absolute;
+        tr {
+          width: calc(100% - 0.5em);
+          display: inline-table;
+          table-layout: fixed;
+        }
+      }
+
+      thead {
+        tr {
+          width: 100%;
+          display: inline-table;
+          table-layout: fixed;
+        }
+      }
+    }
+  }
+}

oarepo_communities/ui/communities_components/semantic-ui/less/oarepo_communities/themes/default/elements/button.overrides

@@ -0,0 +1,16 @@
+.ui.button {
+  &.fluid-responsive {
+    @media all and (max-width: @largestTabletScreen) {
+      width: 100%;
+      min-width: 7em;
+      display: block;
+    }
+  }
+  &.fluid-mobile {
+    @media all and (max-width: @largestMobileScreen) {
+      width: 100%;
+      min-width: 7em;
+      display: block;
+    }
+  }
+}