better

app/assets/stylesheets/extranet/pages/_experience.sass

-.experience
-    &__company
-        &__logo
-            max-width: 100px
\ No newline at end of file

app/assets/stylesheets/extranet/pages/_experiences.sass

+.experiences
+    &__experience
+        @include pseudo-bottom-border
\ No newline at end of file

app/assets/stylesheets/extranet/pages/_organization.sass

@@ -19,23 +19,3 @@
         align-items: center
         display: flex
         justify-content: space-between
-        
-.organizations-show
-    .experiences
-        margin-top: px2rem(80)
-        ul
-            padding-left: 0
-            li
-                @include make-row
-                display: flex
-                position: relative
-                > div
-                    @include make-col-ready
-                    &:nth-child(1)
-                        width: percentage(2/9)
-                    &:nth-child(2)
-                        @include pseudo-bottom-border
-                        @include pseudo-top-border
-                        padding-top: px2rem(20)
-                        width: percentage(7/9)
-

app/assets/stylesheets/extranet/pages/_person.sass

@@ -5,49 +5,3 @@
         &__portrait
             margin-top: -200px
             margin-bottom: 50px
-
-.persons-show,
-.account-show
-    .top
-        h1
-            font-weight: normal
-        @include media-breakpoint-down(md)
-            header
-                border-bottom: 0
-    .experiences
-        margin-top: px2rem(70)
-        ul
-            padding-left: 0
-            li
-                @include make-row
-                @include pseudo-top-border
-                display: flex
-                padding: px2rem(16) 0
-                position: relative
-                p
-                    margin-bottom: px2rem(8)
-                > div
-                    @include make-col-ready
-                    padding-bottom: px2rem(10)
-                    padding-top: px2rem(10)
-                    &:nth-child(3)
-                        align-self: center
-                        padding-bottom: 0
-                        padding-top: 0
-                        text-align: right
-                    @include media-breakpoint-up(md)
-                        &:nth-child(1)
-                            width: percentage(4/9)
-                        &:nth-child(2)
-                            width: percentage(2/9)
-                        &:nth-child(3)
-                            width: percentage(3/9)
-                    @include media-breakpoint-down(md)
-                        &:nth-child(2)
-                            width: 50%
-                        &:nth-child(3)
-                            width: 50%
-                &:last-child
-                    @include pseudo-bottom-border
-                img
-                    max-height: 80px
\ No newline at end of file

app/views/extranet/account/show.html.erb

@@ -2,28 +2,18 @@
 
 <div class="row">
   <div class="col-md-9">
-    <div class="biography">
+    <div class="biography mb-5">
       <p><%= @person&.biography %></p>
     </div>
 
-    <div class="experiences">
-      <%= link_to University::Person::Experience.human_attribute_name('new'),
-                  new_experience_path,
-                  class: 'btn btn-sm btn-secondary float-end mb-4' %>
-      <p class="mb-4"><%= t('extranet.experiences.title') %></p>
-      <br>
-      <% if @person&.experiences.any? %>
-        <ul>
-          <% @person.experiences.ordered.each do |experience| %>
-            <%= render 'extranet/experiences/experience', experience: experience, edit: true %>
-          <% end %>
-        </ul>
-        <% end %>
-    </div>
+    <%= link_to University::Person::Experience.human_attribute_name('new'),
+                new_experience_path,
+                class: 'btn btn-sm btn-secondary float-end' %>
+    <p><%= t('extranet.experiences.title') %></p>
+    <%= render 'extranet/experiences/list', person: @person, edit: true %>
   </div>
   <div class="col-md-3">
     <%= kamifusen_tag @person.best_picture, width: 400, class: 'img-fluid person__portrait' if @person&.best_picture.attached? %>
-
     <div class="mb-4">
       <%= link_to t('extranet.account.edit'), edit_account_path, class: 'btn btn-primary mb-2' %>
       <%= link_to t('extranet.account.edit_personal_data'), edit_personal_data_path, class: 'btn btn-primary' %>

app/views/extranet/experiences/_experience.html.erb

 <%
 edit ||= false
 %>
-<li>
-  <div>
+<li class="experiences__experience row py-3">
+  <div class="col-md-4">
     <p><b><%= experience.description %></b></p>
     <p class="mb-0">
       <%= "#{experience.from_year} —" if experience.from_year %>
       <%= experience.to_year || t('today') %>
     </p>
+
+    <%= link_to University::Person::Experience.human_attribute_name('edit'),
+                edit_experience_path(experience),
+                class: 'btn btn-sm btn-secondary mt-2' if edit %>
   </div>
-  <div>
-    <% if experience.organization.present? %>
+  <% if experience.organization.present? %>
+    <div class="col-md-6">
       <p><%= link_to experience.organization, experience.organization %></p>
       <% if experience.organization.url %>
         <p class="mb-0"><small><%= link_to experience.organization.url, experience.organization.url %></small></p>
       <% end %>
-    <% end %>
-  </div>
-  <div class="experience__company">
-    <% if experience.organization.present? %>
+    </div>
+    <div class="col-md-2">
       <% if experience.organization.logo.attached? %>
-          <%= link_to experience.organization do %>
-            <%= kamifusen_tag experience.organization.logo, height: 80, class: 'img-fluid experience__company__logo' %>
-          <% end %>
+        <%= link_to experience.organization do %>
+          <%= kamifusen_tag experience.organization.logo, height: 80, class: 'img-fluid' %>
+        <% end %>
       <% end %>
