diff --git a/src/App.vue b/src/App.vue
index af09408b2e3ebd0d516dbe4a0b23bd1836698e8d..7cc79022dffb7cfd01c2a4ca6b18dfca34e047b0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,34 @@
<template>
<div v-frag>
<header class="header-menu">
- <div class="ui container">
+ <div class="menu container">
<div class="ui inverted icon menu">
<router-link to="/" class="header item">
<img
class="ui mini right spaced image"
src="@/assets/img/logo-neogeo-circle.png"
/>
- <!-- :src="LOGO_PATH" -->
- {{ getApplicationName() }}
+ <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 },
@@ -34,6 +38,7 @@
<i class="home icon"></i>Accueil
</router-link>
<router-link
+ v-if="project"
:to="{
name: 'liste-signalements',
params: { slug: project.slug },
@@ -44,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 },
@@ -54,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 },
@@ -63,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>
@@ -143,6 +146,7 @@ export default {
data() {
return {
menuIsOpen: false,
+ rightMenuIsOpen: true,
messages: null,
};
},
@@ -156,8 +160,9 @@ export default {
"configuration",
]),
...mapGetters(["project"]),
- //LOGO_PATH: () => require(`${configuration.VUE_APP_LOGO_PATH}`),
- //APPLICATION_NAME: () => this.configuration.VUE_APP_APPLICATION_NAME,
+ APPLICATION_NAME: function () {
+ return this.configuration.VUE_APP_APPLICATION_NAME;
+ },
PACKAGE_VERSION: () => process.env.PACKAGE_VERSION || "0",
userFullname: function () {
if (this.user.first_name || this.user.last_name)
@@ -165,17 +170,17 @@ export default {
return null;
},
},
+
methods: {
logout() {
this.$store.dispatch("LOGOUT");
},
- getApplicationName() {
- return this.configuration.VUE_APP_APPLICATION_NAME;
- },
+
clickOutsideMenu(e) {
if (!e.target.closest("#menu-dropdown")) this.menuIsOpen = false;
},
},
+
created() {
window.addEventListener("mousedown", this.clickOutsideMenu);
},
@@ -190,10 +195,6 @@ export default {
@import "./assets/styles/base.css";
@import "./assets/resources/semantic-ui-2.4.2/semantic.min.css";
-.header-menu {
- min-width: 560px;
-}
-
body {
height: 100vh;
margin: 0;
@@ -220,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
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 6e7a4e955fe574d225c3d41be26f466d4fd4f3aa..f1f3aead2041cd0ee2eb2cbc69f2b134d3c29cc6 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -14,27 +14,29 @@
<h4 id="les_projets" class="ui horizontal divider header">PROJETS</h4>
<!-- //todo : v-if can_create_project -->
- <router-link
- v-if="user"
- :to="{ name: 'project_create', params: { action: 'create' } }"
- class="ui green basic button"
- >
- <i class="plus icon"></i> Créer un nouveau projet
- </router-link>
- <!-- //todo : v-if can_create_project -->
- <router-link
- v-if="user"
- :to="{
- name: 'project_type_list',
- }"
- class="ui blue basic button right floated"
- >
- <i class="copy icon"></i> Accéder à la liste des modèles de projets
- </router-link>
+ <div class="flex">
+ <router-link
+ v-if="user"
+ :to="{ name: 'project_create', params: { action: 'create' } }"
+ class="ui green basic button"
+ >
+ <i class="plus icon"></i> Créer un nouveau projet
+ </router-link>
+ <!-- //todo : v-if can_create_project -->
+ <router-link
+ v-if="user"
+ :to="{
+ name: 'project_type_list',
+ }"
+ class="ui blue basic button"
+ >
+ <i class="copy icon"></i> Accéder à la liste des modèles de projets
+ </router-link>
+ </div>
+
<div v-if="projects" class="ui divided items">
<div v-for="project in projects" class="item" :key="project.slug">
<div class="ui tiny image">
- <!-- // ? récupérer l'image sur serveur front (et non back) ? -->
<img
:src="
!project.thumbnail
@@ -108,19 +110,17 @@
<script>
import { mapState } from "vuex";
-
export default {
name: "Index",
computed: {
...mapState(["projects", "user", "USER_LEVEL_PROJECTS"]),
- //LOGO_PATH: () => require(configuration.VUE_APP_LOGO_PATH),
APPLICATION_NAME: function () {
return this.$store.state.configuration.VUE_APP_APPLICATION_NAME;
},
- APPLICATION_ABSTRACT:function () {
+ APPLICATION_ABSTRACT: function () {
return this.$store.state.configuration.VUE_APP_APPLICATION_ABSTRACT;
},
- DJANGO_BASE_URL:function () {
+ DJANGO_BASE_URL: function () {
return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
},
},
@@ -138,4 +138,11 @@ export default {
}
},
};
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.flex {
+ display: flex;
+ justify-content: space-between;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/feature_type/Feature_type_detail.vue b/src/views/feature_type/Feature_type_detail.vue
index 764d774b093e625b0703557700d1b0b7a049d793..da88aa98241eff327bfc382ed0968f072e8c30c6 100644
--- a/src/views/feature_type/Feature_type_detail.vue
+++ b/src/views/feature_type/Feature_type_detail.vue
@@ -1,8 +1,4 @@
<template>
- <!-- <div>
- <h1>{{ feature_type_slug }}</h1>
- {{ feature_type }}
- </div> -->
<div v-if="structure" class="row">
<div class="five wide column">
<div class="ui attached secondary segment">
@@ -166,7 +162,7 @@
<router-link
v-if="project"
:to="{ name: 'liste-signalements', params: { slug: project.slug } }"
- class="ui right labeled icon button"
+ class="ui right labeled icon button margin-25"
>
<i class="right arrow icon"></i>
Voir tous les signalements
@@ -177,7 +173,7 @@
name: 'ajouter-signalement',
params: { slug_type_signal: structure.slug },
}"
- class="ui icon button button-hover-green"
+ class="ui icon button button-hover-green margin-25"
>
Ajouter un signalement
</router-link>
@@ -211,7 +207,6 @@ export default {
...mapState("feature", ["features"]),
...mapState("feature_type", ["feature_types", "importFeatureTypeData"]),
structure: function () {
- // * je ne sais pas pourquoi ça s'appelle structure
if (this.feature_types) {
return this.feature_types.find(
(el) => el.slug === this.$route.params.feature_type_slug
@@ -269,4 +264,10 @@ export default {
);
},
};
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.margin-25 {
+ margin: 0 0.25em 0.25em 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/feature_type/Feature_type_edit.vue b/src/views/feature_type/Feature_type_edit.vue
index e3ccfb670d45e981eff5795891acf54a13d70cb1..9ba25f8a47dd2a05bc3a54a3505aab30d49581e0 100644
--- a/src/views/feature_type/Feature_type_edit.vue
+++ b/src/views/feature_type/Feature_type_edit.vue
@@ -78,7 +78,7 @@
v-model="form.title_optional.value"
type="checkbox"
/>
- <label>{{form.title_optional.label}}</label>
+ <label>{{ form.title_optional.label }}</label>
</div>
</div>
@@ -136,7 +136,7 @@
<div class="ui divider"></div>
<button
- class="ui teal icon button"
+ class="ui teal icon button margin-25"
type="button"
@click="sendFeatureType"
>
@@ -146,7 +146,7 @@
</button>
<button
v-if="geojson"
- class="ui teal icon button"
+ class="ui teal icon button margin-25"
type="button"
@click="postFeatureTypeThenFeatures"
>
@@ -564,6 +564,10 @@ export default {
margin-right: 0.5em;
}
+.margin-25 {
+ margin: 0 0.25em 0.25em 0 !important;
+}
+
/* // * probleme avec le style récupéré, n'est jamais identique !???? */
#formsets {
margin-top: 1em !important;
diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue
index bff3fa9291819c0539257083011c7a90d960670e..cad93896fcb79ea128f82711e3a00372ffe91c50 100644
--- a/src/views/project/Project_detail.vue
+++ b/src/views/project/Project_detail.vue
@@ -181,7 +181,6 @@
>
<i class="inverted grey pencil alternate icon"></i>
</router-link>
- <!-- {% endif %} -->
</div>
</div>
<div v-if="feature_types.length === 0">
@@ -202,25 +201,33 @@
</router-link>
</div>
<div class="nouveau-type-signalement">
- <div class="ui compact basic button button-hover-green">
- <div>
- <label class="ui" for="json_file">
- <i class="ui plus icon"></i>
- <span class="label"
- >Créer un nouveau type de signalement à partir d'un
- GeoJSON</span
- >
- </label>
- <input
- type="file"
- accept="application/json, .json, .geojson"
- style="display: none"
- name="json_file"
- id="json_file"
- @change="onFileChange"
- />
- </div>
- </div>
+ <a
+ class="
+ ui
+ compact
+ basic
+ button button-hover-green
+ flex
+ align-center
+ text-left
+ "
+ >
+ <i class="ui plus icon"></i>
+ <label class="ui" for="json_file">
+ <span class="label"
+ >Créer un nouveau type de signalement à partir d'un
+ GeoJSON</span
+ >
+ </label>
+ <input
+ type="file"
+ accept="application/json, .json, .geojson"
+ style="display: none"
+ name="json_file"
+ id="json_file"
+ @change="onFileChange"
+ />
+ </a>
<br />
<div id="button-import" v-if="fileToImport.size > 0">
<button
@@ -611,4 +618,13 @@ export default {
.fullwidth {
width: 100%;
}
+.flex {
+ display: flex !important;
+}
+.align-center {
+ align-items: center !important;
+}
+.text-left {
+ text-align: left !important;
+}
</style>
\ No newline at end of file