implements theming

assets/style/variables.scss

@@ -2,6 +2,3 @@
 //
 // The variables you want to modify
 // $font-size-root: 20px;
-
-
-$theme: #e4611b;

layouts/default.vue

@@ -8,7 +8,6 @@
       </v-main>
 
       <v-footer
-        :absolute="!fixed"
         app
       >
         <span>&copy; Opentalent {{ new Date().getFullYear() }}</span>
@@ -18,18 +17,7 @@
 </template>
 
 <script>
-export default {
-  props: {
-    dark: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    fixed: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  }
-}
+import Vue from 'vue'
+
+export default Vue.extend({})
 </script>

nuxt.config.js

@@ -1,5 +1,3 @@
-import colors from 'vuetify/es5/util/colors'
-
 export default {
 
   // Enable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
@@ -44,7 +42,8 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
-    { src: '~/plugins/vue2-leaflet-markercluster.js', mode: 'client' }
+    { src: '~/plugins/vue2-leaflet-markercluster.js', mode: 'client' },
+    { src: '~/plugins/theming.js', mode: 'client' }
   ],
 
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
@@ -76,22 +75,19 @@ export default {
       }]
   ],
 
-  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
+  // Vuetify module configuration
+  // @see https://vuetifyjs.com/en/features/theme/
   vuetify: {
     customVariables: ['~/assets/style/variables.scss'],
     treeShake: true,
     theme: {
-      dark: false,
       themes: {
-        dark: {
-          primary: colors.blue.darken2,
-          accent: colors.grey.darken3,
-          secondary: colors.amber.darken3,
-          info: colors.teal.lighten1,
-          warning: colors.amber.base,
-          error: colors.deepOrange.accent4,
-          success: colors.green.accent3
+        light: {
+          primary: '#0aa5ec'
         }
+      },
+      options: {
+        customProperties: true
       }
     }
   },

pages/structures/_id.vue

@@ -244,13 +244,13 @@ export default Vue.extend({
   }
 
   h2 {
-    color: $theme;
+    color: var(--v-primary-base);
     font-size: 22px;
   }
 
   h4 {
     color: #666;
-    border-bottom: solid 1px $theme;
+    border-bottom: solid 1px var(--v-primary-base);
     font-size: 22px;
   }
 
@@ -282,6 +282,6 @@ export default Vue.extend({
   }
 
   .contact .icon {
-    color: $theme;
+    color: var(--v-primary-base);
   }
 </style>

pages/structures/index.vue

@@ -489,7 +489,7 @@ export default Vue.extend({
   @import 'assets/style/variables.scss';
 
   h2 {
-    color: $theme;
+    color: var(--v-primary-base);
   }
 
   .structure-card {
@@ -503,14 +503,14 @@ export default Vue.extend({
 
   .title {
     word-break: normal;
-    color: $theme;
+    color: var(--v-primary-base);
     font-size: 18px;
     font-weight: 500;
     line-height: 1.6rem;
   }
 
   .icon {
-    color: $theme;
+    color: var(--v-primary-base);
   }
 
   .results-count {

plugins/theming.js

@@ -0,0 +1,37 @@
+/**
+ *  Modify the current theme color according to the optional 'theme' parameter passed in the current query
+ * @param context
+ */
+export default function (context) {
+  if (context.query.theme) {
+    switch (context.query.theme) {
+      case 'blue':
+        context.$vuetify.theme.themes.light.primary = '#0aa5ec'
+        break
+      case 'green':
+        context.$vuetify.theme.themes.light.primary = '#04a04c'
+        break
+      case 'grey':
+        context.$vuetify.theme.themes.light.primary = '#8c8c8c'
+        break
+      case 'lightblue':
+        // already the default one
+        break
+      case 'lightred':
+        context.$vuetify.theme.themes.light.primary = '#dd453f'
+        break
+      case 'orange':
+        context.$vuetify.theme.themes.light.primary = '#e4611b'
+        break
+      case 'purple':
+        context.$vuetify.theme.themes.light.primary = '#a5377e'
+        break
+      case 'red':
+        context.$vuetify.theme.themes.light.primary = '#df0009'
+        break
+      default:
+        // eslint-disable-next-line no-console
+        console.error('invalid theme: ' + context.query.theme)
+    }
+  }
+}

todo.md

@@ -1,18 +1,11 @@
-
 ## fixes
 
-* nuxt-links buguent parfois
-* page détails: ne créer le lien vers le network que quand la fédé n'est pas l'organization parente de la frame
+* permettre de sélectionner le thème de couleur (par un param de l'url qui se conserve entre les pages?)
 
 ## en plus
 
-* conserver le param 'organization-id' au travers des requêtes
-* permettre de sélectionner le thème de couleur (par un param de l'url qui se conserve entre les pages?)
-* pouvoir mettre le mode map ou list en param des requêtes
-* faire des tests fonctionnels
 * remplacer la liste déroulante 'Distance' par un slider
 * documenter
-* implémenter TS partout
 
 ## déployer
 
@@ -20,11 +13,18 @@
 * installer sur preprod, et configurer le sous-domaine 'frames'
 * installer sur prod-front?
 
-## A discuter
-
-* filtre par localisation: voir à incorporer aussi les résultats dont le CP correspond?
 
 ## finaliser
 
 * nettoyer le code de typo
 * virer le site frames
+
+## cypress
+
+* adapter aux nouveaux paramètres de requête attendus
+* améliorer les perfs, peut-être en faisant un yarn build lors de la phase d'install
+* tester la carte leaflet en:
+  * vérifiant que des coordonnées sont visibles
+  * permettant de zoomer sur un emplacement
+* fournir une base de fixtures permettant de tester plus précisément les choses
+* intercepter la requête à api.gouv.fr