-    <% end %>
-  </div>
-  <%= link_to University::Person::Experience.human_attribute_name('edit'),
-              edit_experience_path(experience),
-              class: 'btn btn-sm btn-secondary float-end mt-2' if edit %>
+    <div>
+  <% end %>
 </li>

app/views/extranet/experiences/_list.html.erb

+<%
+edit ||= false
+%>
+<% if person&.experiences.any? %>
+  <div class="experiences mt-4">
+    <ul class="list-unstyled">
+      <% @person.experiences.ordered.each do |experience| %>
+        <%= render 'extranet/experiences/experience', experience: experience, edit: edit %>
+      <% end %>
+    </ul>
+  </div>
+<% end %>
\ No newline at end of file

app/views/extranet/organizations/show.html.erb

@@ -2,16 +2,16 @@
 
 <div class="row">
   <div class="col-md-9">
-    <div class="biography">
+    <div class="biography mb-5">
       <p><%= @organization.text %></p>
     </div>
     <div class="experiences">
       <p class="mb-4"><%= t('extranet.organization.experiences', count: @organization.experiences.count) %></p>
-      <ul>
+      <ul class="list-unstyled">
           <% @organization.experiences.ordered.each do |experience| %>
           <li class="mb-3">
             <div>
-              <%= link_to experience.person, class: "stretched-link" do %>
+              <%= link_to experience.person do %>
                 <% if experience.person.picture.attached? %>
                   <%= kamifusen_tag experience.person.picture, width: 200, class: 'img-fluid' %>
                 <% else %>

app/views/extranet/personal_data/edit.html.erb

@@ -4,53 +4,58 @@
   <%= f.error_notification %>
   <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
 
-  <h5><%= University::Person.human_attribute_name('essentials') %></h5>
+  <h2 class="h5 mt-5">
+    <%= University::Person.human_attribute_name('essentials') %>
+  </h2>
 
   <div class="row">
-    <div class="col-md-6">
+    <div class="col-md-4">
       <%= f.input :gender, label_method: lambda { |g| t("activerecord.attributes.university/person.genders.#{g[1]}") } %>
-    </div>
-    <div class="col-md-6">
       <%= f.input :birthdate, discard_year: true, include_blank: true %>
     </div>
+    <div class="col-md-8">
+      <%= f.input :biography, as: :summernote %>
+    </div>
   </div>
-  <%= f.input :description_short %>
-  <%= f.input :biography, as: :summernote %>
 
-  <h5><%= University::Person.human_attribute_name('contacts') %></h5>
+  <h2 class="h5 mt-5">
+    <%= University::Person.human_attribute_name('contacts') %>
+  </h2>
 
   <div class="row">
     <div class="col-md-4">
       <%= f.input :phone_mobile %>
-    </div>
-    <div class="col-md-4">
       <%= f.input :phone_professional %>
-    </div>
-    <div class="col-md-4">
       <%= f.input :phone_personal %>
     </div>
-  </div>
-  <div class="row">
-    <div class="col-md-6">
+    <div class="col-md-8">
       <%= f.input :address %>
-    </div>
-    <div class="col-md-6">
-      <%= f.input :zipcode %>
+      <div class="row">
+        <div class="col-md-4">
+          <%= f.input :zipcode %>
+        </div>
+        <div class="col-md-8">
+          <%= f.input :city %>
+        </div>
+      </div>
+      <%= f.input :country, input_html: { class: 'form-select' } %>
     </div>
   </div>
   <div class="row">
     <div class="col-md-6">
-      <%= f.input :city %>
-    </div>
-    <div class="col-md-6">
-      <%= f.input :country, input_html: { class: 'form-select' } %>
     </div>
   </div>
+  <div class="row">
+  </div>
 
-  <h5><%= University::Person.human_attribute_name('socials') %></h5>
+  <h2 class="h5 mt-5">
+    <%= University::Person.human_attribute_name('socials') %>
+  </h2>
 
-  <%= f.input :url %>
   <div class="row">
+    <div class="col-md-6">
+      <%= f.input :url %>
+    </div>
     <div class="col-md-6">
       <%= f.input :linkedin %>
     </div>

app/views/extranet/persons/show.html.erb

@@ -5,16 +5,10 @@
     <div class="biography">
       <p><%= @person&.biography %></p>
     </div>
-    <% if @person&.experiences.any? %>
-      <div class="experiences">
-        <p class="mb-4"><%= t('extranet.experiences.title') %></p>
-        <ul>
-          <% @person.experiences.ordered.each do |experience| %>
-            <%= render 'extranet/experiences/experience', experience: experience %>
-          <% end %>
-        </ul>
-      </div>
-    <% end %>
+
+    <p class="mb-4"><%= t('extranet.experiences.title') %></p>
+    <%= render 'extranet/experiences/list', person: @person %>
+
   </div>
   <div class="col-md-3">
     <%= kamifusen_tag @person.best_picture, width: 400, class: 'img-fluid person__portrait' if @person.best_picture.attached? %>

config/locales/extranet/en.yml

@@ -2,8 +2,8 @@ en:
   extranet:
     account:
       my: My account
-      edit: Edit
-      edit_personal_data: Edit my personal data
+      edit: Edit account
+      edit_personal_data: Edit profile
       updated: Updated
       logout: Log out
     errors:

config/locales/extranet/fr.yml

@@ -2,8 +2,8 @@ fr:
   extranet:
     account:
       my: Mon compte
-      edit: Modifier
-      edit_personal_data: Modifier mes données personnelles
+      edit: Modifier mon compte
+      edit_personal_data: Modifier mon profil
       updated: Mise à jour effectuée
       logout: Déconnexion
     errors: