improved boussole form ui

src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css

@@ -1,3 +1,24 @@
+/* trying to get more vertical space for the boussole */
+.adminimal .content-header {
+  background-color: #434343;
+  padding: 0.5rem 0 0;
+}
+.adminimal .page-title,
+.adminimal .heading-a {
+  font-size: 1.5em;
+}
+.toolbar-tray a {
+  padding: 0.5em 1.3333em;
+}
+
+.is-horizontal .tabs.primary a {
+  padding: 0 2em 0 2em;
+  background-image: none;
+}
+
+/* END trying to get more vertical space for the boussole */
+
+
 .adminimal input.form-autocomplete, .adminimal input.form-text, .adminimal input.form-tel, .adminimal input.form-email, .adminimal input.form-url, .adminimal input.form-search, .adminimal input.form-number, .adminimal input.form-color, .adminimal input.form-file, .adminimal input.form-date, .adminimal input.form-time, .adminimal textarea.form-textarea{
   background-color: #fff;
   border-radius: 3px;
@@ -218,7 +239,8 @@
   background-repeat: no-repeat;
   background-position: center;
   aspect-ratio: 1 / 1;
-  width:100%;
+  /* width:100%; */
+  max-height: calc(100vh - 150px);
   position: relative;
 }
 #boussole-layout .boussole-wrapper .boussole .entity{

src/web/themes/custom/ouatminimal_theme/js/boussole.js

@@ -216,7 +216,7 @@
       // from range 0 -> rayon_de_la_boussole to range 0 -> 100
       let r_max = this.sceneSize.w/2; 
       let r_slope = (100 - 0) / (r_max - 0);
-      this.values.p.value = this.values.p.$dom.value = parseFloat(0 + r_slope * (r - 0)).toFixed(2);
+      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;
       
       console.log('x:', x, 'r:', r, 'a:', a, "y:", y);
@@ -251,7 +251,8 @@
       // actualy we don't use diagonale, we stay on the circle
       let r_max = this.sceneSize.w/2; 
       let r_slope = (r_max - 0) / (100 - 0)
-      let r = parseInt(0 + r_slope * (this.values.p.value - 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));
 
       let x = r * Math.cos(a);
       let y = r * Math.sin(a);

src/web/themes/custom/ouatminimal_theme/ouatminimal.theme

@@ -64,6 +64,16 @@ function ouatminimal_form_node_form_alter(&$form, FormStateInterface $form_state
   $form['revision_information']['#group'] = 'meta';
 }
 
+// https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme_suggestions_HOOK_alter/10
+function ouatminimal_theme_suggestions_node_edit_form_alter(array &$suggestions, array $variables) {
+  if ($node = \Drupal::routeMatch()->getParameter('node')){
+    $nid = $node->id();
+    $type = $node->getType();
+    $suggestions[] = 'node_edit_form__node_' . $type;
+
+  }
+}
+
 // https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme_suggestions_HOOK_alter/10
 function ouatminimal_theme_suggestions_field_multiple_value_form_alter(array &$suggestions, array $variables) {
   if ($node = \Drupal::routeMatch()->getParameter('node')){

src/web/themes/custom/ouatminimal_theme/templates/form/node-edit-form--node-concernement.html.twig

@@ -0,0 +1,39 @@
+{#
+/**
+ * @file
+ * Theme override for a node edit form.
+ *
+ * Two column template for the node add/edit form.
+ *
+ * This template will be used when a node edit form specifies 'node_edit_form'
+ * as its #theme callback.  Otherwise, by default, node add/edit forms will be
+ * themed by form.html.twig.
+ *
+ * Available variables:
+ * - form: The node add/edit form.
+ *
+ * @see seven_form_node_form_alter()
+ */
+#}
+
+<div class="layout-node-form clearfix">
+  <div class="layout-region layout-region-node-header">
+    {{ form.title }}
+  </div>
+  <div class="layout-region  layout-region-node-center clearfix">
+    <div class="layout-region layout-region-node-main">
+      {# {{ form|without('title','advanced', 'footer', 'actions', 'group_internal') }} #}
+      {{ form|without('title','footer') }}
+    </div>
+    {# <div class="layout-region layout-region-node-secondary">
+      {{ form.group_internal }}
+      {{ form.advanced }}
+      {{ form.actions }}
+    </div> #}
+  </div> 
+  <div class="layout-region layout-region-node-footer">
+    <div class="layout-region-node-footer__content">
+      {{ form.footer }}
+    </div>
+  </div>
+</div>