Merge pull request #3022 from weseek/imprv/page-accessories-layout

Imprv/page accessories layout

src/client/js/components/CustomNavigation.jsx

@@ -64,9 +64,9 @@ export const CustomNav = (props) => {
   }, [activeTab, navTabRefs, navTabMapping]);
 
   return (
-    <>
+    <div className="grw-custom-nav">
       <div ref={navContainer}>
-        <Nav className="nav-title grw-custom-navbar" id="grw-custom-navbar">
+        <Nav className="nav-title">
           {Object.entries(navTabMapping).map(([key, value]) => {
 
             const isActive = activeTab === key;
@@ -87,7 +87,7 @@ export const CustomNav = (props) => {
         </Nav>
       </div>
       <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
-    </>
+    </div>
   );
 
 };

src/client/js/components/NotFoundPage.jsx

@@ -26,7 +26,7 @@ const NotFoundPage = (props) => {
   };
 
   return (
-    <div className="grw-custom-navigation mt-5 on-edit">
+    <div className="mt-5 d-edit-none">
       <CustomNavigation navTabMapping={navTabMapping} />
     </div>
   );

src/client/js/components/PageAccessoriesModalControl.jsx

@@ -19,7 +19,7 @@ const PageAccessoriesModalControl = (props) => {
   const { t, pageAccessoriesContainer, isGuestUserMode } = props;
 
   return (
-    <div className="grw-page-accessories-control d-flex align-items-end pb-1">
+    <div className="grw-page-accessories-control d-flex align-items-center pb-1">
       <button
         type="button"
         className="btn btn-link grw-btn-page-accessories"
@@ -66,6 +66,9 @@ const PageAccessoriesModalControl = (props) => {
           {t('Not available for guest')}
         </UncontrolledTooltip>
       )}
+
+      <span className="border-left grw-border-vr mx-1">&nbsp;</span>
+
       <SeenUserInfo />
     </div>
   );

src/client/js/components/TrashPageList.jsx

@@ -19,7 +19,7 @@ const TrashPageList = (props) => {
   };
 
   return (
-    <div className="grw-custom-navigation mt-5">
+    <div className="mt-5 d-edit-none">
       <CustomNavigation navTabMapping={navTabMapping} />
     </div>
   );

src/client/js/components/User/SeenUserInfo.jsx

@@ -20,7 +20,7 @@ const SeenUserInfo = (props) => {
   const toggle = () => setPopoverOpen(!popoverOpen);
   const { pageContainer } = props;
   return (
-    <div className="grw-seen-user-info ml-1 pl-1">
+    <div className="grw-seen-user-info">
       <Button id="po-seen-user" color="link" className="px-2">
         <span className="mr-1 footstamp-icon"><FootstampIcon /></span>
         <span className="seen-user-count">{pageContainer.state.countOfSeenUsers}</span>

src/client/styles/scss/_navbar.scss

@@ -76,14 +76,25 @@
   }
 }
 
-.grw-custom-navigation {
+.grw-custom-nav {
+  .nav-title {
+    flex-wrap: nowrap;
+  }
+
+  .nav-link {
+    padding: 1rem 1.5rem;
+
+    svg {
+      width: 17px;
+      height: 17px;
+      margin-right: 5px;
+      vertical-align: text-bottom;
+    }
+  }
+
   .grw-nav-slide-hr {
-    border-bottom: 2px solid;
+    border-top: 0rem;
+    border-bottom: 3px solid;
     transition: 0.3s ease-in-out;
   }
-  .nav-link svg {
-    width: 17px;
-    height: 17px;
-    margin-right: 5px;
-  }
 }

src/client/styles/scss/_on-edit.scss

@@ -56,11 +56,6 @@ body.on-edit {
     }
   }
 
-  // hide when Editor
-  .grw-custom-navigation {
-    display: none;
-  }
-
   // hide unnecessary elements
   .d-edit-none {
     display: none !important;

src/client/styles/scss/_page-accessories-control.scss

@@ -1,16 +1,22 @@
 .grw-page-accessories-control {
   flex-wrap: wrap;
   line-height: 1.25;
+  border-bottom: 1px solid transparent;
 
   .grw-btn-page-accessories {
-    width: 35px;
-    height: 35px;
+    padding: 0.375rem 0.5rem;
+    margin: 0 0.2rem;
+
     svg {
       width: 16px;
       height: 16px;
     }
   }
 
+  .grw-border-vr {
+    height: 25px;
+  }
+
   .seen-user-count {
     font-size: 12px;
     font-weight: bolder;

src/client/styles/scss/_page_accessaries_modal.scss

@@ -1,30 +1,10 @@
 .grw-page-accessories-modal {
-  .nav-title {
-    flex-wrap: nowrap;
-
-    li {
-      a.nav-link {
-        padding: 1rem 1.5rem;
-      }
-    }
-  }
   .modal-header {
     button.close {
       margin: auto 0rem auto auto;
     }
   }
 
-  .grw-nav-slide-hr {
-    border-top: 0rem;
-    border-bottom: 3px solid;
-    transition: 0.3s ease-in-out;
-  }
-  .nav-link svg {
-    width: 17px;
-    height: 17px;
-    margin-right: 5px;
-  }
-
   .grw-modal-body-style {
     max-height: calc(100vh - 100px);
   }

src/client/styles/scss/theme/_apply-colors.scss

@@ -327,47 +327,31 @@ ul.pagination {
   border-color: $bordercolor-toc;
 }
 
-.grw-custom-navigation {
-  .nav-title {
-    color: $color-link;
-  }
-  .nav-link svg {
-    fill: $color-link;
-  }
-  .grw-nav-slide-hr {
-    border-color: $color-link;
-  }
-}
+.grw-custom-nav {
+  .nav-item {
+    .nav-link {
+      color: $color-link;
+      svg {
+        fill: $color-link;
+      }
 
-.grw-page-accessories-modal {
-  .nav-title {
-    color: $color-link;
+      // Disabled state lightens text
+      &.disabled {
+        color: $nav-link-disabled-color;
+        svg {
+          fill: $nav-link-disabled-color;
+        }
+      }
+    }
   }
+
   .modal-header {
     button.close {
       color: $secondary;
     }
   }
 
-  .modal-title {
-    position: relative;
-  }
-
-  .nav-link {
-    &:hover {
-      background-color: rgba($link-color, 0.08);
-    }
-  }
-  .nav-link svg {
-    fill: $color-link;
-  }
-  .modal-split-hr {
-    background-color: $bordercolor-nav-tabs;
-  }
-
   .grw-nav-slide-hr {
-    position: absolute;
-    bottom: 0px;
     border-color: $color-link;
   }
 }

src/client/styles/scss/theme/_reboot-bootstrap-nav.scss

@@ -5,6 +5,16 @@
 //
 //
 
+.nav-link {
+  // Disabled state lightens text
+  &.disabled {
+    color: $nav-link-disabled-color;
+    svg {
+      fill: $nav-link-disabled-color;
+    }
+  }
+}
+
 //
 // Tabs
 //