Présentation du showcase comme l'admin (#2028)

--------- Co-authored-by: Sébastien Gaya <sebastien.gaya@gmail.com>
osunyorg · Jun 18, 2024 · 247158a · 247158a
1 parent cee6d4e
commit 247158a
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 44 deletions.
diff --git a/app/assets/stylesheets/commons/_links.sass b/app/assets/stylesheets/commons/_links.sass
@@ -1,11 +1,14 @@
-a[target="_blank"]::after
-    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat
-    background-size: contain
-    content: ""
-    display: inline-block
-    height: 0.8rem
-    margin: 0 0.05rem 0 0.1rem
-    vertical-align: -1px
-    width: 0.8rem
-    &.btn-primary, &.btn-danger
-        filter: invert(1)
+a[target="_blank"]
+    &::after
+        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat
+        background-size: contain
+        content: ""
+        display: inline-block
+        height: 0.8rem
+        margin: 0 0.05rem 0 0.1rem
+        vertical-align: -1px
+        width: 0.8rem
+        &.btn-primary, &.btn-danger
+            filter: invert(1)
+    &.no-icon::after
+        display: none
diff --git a/app/assets/stylesheets/showcase.sass b/app/assets/stylesheets/showcase.sass
@@ -0,0 +1,15 @@
+// Configuration
+@import 'admin/functions'
+@import 'admin/flexoki'
+@import 'admin/variables'
+
+// Vendors
+@import 'bootstrap'
+@import 'font-awesome'
+
+// Commons
+@import 'commons/*'
+
+// Admin
+@import 'admin/design-system/*'
+@import 'admin/components/pagination'
diff --git a/app/assets/stylesheets/transparency.sass b/app/assets/stylesheets/transparency.sass
@@ -0,0 +1,15 @@
+// Configuration
+@import 'admin/functions'
+@import 'admin/flexoki'
+@import 'admin/variables'
+
+// Vendors
+@import 'bootstrap'
+@import 'font-awesome'
+
+// Commons
+@import 'commons/*'
+
+// Admin
+@import 'admin/design-system/*'
+@import 'admin/components/pagination'
diff --git a/app/controllers/transparency/home_controller.rb b/app/controllers/transparency/home_controller.rb
@@ -7,9 +7,10 @@ def index
       ['CodeClimate', 'Qualité de code (gratuit pour l\'open source)', 0],
       ['Deuxfleurs', 'Hébergement sans data center', 100],
       ['KeyCDN', 'Redimensionnement des images', 600],
+      ['LanguageTool', 'Aide à la qualité des contenus', 348],
       ['LibreTranslate', 'Aide à  la traduction', 696],
       ['MicroLink', 'Captures d\'écran', 144],
-      ['noesya', 'Tierce maintenance applicative (pro bono)', 0],
+      ['noesya', 'Tierce maintenance applicative (pro bono, estimée à 60k€)', 0],
       ['Plausible', 'Mesure d\'audience', 100],
       ['Scalingo', 'Hébergement de l\'admin', 3000],
       ['Scaleway', 'Stockage des fichiers', 100]

diff --git a/app/views/showcase/home/_list.html.erb b/app/views/showcase/home/_list.html.erb
@@ -7,43 +7,47 @@
   <% @websites.each do |website| %>
     <div class="col-lg-6 mb-5 pb-5">
       <% if website.screenshot.attached? %>
-        <%= link_to website.url, target: :_blank do %>
+        <%= link_to website.url, target: :_blank, class: 'no-icon' do %>
           <%= kamifusen_tag website.screenshot, 
-                            class: 'img-fluid border-dark mb-1' %>
+                            class: 'img-fluid rounded mb-3' %>
         <% end %>
       <% end %>
       <div class="row">
         <div class="col-lg-10">
-          <h2 class="h6"><%= website %></h2>
-          <p class="small mb-1">
-            <i class="bi bi-compass-fill me-2"></i>
-            <%= link_to social_website_to_s(website.url), 
-                        website.url, 
+          <h2 class="h4"><%= website %></h2>
+          <div class="small mb-1">
+            <%= link_to website.url, 
                         target: :_blank, 
-                        class: 'text-white' %>
-          </p>
-          <p class="small mb-2">
-            <i class="bi bi-github me-2"></i>
-            <%= link_to social_website_to_s(website.repository_url), 
-                        website.repository_url, 
+                        class: 'text-dark' do %>
+              <i class="bi bi-compass-fill me-1"></i>
+              <%= social_website_to_s(website.url) %>
+            <% end %>
+          </div>
+          <div class="small mb-1">
+            <%= link_to website.repository_url, 
                         target: :_blank, 
-                        class: 'text-white' %>
-          </p>
+                        class: 'text-dark' do %>
+              <i class="bi bi-github me-1"></i>
+              <%= social_website_to_s(website.repository_url) %>
+            <% end %>
+          </div>
           <% website.showcase_tags.each do |tag| %>
