navbar styles, two things still need to be refactored

datawrapper · Sep 6, 2021 · 2ba428f · 2ba428f
1 parent c319887
commit 2ba428f
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
         "@babel/core": "^7.12.10",
         "@babel/preset-env": "^7.12.11",
         "@datawrapper/chart-core": "^8.41.1",
-        "@datawrapper/icons": "^1.5.1",
+        "@datawrapper/icons": "^1.5.2",
         "@datawrapper/locales": "^1.2.6",
         "@datawrapper/orm": "^3.25.0",
         "@datawrapper/schemas": "^1.12.1",

diff --git a/src/styles/customize.scss b/src/styles/customize.scss
@@ -14,7 +14,12 @@
 }
 
 
-// Navbar
+/*
+ * Navbar
+ */
+
+
+ // Navbar touch sizes adjustment
 
 @include touch {
   .navbar-menu {
@@ -31,6 +36,7 @@
   }
 }
 
+// Navbar dekstop sizes adjustments
 
 @include desktop {
     .navbar-item.has-dropdown .navbar-item.has-dropdown .navbar-dropdown {
@@ -43,4 +49,15 @@
   .navbar-item.has-dropdown .navbar-item.has-dropdown:hover .navbar-dropdown {
       display: block;
   }
+
+  // hide label for burger menu on desktop @@ needs to be refactored
+  .navbar-end>.navbar-item:last-child>.navbar-link { 
+    .navbar-title {
+      display: none;
+    }
+    .icon {
+      font-size: 30px;
+      margin-right: 0;
+    }
+  }
 }
diff --git a/src/utils/header-links.js b/src/utils/header-links.js
@@ -90,15 +90,15 @@ module.exports = {
                 // },
                 ...(isGuest
                     ? [
-                          {
-                              type: 'separator',
-                              order: 69
-                          },
                           {
                               svgIcon: 'sign-in',
                               title: 'Sign in',
                               type: 'login',
                               url: `/signin?ref=${request.path}`
+                          },
+                          {
+                              type: 'separator',
+                              order: 69
                           }
                       ]
                     : [
@@ -117,8 +117,8 @@ module.exports = {
                     id: 'settings',
                     svgIcon: 'menu',
                     title: 'More',
-                    style: 'something',
-                    svgIconSize: '30px',
+                    style: '', // need a class here instead of inline style
+                    // svgIconSize: '30px',
                     // svgIconCrisp: true,
                     order: 95,
                     submenuItems: [

diff --git a/src/views/layout/partials/SvgIcon.svelte b/src/views/layout/partials/SvgIcon.svelte
@@ -1,6 +1,6 @@
 <script>
     export let icon = 'api';
-    export let size = '1em';
+    export let size = '1em'; // need to refactor this
     export let color = 'currentColor';
     export let valign = 'sub';
     export let crisp = false;
@@ -15,11 +15,11 @@
 <span
     class="icon {className}"
     class:spin
-    style="height:{size}; width:{size}; vertical-align: {valign}; {spin
+    style="vertical-align: {valign}; {spin
         ? `animation-duration:${duration};  animation-timing-function: ${timing};`
         : ''}"
 >
-    <svg style="height:{size}; width:{size}" class="svg-{icon}-dims" class:crisp>
+    <svg class="svg-{icon}-dims" class:crisp>
         <use style="fill: {color}" xlink:href="/lib/icons/symbol/svg/sprite.symbol.svg#{icon}" />
     </svg>
 </span>
@@ -39,4 +39,12 @@
     .crisp {
         shape-rendering: crispEdges;
     }
+
+    :global(.icon) {
+        font-size: 1em;
+    }
+    .icon svg {
+        width: 1em;
+        height: 1em;
+    }
 </style>
diff --git a/src/views/layout/partials/header/NavBar.svelte b/src/views/layout/partials/header/NavBar.svelte
@@ -55,7 +55,7 @@
                         class:is-arrowless={link.type !== 'visArchive'}
                     >
                         <NavBarIcon item={link} />
-                        <span>{@html link.title || ''}</span></a
+                        <span class="navbar-title">{@html link.title || ''}</span></a
                     >
                     <!-- navbar dropdown menu -->
                     <div class="navbar-dropdown is-right is-boxed">
@@ -97,7 +97,9 @@
                                                 style={subItem2.style}
                                             >
                                                 <NavBarIcon item={subItem2} />
-                                                <span>{@html subItem2.title}</span>
+                                                <span class="navbar-title"
+                                                    >{@html subItem2.title}</span
+                                                >
                                             </a>
                                         {/each}
                                     </div>
@@ -108,7 +110,7 @@
                                     href={subItem.url}
                                     on:click={event => onNavItemClick(event, subItem)}
                                     ><NavBarIcon item={subItem} />
-                                    <span>{@html subItem.title || ''}</span></a
+                                    <span class="navbar-title">{@html subItem.title || ''}</span></a
                                 >
                             {/if}
                         {/each}

diff --git a/src/views/layout/partials/header/NavBarIcon.svelte b/src/views/layout/partials/header/NavBarIcon.svelte
@@ -4,7 +4,7 @@
 </script>
 
 {#if item.svgIcon}<SvgIcon
-        size={item.svgIconSize || '20px'}
+        size={item.svgIconSize}
         crisp={!!item.svgIconCrisp}
         valign="top"
         icon={item.svgIcon}
@@ -15,5 +15,6 @@
     :global(.navbar-item .icon) {
         margin-right: 1ex;
         color: var(--color-dw-scooter);
+        font-size: 20px;
     }
 </style>
diff --git a/src/views/layout/partials/header/TeamSelect.svelte b/src/views/layout/partials/header/TeamSelect.svelte
@@ -34,7 +34,7 @@
                 icon="team{team.active ? '-check' : ''}"
                 size="20px"
             />
-            <span>{team.name}</span>
+            <span class="navbar-title">{team.name}</span>
         </a>
     {/each}
     <a
@@ -48,7 +48,7 @@
             icon="user{!$user.activeTeam ? '-check' : ''}"
             size="20px"
         />
-        <span>{@html __('navbar / teams / no-team')}</span>
+        <span class="navbar-title">{@html __('navbar / teams / no-team')}</span>
     </a>
 {:else}
     <a class="navbar-item has-text-weight-normal" href="/account/teams">

diff --git a/src/views/layout/partials/header/VisArchive.svelte b/src/views/layout/partials/header/VisArchive.svelte
@@ -40,18 +40,18 @@
         class:is-arrowless={link.type !== 'visArchive'}
     >
         <NavBarIcon item={link} />
-        <span>{@html link.title || ''}</span></a
+        <span class="navbar-title">{@html link.title || ''}</span></a
     >
 
     <div class="navbar-dropdown is-right is-boxed">
         {#if !items.length}
-            <div class="has-text-grey is-size-7 has-text-centered">
+            <div class=" navbar-item has-text-grey is-size-7 has-text-centered">
                 <SvgIcon
                     valign="middle"
                     icon="loading-spinner"
                     timing="steps(12)"
                     duration="1s"
-                    className="mr-2 is-size-6"
+                    className="mr-2 is-size-6 has-text-grey"
                     spin
                 /> loading...
             </div>

diff --git a/static/datawrapper.css b/static/datawrapper.css
@@ -7719,6 +7719,9 @@ html {
   width: 0.5em;
   height: 0.5em; }
 
+/*
+ * Navbar
+ */
 @media screen and (max-width: 1023px) {
   .navbar-menu .navbar-item:not(:last-child), .navbar-menu .navbar-link {
     border-radius: 0;
@@ -7735,4 +7738,9 @@ html {
     top: -6px;
     display: none; }
   .navbar-item.has-dropdown .navbar-item.has-dropdown:hover .navbar-dropdown {
-    display: block; } }
+    display: block; }
+  .navbar-end > .navbar-item:last-child > .navbar-link .navbar-title {
+    display: none; }
+  .navbar-end > .navbar-item:last-child > .navbar-link .icon {
+    font-size: 30px;
+    margin-right: 0; } }