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 ee544df8f9db5ce22aa669e339992e99483bf87c Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 09:31:26 2020 +0200 Modifications d'affichage des header et footer --- web/src/components/layout/Footer.vue | 48 ++++++----- web/src/components/layout/Header.vue | 106 +++++++++++++++--------- web/src/components/layout/HeaderSearchInput.vue | 7 +- web/src/components/layout/Sidebar.vue | 63 ++------------ 4 files changed, 107 insertions(+), 117 deletions(-) diff --git a/web/src/components/layout/Footer.vue b/web/src/components/layout/Footer.vue index 5bea25f..f69603c 100644 --- a/web/src/components/layout/Footer.vue +++ b/web/src/components/layout/Footer.vue @@ -2,12 +2,13 @@ <footer> <p> Fait avec <i class="icon icon-heart"></i> par - <SimpleLink + <a + class="link--invisible" href="http://www.codelutin.com" title="Code Lutin" > <i class="icon icon-lutin"></i> - </SimpleLink> + </a> </p> <p> <SimpleLink @@ -55,31 +56,34 @@ export default Footer </script> <style scoped lang="less"> - footer { - height: var(--footer-height); +footer { + height: var(--footer-height); - padding: var(--margin--small); - margin-top: calc(-1 * var(--footer-height)); + padding: var(--margin--small); + margin-top: calc(-1 * var(--footer-height)); - text-align: center; - color: #CCC; + text-align: center; + color: var(--color-footer-text); - p { - margin-top: var(--margin--small); - } + p { + margin-top: var(--margin--small); + } - .link { - margin-left: 10px; - margin-right: 10px; - } + .link { + margin-left: 10px; + margin-right: 10px; + } - .icon { - margin-left: var(--margin--tiny);; - margin-right: var(--margin--tiny);; - } - .icon-lutin { - font-size: 140%; - } + .icon { + margin-left: var(--margin--tiny);; + margin-right: var(--margin--tiny);; } + .icon-lutin { + font-size: 140%; + } +} +.link--invisible:not(:hover) { + color: var(--color-footer-text); +} </style> diff --git a/web/src/components/layout/Header.vue b/web/src/components/layout/Header.vue index 000c4a0..3ece915 100644 --- a/web/src/components/layout/Header.vue +++ b/web/src/components/layout/Header.vue @@ -1,22 +1,30 @@ <template> <header :class="{'empty': isHeaderEmpty}"> <div id="header-logo"> - <a href="/"><img src="../../assets/img/logos/bow-text.svg" alt="Bow"></a> + <a href="/"> + <img src="../../assets/img/logos/bow-text.svg" alt="Bow"> + </a> </div> <HeaderSearchInput id="header-search"></HeaderSearchInput> <div id="header-user-infos"> - <span v-if="authenticated"> - <router-link to="/preferences"> - {{ this.user.login }} - </router-link> - <span id="since">(bow user since {{ new Date(this.user.creationdate).getFullYear() }})</span> - <button @click="logout">Logout</button> - </span> - <span v-else> + <template v-if="authenticated"> + <div> + <router-link to="/preferences"> + {{ this.user.login }} + </router-link> + <SimpleLink @click="logout" class="link--icon-only"> + <i class="icon-logout icon"></i> + </SimpleLink> + </div> + <div id="since"> + bow user since {{ new Date(this.user.creationdate).getFullYear() }} + </div> + </template> + <template v-else> <router-link to="/login">Login</router-link> - </span> + </template> </div> </header> @@ -25,13 +33,17 @@ <script> import { Component, Prop, Vue } from 'vue-property-decorator' import HeaderSearchInput from '@/components/layout/HeaderSearchInput' +import SimpleLink from '@/components/common/SimpleLink.vue' @Component({ name: 'Header', props: [ 'route' ], - components: { HeaderSearchInput } + components: { + HeaderSearchInput, + SimpleLink + } }) class Header extends Vue { @Prop route @@ -60,40 +72,65 @@ header { justify-content: center; border-bottom: 1px solid var(--color-separation-border); +} - #header-search { - flex-grow: 2; +#header-logo, +#header-search, +#header-user-infos { + display: flex; + align-items: center; + justify-content: center; + height: var(--header-height); + padding: var(--margin--small) var(--margin--medium); +} + +#header-logo { + img { + vertical-align: bottom; } +} - #header-logo, - #header-search, - #header-user-infos { - height: var(--header-height); - padding: 30px; +#header-search { + flex-grow: 2; +} + +#header-user-infos { + flex-direction: column; + align-items: flex-start; + + & > div { + display: flex; + align-items: baseline; } - &.empty { - justify-content: center; - background-color: var(--color-bg-sidebar); + .link--icon-only { + padding-top: 0; + padding-bottom: 0; + } +} - #header-logo { - text-align: center; - animation: reveal-down 1s ease; +header.empty { + justify-content: center; + background-color: var(--color-bg-sidebar); - img { - filter: brightness(0) invert(1); - } - } + #header-logo { + text-align: center; + animation: reveal-down 1s ease; - #header-search, - #header-user-infos { - display: none; + img { + filter: brightness(0) invert(1); } } + + #header-search, + #header-user-infos { + display: none; + } } #since { font-size: 75%; + color: var(--color-grey); } #header-search { @@ -105,13 +142,6 @@ header { border-right: 1px solid var(--color-separation-border); } -#header-user-infos * { - display: flex; - flex-direction: column; - align-items: center; - justify-content: right; -} - @media screen and (min-width: @screen-desktop-low) { header { flex-direction: row; diff --git a/web/src/components/layout/HeaderSearchInput.vue b/web/src/components/layout/HeaderSearchInput.vue index 2af88f6..f817a79 100644 --- a/web/src/components/layout/HeaderSearchInput.vue +++ b/web/src/components/layout/HeaderSearchInput.vue @@ -22,7 +22,7 @@ <input id="web" name="action" type="text" /> </form> - <Button @click="search">Search</Button> + <Button @click="search" class="button">Search</Button> </div> </template> @@ -116,4 +116,9 @@ export default SearchInput margin: var(--margin--small); } } + +.button { + height: var(--default-ui-element-height); + font-size: 13px; +} </style> diff --git a/web/src/components/layout/Sidebar.vue b/web/src/components/layout/Sidebar.vue index 561f2f7..ab2d503 100644 --- a/web/src/components/layout/Sidebar.vue +++ b/web/src/components/layout/Sidebar.vue @@ -1,7 +1,9 @@ <template> <div id="sidebar"> <div id="sidebar-logo"> - <a href="/"><img src="../../assets/img/logos/bow.svg" alt="Bow Logo"/></a> + <a href="/"> + <img src="../../assets/img/logos/bow.svg" alt="Bow Logo"/> + </a> <Button id="toggle-mobile-menu" @click="toggleMobileMenu">Menu</Button> </div> @@ -89,6 +91,7 @@ export default Sidebar #sidebar-logo { display: flex; + align-items: center; justify-content: space-between; width: 100%; @@ -99,7 +102,9 @@ export default Sidebar border-right: 1px solid var(--color-separation-border); - font-size: 36px; + img { + vertical-align: middle; + } } #sidebar-menu { @@ -121,60 +126,6 @@ export default Sidebar } } -.sidebar-menu-link { - display: flex; - justify-content: center; - align-items: center; - - position: relative; - flex: 1; - max-height: 150px; - - text-align: center; - - .icon { - 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; - } -} - @media screen and (min-width: @screen-desktop-low) { #sidebar { width: var(--sidebar-width); -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.