TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-22 12:03:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

#55 menu

Browse Source
This commit is contained in:
Andrea Vos 2020-09-23 20:34:35 +02:00
parent 2c628fc323
commit 317237c6bd
10 changed files with 75 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
components/Header.vue
View File

@ -1,21 +1,81 @@
<template> <template>
<header class="d-flex justify-content-between mb-3"> <header class="mb-4">
<h1 class="h4"> <h1 class="mb-3">
<nuxt-link to="/"> <nuxt-link to="/">
<Icon v="tags"/> <Icon v="tags"/>
Zaimki.pl Zaimki.pl
</nuxt-link> </nuxt-link>
</h1> </h1>
<p class="mb-0'"> <div class="d-block d-md-none">
<nuxt-link to="/" class="btn btn-outline-primary btn-sm"> <div class="btn-group-vertical btn-block nav-custom mb-2">
<Icon v="home"/> <nuxt-link v-for="link in links" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
Strona główna <Icon :v="link.icon"/>
</nuxt-link> {{ link.textLong || link.text }}
</p> </nuxt-link>
</div>
</div>
<div class="d-none d-md-block">
<div class="btn-group btn-block nav-custom mb-2">
<nuxt-link v-for="link in links" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
<Icon :v="link.icon"/>
{{ link.text }}
</nuxt-link>
</div>
</div>
</header> </header>
</template> </template>
<script> <script>
export default { export default {
data() {
return {
links: [
{ link: '/', icon: 'home', text: 'Zaimki', textLong: 'Lista zaimków', extra: ['all'] },
{ link: '/literatura', icon: 'books', text: 'Teksty kultury', textLong: 'Przykłady z tekstów kultury' },
{ link: '/neutratywy', icon: 'atom-alt', text: 'Neutratywy', textLong: 'Słownik neutratywów' },
],
};
},
methods: {
isActiveRoute(link) {
return this.$route.path === link.link || (link.extra || []).includes(this.$route.name);
},
},
} }
</script> </script>
<style lang="scss" scoped>
@import "assets/style";
@include media-breakpoint-down('sm', $grid-breakpoints) {
.nav-custom {
.btn {
border-left: 1px solid $gray-500;
border-radius: 0;
&:hover, &:focus, &.active {
border-left: 3px solid $primary;
padding-left: calc(#{$btn-padding-x-sm} - 2px);
color: $primary;
}
text-align: left;
}
}
}
@include media-breakpoint-up('md', $grid-breakpoints) {
.nav-custom {
.btn {
border-bottom: 1px solid $gray-500;
border-radius: 0;
&:hover, &:focus, &.active {
border-bottom: 3px solid $primary;
padding-bottom: calc(#{$btn-padding-y-sm} - 2px);
color: $primary;
}
}
}
};
</style>

8
components/Literature.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div v-if="Object.keys(sources).length"> <div v-if="Object.keys(sources).length">
<h2 class="h4"> <h2 class="h4">
<Icon v="books"/> <nuxt-link to="/literatura">
Przykłady z tekstów kultury: <Icon v="books"/>
Przykłady z tekstów kultury:
</nuxt-link>
</h2> </h2>
<LiteratureMenu/>
<section v-for="(optionSources, option) in sources"> <section v-for="(optionSources, option) in sources">
<h3 class="h5"> <h3 class="h5">
<nuxt-link :to="'/' + option"> <nuxt-link :to="'/' + option">

30
components/LiteratureMenu.vue
View File

@ -1,30 +0,0 @@
<template>
<ul class="list-inline small">
<li class="list-inline-item">
<a href="https://twitter.com/VaultAusir" target="_blank" rel="noopener">
<Icon v="book-reader"/>
zebrane przez Pawła Dembowskiego
</a>
</li>
<li class="list-inline-item">
<a href="mailto:pawel.dembowski@gmail.com" target="_blank" rel="noopener">
<Icon v="envelope-open-text"/>
dodaj przykłady do listy
</a>
</li>
<li class="list-inline-item" v-if="!all">
<nuxt-link to="/literatura">
<Icon v="books"/>
zobacz przykłady dla innych form
</nuxt-link>
</li>
</ul>
</template>
<script>
export default {
props: {
all: { type: Boolean },
}
}
</script>

4
components/NotFound.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div class="container"> <div class="container">
<h1> <h2>
<Icon v="person-dolly-empty"/> <Icon v="person-dolly-empty"/>
Strony nie znaleziono Strony nie znaleziono
</h1> </h2>
<p class="h4 mt-4"> <p class="h4 mt-4">
<nuxt-link to="/"> <nuxt-link to="/">

1
layouts/default.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="d-flex flex-column vh-100"> <div class="d-flex flex-column vh-100">
<div class="flex-grow-1"> <div class="flex-grow-1">
<Header/>
<Nuxt/> <Nuxt/>
</div> </div>
<div class="container"> <div class="container">

1
pages/_.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<NotFound v-if="!selectedTemplate"/> <NotFound v-if="!selectedTemplate"/>
<div class="container" v-else> <div class="container" v-else>
<Header/>
<h2> <h2>
<Icon v="tag"/> <Icon v="tag"/>
Moje zaimki to: Moje zaimki to:

1
pages/dowolne.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div class="container"> <div class="container">
<Header/>
<h2> <h2>
<Icon v="tag"/> <Icon v="tag"/>
Moje zaimki to: Moje zaimki to:

5
pages/index.vue
View File

@ -1,10 +1,5 @@
<template> <template>
<div class="container"> <div class="container">
<h1>
<Icon v="tags"/>
Zaimki.pl
</h1>
<section> <section>
<About/> <About/>
<p> <p>

3
pages/literatura.vue
View File

@ -1,13 +1,10 @@
<template> <template>
<div class="container"> <div class="container">
<Header/>
<h2> <h2>
<Icon v="books"/> <Icon v="books"/>
Niebinarna polszczyzna w tekstach kultury Niebinarna polszczyzna w tekstach kultury
</h2> </h2>
<LiteratureMenu all/>
<section> <section>
<Share title="Niebinarna polszczyzna w tekstach kultury"/> <Share title="Niebinarna polszczyzna w tekstach kultury"/>
</section> </section>

1
pages/neutratywy.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div class="container"> <div class="container">
<Header/>
<h2> <h2>
<Icon v="atom-alt"/> <Icon v="atom-alt"/>
Słownik neutratywów Słownik neutratywów