Merge pull request #2358 from weseek/imprv/confidential-layout

Imprv/confidential layout

src/client/js/components/Navbar/PageCreateButton.jsx

@@ -18,9 +18,9 @@ const PageCreateButton = (props) => {
   }
 
   return (
-    <button className="nav-link create-page border-0 bg-transparent" type="button" onClick={appContainer.openPageCreateModal}>
+    <button className="px-md-2 nav-link create-page border-0 bg-transparent" type="button" onClick={appContainer.openPageCreateModal}>
       <i className="icon-pencil mr-2"></i>
-      <span>{ t('New') }</span>
+      <span className="d-none d-lg-block">{ t('New') }</span>
     </button>
   );
 };

src/client/js/components/Navbar/PersonalDropdown.jsx

@@ -85,8 +85,8 @@ const PersonalDropdown = (props) => {
       {/* Button */}
       {/* remove .dropdown-toggle for hide caret */}
       {/* See https://stackoverflow.com/a/44577512/13183572 */}
-      <a className="nav-link waves-effect waves-light" data-toggle="dropdown">
-        <UserPicture user={user} noLink noTooltip /><span className="d-none d-sm-inline-block">&nbsp;{user.name}</span>
+      <a className="px-md-2 nav-link waves-effect waves-light" data-toggle="dropdown">
+        <UserPicture user={user} noLink noTooltip /><span className="d-none d-lg-inline-block">&nbsp;{user.name}</span>
       </a>
 
       {/* Menu */}

src/client/styles/scss/_navbar.scss

@@ -1,4 +1,5 @@
 .grw-navbar {
+  max-height: 52px;
   border-top: 0;
   border-right: 0;
   border-bottom: $grw-navbar-border-width solid;
@@ -21,6 +22,7 @@
 
   .nav-link,
   .nav-item.confidential {
+    @include variable-font-size(14px);
     display: flex;
     align-items: center;
     min-height: $grw-navbar-height;
@@ -37,6 +39,12 @@
     }
   }
   .nav-item.confidential {
+    max-width: 120px;
+    @include media-breakpoint-only(md) {
+      max-width: 100px;
+    }
+    max-height: 52px;
+    overflow: hidden;
     background: rgba(0, 0, 0, 0.2);
   }
 

src/server/views/layout/layout.html

@@ -105,7 +105,12 @@
       {% endif %}
 
       {% if getConfig('crowi', 'app:confidential') %}
-      <li class="nav-item confidential text-light">{{ getConfig('crowi', 'app:confidential') }}</li>
+        <li class="nav-item confidential text-light">
+          <i class="icon-info d-md-none" data-toggle="tooltip" title="{{ getConfig('crowi', 'app:confidential') }}"></i>
+          <span class="d-none d-md-inline">
+            {{ getConfig('crowi', 'app:confidential') }}
+          </span>
+        </li>
       {% endif %}
     </ul>