btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

⚡ Added tooltips to sidebar nav

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-01 17:13:55 +05:30
parent 4e1d3e9fe9
commit 2934a5517d
2 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/styles.scss
View File

@@ -74,10 +74,11 @@ h3 {
z-index: 10000; z-index: 10000;
.tooltip-inner { .tooltip-inner {
background: #353535; background: black;
color: white; color: white;
border-radius: 16px; border-radius: 8px;
padding: 5px 10px 4px; padding: 8px 16px;
font-size: 14px;
} }
.tooltip-arrow { .tooltip-arrow {
@@ -86,7 +87,7 @@ h3 {
border-style: solid; border-style: solid;
position: absolute; position: absolute;
margin: 5px; margin: 5px;
border-color: #353535; border-color: black;
z-index: 1; z-index: 1;
} }
@@ -155,10 +156,10 @@ h3 {
.popover-inner { .popover-inner {
background: $color; background: $color;
color: #353535; color: black;
padding: 24px; padding: 24px;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 5px 30px rgba(#353535, .1); box-shadow: 0 5px 30px rgba(black, .1);
} }
.popover-arrow { .popover-arrow {

24
layouts/default.vue
View File

@@ -19,16 +19,16 @@
We're using manual checks for linkActive because the query string We're using manual checks for linkActive because the query string
seems to mess up the nuxt-link active class. seems to mess up the nuxt-link active class.
--> -->
<nuxt-link to="/" :class="linkActive('/')"> <nuxt-link to="/" :class="linkActive('/')" v-tooltip.right="'Home'">
<logo alt style="height: 24px;"></logo> <logo alt style="height: 24px;"></logo>
</nuxt-link> </nuxt-link>
<nuxt-link to="/websocket" :class="linkActive('/websocket')"> <nuxt-link to="/websocket" :class="linkActive('/websocket')" v-tooltip.right="'WebSocket'">
<i class="material-icons">cloud</i> <i class="material-icons">cloud</i>
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
to="/settings" to="/settings"
:class="linkActive('/settings')" :class="linkActive('/settings')"
v-tooltip="'Settings'" v-tooltip.right="'Settings'"
aria-label="Settings" aria-label="Settings"
> >
<i class="material-icons">settings</i> <i class="material-icons">settings</i>
@@ -38,27 +38,27 @@
<nav class="secondary-nav"> <nav class="secondary-nav">
<ul> <ul>
<li> <li>
<a href="#request"> <a href="#request" v-tooltip.right="'Request'">
<i class="material-icons">cloud_upload</i> <i class="material-icons">cloud_upload</i>
</a> </a>
</li> </li>
<li> <li>
<a href="#options"> <a href="#options" v-tooltip.right="'Options'">
<i class="material-icons">toc</i> <i class="material-icons">toc</i>
</a> </a>
</li> </li>
<li> <li>
<a href="#response"> <a href="#response" v-tooltip.right="'Response'">
<i class="material-icons">cloud_download</i> <i class="material-icons">cloud_download</i>
</a> </a>
</li> </li>
<li> <li>
<a href="#collections"> <a href="#collections" v-tooltip.right="'Collections'">
<i class="material-icons">folder_special</i> <i class="material-icons">folder_special</i>
</a> </a>
</li> </li>
<li> <li>
<a href="#history"> <a href="#history" v-tooltip.right="'History'">
<i class="material-icons">watch_later</i> <i class="material-icons">watch_later</i>
</a> </a>
</li> </li>
@@ -69,12 +69,12 @@
<nav class="secondary-nav"> <nav class="secondary-nav">
<ul> <ul>
<li> <li>
<a href="#request"> <a href="#request" v-tooltip.right="'Request'">
<i class="material-icons">cloud_upload</i> <i class="material-icons">cloud_upload</i>
</a> </a>
</li> </li>
<li> <li>
<a href="#response"> <a href="#response" v-tooltip.right="'Response'">
<i class="material-icons">cloud_download</i> <i class="material-icons">cloud_download</i>
</a> </a>
</li> </li>
@@ -85,12 +85,12 @@
<nav class="secondary-nav"> <nav class="secondary-nav">
<ul> <ul>
<li> <li>
<a href="#theme"> <a href="#theme" v-tooltip.right="'Theme'">
<i class="material-icons">brush</i> <i class="material-icons">brush</i>
</a> </a>
</li> </li>
<li> <li>
<a href="#proxy"> <a href="#proxy" v-tooltip.right="'Proxy'">
<i class="material-icons">public</i> <i class="material-icons">public</i>
</a> </a>
</li> </li>