better responsivness #2416

src/assets/main.scss

@@ -14,10 +14,10 @@ body{
   font-size: 16px;
 }
 
-#app{
-  min-width: 1280px;
-  min-height: 800px;
-}
+// #app{
+//   min-width: 1280px;
+//   min-height: 800px;
+// }
 
 #app>header#header{
   // background-color: $front;
@@ -115,7 +115,7 @@ body{
     ul{
       display: flex;
       flex-flow: row;
-      gap: 1em;
+      // gap: 1em;
       pointer-events: none;
       li{
         list-style: none;
@@ -147,7 +147,7 @@ body{
       }
       
     }
-    @media screen and (max-width: 1300px) {
+    @media screen and (max-width: 1500px) {
       ul{
         gap: 0.5em;
         li{
@@ -179,16 +179,31 @@ body{
     }
   }
 
-  $cartouch_width : 450px;
+  $cartouch_width_full : 450px;
+  $cartouch_width_medium: 350px;
+  $cartouch_width_small: 250px;
+
   @mixin font_questions{
     font-size: 1em;
     font-weight: 500;
     line-height: 1.4;
+    @media screen and (max-width: 1500px) {
+      font-size: 0.882em;
+    }
+    @media screen and (max-width: 880px) {
+      font-size: 0.756em;
+    }
   }
   @mixin font_reponses{
     font-weight: 100;
     font-size: 0.882em;
     line-height: 1.4;
+    @media screen and (max-width: 1500px) {
+      font-size: 0.756em;
+    }
+    @media screen and (max-width: 880px) {
+      font-size: 0.693em;
+    }
   }
   #content{
     display: flex;
@@ -196,7 +211,7 @@ body{
     @mixin main-cartouche{
       background-color: rgba(255, 255, 255, 1);
       box-sizing: border-box;
-      width:$cartouch_width;
+      width:$cartouch_width_full;
       height: 100%;
       padding: 2rem 2rem 1rem;
       overflow-y: auto;
@@ -204,6 +219,14 @@ body{
       //
       display: flex;
       flex-direction: column;
+      @media screen and (max-width: 1500px) {
+        width: $cartouch_width_medium;
+        padding: 1rem 1rem 0.5rem;
+      }
+      @media screen and (max-width: 880px) {
+        width: $cartouch_width_small;
+        padding: 0.5rem 0.5rem 0.5rem;
+      }
     }
     section.static{
       @include main-cartouche();
@@ -721,7 +744,7 @@ body{
       pointer-events: none;
       overflow: hidden;
       top: 0; left: 0;
-      width: calc(100vw - $cartouch_width - 0.5rem);
+      width: calc(100vw - $cartouch_width_full - 0.5rem);
       height: 100vh;
       div{
         pointer-events: all;
@@ -811,6 +834,12 @@ body{
         border-radius: 3px;
         // border: #fff 1px solid;
       }
+      @media screen and (max-width: 1500px) {
+        width: $cartouch_width_medium
+      }
+      @media screen and (max-width: 880px) {
+        width: $cartouch_width_small;
+      }
     }
     &:not(.visible){
       display: none;

src/components/MapConcernements.vue

@@ -96,16 +96,25 @@ export default {
   },
   mounted() {
     console.log('map mounted');
+
+    // update the cartouch width reference
+    this.setOriginalCartoucheWidth(this.getCartouchWidth());
+
     this.canvasMap.canvas = this.$refs['canvas-map'];
     this.canvasMap.ctx = this.canvasMap.canvas.getContext('2d');
 
-    let canvas_w = this.canvasMap.canvas.width = this.canvasMap.canvas.parentElement.clientWidth;
+    let canvas_w = this.canvasMap.canvas.width  = this.canvasMap.canvas.parentElement.clientWidth;
     let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
     console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
 
+
     // PAPER
     this.paper = paper.setup(this.canvasMap.canvas);
-    
+    // this.paper.view.viewSize = new paper.Size(canvas_w, canvas_h);
+    // this resizing is needed for display with pixel ratio more than 1 (retina)
+    this.canvasMap.canvas.setAttribute('width', canvas_w);
+    this.canvasMap.canvas.setAttribute('height', canvas_h);
+
     // symbol defintions
     this.initPaperSymbols();
 
@@ -269,7 +278,8 @@ export default {
                                       'resetConcernementOpened']),
     ...mapActions(CommonStore,['addPaperSymbolDefinition',
                                'setHoverElmt',
-                               'updateMapItemRay']),
+                               'updateMapItemRay',
+                               'setOriginalCartoucheWidth']),
     animate () {
       // if (document.hasFocus()) {
         Matter.Engine.update(this.engine, 1);
@@ -358,6 +368,8 @@ export default {
       // paper.view.viewSize.width = canvas_w;
       // paper.view.viewSize.height = canvas_h;
       this.paper.view.viewSize = new paper.Size(canvas_w, canvas_h);
+      // this.canvasMap.canvas.setAttribute('width', canvas_w);
+      // this.canvasMap.canvas.setAttribute('height', canvas_h);
 
       // apply to matter env
       // this.buildMatterWalls();
@@ -370,7 +382,20 @@ export default {
       // rebuild all the paper symbols with new ray
       this.initPaperSymbols(true)
 
+      // update the cartouch width reference
+      this.setOriginalCartoucheWidth(this.getCartouchWidth());
+
 
+    },
+    getCartouchWidth(){
+      let ww = window.clientWidth;
+      if (ww > 1500) {
+        return 450;
+      } else if (ww > 880) {
+        return 400;
+      } else {
+        return 350;
+      }
     },
     initPaperSymbols(update){
       this.addPaperSymbolDefinition('boussole_bg', this.setPaperBoussoleBGSymbol());
@@ -503,11 +528,11 @@ export default {
         strokeColor: '#fff',
       }))
 
-      let fontsize = 4;
+      let fontsize = 3;
       let fontFamily = "public_sans";
       
       children.push(new paper.PointText({
-        point: [pos.x + 4.5, pos.y - ray - 5],
+        point: [pos.x + 4.5, pos.y - ray],
         content: `entités qui menacent \u2194 entités qui maintiennent`,
         fontSize: fontsize,
         fontFamily: fontFamily,
@@ -516,7 +541,7 @@ export default {
       }))
 
       children.push(new paper.PointText({
-        point: [pos.x - ray - 5, pos.y + 1],
+        point: [pos.x - ray, pos.y + 1],
         content: "axe d'intensité",
         fontSize: fontsize,
         fontFamily: fontFamily,
@@ -525,7 +550,7 @@ export default {
       }))
 
       children.push(new paper.PointText({
-        point: [pos.x + ray + 5, pos.y - 3],
+        point: [pos.x + ray, pos.y - 3],
         content: "situation future\n\u2195\nsituation actuelle",
         fontSize: fontsize,
         fontFamily: fontFamily,
@@ -535,7 +560,7 @@ export default {
 
 
       let t1 = new paper.PointText({
-        point: [pos.x - ray/8*2.3, pos.y - ray/8*2.3],
+        point: [pos.x - ray/8*2.54, pos.y - ray/8*2.54],
         content: "avec prise",
         fontSize: fontsize,
         fontFamily: fontFamily,
@@ -546,7 +571,7 @@ export default {
       children.push(t1)
 
       let t2 = new paper.PointText({
-        point: [pos.x - ray/8*2.95, pos.y - ray/8*2.95],
+        point: [pos.x - ray/8*3.1, pos.y - ray/8*3.1],
         content: "sans prise",
         fontSize: fontsize,
         fontFamily: fontFamily,
@@ -1465,9 +1490,9 @@ export default {
   <div id="map-backgrounds">
     <MapBackground />
   </div>
-  <div id="map-matter">
+  <!-- <div id="map-matter">
     <canvas ref="canvas-engine"></canvas>
-  </div>
+  </div> -->
   <div id="map-concernements">
     <canvas ref="canvas-map"></canvas>
     <slot></slot>

src/stores/common.js

@@ -21,6 +21,10 @@ export const CommonStore = defineStore({
       // mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer
       this.hover_elmt = elmt;
     },
+    setOriginalCartoucheWidth (w) {
+      console.log('CommonStore setOriginalCartoucheWidth', w);
+      this.original_cartouch_width = w;
+    },
     setCartoucheWidth (delta) {
       console.log('CommonStore setCartoucheWidth', delta);
       this.cartouch_width = this.original_cartouch_width * delta;