From 54852e226d5f84b39d1628f0d818d018ca352bd3 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Tue, 24 Nov 2020 18:09:27 +0100
Subject: [PATCH] feature: admin-circle-list + table

---
 src/index.pug                          |   4 +-
 src/page-admin.pug                     |   2 +-
 src/styles/base/main.scss              | 240 ++++++++++++-------------
 src/styles/base/table.scss             | 132 +++-----------
 src/views/admin/page-admin-circles.pug |  58 +++---
 5 files changed, 168 insertions(+), 268 deletions(-)

diff --git a/src/index.pug b/src/index.pug
index c778e15..7b05290 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -25,7 +25,7 @@ html(lang="en")
     nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
       include menu-left.pug
 
-    main#viewport.segment.float-left.content.notLoggedIn
+    main#viewport.segment.float-left.notLoggedIn
 
       if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
         #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding
@@ -88,7 +88,7 @@ html(lang="en")
         #resources(hidden, data-view="resources")
           include page-resources.pug
 
-      #admin(hidden, data-view="admin").with-sidebar
+      #admin(hidden, data-view="admin").segment.lg-full.with-sidebar
         include page-admin.pug
 
       #about(data-view="about").no-sidebar.with-padding
diff --git a/src/page-admin.pug b/src/page-admin.pug
index b580127..32af5c6 100644
--- a/src/page-admin.pug
+++ b/src/page-admin.pug
@@ -1,4 +1,4 @@
-.views-container.sidebar-is-closed
+.views-container.sidebar-is-closed.bg-color-white
   if endpoints.circles || (endpoints.get && endpoints.get.circles)
     #admin-circles(hidden, data-view="admin-circles")
       include views/admin/page-admin-circles.pug
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index d5c278b..2ba862f 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -17,6 +17,10 @@
     min-height: -webkit-fill-available;
   }
 
+  main {
+    width: calc(100% - 256px);
+  }
+
   .notLoggedIn {
     visibility: hidden;
   }
@@ -29,6 +33,9 @@
   .align-middle {
     transform: translateY(50%);
   }
+  .box-border {
+    box-sizing: border-box;
+  }
   &.lg-{
     &hidden {
       display: none;
@@ -61,6 +68,13 @@
   &.float-right {
     float: right;
   }
+  &.clearfix::after {
+    content: "";
+    clear: both;
+    display: block;
+    height: 0;
+    width: 100%;
+  }
   &.margin-left {
     margin-left: 20px;
   }
@@ -76,12 +90,22 @@
   &.margin-right {
     margin-right: 20px;
   }
+  &.margin-bottom {
+    margin-bottom: 20px;
+  }
+  &.padding-y-small {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
   &.padding {
     padding: 14px;
   }
   &.padding-large {
     padding: 20px;
   }
+  &.padding-xlarge {
+    padding: 25px;
+  }
 }
 
 .avatar {
@@ -119,6 +143,10 @@
   box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
 }
 
+.bg-color-third {
+  background: var(--color-third);
+}
+
 .bg-color-heading {
   background: var(--color-heading);
 }
@@ -147,6 +175,10 @@
   font-weight: 600;
 }
 
+.text-bolder {
+  font-weight: 700;
+}
+
 .text-normal {
   font-weight: normal;
 }
@@ -155,6 +187,10 @@
   text-transform: uppercase;
 }
 
+.text-underline {
+  text-decoration: underline;
+}
+
 .text-xsmall {
   font-size: 12px;
 }
