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

24
layouts/default.vue
View File

@@ -19,16 +19,16 @@
We're using manual checks for linkActive because the query string
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>
</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>
</nuxt-link>
<nuxt-link
to="/settings"
:class="linkActive('/settings')"
v-tooltip="'Settings'"
v-tooltip.right="'Settings'"
aria-label="Settings"
>
<i class="material-icons">settings</i>
@@ -38,27 +38,27 @@
<nav class="secondary-nav">
<ul>
<li>
<a href="#request">
<a href="#request" v-tooltip.right="'Request'">
<i class="material-icons">cloud_upload</i>
</a>
</li>
<li>
<a href="#options">
<a href="#options" v-tooltip.right="'Options'">
<i class="material-icons">toc</i>
</a>
</li>
<li>
<a href="#response">
<a href="#response" v-tooltip.right="'Response'">
<i class="material-icons">cloud_download</i>
</a>
</li>
<li>
<a href="#collections">
<a href="#collections" v-tooltip.right="'Collections'">
<i class="material-icons">folder_special</i>
</a>
</li>
<li>
<a href="#history">
<a href="#history" v-tooltip.right="'History'">
<i class="material-icons">watch_later</i>
</a>
</li>
@@ -69,12 +69,12 @@
<nav class="secondary-nav">
<ul>
<li>
<a href="#request">
<a href="#request" v-tooltip.right="'Request'">
<i class="material-icons">cloud_upload</i>
</a>
</li>
<li>
<a href="#response">
<a href="#response" v-tooltip.right="'Response'">
<i class="material-icons">cloud_download</i>
</a>
</li>
@@ -85,12 +85,12 @@
<nav class="secondary-nav">
<ul>
<li>
<a href="#theme">
<a href="#theme" v-tooltip.right="'Theme'">
<i class="material-icons">brush</i>
</a>
</li>
<li>
<a href="#proxy">
<a href="#proxy" v-tooltip.right="'Proxy'">
<i class="material-icons">public</i>
</a>
</li>