Merge branch 'evol/redmine-ticket-11083-full-responsive-design' into 'develop'

Evol/redmine ticket 11083 full responsive design

See merge request !38

src/App.vue

 <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

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>
+</script>
\ No newline at end of file
+
+<style scoped>
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
\ No newline at end of file

src/views/feature_type/Feature_type_detail.vue

 <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>
+</script>
\ No newline at end of file
+
+<style scoped>
+.margin-25 {
+  margin: 0 0.25em 0.25em 0 !important;
+}
+</style>
\ No newline at end of file

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;

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