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

🐛 Fixed i18n routing

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-28 07:45:35 +05:30
parent 781d8e3b68
commit f61cbba8cb
3 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/css/styles.scss
View File

@@ -1,3 +1,21 @@
// Layout transitions
.layout-enter-active, .layout-leave-active {
transition: opacity 0.5s;
}
.layout-enter, .layout-leave-active {
opacity: 0;
}
// Page transitions
.page-enter-active, .page-leave-active {
transition: opacity 0.5s;
}
.page-enter, .page-leave-to {
opacity: 0;
}
$responsiveWidth: 768px; $responsiveWidth: 768px;
html { html {

35
layouts/default.vue
View File

@@ -3,7 +3,7 @@
<header class="header"> <header class="header">
<div class="flex-wrap"> <div class="flex-wrap">
<div class="slide-in"> <div class="slide-in">
<nuxt-link to="/"> <nuxt-link :to="localePath('index')">
<h1 class="logo">Postwoman</h1> <h1 class="logo">Postwoman</h1>
</nuxt-link> </nuxt-link>
</div> </div>
@@ -93,7 +93,7 @@
seems to mess up the nuxt-link active class. seems to mess up the nuxt-link active class.
--> -->
<nuxt-link <nuxt-link
to="/" :to="localePath('index')"
:class="linkActive('/')" :class="linkActive('/')"
v-tooltip.right="'Home'" v-tooltip.right="'Home'"
aria-label="Home" aria-label="Home"
@@ -101,21 +101,21 @@
<logo alt style="height: 24px;"></logo> <logo alt style="height: 24px;"></logo>
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
to="/realtime" :to="localePath('realtime')"
:class="linkActive('/realtime')" :class="linkActive('/realtime')"
v-tooltip.right="'Realtime'" v-tooltip.right="'Realtime'"
> >
<i class="material-icons">settings_input_hdmi</i> <i class="material-icons">settings_input_hdmi</i>
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
to="/graphql" :to="localePath('graphql')"
:class="linkActive('/graphql')" :class="linkActive('/graphql')"
v-tooltip.right="'GraphQL'" v-tooltip.right="'GraphQL'"
> >
<i class="material-icons">cloud</i> <i class="material-icons">cloud</i>
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
to="/settings" :to="localePath('settings')"
:class="linkActive('/settings')" :class="linkActive('/settings')"
v-tooltip.right="'Settings'" v-tooltip.right="'Settings'"
aria-label="Settings" aria-label="Settings"
@@ -123,7 +123,7 @@
<i class="material-icons">settings</i> <i class="material-icons">settings</i>
</nuxt-link> </nuxt-link>
</nav> </nav>
<div v-if="['/'].includes($route.path)"> <div v-if="$route.path === '/'">
<nav class="secondary-nav"> <nav class="secondary-nav">
<ul> <ul>
<li> <li>
@@ -144,7 +144,7 @@
</ul> </ul>
</nav> </nav>
</div> </div>
<div v-else-if="['/realtime'].includes($route.path)"> <div v-else-if="$route.path === '/realtime'">
<nav class="secondary-nav"> <nav class="secondary-nav">
<ul> <ul>
<li> <li>
@@ -160,7 +160,7 @@
</ul> </ul>
</nav> </nav>
</div> </div>
<div v-else-if="['/graphql'].includes($route.path)"> <div v-else-if="$route.path === '/graphql'">
<nav class="secondary-nav"> <nav class="secondary-nav">
<ul> <ul>
<li> <li>
@@ -176,7 +176,7 @@
</ul> </ul>
</nav> </nav>
</div> </div>
<div v-else-if="['/settings'].includes($route.path)"> <div v-else-if="$route.path === '/settings'">
<nav class="secondary-nav"> <nav class="secondary-nav">
<ul> <ul>
<li> <li>
@@ -193,7 +193,9 @@
</nav> </nav>
</div> </div>
</aside> </aside>
<nuxt id="main" class="main" /> <transition name="layout" appear>
<nuxt id="main" class="main" />
</transition>
<aside class="nav-second"></aside> <aside class="nav-second"></aside>
</div> </div>
</div> </div>
@@ -246,17 +248,16 @@
<i class="material-icons">translate</i> <i class="material-icons">translate</i>
</button> </button>
<template slot="popover"> <template slot="popover">
<div v-for="locale in availableLocales"
:key="locale.code">
<nuxt-link <nuxt-link
v-for="locale in availableLocales"
:key="locale.code"
:to="switchLocalePath(locale.code)" :to="switchLocalePath(locale.code)"
> >
<div> <button class="icon" v-close-popover>
<button class="icon" v-close-popover> {{ locale.name }}
{{ locale.name }} </button>
</button>
</div>
</nuxt-link> </nuxt-link>
</div>
</template> </template>
</v-popover> </v-popover>
</div> </div>

6
nuxt.config.js
View File

@@ -197,9 +197,9 @@ export default {
** Global CSS ** Global CSS
*/ */
css: [ css: [
'@/assets/css/themes.scss', '~/assets/css/styles.scss',
'@/assets/css/fonts.scss', '~/assets/css/themes.scss',
'@/assets/css/styles.scss' '~/assets/css/fonts.scss'
], ],
/* /*
** Plugins to load before mounting the App ** Plugins to load before mounting the App