@@ -164,7 +200,7 @@
 }
 
 .text-large {
-  font-size: 18px;
+  font-size: 16px;
 }
 
 .text-xlarge {
@@ -205,6 +241,14 @@
   letter-spacing: 0.38px;
 }
 
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
 
 .logo {
   height: 34px;
@@ -446,10 +490,10 @@ nav {
 /* Custom scrollbar of the table */
 .table-wrapper {
   scrollbar-width: thin;
-  scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background);
+  scrollbar-color: var(--color-heading) var(--color-grey);
 
   &::-webkit-scrollbar-track {
-    background-color: var(--color-scrollbar-table-background);
+    background-color: var(--color-grey);
     border-radius: 10px;
   }
 
@@ -458,17 +502,17 @@ nav {
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: var(--color-scrollbar-table-track);
+    background-color: var(--color-heading);
     border-radius: 10px;
   }
 }
 
 /* Quick fix. Will be removed later */
-#admin-circles,
+/*#admin-circles,
 #admin-projects,
 #admin-users {
   display: contents;
-}
+}*/
 
 [hidden],
 .hidden {
@@ -488,54 +532,10 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: bold;
-
-  /*span {
-    font-weight: 400;
-    padding-left: 0.85rem;
-
-    &:before {
-      content: '// ';
-    }
-  }*/
-}
-
-h1, .h1-like {
-  color: var(--color-h1);
-  font-size: 2rem;
-  text-transform: uppercase;
-
-  &.without-margin {
-    margin: 0;
-  }
-}
-
-h2, .h2-like {
-  color: var(--color-h2);
-  font-size: 1.8rem;
-  text-transform: uppercase;
-}
-
-.h2-like {
-  display: block;
-  margin: 14.94px 0;
-  width: 100%;
-}
-
-h3 {
-  color: var(--color-title);
-  font-size: 1.7rem;
+  color: var(--color-heading);
   margin: 0;
 }
 
-h4 {
-  font-size: 1.2rem;
-}
-
-h5 {
-  font-size: 2rem;
-}
-
 .avatar {
   align-items: center;
   background-color: var(--color-avatar-background);
@@ -678,17 +678,17 @@ h5 {
 }
 
 .content-box {
-  @include window-style-modal();
-  flex-direction: column;
+  /*@include window-style-modal();*/
+  /*flex-direction: column;
   flex-grow: 1;
-  margin: 2rem 1rem 5rem 2rem;
+  margin: 2rem 1rem 5rem 2rem;*/
 
   &.full-width {
-    background: var(--color-white);
+    /*background: var(--color-white);
     flex: 1;
-    font-size: 1.6rem;
-    margin: 0 auto;
-    min-height: 100%;
+    font-size: 1.6rem;*/
+    /*margin: 0 auto;*/
+    /*min-height: 100%;*/
   }
 }
 
@@ -764,7 +764,7 @@ h5 {
   min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */
 
   @include breakpoint(lg) {
-    min-height: calc(100vh - 83px - 84px);
+    min-height: calc(100vh - 72px - 78.88px);
   }
 }
 
@@ -823,9 +823,9 @@ h5 {
     margin-bottom: 20px;
     /* end */
 
-    @include breakpoint(lg) {
+    /*@include breakpoint(lg) {
       margin-top: 0;
-    }
+    }*/
   }
 
   solid-ac-checker,
@@ -931,13 +931,18 @@ a,
   display: inline-block;
   padding: 0;
 
+  /* fix to prevent `form` element to act as a block so your text will go under your icon */
+  form {
+    display: contents;
+  }
+
   &.button {
-    padding: 0.55rem 2.5rem;
+    padding: 5.5px 25px;
     border-radius: 100em;
 
     *,
     & {
-      font-size: 1.4rem;
+      font-size: 12px;
     }
 
     &.mobile-full-width {
@@ -977,14 +982,6 @@ a,
       }
     }
 
-    &.text-bold {
-
-      *,
-      & {
-        font-weight: bold;
-      }
-    }
-
     &.text-uppercase {
 
       *,
@@ -992,11 +989,17 @@ a,
         text-transform: uppercase;
       }
     }
+    &.text-bolder {
 
+      *,
+      & {
+        font-weight: 700;
+      }
+    }
     &.rounded {
       border-radius: 50%;
-      font-size: 1.8rem;
-      padding: 1rem;
+      font-size: 18px;
+      padding: 10px;
       height: 42px;
       width: 42px;
       display: flex;
@@ -1018,23 +1021,20 @@ a,
       }
     }
 
-    &.with-icon::before {
-      font-size: 1.6rem;
-      margin-right: 1rem;
+    &.icon::before {
+      font-size: 15px;
+      margin-right: 10px;
     }
-
     &.button-primary{
-      background-color: var(--color-white);
+      background-color: white;
 
       *,
       & {
         color: var(--color-primary);
       }
-
       &.bordered {
         border: 1px solid var(--color-primary);
       }
-
       &:hover {
         background-color: var(--color-primary);
 
@@ -1044,155 +1044,139 @@ a,
         }
       }
     }
-
     &.button-disabled{
       cursor: not-allowed;
-      background-color: var(--color-white);
+      background-color: white;
 
       *,
       & {
-        color: var(--color-grey-3);
+        color: var(--color-grey);
       }
-
       &.bordered {
-        border: 1px solid var(--color-grey-3);
+        border: 1px solid var(--color-grey);
       }
-
       &:hover {
-        background-color: var(--color-white);
+        background-color: white;
 
         *,
         & {
-          color: var(--color-grey-3);
+          color: var(--color-grey);
         }
       }
     }
-
     &.button-secondary {
-      background-color: var(--color-white);
+      background-color: white;
 
       *,
       & {
         color: var(--color-secondary);
       }
-
       &.bordered {
         border: 1px solid var(--color-secondary);
       }
-
       &:hover {
         background-color: var(--color-secondary);
 
         *,
         & {
-          color: var(--color-white);
+          color: white;
         }
       }
     }
+    &.button-third {
+      color: var(--color-third);
+      background-color:white;
 
-    &.button-complementary {
-      color: var(--color-complementary);
-      background-color: var(--color-white);
-
+      *,
+      & {
+        color: var(--color-third);
+      }
       &.bordered {
-        border: 1px solid var(--color-complementary);
+        border: 1px solid var(--color-third);
       }
-
       &:hover {
-        background-color: var(--color-complementary);
-        color: var(--color-white);
+        background-color: var(--color-third);
+        
+        *,
+        & {
+          color: white;
+        }
       }
     }
-
-    &.flex {
-      display: flex;
-    }
-
     &.reversed {
       &.button-primary {
         background-color: var(--color-primary);
 
         *,
         & {
-          color: var(--color-white);
+          color: white;
         }
-
         &:hover {
-          background-color: var(--color-white);
-          color: var(--color-primary);
+          background-color: white;
 
           *,
           & {
             color: var(--color-primary);
           }
-
           &.bordered {
             border: 1px solid var(--color-primary);
           }
         }
       }
-
       &.button-disabled{
         cursor: not-allowed;
-        background-color: var(--color-grey-3);
+        background-color: var(--color-grey);
   
         *,
         & {
-          color: var(--color-white);
+          color: white;
         }
-  
         &.bordered {
-          border: 1px solid var(--color-white);
+          border: 1px solid white;
         }
-  
         &:hover {
-          background-color: var(--color-grey-3);
+          background-color: var(--color-grey);
   
           *,
           & {
-            color: var(--color-white);
+            color: white;
           }
         }
       }
-
       &.button-secondary {
         background-color: var(--color-secondary);
 
         *,
         & {
-          color: var(--color-white);
+          color: white;
         }
-
         &:hover {
-          background-color: var(--color-white);
+          background-color: white;
 
           *,
           & {
             color: var(--color-secondary);
           }
-
           &.bordered {
             border: 1px solid var(--color-secondary);
           }
         }
       }
-
       &.button-complementary {
         background-color: var(--color-complementary);
 
         *,
         & {
-          color: var(--color-white);
+          color: white;
         }
 
         &:hover {
-          background-color: var(--color-white);
+          background-color: white;
 
           *,
           & {
             color: var(--color-complementary);
           }
-
           &.bordered {
             border: 1px solid var(--color-complementary);
           }
diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss
index c6b7e37..0e5fc1a 100644
--- a/src/styles/base/table.scss
+++ b/src/styles/base/table.scss
@@ -4,7 +4,7 @@
   overflow: auto;
   position: relative;
   width: 100%;
-  margin-bottom: 6rem;
+  margin-bottom: 60px;
 
   @include breakpoint(lg) {
     margin-bottom: 0;
@@ -13,7 +13,6 @@
   .table {
     border-collapse: collapse;
     display: table;
-    margin-bottom: 20px;
     overflow: auto;
     table-layout: fixed;
     width: 100%;
@@ -24,15 +23,31 @@
     display: table-header-group;
     text-align: center;
     vertical-align: middle;
+    border-top: 1px solid #C9C8C8;
+    border-left: 1px solid #C9C8C8;
+    background: var(--color-third);
+    color: var(--color-heading);
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 0.25px;
 
-    &>div {
+    &>.table-cell {
       display: table-cell;
+      height: 50px;
+      text-align: center;
+      vertical-align: middle;
+      border-right: 1px solid white;
       white-space: nowrap;
+
+      &:last-child {
+        border-right: 1px solid #C9C8C8;
+      }
     }
   }
 
   .table-body {
     display: table-row-group;
+    border-left: 1px solid #C9C8C8;
 
     &>div {
       display: contents;
@@ -43,11 +58,13 @@
         &>div {
           display: contents;
 
-          &>* {
-            border-bottom: 1px solid var(--color-table-border);
+          &>.table-cell {
+            border-bottom: 1px solid #C9C8C8;
+            border-right: 1px solid #C9C8C8;
             display: table-cell;
             text-align: center;
             vertical-align: middle;
+            height: 64px;
           }
           solid-multiple[name="user.communities"] {
             text-align: left;
@@ -79,42 +96,12 @@
 
 /* Styles of the table and its elements */
 
-.table {
-  border-left: 1px solid var(--color-table-border);
-  border-right: 1px solid var(--color-table-border);
-}
-
-.table-header {
-  font-size: 1.6rem;
-  font-weight: 600;
-
-  &.grey-color {
-    background: var(--color-table-header-background);
-    color: var(--color-table-header-text);
-  }
-
-  >*:not(:last-child) {
-    border-right: 1px solid var(--color-white);
-    padding: 2.1rem 0;
-    text-align: center;
-  }
-}
-
-.table-body,
-.table-header {
-
-  .border {
-    border-right: 1px solid var(--color-table-border);
-  }
-}
-
 .table-body,
 .table-header {
 
   /* Fix. Could disappear when we can add .class on set fields */
   [name^='cell-1'] {
     @extend .w280;
-    @extend .border;
   }
 
   .w280 {
@@ -148,37 +135,6 @@
 
 /* Styles of specific cells */
 
-.cell-with-buttons {
-  text-align: center;
-
-  [name='button'] {
-
-    input[type='submit'] {
-      @extend
-      .button,
-      .text-bold,
-      .text-uppercase,
-      .reversed,
-      .button-secondary,
-      .bordered,
-      .desktop-btn-margin__left;
-    }
-  }
-
-  &.is-spaced {
-    padding: 0.8rem 2.2rem;
-  }
-}
-
-.cell-with-name {
-  color: var(--color-secondary);
-  font-weight: 600;
-  padding-left: 2rem;
-  text-align: left;
-}
-
-/* Styles of elements inside cells */
-
 .table {
   
   .user-thumb.is-spaced,
@@ -188,47 +144,5 @@
 }
 
 .table solid-ac-checker {
-  text-align: center;
-}
-
-.circle-join {
-  position: relative;
-  width: 181px;
-  margin: 0 auto;
-  min-width: 181px;
-
-  input {
-    height: 29px;
-    left: -1px;
-    position: absolute;
-    top: -1px;
-    width: 102%;
-    padding-left: 14px !important;
-  }
-
-  &.button.with-icon::before {
-    margin-left: 6px;
-  }
-}
-
-.circle-leave {
-  position: relative;
-  width: 164px;
-  margin: 0 auto;
-  min-width: 164px;
-
-  &>button {
-    height: 29px;
-    padding-left: 13px;
-    position: absolute;
-    left: 1px;
-    top: -1px;
-    width: 106%;
-  }
-
-  &.button.with-icon::before {
-    font-size: 1.6rem;
-    margin-right: 2rem !important;
-    margin-left: -50px;
-  }
+  /*text-align: center;*/
 }
diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug
index c9b5965..d006470 100644
--- a/src/views/admin/page-admin-circles.pug
+++ b/src/views/admin/page-admin-circles.pug
@@ -1,12 +1,14 @@
-.content-box.flex.full-width.with-form
+.content-box.full-width.with-form
   solid-router(default-route='admin-circle-list', hidden)
     solid-route(name='admin-circle-list')
     solid-route(name='admin-circle-create')
     solid-route(name='circle-left')
 
-  div.content-box__header.flex.space-between
-    h1.without-margin(data-trans='circle.list.title')
-    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile')
+  div.segment.padding-xlarge.border-bottom
+    div
+      h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
+    div.segment.lg-hidden
+      button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile')
 
   include ../circle/page-circle-left.pug
 
@@ -27,30 +29,29 @@
         )
 
 
-    div.content-box__info.flex
-
-      div.admin-header.flex
-
-        h3(data-trans='circle.list.subTitle')
-
-        solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
-          solid-link(
-            class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
-            next='admin-circle-create' data-trans='circle.list.buttonCreate'
-          )
+    div.segment.padding-xlarge
+      div.segment.padding-y-small.margin-bottom.clearfix
+        div.segment.lg-half.float-left
+          h3.text-large.text-bold.text-letter-spacing-large(data-trans='circle.list.subTitle')
+        div.segment.lg-half.float-left.text-right
+          solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
+            solid-link(
+              class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-plus'
+              next='admin-circle-create' data-trans='circle.list.buttonCreate'
+            )
 
       .table-wrapper
-        .table
+        .table.segment.margin-bottom
 
-          div.table-header.grey-color
-            div.w280(data-trans='circle.list.tableHeader1')
-            div.w280(data-trans='circle.list.tableHeader2')
-            div.w280(data-trans='circle.list.tableHeader3')
+          div.table-header
+            div.table-cell.w280(data-trans='circle.list.tableHeader1')
+            div.table-cell.w280(data-trans='circle.list.tableHeader2')
+            div.table-cell.w280(data-trans='circle.list.tableHeader3')
 
           solid-widget(name='hubl-admin-circle-leave-button')
             template
               solid-delete(
-                class='circle-leave button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+                class='button text-bolder text-uppercase button-secondary bordered icon icon-close'
                 data-src="${src}"
                 data-label=''
                 data-trans='data-label=circle.list.buttonQuit'
@@ -70,9 +71,9 @@
             fields='circle.name, circle.owner, leaveButton'
             loader-id='loader-admin-circles'
 
-            class-circle.name='w280 border cell-with-name'
-            class-circle.owner='w280 border cell-with-id-card'
-            class-leaveButton='w280 border cell-with-buttons is-spaced'
+            class-circle.name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline'
+            class-circle.owner='table-cell w280 cell-with-id-card'
+            class-leaveButton='table-cell w280'
 
             action-leaveButton="joinButton"
             widget-leaveButton="hubl-admin-circle-leave-button"
@@ -83,7 +84,8 @@
 
           solid-widget(name='hubl-admin-circle-join-button')
             template
-              solid-form.circle-join.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
+              solid-form(
+                class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-arrow-right-circle'
                 data-src='${value}'
 
                 fields='user.username'
@@ -107,11 +109,11 @@
             fields='name, owner, members'
             loader-id='loader-admin-circles'
 
-            class-name='w280 border cell-with-name'
-            class-owner='w280 border cell-with-id-card'
+            class-name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline'
+            class-owner='table-cell w280 border cell-with-id-card'
             widget-owner='hubl-circle-owner'
 
-            class-members='w280 border cell-with-buttons is-spaced'
+            class-members='table-cell w280'
             widget-members="hubl-admin-circle-join-button"
 
             order-by="name"