From af08ef8a9128cef9e3d3556d94cb19f8aa787151 Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <spamfree@matthieubessat.fr>
Date: Tue, 4 Aug 2020 13:05:56 +0200
Subject: [PATCH] fix: cosmetic things to organization page

---
 assets/development/styles/organization.css | 27 +++++++++++++++++++---
 src/controllers/PublicController.ts        | 10 ++++++++
 views/organization.twig                    | 21 ++++++++++++++---
 3 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/assets/development/styles/organization.css b/assets/development/styles/organization.css
index efe14ff..f3ef290 100644
--- a/assets/development/styles/organization.css
+++ b/assets/development/styles/organization.css
@@ -404,13 +404,14 @@ section {
   margin-left: 2em;
   margin-top: 1em;
   margin-bottom: 1em;
-  margin-right: 20em;
+  margin-right: 15em;
   
   padding: 1em 2em 1em 2em;
 }
 
 .schedule-category-day-container {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   margin-bottom: 1em;
 }
@@ -425,6 +426,7 @@ section {
 
 .schedule-category-hours {
   color: #2c3e50;
+  text-align: right;
 }
 
 .schedule-category-hours .spearator {
@@ -512,6 +514,14 @@ section {
   margin-bottom: 0;
 }
 
+.contact-item .long {
+  display: inline;
+}
+
+.contact-item .short {
+  display: none;
+}
+
 .contact-icon {
   color: #B15808;
   background-color: #C4C4C4;
@@ -691,6 +701,14 @@ RESPONSIVE
 
 @media (max-width: 900px) {
   
+  .contact-item .long {
+    display: none;
+  }
+
+  .contact-item .short {
+    display: inline;
+  }
+
   .cover-content .container {
     flex-direction: column;
     justify-content: center;
@@ -800,7 +818,7 @@ RESPONSIVE
   }
 
   .facebook .contact-content, .twitter .contact-content, .website .contact-content, .instagram .contact-content {
-    font-size: .8em;
+    font-size: .9em;
   }
 
   .peoples {
@@ -820,6 +838,7 @@ RESPONSIVE
     display: flex;
     flex-direction: column;
     align-items: center;
+    font-size: .9em;
   }
 
   .people-card:last-of-type {
@@ -830,9 +849,11 @@ RESPONSIVE
 
 @media (max-width: 600px) {
   .schedule-category-days-container {
-    margin-right: 2em;
+    margin-right: 0;
+    margin-left: 0;
     padding-left: 1em;
     padding-right: 1em;
+    font-size: .9em;
   }
   .return-title {
     display: none;
diff --git a/src/controllers/PublicController.ts b/src/controllers/PublicController.ts
index 06e46d2..319e991 100644
--- a/src/controllers/PublicController.ts
+++ b/src/controllers/PublicController.ts
@@ -131,6 +131,16 @@ export default class PublicController {
               return p
             })
           }
+
+          if (Utils.isStrUsable(version.contacts, 'facebook')) {
+            version.contacts.facebookLabel = new URL(version.contacts.facebook).pathname.replace('/', '')
+          }
+          if (Utils.isStrUsable(version.contacts, 'twitter')) {
+            version.contacts.twitterLabel = new URL(version.contacts.twitter).pathname.replace('/', '')
+          }
+          if (Utils.isStrUsable(version.contacts, 'instagram')) {
+            version.contacts.instagramLabel = new URL(version.contacts.instagram).pathname.replace('/', '')
+          }
         }
         if (Array.isArray(version.gallery)) {
           version.gallery = version.gallery.slice(0, 5).map((media: any) => {
diff --git a/views/organization.twig b/views/organization.twig
index 8cf57b6..2113416 100644
--- a/views/organization.twig
+++ b/views/organization.twig
@@ -319,7 +319,12 @@
         </div>
         <div class="contact-content">
           <a href="{{ data.contacts.facebook }}">
-            {{ data.contacts.facebook }}
+            <span class="short">
+              {{ data.contacts.facebookLabel }}
+            </span>
+            <span class="long">
+              {{ data.contacts.facebook }}
+            </span>
             <svg class="external-link" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
               <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
             </svg>
@@ -336,7 +341,12 @@
         </div>
         <div class="contact-content">
           <a href="{{ data.contacts.instagram }}">
-            {{ data.contacts.instagram }}
+            <span class="short">
+              {{ data.contacts.instagramLabel }}
+            </span>
+            <span class="long">
+              {{ data.contacts.instagram }}
+            </span>
             <svg class="external-link" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
               <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
             </svg>
@@ -353,7 +363,12 @@
         </div>
         <div class="contact-content">
           <a href="{{ data.contacts.twitter }}">
-            {{ data.contacts.twitter }}
+            <span class="short">
+              {{ data.contacts.twitterLabel }}
+            </span>
+            <span class="long">
+              {{ data.contacts.twitter }}
+            </span>
             <svg class="external-link" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
               <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
             </svg>