better responsivness #2416
This commit is contained in:
parent
40dbbb2384
commit
b2614bf755
@ -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;
|
||||
|
||||
@ -96,6 +96,10 @@ 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');
|
||||
|
||||
@ -103,8 +107,13 @@ export default {
|
||||
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>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user