diff --git a/src/App.vue b/src/App.vue index 718885e423b29f34cd03112f84f45ab0ad7c5120..7cc79022dffb7cfd01c2a4ca6b18dfca34e047b0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,22 +8,27 @@ class="ui mini right spaced image" src="@/assets/img/logo-neogeo-circle.png" /> - {{ APPLICATION_NAME }} + <span class="desktop"> + {{ APPLICATION_NAME }} + </span> </router-link> <div id="menu-dropdown" - :class="['ui dropdown item', { 'active visible': menuIsOpen }]" - v-if="project" + :class="[ + 'ui dropdown item floated right', + { 'active visible': menuIsOpen }, + ]" @click="menuIsOpen = !menuIsOpen" > - Projet : {{ project.title }} + <span v-if="project"> Projet : {{ project.title }} </span> <i class="dropdown icon"></i> <div :class="['menu', { 'visible transition': menuIsOpen }]" style="z-index: 401" > <router-link + v-if="project" :to="{ name: 'project_detail', params: { slug: project.slug }, @@ -33,6 +38,7 @@ <i class="home icon"></i>Accueil </router-link> <router-link + v-if="project" :to="{ name: 'liste-signalements', params: { slug: project.slug }, @@ -43,7 +49,7 @@ </router-link> <router-link - v-if="user.is_administrator" + v-if="project && user.is_administrator" :to="{ name: 'project_mapping', params: { slug: project.slug }, @@ -53,7 +59,7 @@ <i class="map icon"></i>Fonds cartographiques </router-link> <router-link - v-if="user.is_administrator" + v-if="project && user.is_administrator" :to="{ name: 'project_members', params: { slug: project.slug }, @@ -62,30 +68,28 @@ > <i class="users icon"></i>Membres </router-link> - </div> - </div> - <div class="right menu"> - <router-link v-if="user" to="/my_account/" class="item"> - {{ userFullname || user.username || "Utilisateur inconnu" }} - </router-link> - <div - v-if="user && user.is_administrator" - class="item ui label vertical" - > - <span v-if="USER_LEVEL_PROJECTS && project"> - {{ USER_LEVEL_PROJECTS[project.slug] }}</span + <router-link v-if="user" to="/my_account/" class="item"> + {{ userFullname || user.username || "Utilisateur inconnu" }} + </router-link> + <div + v-if="user && user.is_administrator" + class="item ui label vertical no-hover" + > + <span v-if="USER_LEVEL_PROJECTS && project"> + {{ USER_LEVEL_PROJECTS[project.slug] }}</span + > + <br /> + <span v-if="user.is_administrator"> Gestionnaire métier </span> + </div> + <!-- // todo : find out SSO_SETTED in django --> + <a v-if="user && !SSO_SETTED" @click="logout" class="item" + ><i class="ui logout icon"></i> + </a> + <router-link v-else-if="!user" to="/connexion/" class="item" + >Se Connecter</router-link > - <br /> - <span v-if="user.is_administrator"> Gestionnaire métier </span> </div> - <!-- // todo : find out SSO_SETTED in django --> - <a v-if="user && !SSO_SETTED" @click="logout" class="item" - ><i class="ui logout icon"></i> - </a> - <router-link v-else-if="!user" to="/connexion/" class="item" - >Se Connecter</router-link - > </div> </div> </div> @@ -142,6 +146,7 @@ export default { data() { return { menuIsOpen: false, + rightMenuIsOpen: true, messages: null, }; }, @@ -190,20 +195,6 @@ export default { @import "./assets/styles/base.css"; @import "./assets/resources/semantic-ui-2.4.2/semantic.min.css"; -@media screen and (min-width: 560px) { - .header-menu { - min-width: 560px; - } -} - -@media screen and (min-width: 560px) { - .menu.container { - width: auto !important; - margin-left: 1em !important; - margin-right: 1em !important; - } -} - body { height: 100vh; margin: 0; @@ -230,5 +221,30 @@ footer { flex-direction: column; justify-content: center; } +@media screen and (min-width: 560px) { + .header-menu { + min-width: 560px; + } + + .menu.container { + width: auto !important; + margin-left: 1em !important; + margin-right: 1em !important; + } +} + +@media screen and (max-width: 560px) { + .desktop { + display: none !important; + } + div.menu { + width: 100vw; + } +} + +.ui.menu .ui.dropdown .menu > .item.no-hover:hover { + cursor: auto !important; + background: white !important; +} </style> \ No newline at end of file