Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

minimalist squares navmap

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-21 10:11:10 +02:00
parent d08f2e0e11
commit ad6519fb87
2 changed files with 94 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<banner></banner> <banner></banner>
<sticky-nav></sticky-nav>
<h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1> <h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
<h1 v-else>{{ $t('course.title.active') }}</h1> <h1 v-else>{{ $t('course.title.active') }}</h1>
@ -17,6 +18,7 @@
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Banner from './components/Banner.vue'; import Banner from './components/Banner.vue';
import StickyNav from './components/StickyNav.vue';
import PersonsAssociated from './components/PersonsAssociated.vue'; import PersonsAssociated from './components/PersonsAssociated.vue';
import Requestor from './components/Requestor.vue'; import Requestor from './components/Requestor.vue';
import SocialIssue from './components/SocialIssue.vue'; import SocialIssue from './components/SocialIssue.vue';
@ -29,6 +31,7 @@ export default {
name: 'App', name: 'App',
components: { components: {
Banner, Banner,
StickyNav,
PersonsAssociated, PersonsAssociated,
Requestor, Requestor,
SocialIssue, SocialIssue,
@ -98,5 +101,6 @@ export default {
table { table {
} }
} }
} }
</style> </style>

90
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<teleport to="#content_conainter">
<div class="sticky-section">
<nav>
<a href="#top">
<i class="fa fa-fw fa-square-o"></i>
<span>Haut</span>
</a>
<a href="#section-10">
<i class="fa fa-fw fa-square"></i>
<span>1</span>
</a>
<a href="#section-20">
<i class="fa fa-fw fa-square"></i>
<span>2</span>
</a>
<a href="#section-30">
<i class="fa fa-fw fa-square"></i>
<span>3</span>
</a>
<a href="#section-40">
<i class="fa fa-fw fa-square"></i>
<span>4</span>
</a>
<a href="#section-50">
<i class="fa fa-fw fa-square"></i>
<span>5</span>
</a>
<a href="#section-60" v-if="accompanyingCourse.step === 'DRAFT'">
<i class="fa fa-fw fa-square"></i>
<span>6</span>
</a>
<a href="#section-70" v-if="accompanyingCourse.step === 'DRAFT'">
<i class="fa fa-fw fa-square"></i>
<span>7</span>
</a>
<!--a href="#bottom">
<i class="fa fa-fw fa-square-o"></i>
<span>Bas</span>
</a-->
</nav>
</div>
</teleport>
</template>
<script>
export default {
name: "StickyNav",
computed: {
accompanyingCourse() {
return this.$store.state.accompanyingCourse
}
}
}
</script>
<style lang="scss" scoped>
div.sticky-section {
position: fixed;
top: 250px;
left: 25px;
nav {
font-size: small;
a {
display: block;
box-sizing: border-box;
margin-bottom: -3px;
color: #71859669;
span {
display: none;
}
&:hover {
color: #718596b5;
span {
display: inline;
padding-left: 8px;
}
}
&.active {
color: #df6a27;
}
}
}
}
@media only screen and (max-width: 768px) {
div.sticky-section {
display: none;
}
}
</style>