luxolus
/
open-nomad
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

Refactor navbar markup

This commit is contained in:
Michael Lange 2018-07-26 11:58:38 -07:00
parent f2f8c28a91
commit ed4dcbe061
5 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/app/templates/components/freestyle/sg-header.hbs
View File

@ -1,8 +1,11 @@
{{#freestyle-usage "header" title="Global Header"}}
<nav class="navbar is-primary">
<div class="navbar-brand">
<span class="gutter-toggle" aria-label="menu">
{{partial "partials/hamburger-menu"}}
</span>
<span class="navbar-item is-logo">
<img src="/ui/images/nomad-logo.svg" alt="Nomad" />
{{partial "partials/nomad-logo"}}
</span>
</div>
<div class="navbar-end">

10
ui/app/templates/components/global-header.hbs
View File

@ -1,14 +1,10 @@
<nav class="navbar is-primary">
<div class="navbar-brand">
<span class="navbar-gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="16" />
<rect x="0" y="42" width="100" height="16" />
<rect x="0" y="84" width="100" height="16" />
</svg>
<span class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
{{partial "partials/hamburger-menu"}}
</span>
<span class="navbar-item is-logo">
<img src="/ui/images/nomad-logo.svg" alt="Nomad" />
{{partial "partials/nomad-logo"}}
</span>
</div>
<div class="navbar-end">

5
ui/app/templates/partials/hamburger-menu.hbs Normal file
View File

@ -0,0 +1,5 @@
<svg class="hamburger-menu" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="16" />
<rect x="0" y="42" width="100" height="16" />
<rect x="0" y="84" width="100" height="16" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 236 B

14
ui/app/templates/partials/nomad-logo.hbs Normal file
View File

@ -0,0 +1,14 @@
<svg class="nomad-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.31 60.07">
<g>
<g>
<path d="M78.49,21.83V46.07h-5.9v-32h8.06L92.79,38.39V14.1h5.9v32H90.63Z"/>
<path d="M113.09,46.55c-8,0-10.18-4.42-10.18-9.22V31.43c0-4.8,2.16-9.22,10.18-9.22s10.18,4.42,10.18,9.22v5.91C123.27,42.13,121.11,46.55,113.09,46.55Zm0-19.35c-3.12,0-4.32,1.39-4.32,4v6.29c0,2.64,1.2,4,4.32,4s4.32-1.39,4.32-4V31.24C117.41,28.6,116.21,27.2,113.09,27.2Z"/>
<path d="M141.08,46.07V29.75c0-1.25-.53-1.87-1.87-1.87a16.16,16.16,0,0,0-6.1,2V46.07h-5.86V22.69h4.46l.58,2a23.43,23.43,0,0,1,9.36-2.45,4.44,4.44,0,0,1,4.42,2.5,23,23,0,0,1,9.41-2.5c3.89,0,5.28,2.74,5.28,6.91V46.07H154.9V29.75c0-1.25-.53-1.87-1.87-1.87a15.5,15.5,0,0,0-6.1,2V46.07Z"/>
<path d="M182.88,46.07h-4.8l-.43-1.58a12.79,12.79,0,0,1-7,2.06c-4.27,0-6.1-2.93-6.1-7,0-4.75,2.06-6.58,6.82-6.58H177V30.56c0-2.59-.72-3.5-4.46-3.5a32.71,32.71,0,0,0-6.48.72l-.72-4.46a30.52,30.52,0,0,1,8-1.1c7.34,0,9.5,2.59,9.5,8.45ZM177,37.24h-4.32c-1.92,0-2.45.53-2.45,2.3s.53,2.35,2.35,2.35a9.2,9.2,0,0,0,4.42-1.2Z"/>
<path d="M186.48,30.47c0-5.18,2.3-8.26,7.73-8.26a32.22,32.22,0,0,1,6.24.67V13.14l5.86-.82V46.07h-4.66l-.58-2a12.31,12.31,0,0,1-7.39,2.45c-4.7,0-7.2-2.79-7.2-8.11Zm14-2.64a26,26,0,0,0-5.18-.62c-2.11,0-2.93,1-2.93,3.12v8.26c0,1.92.72,3,2.88,3a8.28,8.28,0,0,0,5.23-2.11Z"/>
<polygon class="faded" points="38.02 23.13 38.02 33.08 31.09 37.09 26.25 34.09 26.25 60.06 26.38 60.07 52.49 45.07 52.49 15.11 52.01 15.11 38.02 23.13"/>
<polygon points="26.03 0.07 0 15.11 17.56 25.43 21.11 23.27 29.75 28.08 29.75 18.08 38.02 13.11 38.02 23.13 52.49 15.11 52.49 15.07 26.03 0.07"/>
<polygon points="22.75 32.09 22.75 42.08 14.87 47.08 14.87 27.08 17.86 25.25 0.15 15.11 0 15.11 0 45.07 26.25 60.06 26.25 34.09 22.75 32.09"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
ui/public/images/nomad-logo.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.31 60.07"><defs><style>.cls-1,.cls-2{fill:#fff;}.cls-2{opacity:0.7;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Logo"><path class="cls-1" d="M78.49,21.83V46.07h-5.9v-32h8.06L92.79,38.39V14.1h5.9v32H90.63Z"/><path class="cls-1" d="M113.09,46.55c-8,0-10.18-4.42-10.18-9.22V31.43c0-4.8,2.16-9.22,10.18-9.22s10.18,4.42,10.18,9.22v5.91C123.27,42.13,121.11,46.55,113.09,46.55Zm0-19.35c-3.12,0-4.32,1.39-4.32,4v6.29c0,2.64,1.2,4,4.32,4s4.32-1.39,4.32-4V31.24C117.41,28.6,116.21,27.2,113.09,27.2Z"/><path class="cls-1" d="M141.08,46.07V29.75c0-1.25-.53-1.87-1.87-1.87a16.16,16.16,0,0,0-6.1,2V46.07h-5.86V22.69h4.46l.58,2a23.43,23.43,0,0,1,9.36-2.45,4.44,4.44,0,0,1,4.42,2.5,23,23,0,0,1,9.41-2.5c3.89,0,5.28,2.74,5.28,6.91V46.07H154.9V29.75c0-1.25-.53-1.87-1.87-1.87a15.5,15.5,0,0,0-6.1,2V46.07Z"/><path class="cls-1" d="M182.88,46.07h-4.8l-.43-1.58a12.79,12.79,0,0,1-7,2.06c-4.27,0-6.1-2.93-6.1-7,0-4.75,2.06-6.58,6.82-6.58H177V30.56c0-2.59-.72-3.5-4.46-3.5a32.71,32.71,0,0,0-6.48.72l-.72-4.46a30.52,30.52,0,0,1,8-1.1c7.34,0,9.5,2.59,9.5,8.45ZM177,37.24h-4.32c-1.92,0-2.45.53-2.45,2.3s.53,2.35,2.35,2.35a9.2,9.2,0,0,0,4.42-1.2Z"/><path class="cls-1" d="M186.48,30.47c0-5.18,2.3-8.26,7.73-8.26a32.22,32.22,0,0,1,6.24.67V13.14l5.86-.82V46.07h-4.66l-.58-2a12.31,12.31,0,0,1-7.39,2.45c-4.7,0-7.2-2.79-7.2-8.11Zm14-2.64a26,26,0,0,0-5.18-.62c-2.11,0-2.93,1-2.93,3.12v8.26c0,1.92.72,3,2.88,3a8.28,8.28,0,0,0,5.23-2.11Z"/><polygon class="cls-2" points="38.02 23.13 38.02 33.08 31.09 37.09 26.25 34.09 26.25 60.06 26.38 60.07 52.49 45.07 52.49 15.11 52.01 15.11 38.02 23.13"/><polygon class="cls-1" points="26.03 0.07 0 15.11 17.56 25.43 21.11 23.27 29.75 28.08 29.75 18.08 38.02 13.11 38.02 23.13 52.49 15.11 52.49 15.07 26.03 0.07"/><polygon class="cls-1" points="22.75 32.09 22.75 42.08 14.87 47.08 14.87 27.08 17.86 25.25 0.15 15.11 0 15.11 0 45.07 26.25 60.06 26.25 34.09 22.75 32.09"/></g></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB