person style

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

@@ -14,4 +14,49 @@
         dt
             font-size: $small-font-size
         dd
-            margin-bottom: px2rem(26)
\ No newline at end of file
+            margin-bottom: px2rem(26)
+
+.experiences
+    ul
+        padding-left: 0
+        li
+            @include make-row
+            display: flex
+            padding: px2rem(16) 0
+            position: relative
+            p
+                margin-bottom: px2rem(8)
+            &::before
+                border-top: 1px solid $primary
+                content: ''
+                left: $grid-gutter-width  * .5
+                position: absolute
+                right: $grid-gutter-width  * .5
+                top: 0
+            > div
+                @include make-col-ready
+                padding-bottom: px2rem(10)
+                padding-top: px2rem(10)
+                &:nth-child(1)
+                    width: 44.4444%
+                &:nth-child(2)
+                    width: 22.2222%
+                &:nth-child(3)
+                    align-self: center
+                    flex: 33.3333%
+                    padding-bottom: 0
+                    padding-top: 0
+                    text-align: right
+            &:last-child
+                &::after
+                    border-top: 1px solid $primary
+                    bottom: 0
+                    content: ''
+                    left: $grid-gutter-width  * .5
+                    position: absolute
+                    right: $grid-gutter-width  * .5
+            img
+                height: 80px
+
+.biography
+    margin-bottom: 90px
\ No newline at end of file

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

@@ -16,18 +16,8 @@
 </div>
 
 <div class="row">
-  <div class="col-md-6">
+  <div class="col-md-6 biography">
     <p><%= @person.biography %></p>
-    <ul>
-      <% @person.experiences.ordered.each do |experience| %>
-        <li>
-          <%= experience.description %>
-          <%= experience.from_year %>
-          <%= experience.to_year %>
-          <%= link_to experience.organization, experience.organization %>
-        </li>
-      <% end %>
-    </ul>
   </div>
   <div class="offset-md-3 col-md-3">
     <dl>
@@ -69,4 +59,38 @@
       <% end %>
     </dl>
   </div>
+
+  <% if @person.experiences %>
+  <div class="experiences col-md-9 mt-5">
+    <p class="mb-4">Parcours professionel</p>
+    <ul>
+      <% @person.experiences.ordered.each do |experience| %>
+        <li>
+          <div>
+            <p><b><%= experience.description %></b></p>
+            <p class="mb-0"><%= experience.from_year %> - <%= experience.to_year %></p>
+          </div>
+          <div>
+            <% if experience.organization.present? %>
+              <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>
+            <% if experience.organization.present? %>
+              <% if experience.organization.logo.attached? %>
+                  <%= link_to experience.organization do %>
+                    <%= kamifusen_tag experience.organization.logo, height: 80, class: 'img-fluid' %>
+                  <% end %>
+              <% end %>
+            <% end %>
+          </div>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+  <% end %>
 </div>
+