From 9078cc1b6575a17b4be249d0c589c4f0c2cd191e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e?= <tpoussard@neogeo.fr> Date: Fri, 5 Aug 2022 18:42:41 +0200 Subject: [PATCH] display icon if not online & move style to correct component --- src/App.vue | 69 +--------------------- src/components/AppHeader.vue | 107 ++++++++++++++++++++++++++++++++++- 2 files changed, 105 insertions(+), 71 deletions(-) diff --git a/src/App.vue b/src/App.vue index b45820b6..56520c47 100644 --- a/src/App.vue +++ b/src/App.vue @@ -66,71 +66,4 @@ export default { ]) }, }; -</script> - -<style> -.vertical { - flex-direction: column; - justify-content: center; -} - -.leaflet-container { - background: white !important; -} - -.flex { - display: flex; -} - -/* keep above loader */ -#menu-dropdown { - z-index: 1001; -} - -@media screen and (max-width: 985px) { - .abstract{ - display: none !important; - } -} - -@media screen and (min-width: 560px) { - .mobile { - display: none !important; - } - #app-header { - min-width: 560px; - } - .menu.container { - width: auto !important; - } - .push-right-desktop { - margin-left: auto; - } -} - -@media screen and (max-width: 590px) { - .desktop { - display: none !important; - } - div.dropdown-list { - width: 100vw; - left: -70px !important; /* should be the same than belows */ - } - .menu.container a.header { - width: 70px; - } - .menu.container a.header > img { - margin: 0; - } - #menu-dropdown { - width: calc(100vw - 70px); - justify-content: space-between; - } - #menu-dropdown > span { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } -} - -</style> +</script> \ No newline at end of file diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 77f4c4ac..ec2a5d07 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -22,8 +22,15 @@ :class="['ui dropdown item', { 'active visible': menuIsOpen }]" @click="menuIsOpen = !menuIsOpen" > - <!-- empty span to occupy space for style if no project --> - <span> + <div + v-if="!isOnline" + class="crossed-out mobile" + > + <i + class="wifi icon" + /> + </div> + <span class="expand-center"> <span v-if="project"> Projet : {{ project.title }} </span> </span> <i @@ -155,6 +162,20 @@ </span> </div> <div class="desktop flex push-right-desktop"> + <div + v-if="!isOnline" + class="item" + > + <span + data-tooltip="Vous êtes hors-ligne, + vos changements pourront être envoyés au serveur au retour de la connexion" + data-position="bottom right" + > + <div class="crossed-out"> + <i class="wifi icon"/> + </div> + </span> + </div> <router-link :is="isOnline ? 'router-link' : 'span'" v-if="user" @@ -301,6 +322,86 @@ export default { </script> <style lang="less" scoped> +.vertical { + flex-direction: column; + justify-content: center; +} + +.flex { + display: flex; +} + +/* keep above loader */ +#menu-dropdown { + z-index: 1001; +} + +.expand-center { + width: 100%; + text-align: center; +} + +.crossed-out { + position: relative; + padding: .2em; + &::before { + content: ""; + position: absolute; + top: 45%; + left: -8%; + width: 100%; + border-top: 2px solid #ee2e24; + transform: rotate(45deg); + box-shadow: 0px 0px 0px 1px #373636; + border-radius: 3px; + } +} + +@media screen and (max-width: 985px) { + .abstract{ + display: none !important; + } +} + +@media screen and (min-width: 560px) { + .mobile { + display: none !important; + } + #app-header { + min-width: 560px; + } + .menu.container { + width: auto !important; + } + .push-right-desktop { + margin-left: auto; + } +} + +@media screen and (max-width: 590px) { + .desktop { + display: none !important; + } + div.dropdown-list { + width: 100vw; + left: -70px !important; /* should be the same than belows */ + } + .menu.container a.header { + width: 70px; + } + .menu.container a.header > img { + margin: 0; + } + #menu-dropdown { + width: calc(100vw - 70px); + //justify-content: space-between; + } + #menu-dropdown > span { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } +} .menu.container { position: relative; @@ -348,4 +449,4 @@ export default { height: 100% !important; } -</style> +</style> \ No newline at end of file -- GitLab