-            <%= link_to tag, showcase_tag_path(tag.slug), class: 'btn btn-sm btn-outline-light rounded-pill' %>
+            <%= link_to tag, 
+                        showcase_tag_path(tag.slug), 
+                        class: 'btn btn-sm btn-outline-light text-dark rounded-pill' %>
           <% end %>  
         </div>
         <% if website.university.logo.attached? %>
           <div class="col-3 col-lg-2">
-            <div class="bg-dark ratio ratio-1x1 mb-3">
+            <div class="ratio ratio-1x1 mb-3">
               <%= image_tag website.university.logo, 
                             class: 'img-fluid p-3',
-                            style: 'filter: saturate(0) invert(1)' %>
+                            style: 'filter: saturate(0)' %>
             </div>
           </div>
         <% end %>
       </div>
     </div>
   <% end %>
 </div>
-<%= paginate @websites, theme: 'bootstrap-5' %>
+<%= paginate @websites %>
diff --git a/app/views/showcase/home/index.html.erb b/app/views/showcase/home/index.html.erb
@@ -6,19 +6,19 @@
   <p class="small text-uppercase">Thèmes</p>
   <% @tags.each do |tag| %>
     <% next if tag.websites.none? %>
-    <%= link_to "#{tag} <span class=\"badge bg-dark text-light rounded-pill\">#{tag.websites.in_production.count}</span>".html_safe, 
+    <%= link_to "#{tag} <span class=\"badge bg-light text-dark rounded-pill\">#{tag.websites.in_production.count}</span>".html_safe, 
                 showcase_tag_path(tag.slug), 
-                class: 'btn btn-outline-light rounded-pill mb-2 me-2 px-4 py-3' %>
+                class: 'btn btn-outline-light text-dark rounded-pill mb-2 me-2 px-4 py-3' %>
   <% end %>
 </div>
 
 <div class="my-5">
   <p class="small text-uppercase">Fonctionnalités</p>
   <% @features.each do |feature| %>
     <% next if feature[:websites].none? %>
-    <%= link_to "#{feature[:name]} <span class=\"badge bg-dark text-light rounded-pill\">#{feature[:websites].count}</span>".html_safe, 
+    <%= link_to "#{feature[:name]} <span class=\"badge bg-light text-dark rounded-pill\">#{feature[:websites].count}</span>".html_safe, 
                 feature[:path], 
-                class: 'btn btn-outline-light rounded-pill mb-2 me-2 px-4 py-3' %>
+                class: 'btn btn-outline-light text-dark rounded-pill mb-2 me-2 px-4 py-3' %>
   <% end %>
 </div>
 

diff --git a/app/views/showcase/layouts/application.html.erb b/app/views/showcase/layouts/application.html.erb
@@ -4,14 +4,14 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title><%= yield :title %> — Osuny</title>
-    <%= stylesheet_link_tag 'application', media: 'all' %>
+    <%= stylesheet_link_tag 'showcase', media: 'all' %>
     <%= favicon_link_tag 'favicon.png' %>
   </head>
-  <body class="bg-black text-white">
+  <body>
     <nav class="navbar navbar-light">
       <div class="container justify-content-center">
         <a class="navbar-brand" href="/">
-          <%= image_tag 'osuny-white.svg',
+          <%= image_tag 'osuny-black.svg',
                         class: 'img-fluid py-4',
                         alt: 'Osuny',
                         width: 100 %>

diff --git a/app/views/transparency/home/index.html.erb b/app/views/transparency/home/index.html.erb
@@ -4,7 +4,7 @@
 
 <h2 class="mt-5 h4 text-center mb-4">Contributions annuelles</h2>
 <div class="table-responsive">
-  <table class="<%= table_classes %> table-dark table-striped">
+  <table class="<%= table_classes %> table-hover">
     <thead>
       <tr>
         <th>Organisation contributrice</th>
@@ -31,7 +31,7 @@
 <h2 class="mt-5 h4 text-center mb-4">Coûts de fonctionnement annuels</h2>
 <p class="text-center">Les coût sont remis à jour à la main, ils ne sont pas très précis.</p>
 <div class="table-responsive">
-  <table class="<%= table_classes %> table-dark table-striped">
+  <table class="<%= table_classes %> table-hover">
     <thead>
       <tr>
         <th>Organisation</th>

diff --git a/app/views/transparency/layouts/application.html.erb b/app/views/transparency/layouts/application.html.erb
@@ -4,14 +4,14 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title><%= yield :title %> — Osuny</title>
-    <%= stylesheet_link_tag 'application', media: 'all' %>
+    <%= stylesheet_link_tag 'transparency', media: 'all' %>
     <%= favicon_link_tag 'favicon.png' %>
   </head>
-  <body class="bg-black text-white">
-    <nav class="navbar navbar-light">
+  <body>
+    <nav class="navbar">
       <div class="container justify-content-center">
         <a class="navbar-brand" href="/">
-          <%= image_tag 'osuny-white.svg',
+          <%= image_tag 'osuny-black.svg',
                         class: 'img-fluid py-4',
                         alt: 'Osuny',
                         width: 100 %>