branch bow-v2-go updated (d3f5012 -> 4bbf358)
This is an automated email from the git hooks/post-receive script. New change to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git from d3f5012 Améliorations d'affichage des bookmarks new e45307e Création d'un composant pour les liens du menu principal new 4bbf358 Mise en place du menu pour mobile/tablette The 2 revisions listed above as "new" are entirely new to this repository and will be described in separate emails. The revisions listed as "adds" were already present in the repository and have only been added to this reference. Detailed log of new commits: commit 4bbf3580db3fedb4ca07484e139f0a702c34fbab Author: kaufmann <kaufmann@codelutin.com> Date: Fri Jul 31 18:11:03 2020 +0200 Mise en place du menu pour mobile/tablette commit e45307ecbc06a636938b92f6f813c38e225134e0 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Jul 31 17:51:46 2020 +0200 Création d'un composant pour les liens du menu principal Summary of changes: web/src/components/layout/Header.vue | 3 +- web/src/components/layout/Sidebar.vue | 121 +++++++++++++++++++++--------- web/src/components/layout/SidebarLink.vue | 100 ++++++++++++++++++++++++ 3 files changed, 187 insertions(+), 37 deletions(-) create mode 100644 web/src/components/layout/SidebarLink.vue -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
This is an automated email from the git hooks/post-receive script. New commit to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit e45307ecbc06a636938b92f6f813c38e225134e0 Author: kaufmann <kaufmann@codelutin.com> Date: Fri Jul 31 17:51:46 2020 +0200 Création d'un composant pour les liens du menu principal --- web/src/components/layout/Sidebar.vue | 83 ++++++++++++++++++----------- web/src/components/layout/SidebarLink.vue | 86 +++++++++++++++++++++++++++++++ 2 files changed, 138 insertions(+), 31 deletions(-) diff --git a/web/src/components/layout/Sidebar.vue b/web/src/components/layout/Sidebar.vue index 495f8d9..e6bfadd 100644 --- a/web/src/components/layout/Sidebar.vue +++ b/web/src/components/layout/Sidebar.vue @@ -1,32 +1,35 @@ <template> - <div class="sidebar"> - <div class="sidebar-logo"> + <div id="sidebar"> + <div id="sidebar-logo"> <a href="/"><img src="../../assets/img/logos/bow.svg" alt="Bow Logo"/></a> </div> - <div class="sidebar-menu"> - <div class="sidebar-menu-link"> - <router-link to="/edit/new" title="Add"> - <i class="icon-square-plus icon"></i> - </router-link> - </div> - <div v-if="user.admin"> - <a :href="statsUrl">stats</a> - </div> - <div class="sidebar-menu-link"> - <router-link to="/about" title="About"> - <i class="icon-help icon"></i> - </router-link> - </div> + <div id="sidebar-menu"> + <SidebarLink + title="Add" + linkTo="/edit/new" + iconName="icon-square-plus"/> + + <SidebarLink + v-if="user.admin" + title="Stats" + :linkTo="statsUrl" + iconName="icon-graph"/> + + <SidebarLink + title="About" + linkTo="/about" + iconName="icon-help"/> </div> </div> </template> <script> import { Component, Vue } from 'vue-property-decorator' +import SidebarLink from '@/components/layout/SidebarLink' @Component({ name: 'Sidebar', - components: {} + components: { SidebarLink } }) class Sidebar extends Vue { statsUrl = '' @@ -44,20 +47,19 @@ export default Sidebar </script> <style scoped lang="less"> -.sidebar { +@import '../../assets/less/_globals'; + +#sidebar { position: fixed; + top: 0; left: 0; - - width: var(--sidebar-width); - height: 100%; - /* FIXME LK : TMP */ - overflow: hidden; + width: 100%; + z-index: 1; } -.sidebar-logo { +#sidebar-logo { display: flex; justify-content: center; - position: fixed; width: var(--sidebar-width); height: var(--header-height); @@ -71,8 +73,8 @@ export default Sidebar font-size: 36px; } -.sidebar-menu { - display: flex; +#sidebar-menu { + display: none; /* TMP FIXME */ flex-direction: column; justify-content: space-between; @@ -120,17 +122,36 @@ export default Sidebar left: 0; height: 100%; - width: 0; + width: 100%;; background-color: var(--color-hover); opacity: 0; - transition: width 0.4s ease-in-out, opacity 0.4s ease-in-out; + transform: scaleX(0); + transform-origin: left; + transition: transform 0.4s ease-in-out, opacity 0.6s ease-in-out; } &:hover:before { - width: 100%; - + transform: scaleX(1); opacity: 1; + transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out; + } +} + +@media screen and (min-width: @screen-desktop-low) { + #sidebar { + width: var(--sidebar-width); + height: 100%; + /* FIXME LK : TMP */ + overflow: hidden; + } + + #sidebar-logo { + position: fixed; + } + + #sidebar-menu { + display: flex; } } </style> diff --git a/web/src/components/layout/SidebarLink.vue b/web/src/components/layout/SidebarLink.vue new file mode 100644 index 0000000..f973e72 --- /dev/null +++ b/web/src/components/layout/SidebarLink.vue @@ -0,0 +1,86 @@ +<template> + <div class="sidebar-menu-link"> + <router-link :to="linkTo" :title="title"> + <i class="icon" :class="iconName"></i> + </router-link> + </div> +</template> + +<script> +import { Component, Prop, Vue } from 'vue-property-decorator' + +@Component({ + name: 'SidebarLink', + props: [ + 'linkTo', + 'title', + 'iconName' + ], + components: {} +}) +class SidebarLink extends Vue { + @Prop linkTo + @Prop title + @Prop iconName +} + +export default SidebarLink +</script> + +<style scoped lang="less"> +@import '../../assets/less/_globals'; + +.sidebar-menu-link { + display: flex; + justify-content: center; + align-items: center; + + position: relative; + flex: 1; + max-height: 150px; + + text-align: center; + + .icon { + color: var(--color-white); + font-size: 30px; + } + a, + span { + width: 100%; + + z-index: 10; + } + a { + display: flex; + align-items: center; + justify-content: center; + + height: 100%; + } + &:hover .icon { + color: #fff; + } + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + + height: 100%; + width: 100%;; + + background-color: var(--color-hover); + opacity: 0; + + transform: scaleX(0); + transform-origin: left; + transition: transform 0.4s ease-in-out, opacity 0.6s ease-in-out; + } + &:hover:before { + transform: scaleX(1); + opacity: 1; + transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out; + } +} +</style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
This is an automated email from the git hooks/post-receive script. New commit to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit 4bbf3580db3fedb4ca07484e139f0a702c34fbab Author: kaufmann <kaufmann@codelutin.com> Date: Fri Jul 31 18:11:03 2020 +0200 Mise en place du menu pour mobile/tablette --- web/src/components/layout/Header.vue | 3 ++- web/src/components/layout/Sidebar.vue | 44 +++++++++++++++++++++++++------ web/src/components/layout/SidebarLink.vue | 14 ++++++++++ 3 files changed, 52 insertions(+), 9 deletions(-) diff --git a/web/src/components/layout/Header.vue b/web/src/components/layout/Header.vue index 27c7e88..b5355d8 100644 --- a/web/src/components/layout/Header.vue +++ b/web/src/components/layout/Header.vue @@ -18,6 +18,7 @@ <router-link to="/login">Login</router-link> </span> </div> + </header> </template> @@ -67,7 +68,7 @@ header { #header-logo, #header-search, #header-user-infos { - height: 100%; + height: var(--header-height); padding: 30px; } diff --git a/web/src/components/layout/Sidebar.vue b/web/src/components/layout/Sidebar.vue index e6bfadd..e1bd41f 100644 --- a/web/src/components/layout/Sidebar.vue +++ b/web/src/components/layout/Sidebar.vue @@ -2,8 +2,10 @@ <div id="sidebar"> <div id="sidebar-logo"> <a href="/"><img src="../../assets/img/logos/bow.svg" alt="Bow Logo"/></a> + <Button id="toggle-mobile-menu" @click="toggleMobileMenu">Menu</Button> </div> - <div id="sidebar-menu"> + + <div id="sidebar-menu" :class="{'opened' : mobileMenuOpened}"> <SidebarLink title="Add" linkTo="/edit/new" @@ -25,14 +27,19 @@ <script> import { Component, Vue } from 'vue-property-decorator' +import Button from '@/components/common/Button' import SidebarLink from '@/components/layout/SidebarLink' @Component({ name: 'Sidebar', - components: { SidebarLink } + components: { + Button, + SidebarLink + } }) class Sidebar extends Vue { statsUrl = '' + mobileMenuOpened = false; add() { this.$router.push({ name: 'Edit', params: { id: 'new' } }) @@ -41,6 +48,10 @@ class Sidebar extends Vue { beforeMount() { this.statsUrl = this.$fetch.createUrl('/system/stats') } + + toggleMobileMenu() { + this.mobileMenuOpened = !this.mobileMenuOpened; + } } export default Sidebar @@ -59,29 +70,36 @@ export default Sidebar #sidebar-logo { display: flex; - justify-content: center; + justify-content: space-between; - width: var(--sidebar-width); + width: 100%; height: var(--header-height); padding: 20px; text-align: center; - background-color: #fff; border-right: 1px solid #eee; font-size: 36px; } #sidebar-menu { - display: none; /* TMP FIXME */ + position: absolute; + top: var(--header-height); + + display: none; flex-direction: column; justify-content: space-between; - - height: 100%; + width: 100%; + height: calc(100vh - var(--header-height)); padding-top: var(--header-height); background-color: var(--color-bg-sidebar); + z-index: 10; + + &.opened { + display: block; + } } .sidebar-menu-link { @@ -148,10 +166,20 @@ export default Sidebar #sidebar-logo { position: fixed; + justify-content: center; + width: var(--sidebar-width); + background-color: white; } #sidebar-menu { + position: relative; + display: flex; + padding-top: 0; + } + + #toggle-mobile-menu { + display: none; } } </style> diff --git a/web/src/components/layout/SidebarLink.vue b/web/src/components/layout/SidebarLink.vue index f973e72..9a7537a 100644 --- a/web/src/components/layout/SidebarLink.vue +++ b/web/src/components/layout/SidebarLink.vue @@ -82,5 +82,19 @@ export default SidebarLink opacity: 1; transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out; } + + a::after { + content: attr(title); + color: white; + font-size: 30px; + margin-left: 20px; + } +} + + +@media screen and (min-width: @screen-desktop-low) { + .sidebar-menu-link a::after { + display: none; + } } </style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm