public/img/icons/safari-pinned-tab.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
-</svg>

public/img/icons/site.webmanifest

+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file

sonar-project.properties

+sonar.sources = src
+sonar.exclusions = build/**, node_modules/**, src/assets/resources/**
+#sonar.tests = api/tests/

src/App.vue

 <template>
-  <div v-frag>
-    <header class="header-menu">
-      <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"
-            />
-            <span class="desktop">
-              {{ APPLICATION_NAME }}
-            </span>
-          </router-link>
-
-          <div
-            v-if="width <= 560 || (width > 560 && project)"
-            id="menu-dropdown"
-            :class="['ui dropdown item', { 'active visible': menuIsOpen }]"
-            @click="menuIsOpen = !menuIsOpen"
-          >
-            <!-- empty span to occupy space for style if no project -->
-            <span>
-              <span v-if="project"> Projet : {{ project.title }} </span>
-            </span>
-            <i class="dropdown icon"></i>
-            <div
-              :class="[
-                'menu dropdown-list',
-                { 'visible transition': menuIsOpen },
-              ]"
-              style="z-index: 401"
-            >
-              <router-link
-                v-if="project"
-                :to="{
-                  name: 'project_detail',
-                  params: { slug: project.slug },
-                }"
-                class="item"
-              >
-                <i class="home icon"></i>Accueil
-              </router-link>
-              <router-link
-                v-if="project"
-                :to="{
-                  name: 'liste-signalements',
-                  params: { slug: project.slug },
-                }"
-                class="item"
-              >
-                <i class="list icon"></i>Liste & Carte
-              </router-link>
-
-              <router-link
-                v-if="
-                  project &&
-                  (user.is_administrator || user.is_superuser || isAdmin)
-                "
-                :to="{
-                  name: 'project_mapping',
-                  params: { slug: project.slug },
-                }"
-                class="item"
-              >
-                <i class="map icon"></i>Fonds cartographiques
-              </router-link>
-              <router-link
-                v-if="
-                  project &&
-                  (user.is_administrator || user.is_superuser || isAdmin)
-                "
-                :to="{
-                  name: 'project_members',
-                  params: { slug: project.slug },
-                }"
-                class="item"
-              >
-                <i class="users icon"></i>Membres
-              </router-link>
-
-              <div class="mobile">
-                <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
-                >
-              </div>
-            </div>
-          </div>
-
-          <div class="desktop flex push-right-desktop">
-            <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
-            >
-          </div>
-        </div>
-      </div>
-    </header>
-    <main>
-      <div id="content" class="ui stackable grid centered container">
-        <div v-if="messages && messages.length > 0" class="row">
-          <div class="fourteen wide column">
-            <div
-              v-for="(message, index) in messages"
-              :key="'message-' + index"
-              class="ui info message"
-            >
-              <div class="header">
-                <i class="info circle icon"></i> Informations
-              </div>
-              <ul class="list">
-                {{
-                  message.comment
-                }}
-              </ul>
-            </div>
-          </div>
+  <div id="app">
+    <GeorchestraHeader
+      v-if="isGeorchestra"
+      :key="$route.fullPath"
+    />
+    <AppHeader v-else />
+
+
+    <div id="app-content">
+      <span id="scroll-top-anchor" />
+      <div
+        :class="{ active: loader.isLoading }"
+        class="ui inverted dimmer"
+      >
+        <div class="ui text loader">
+          {{ loader.message }}
         </div>
-        <div :class="{ active: loader.isLoading }" class="ui inverted dimmer">
-          <div class="ui text loader">
-            {{ loader.message }}
-          </div>
-        </div>
-        <router-view />
-        <!-- //* Les views sont injectées ici -->
       </div>
-    </main>
 
-    <footer>
-      <div class="ui compact text menu">
-        <router-link to="/mentions/" class="item">Mentions légales</router-link>
-        <router-link to="/aide/" class="item">Aide</router-link>
-        <p class="item">Version {{ PACKAGE_VERSION }}</p>
-      </div>
-    </footer>
+      <!-- //* Les views sont injectées ici -->
+      <router-view class="page-content" />
+    </div>
+
+    <AppFooter />
   </div>
 </template>
 
 <script>
-import frag from "vue-frag";
-import { mapState } from "vuex";
-import { mapGetters } from "vuex";
+import { mapState } from 'vuex';
+
+import AppHeader from '@/components/AppHeader';
+import AppFooter from '@/components/AppFooter';
+import GeorchestraHeader from '@/components/GeorchestraHeader.vue';
 
 export default {
-  name: "App",
+  name: 'App',
 
-  directives: {
-    frag,
+  components: {
+    GeorchestraHeader,
+    AppHeader,
+    AppFooter,
   },
 
   data() {
     return {
       menuIsOpen: false,
       rightMenuIsOpen: true,
+      baseUrl: this.$store.state.configuration.BASE_URL,
       width: window.innerWidth > 0 ? window.innerWidth : screen.width,
     };
   },
 
   computed: {
     ...mapState([
-      "projects",
-      "user",
-      "SSO_SETTED",
-      "USER_LEVEL_PROJECTS",
-      "configuration",
-      "messages",
-      "loader",
+      'user',
+      'USER_LEVEL_PROJECTS',
+      'configuration',
+      'loader',
     ]),
-    ...mapGetters(["project"]),
-    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)
-        return this.user.first_name + " " + this.user.last_name;
-      return null;
-    },
-    isAdmin: function () {
-      return this.USER_LEVEL_PROJECTS &&
-        this.USER_LEVEL_PROJECTS[this.project.slug] === "Administrateur projet"
-        ? true
-        : false;
-    },
-  },
-
-  methods: {
-    logout() {
-      this.$store.dispatch("LOGOUT");
-    },
-
-    clickOutsideMenu(e) {
-      if (e.target.closest && !e.target.closest("#menu-dropdown"))
-        this.menuIsOpen = false;
+    ...mapState('projects', [
+      'projects',
+      'project',
+    ]),
+    isGeorchestra() {
+      return this.configuration.GEORCHESTRA_INTEGRATION?.HEADER;
     },
   },
-
-  created() {
-    window.addEventListener("mousedown", this.clickOutsideMenu);
-  },
-
-  beforeDestroy() {
-    window.removeEventListener("mousedown", this.clickOutsideMenu);
-  },
 };
 </script>
 
-<style>
-@import "./assets/styles/base.css";
-@import "./assets/resources/semantic-ui-2.4.2/semantic.min.css";
-
-body {
-  height: 100vh;
-  margin: 0;
-}
-
-header {
-  min-height: 61px;
-}
-footer {
-  min-height: 40px;
-}
-
-/* Trick */
-body {
-  display: flex;
-  flex-direction: column;
-}
-
-/* to display loader between header and footer */
-main {
-  position: relative;
-}
-
-footer {
-  margin-top: auto;
-}
-
-.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 (min-width: 560px) {
-  .mobile {
-    display: none !important;
-  }
-  .header-menu {
-    min-width: 560px;
-  }
-  .menu.container {
-    width: auto !important;
-    margin-left: 1em !important;
-    margin-right: 1em !important;
-  }
-  .push-right-desktop {
-    margin-left: auto;
-  }
-}
-
-@media screen and (max-width: 560px) {
-  .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;
-  }
-}
-
-.ui.menu .ui.dropdown .menu > .item.no-hover:hover {
-  cursor: auto !important;
-  background: white !important;
-}
-/* copy style to apply inside nested div */
-.ui.menu .ui.dropdown .menu .item {
-  margin: 0;
-  text-align: left;
-  font-size: 1em !important;
-  padding: 0.78571429em 1.14285714em !important;
-  background: 0 0 !important;
-  color: #252525 !important;
-  text-transform: none !important;
-  font-weight: 400 !important;
-  box-shadow: none !important;
-  transition: none !important;
+<style scoped>
+.ui.active.dimmer {
+  position: fixed;
 }
 </style>
- 
\ No newline at end of file

src/assets/icons/fa-icons.js

+const faIcons = [
+  'circle',
+  'address-book',
+  'address-card',
+  'adjust',
+  'ambulance',
+  'anchor',
+  'angle-double-down',
+  'angle-double-left',
+  'angle-double-right',
+  'angle-double-up',
+  'angle-down',
+  'angle-left',
+  'angle-right',
+  'angle-up',
+  'apple-alt',
+  'archive',
+  'archway',
+  'arrow-alt-circle-down',
+  'arrow-alt-circle-left',
+  'arrow-alt-circle-right',
+  'arrow-alt-circle-up',
+  'arrow-circle-down',
+  'arrow-circle-left',
+  'arrow-circle-right',
+  'arrow-circle-up',
+  'arrow-down',
+  'arrow-left',
+  'arrow-right',
+  'arrow-up',
+  'arrows-alt',
+  'arrows-alt-h',
+  'arrows-alt-v',
+  'assistive-listening-systems',
+  'asterisk',
+  'at',
+  'atlas',
+  'award',
+  'baby',
+  'baby-carriage',
+  'backspace',
+  'backward',
+  'bahai',
+  'balance-scale',
+  'ban',
+  'band-aid',
+  'baseball-ball',
+  'basketball-ball',
+  'bed',
+  'beer',
+  'bicycle',
+  'biking',
+  'binoculars',
+  'blind',
+  'bolt',
+  'bong',
+  'book',
+  'book-medical',
+  'book-open',
+  'book-reader',
+  'box-open',
+  'briefcase',
+  'briefcase-medical',
+  'broadcast-tower',
+  'building',
+  'bus',
+  'bus-alt',
+  'camera',
+  'camera-retro',
+  'campground',
+  'car',
+  'car-alt',
+  'car-side',
+  'caravan',
+  'caret-down',
+  'caret-left',
+  'caret-right',
+  'caret-square-down',
+  'caret-square-left',
+  'caret-square-right',
+  'caret-square-up',
+  'caret-up',
+  'carrot',
+  'cart-arrow-down',
+  'cart-plus',
+  'cash-register',
+  'check',
+  'check-circle',
+  'check-square',
+  'chevron-circle-down',
+  'chevron-circle-left',
+  'chevron-circle-right',
+  'chevron-circle-up',
+  'chevron-down',
+  'chevron-left',
+  'chevron-right',
+  'chevron-up',
+  'city',
+  'clinic-medical',
+  'clock',
+  'cocktail',
+  'code-branch',
+  'coffee',
+  'cog',
+  'cogs',
+  'comment',
+  'comment-alt',
+  'compass',
+  'compress',
+  'compress-alt',
+  'compress-arrows-alt',
+  'concierge-bell',
+  'credit-card',
+  'cross',
+  'crosshairs',
+  'crow',
+  'deaf',
+  'directions',
+  'dog',
+  'edit',
+  'envelope',
+  'euro-sign',
+  'exclamation',
+  'exclamation-circle',
+  'exclamation-triangle',
+  'expand',
+  'eye',
+  'eye-slash',
+  'faucet',
+  'female',
+  'file',
+  'fire-alt',
+  'fish',
+  'flag',
+  'flask',
+  'gas-pump',
+  'gavel',
+  'graduation-cap',
+  'h-square',
+  'hammer',
+  'hiking',
+  'home',
+  'hospital',
+  'hospital-symbol',
+  'hotel',
+  'hourglass-half',
+  'house-damage',
+  'house-user',
+  'image',
+  'industry',
+  'info',
+  'info-circle',
+  'landmark',
+  'laptop-house',
+  'leaf',
+  'life-ring',
+  'lightbulb',
+  'location-arrow',
+  'lock',
+  'long-arrow-alt-down',
+  'long-arrow-alt-left',
+  'long-arrow-alt-right',
+  'long-arrow-alt-up',
+  'male',
+  'map',
+  'map-marked',
+  'map-marked-alt',
+  'map-marker',
+  'map-marker-alt',
+  'map-pin',
+  'map-signs',
+  'marker',
+  'medal',
+  'medkit',
+  'microphone',
+  'microscope',
+  'mobile-alt',
+  'money-bill',
+  'motorcycle',
+  'mountain',
+  'mouse-pointer',
+  'mug-hot',
+  'music',
+  'paint-brush',
+  'palette',
+  'paper-plane',
+  'parking',
+  'paw',
+  'pen',
+  'phone-alt',
+  'plane',
+  'plug',
+  'plus',
+  'plus-circle',
+  'plus-square',
+  'podcast',
+  'question',
+  'question-circle',
+  'radiation',
+  'recycle',
+  'road',
+  'running',
+  'satellite-dish',
+  'search',
+  'search-location',
+  'seedling',
+  'share-alt',
+  'ship',
+  'shopping-basket',
+  'shopping-cart',
+  'shuttle-van',
+  'skiing',
+  'snowflake',
+  'sort-down',
+  'square',
+  'square-full',
+  'star',
+  'star-and-crescent',
+  'star-of-david',
+  'star-of-life',
+  'stethoscope',
+  'sticky-note',
+  'store',
+  'store-alt',
+  'street-view',
+  'subway',
+  'suitcase',
+  'suitcase-rolling',
+  'sun',
+  'swimmer',
+  'syringe',
+  'tag',
+  'taxi',
+  'temperature-high',
+  'temperature-low',
+  'thumbs-down',
+  'thumbs-up',
+  'thumbtack',
+  'times',
+  'times-circle',
+  'tint',
+  'tint-slash',
+  'toolbox',
+  'tools',
+  'tractor',
+  'train',
+  'tram',
+  'trash-alt',
+  'tree',
+  'trophy',
+  'truck',
+  'truck-moving',
+  'tshirt',
+  'tv',
+  'umbrella',
+  'umbrella-beach',
+  'university',
+  'user-circle',
+  'user-friends',
+  'user-graduate',
+  'user-md',
+  'utensils',
+  'vial',
+  'video',
+  'walking',
+  'water',
+  'weight-hanging',
+  'wheelchair',
+  'wifi',
+  'wine-glass-alt',
+  'wrench'
+];
+
+export default faIcons;