From 206f3277a961a3dc5f6bdfc7ac9e49d577c916c1 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Tue, 31 Oct 2023 09:38:55 +0100
Subject: [PATCH] Fix #1368

---
 app/assets/stylesheets/admin/pure/style.sass  |   3 +
 .../communication/websites/_form.html.erb     | 196 ++++++++++--------
 config/locales/communication/en.yml           |  10 +
 config/locales/communication/fr.yml           |  12 ++
 4 files changed, 139 insertions(+), 82 deletions(-)

diff --git a/app/assets/stylesheets/admin/pure/style.sass b/app/assets/stylesheets/admin/pure/style.sass
index 8b088ce6a..c60b69522 100644
--- a/app/assets/stylesheets/admin/pure/style.sass
+++ b/app/assets/stylesheets/admin/pure/style.sass
@@ -56,6 +56,9 @@ p
     margin-top: $spacing4 !important
     padding-bottom: $spacing0
     text-transform: uppercase
+section:first-of-type
+    .category
+        margin-top: 0 !important
 
 a
     text-decoration: none
diff --git a/app/views/admin/communication/websites/_form.html.erb b/app/views/admin/communication/websites/_form.html.erb
index eca9ea45c..285079b23 100644
--- a/app/views/admin/communication/websites/_form.html.erb
+++ b/app/views/admin/communication/websites/_form.html.erb
@@ -3,89 +3,121 @@
   <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
 
   <div class="row">
-    <div class="col-xl-4">
-      <%= osuny_panel t('metadata') do %>
-        <%= f.input :name %>
-        <%= f.input :url %>
-        <%= f.input :in_production %>
-        <%= render 'admin/communication/abouts', f: f, i18n_key: 'activerecord.attributes.communication/website.about_' %>
-      <% end %>
+    <div class="col-lg-4">
+      <%= f.input :name %>
     </div>
-    <div class="col-xl-4">
-      <%= osuny_panel Communication::Website.human_attribute_name('features') do %>
-        <%= f.input :feature_posts %>
-        <%= f.input :feature_agenda %>
-      <% end %>
-      <%= osuny_panel t('communication.website.hosting') do %>
-        <%= f.input :deuxfleurs_hosting, hint: website.deuxfleurs_identifier %>
-      <% end %>
-      <%= osuny_panel t('communication.website.analytics') do %>
-        <%= f.input :plausible_url %>
-      <% end %>
-    </div>
-    <div class="col-xl-4">
-      <%= osuny_panel Language.model_name.human(count: 2) do %>
-        <%= f.association :languages, 
-                          as: :check_boxes, 
-                          required: true, 
-                          wrapper_html: { class: "js-languages" }, 
-                          label_method: lambda { |l| language_name(l.iso_code) } %>
-        <%= f.association :default_language, 
-                          include_blank: t('simple_form.include_blanks.defaults.language'), 
-                          label_method: lambda { |l| language_name(l.iso_code) }, 
-                          input_html: (@website.persisted? ? { disabled: true } : { class: "js-default-language" }) %>
-      <% end %>
-      <%= osuny_panel Communication::Website.human_attribute_name('appearance') do %>
-        <%= f.input :default_image,
-                    as: :single_deletable_file,
-                    direct_upload: true,
-                    hint: default_images_formats_accepted_hint,
-                    input_html: { accept: default_images_formats_accepted },
-                    preview: true %>
-      <% end %>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-xl-4">
-      <%= osuny_panel t('communication.website.git') do %>
-        <%= f.input :autoupdate_theme %>
-        <%= f.input :git_provider, include_blank: false %>
-        <%= f.input :git_endpoint %>
-        <%= f.input :access_token, 
-                    as: :string, 
-                    placeholder: masked_string(f.object.access_token), 
-                    hint: t("simple_form.hints.communication_website.access_token_#{f.object.access_token.blank? ? 'without' : 'with'}_existing").html_safe,
-                    input_html: {
-                      autocomplete: 'access_token',
-                      role: 'presentation',
-                      value: ''
-                    }
-                    %>
-        <%= f.input :repository %>
-        <%= f.input :git_branch %>
-        <%= f.input :deployment_status_badge, 
-                    as: :string, 
-                    input_html: {
-                      autocomplete: 'deployment_status_badge',
-                      role: 'presentation'
-                    }
-                    %>
-      <% end %>
-    </div>
-    <div class="col-xl-4">
-      <%= osuny_panel Communication::Website.human_attribute_name('social') do %>
-        <%= f.input :social_email %>
-        <%= f.input :social_mastodon %>
-        <%= f.input :social_peertube %>
-        <%= f.input :social_x %>
-        <%= f.input :social_github %>
-        <%= f.input :social_linkedin %>
-        <%= f.input :social_youtube %>
-        <%= f.input :social_vimeo %>
-        <%= f.input :social_instagram %>
-        <%= f.input :social_facebook %>
-        <%= f.input :social_tiktok %>
-      <% end %>
+    <div class="col-lg-8">
+      <section>
+        <p class="float-end blocks__category__description"><%= t "admin.communication.website.editorial.description" %></p>
+        <h2 class="h3 category blocks__category__title"><%= t "admin.communication.website.editorial.label" %></h2>
+        <%= osuny_panel Communication::Website.human_attribute_name('features') do %>
+          <div class="row">
+            <div class="col-lg-6">
+              <%= f.input :feature_posts %>
+            </div>
+            <div class="col-lg-6">
+              <%= f.input :feature_agenda %>
+            </div>
+          </div>
+        <% end %>
+
+        <%= osuny_panel Language.model_name.human(count: 2) do %>
+          <div class="row">
+            <div class="col-lg-6">
+              <%= f.association :languages, 
+                                as: :check_boxes, 
+                                required: true, 
+                                wrapper_html: { class: "js-languages" }, 
+                                label_method: lambda { |l| language_name(l.iso_code) } %>
+            </div>
+            <div class="col-lg-6">
+              <%= f.association :default_language, 
+                                include_blank: t('simple_form.include_blanks.defaults.language'), 
+                                label_method: lambda { |l| language_name(l.iso_code) }, 
+                                input_html: (@website.persisted? ? { disabled: true } : { class: "js-default-language" }) %>
+            </div>
+          </div>
+        <% end %>
+
+        <%= osuny_panel Communication::Website.human_attribute_name('appearance') do %>
+          <div class="row">
+            <div class="col-lg-6">
+              <p class="form-text">
+                <%= t('admin.communication.website.default_image') %>
+              </p>
+              <%= f.input :default_image,
+                          as: :single_deletable_file,
+                          direct_upload: true,
+                          hint: default_images_formats_accepted_hint,
+                          input_html: { accept: default_images_formats_accepted },
+                          preview: 300 %>
+            </div>
+          </div>
+        <% end %>
+
+        <%= osuny_panel Communication::Website.human_attribute_name('social') do %>
+          <div class="row">
+            <div class="col-lg-6">
+              <p><%= t('admin.communication.website.social.free') %></p>
+              <%= f.input :social_email %>
+              <%= f.input :social_mastodon %>
+              <%= f.input :social_peertube %>
+            </div>
+            <div class="col-lg-6">
+              <p><%= t('admin.communication.website.social.private') %></p>
+              <%= f.input :social_x %>
+              <%= f.input :social_github %>
+              <%= f.input :social_linkedin %>
+              <%= f.input :social_youtube %>
+              <%= f.input :social_vimeo %>
+              <%= f.input :social_instagram %>
+              <%= f.input :social_facebook %>
+              <%= f.input :social_tiktok %>
+            </div>
+          </div>
+        <% end %>
+      </section>
+      
+      <section>
+        <p class="float-end blocks__category__description"><%= t "admin.communication.website.technical.description" %></p>
+        <h2 class="h3 category blocks__category__title"><%= t "admin.communication.website.technical.label" %></h2>
+
+        <%= osuny_panel t('metadata') do %>
+          <%= f.input :url %>
+          <%= f.input :in_production %>
+          <%= render 'admin/communication/abouts', f: f, i18n_key: 'activerecord.attributes.communication/website.about_' %>
+        <% end %>
+
+        <%= osuny_panel t('communication.website.hosting') do %>
+          <%= f.input :deuxfleurs_hosting, hint: website.deuxfleurs_identifier %>
+          <%= f.input :autoupdate_theme %>
+          <%= f.input :plausible_url %>
+        <% end %>
+
+        <%= osuny_panel t('communication.website.git') do %>
+          <%= f.input :git_provider, include_blank: false %>
+          <%= f.input :git_endpoint %>
+          <%= f.input :access_token, 
+                      as: :string, 
+                      placeholder: masked_string(f.object.access_token), 
+                      hint: t("simple_form.hints.communication_website.access_token_#{f.object.access_token.blank? ? 'without' : 'with'}_existing").html_safe,
+                      input_html: {
+                        autocomplete: 'access_token',
+                        role: 'presentation',
+                        value: ''
+                      }
+                      %>
+          <%= f.input :repository %>
+          <%= f.input :git_branch %>
+          <%= f.input :deployment_status_badge, 
+                      as: :string, 
+                      input_html: {
+                        autocomplete: 'deployment_status_badge',
+                        role: 'presentation'
+                      }
+                      %>
+        <% end %>
+      </section>
     </div>
   </div>
   <% content_for :action_bar_right do %>
diff --git a/config/locales/communication/en.yml b/config/locales/communication/en.yml
index 6dd6adeef..db409f658 100644
--- a/config/locales/communication/en.yml
+++ b/config/locales/communication/en.yml
@@ -257,6 +257,16 @@ en:
         agenda:
           events:
             none: No event yet
+        default_image: "The default image will be used on pages and posts that do not have an image, if the theme is set to display images in all cases. It is also the default sharing image."
+        editorial: 
+          label: Editorial
+          description: Everything related to content
+        technical:
+          label: Technical
+          description: Everything related to technical settings
+        social:
+          free: Libres
+          private: Privatifs
         pages:
           as_list: See as a list
           as_tree: Organize structure
diff --git a/config/locales/communication/fr.yml b/config/locales/communication/fr.yml
index c06221b13..fb95a9c82 100644
--- a/config/locales/communication/fr.yml
+++ b/config/locales/communication/fr.yml
@@ -257,6 +257,16 @@ fr:
         agenda:
           events:
             none: Pas encore d'événements
+        default_image: "L'image par défaut sera utilisée dans les pages et actualités qui n'ont pas d'image, si le thème est paramétré pour afficher des images dans tous les cas. C'est aussi l'image de partage par défaut."
+        editorial: 
+          label: Éditorial
+          description: Tout ce qui est lié au contenu
+        technical:
+          label: Technique
+          description: Tout ce qui est lié aux réglages techniques
+        social:
+          free: Libres
+          private: Privatifs
         pages:
           as_list: Voir en liste
           as_tree: Organiser l'arborescence
@@ -434,6 +444,8 @@ fr:
         access_token_with_existing: Votre jeton d'accès Github ou Gitlab confidentiel.<br>Laisser le champ vide pour ne pas le modifier.
         access_token_without_existing: Votre jeton d'accès Github ou Gitlab confidentiel.
         deployment_status_badge: "URL du badge : <a href=\"https://docs.github.com/en/actions/monitoring-and-troubleshooting-workflows/adding-a-workflow-status-badge\" target=\"_blank\">Github</a>, <a href=\"https://docs.gitlab.com/ee/user/project/badges.html\" target=\"_blank\">Gitlab</a>"
+        feature_posts: Pour publier des actualités, comme un média
+        feature_agenda: Pour partager des événements
         git_branch: 'Laisser vide pour la branche par défaut'
         git_endpoint: 'Laisser vide pour les valeurs par défaut (https://github.com ou https://gitlab.com/api/v4)'
         languages: 'Si vous sélectionnez une seule langue les urls ne seront pas préfixées. Si vous en sélectionnez plusieurs le site sera considéré comme multilingue et donc toutes les urls seront préfixées avec la langue (/fr, /en)'
-- 
GitLab