diff --git a/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css b/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css index 6a3a8a0..e32cb67 100644 --- a/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css +++ b/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css @@ -355,6 +355,7 @@ div.field--name-field-menace-maintien label{ /* width:100%; */ max-height: calc(100vh - 150px); position: relative; + padding: 8%; } #boussole-layout .boussole-wrapper .boussole .entity{ position: absolute; diff --git a/src/web/themes/custom/ouatminimal_theme/js/boussole.js b/src/web/themes/custom/ouatminimal_theme/js/boussole.js index 5a9387c..1001941 100644 --- a/src/web/themes/custom/ouatminimal_theme/js/boussole.js +++ b/src/web/themes/custom/ouatminimal_theme/js/boussole.js @@ -247,8 +247,8 @@ this.values.mm.value = this.values.mm.$dom.value = a; // https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another - // from range 0 -> rayon_de_la_boussole to range 0 -> 100 - let r_max = this.sceneSize.w/2; + // from range 0 -> rayon_de_la_boussole moins 8% de padding |to| range 0 -> 100 + let r_max = this.sceneSize.w/2 * 0.92; let r_slope = (100 - 0) / (r_max - 0); this.values.p.value = this.values.p.$dom.value = 100 - parseFloat(0 + r_slope * (r - 0)).toFixed(2); // this.values.p.$dom.value = this.values.p.value; @@ -290,8 +290,8 @@ // from range 0 -> 100 to range 0 -> diagonale de la scene // let diagonale = Math.sqrt(Math.pow(this.sceneSize.w, 2) + Math.pow(this.sceneSize.h, 2))/2; // let r_max = diagonale; - // actualy we don't use diagonale, we stay on the circle - let r_max = this.sceneSize.w/2; + // actualy we don't use diagonale, we stay on the circle less 8% padding to get 100 on the external circle + let r_max = this.sceneSize.w/2 * 0.92; let r_slope = (r_max - 0) / (100 - 0) // we inverse p as the more p you have the closest you are from the center let r = parseInt(0 + r_slope * ((100 - this.values.p.value) - 0));