From 3eafd40b299f7bfa30e2f05a43207f366e4b29f8 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Mon, 24 Oct 2022 16:41:12 +0200
Subject: [PATCH] style
---
.../stylesheets/extranet/_variables.sass | 4 +-
.../stylesheets/extranet/layout/_default.sass | 14 +---
.../stylesheets/extranet/layout/_nav.sass | 2 +-
.../extranet/pages/_experiences.sass | 5 +-
.../extranet/pages/_organization.sass | 4 +-
.../stylesheets/extranet/pages/_person.sass | 7 +-
.../extranet/cohorts/_index.cards.html.erb | 7 +-
.../extranet/experiences/_experience.html.erb | 43 +++++------
.../extranet/organizations/show.html.erb | 76 +++++++++++--------
app/views/extranet/persons/_person.html.erb | 6 +-
app/views/extranet/persons/show.html.erb | 12 +--
11 files changed, 90 insertions(+), 90 deletions(-)
diff --git a/app/assets/stylesheets/extranet/_variables.sass b/app/assets/stylesheets/extranet/_variables.sass
index 8de833bb5..bb22f2723 100644
--- a/app/assets/stylesheets/extranet/_variables.sass
+++ b/app/assets/stylesheets/extranet/_variables.sass
@@ -9,8 +9,8 @@ $font-size-root: 1rem
$font-size-base: 1.125rem
$h1-font-size: px2rem(60)
-$h2-font-size: px2rem(18)
-$h3-font-size: px2rem(20)
+$h2-font-size: px2rem(24)
+$h3-font-size: px2rem(18)
$headings-font-weight: 700
$headings-margin-bottom: px2rem(24)
$small-font-size: px2rem(14)
diff --git a/app/assets/stylesheets/extranet/layout/_default.sass b/app/assets/stylesheets/extranet/layout/_default.sass
index 910cb0e3a..36cf475dd 100644
--- a/app/assets/stylesheets/extranet/layout/_default.sass
+++ b/app/assets/stylesheets/extranet/layout/_default.sass
@@ -4,18 +4,6 @@
padding-left: var(--bs-gutter-x)
.action-show
- @include media-breakpoint-up(md)
- .top
- align-items: stretch
- header
- align-items: center
- display: flex
- height: 100%
- h1
- margin: 0
- padding: 0
- .biography
- padding-right: percentage(3/9)
dl
line-height: px2rem(26)
dt
@@ -24,4 +12,4 @@
margin-bottom: px2rem(26)
ul
- list-style: none
\ No newline at end of file
+ list-style: none
diff --git a/app/assets/stylesheets/extranet/layout/_nav.sass b/app/assets/stylesheets/extranet/layout/_nav.sass
index 67397e7f9..9e706d3f1 100644
--- a/app/assets/stylesheets/extranet/layout/_nav.sass
+++ b/app/assets/stylesheets/extranet/layout/_nav.sass
@@ -17,7 +17,7 @@
> .nav-item
margin-left: 20px
&__account
- margin-left: 30px
+ margin-left: 40px
.dropdown-menu
background: transparent
border: 0
diff --git a/app/assets/stylesheets/extranet/pages/_experiences.sass b/app/assets/stylesheets/extranet/pages/_experiences.sass
index 44f23b193..39dbc8668 100644
--- a/app/assets/stylesheets/extranet/pages/_experiences.sass
+++ b/app/assets/stylesheets/extranet/pages/_experiences.sass
@@ -1,3 +1,2 @@
-.experiences
- &__experience
- @include pseudo-bottom-border
\ No newline at end of file
+.experience__organization__logo
+ height: 100%
\ No newline at end of file
diff --git a/app/assets/stylesheets/extranet/pages/_organization.sass b/app/assets/stylesheets/extranet/pages/_organization.sass
index 29662cfd7..8e4a3236a 100644
--- a/app/assets/stylesheets/extranet/pages/_organization.sass
+++ b/app/assets/stylesheets/extranet/pages/_organization.sass
@@ -10,10 +10,12 @@
border: 1px solid $light-border-color
background: white
padding: 60px
+ margin-top: -130px
+ margin-bottom: 50px
+ aspect-ratio: 1 / 1
@include media-breakpoint-up(md)
&__logo
margin-top: -200px
- margin-bottom: 50px
@include media-breakpoint-up(md)
align-items: center
diff --git a/app/assets/stylesheets/extranet/pages/_person.sass b/app/assets/stylesheets/extranet/pages/_person.sass
index 0656f586e..e659fe329 100644
--- a/app/assets/stylesheets/extranet/pages/_person.sass
+++ b/app/assets/stylesheets/extranet/pages/_person.sass
@@ -1,7 +1,8 @@
.person
line-height: px2rem(24)
position: relative
- @include media-breakpoint-up(md)
- &__portrait
+ &__portrait
+ margin-top: -130px
+ margin-bottom: 50px
+ @include media-breakpoint-up(md)
margin-top: -200px
- margin-bottom: 50px
diff --git a/app/views/extranet/cohorts/_index.cards.html.erb b/app/views/extranet/cohorts/_index.cards.html.erb
index 832322830..912865850 100644
--- a/app/views/extranet/cohorts/_index.cards.html.erb
+++ b/app/views/extranet/cohorts/_index.cards.html.erb
@@ -4,13 +4,12 @@
<div class="col-md-4 col-xl-3">
<article class="card mb-5">
<div class="card-body">
- <h2><%= link_to cohort.program, cohort, class: 'stretched-link' %></h2>
- <p><%= cohort.academic_year.year %></p>
- <p class="small">
+ <h2 class="mb-0"><%= link_to cohort.academic_year.year, cohort, class: 'stretched-link' %></h2>
+ <p class="small mb-0">
<%= cohort.people.count %>
<%= University::Person::Alumnus.model_name.human(count: cohort.people.count).downcase %>
</p>
- <p class="text-end mb-0">
+ <p class="text-end mb-n2">
<i class="bi bi-arrow-right"></i>
</p>
</div>
diff --git a/app/views/extranet/experiences/_experience.html.erb b/app/views/extranet/experiences/_experience.html.erb
index 92ffc5d8d..caabcae7e 100644
--- a/app/views/extranet/experiences/_experience.html.erb
+++ b/app/views/extranet/experiences/_experience.html.erb
@@ -1,31 +1,28 @@
<%
edit ||= false
%>
-<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>
- <% if experience.organization.present? %>
+<li class="experiences__experience py-4 border-top">
+ <div class="row">
<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 %>
+ <p class="mb-0">
+ <b><%= experience.description %></b><br>
+ <%= "#{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 class="col-md-2">
- <% if experience.organization.logo.attached? %>
+ <div class="col-md-6 text-end">
+ <% if experience.organization.present? %>
<%= link_to experience.organization do %>
- <%= kamifusen_tag experience.organization.logo, height: 80, class: 'img-fluid' %>
+ <% if experience.organization.logo.attached? %>
+ <%= kamifusen_tag experience.organization.logo, width: 100, class: 'img-fluid experience__organization__logo' %>
+ <% else %>
+ <p class="text-end><%= link_to experience.organization, experience.organization %></p>
+ <% end %>
<% end %>
- <% end %>
- <div>
- <% end %>
+ <div>
+ <% end %>
+ </div>
</li>
diff --git a/app/views/extranet/organizations/show.html.erb b/app/views/extranet/organizations/show.html.erb
index e7fa87f23..1448d4075 100644
--- a/app/views/extranet/organizations/show.html.erb
+++ b/app/views/extranet/organizations/show.html.erb
@@ -1,40 +1,54 @@
<% content_for :title, @organization %>
<div class="row">
- <div class="col-md-9">
- <div class="biography mb-5">
- <p><%= @organization.text %></p>
+ <div class="col-md-8 order-2 order-md-1">
+ <div class="row">
+ <div class="col-md-9">
+ <div class="biography mb-5">
+ <p><%= @organization.text %></p>
+ </div>
+ </div>
</div>
- <div class="experiences">
- <p class="mb-4"><%= t('extranet.organization.experiences', count: @organization.experiences.count) %></p>
- <ul class="list-unstyled">
+ <% if @organization.experiences.any? %>
+ <div class="experiences">
+ <p class="mb-4"><%= t('extranet.organization.experiences', count: @organization.experiences.count) %></p>
+ <ul class="list-unstyled">
<% @organization.experiences.ordered.each do |experience| %>
- <li class="mb-3">
- <div>
- <%= link_to experience.person do %>
- <% if experience.person.picture.attached? %>
- <%= kamifusen_tag experience.person.picture, width: 200, class: 'img-fluid' %>
- <% else %>
- <%= image_tag 'extranet/avatar.png', width: 200, class: 'img-fluid' %>
- <% end %>
- <% end %>
- </div>
- <div>
- <p><b><%= experience.person.name %></b></p>
- <p>
- <% if experience.description.present? %>
- <%= experience.description %><br>
- <% end %>
- <%= "#{experience.from_year} —" if experience.from_year %>
- <%= experience.to_year || t('today') %>
- </p>
- </div>
- </li>
- <% end %>
- </ul>
- </div>
+ <li class="mb-4">
+ <article class="row position-relative">
+ <div class="col-md-3">
+ <% if experience.person.picture.attached? %>
+ <%= kamifusen_tag experience.person.picture, width: 400, class: 'img-fluid' %>
+ <% else %>
+ <%= image_tag 'extranet/avatar.png', width: 400, class: 'img-fluid' %>
+ <% end %>
+ </div>
+ <div class="col-md-9 ms-md-n4">
+ <div class="border-top">
+ <div class="row pt-4">
+ <div class="col-md-6">
+ <p><b><%= link_to experience.person.name, experience.person, class: "stretched-link" %></b></p>
+ </div>
+ <div class="col-md-6">
+ <p class="text-end">
+ <% if experience.description.present? %>
+ <%= experience.description %><br>
+ <% end %>
+ <%= "#{experience.from_year} —" if experience.from_year %>
+ <%= experience.to_year || t('today') %>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </article>
+ </li>
+ <% end %>
+ </ul>
+ </div>
+ <% end %>
</div>
- <div class="col-md-3">
+ <div class="offset-md-1 col-md-3 order-1 order-md-2">
<%= kamifusen_tag @organization.logo, width: 400, class: 'img-fluid organization__logo' if @organization.logo.attached? %>
<dl>
diff --git a/app/views/extranet/persons/_person.html.erb b/app/views/extranet/persons/_person.html.erb
index fa2cc098d..c77c919cb 100644
--- a/app/views/extranet/persons/_person.html.erb
+++ b/app/views/extranet/persons/_person.html.erb
@@ -1,6 +1,6 @@
-<article class="mb-4 person">
- <div class="row g-3">
- <div class="col-3 col-md-12 mb-2">
+<article class="person mb-4">
+ <div class="row gx-3">
+ <div class="col-3 col-md-12 mb-md-2">
<% if person.best_picture.attached? %>
<%= kamifusen_tag person.best_picture, width: 400, class: 'img-fluid',
sizes: {
diff --git a/app/views/extranet/persons/show.html.erb b/app/views/extranet/persons/show.html.erb
index 9a91380ee..538746476 100644
--- a/app/views/extranet/persons/show.html.erb
+++ b/app/views/extranet/persons/show.html.erb
@@ -1,7 +1,7 @@
<% content_for :title, @person %>
<div class="row">
- <div class="col-md-8">
+ <div class="col-md-8 order-2 order-md-1">
<div class="row">
<div class="col-md-9">
<div class="biography mb-5">
@@ -9,12 +9,12 @@
</div>
</div>
</div>
-
- <p class="mb-4"><%= t('extranet.experiences.title') %></p>
- <%= render 'extranet/experiences/list', person: @person %>
-
+ <% if @person.experiences.any? %>
+ <p class="mb-4"><%= t('extranet.experiences.title') %></p>
+ <%= render 'extranet/experiences/list', person: @person %>
+ <% end %>
</div>
- <div class="offset-md-1 col-md-3">
+ <div class="offset-md-1 col-md-3 order-1 order-md-2">
<%= kamifusen_tag @person.best_picture, width: 400, class: 'img-fluid person__portrait' if @person.best_picture.attached? %>
<%= render 'extranet/persons/details', person: @person %>
</div>
--
GitLab