From a284a21eff5f8adc0d84536ea3cd313c12a13d2a Mon Sep 17 00:00:00 2001
From: FORESTIER Fabien <fabien.forestier@soprasteria.com>
Date: Thu, 18 Jul 2019 15:32:24 +0200
Subject: [PATCH] Update and factor tables style

---
 src/app/app.component.scss                    |   2 +-
 .../formats/list/formats.component.html       |  55 ++++---
 .../formats/list/formats.component.scss       |  50 -------
 src/app/components/menu/menu.component.scss   |  24 ++-
 .../list/organizations.component.html         |  50 +++++--
 .../list/organizations.component.scss         |  46 ------
 .../resources/list/resources.component.html   | 139 ++++++++++++++----
 .../resources/list/resources.component.scss   |  53 -------
 src/index.html                                |   1 +
 src/scss/variables.scss                       |   2 +
 src/styles.scss                               |  56 ++++++-
 11 files changed, 266 insertions(+), 212 deletions(-)

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 30f696c..9f10274 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -60,7 +60,7 @@
   grid-row: 2;
   grid-column: 2 / -1;
   margin-left: 150px;
-  background-color: #f2f2f2;
+  background-color: $grey-background-color;
   transition: all 200ms cubic-bezier(0.7, 0, 0.3, 1);
 
   &.wide {
diff --git a/src/app/components/formats/list/formats.component.html b/src/app/components/formats/list/formats.component.html
index 9bb68d7..2f14f47 100644
--- a/src/app/components/formats/list/formats.component.html
+++ b/src/app/components/formats/list/formats.component.html
@@ -6,41 +6,60 @@
           <h2>{{ totalElement }} formats trouvés</h2>
         </div>
       </div>
-      <div class="add-item has-text-right">
+      <div class="add-item-link has-text-right">
         <a class="button button-gl" [routerLink]="['new']">
           Ajouter
         </a>
       </div>
-      <div class="table">
+      <div class="table entity-list-table">
         <div class="header columns is-marginless">
-          <div class="column is-2 has-text-centered">
+          <div class="column is-2">
             <span (click)="sortBy('name')" class="is-sortable">
-              <span class="column-title" [ngClass]="{'active': sortOptions.value === name}">Name</span>
-              <span *ngIf="sortOptions.value  === 'name'" class="has-text-danger">
-                <i class="fas sort-order-icon"
-                  [ngClass]="{'fa-arrow-up': sortOptions.order === 'asc', 'fa-arrow-down': sortOptions.order === 'desc'}"></i>
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"
+                    [ngClass]="{'icon-red': sortOptions.value === 'name' && sortOptions.order === 'desc'}"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"
+                    [ngClass]="{'icon-red': sortOptions.value === 'name' && sortOptions.order === 'asc'}"></i>
+                </span>
               </span>
+              <span class="column-title" [ngClass]="{'active': sortOptions.value === name}">Nom</span>
             </span>
           </div>
-          <div class="column is-2 has-text-centered">
-            <span class="column-title">Type MapServer</span>
+          <div class="column is-2">
+            <span (click)="sortBy('mapServerType')" class="is-sortable">
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"
+                    [ngClass]="{'icon-red': sortOptions.value === 'mapServerType' && sortOptions.order === 'desc'}"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"
+                    [ngClass]="{'icon-red': sortOptions.value === 'mapServerType' && sortOptions.order === 'asc'}"></i>
+                </span>
+              </span>
+              <span class="column-title" [ngClass]="{'active': sortOptions.value === mapServerType}">Type
+                MapServer</span>
+            </span>
           </div>
           <div class="column is-offset-7 is-1 has-text-centered">
-              <span class="column-title">Actions</span>
-            </div>
+            <span class="column-title">Actions</span>
+          </div>
         </div>
         <div class="data-list">
           <div class="data columns is-multiline is-vcentered is-marginless"
             *ngFor="let format of formats; let i=index; let odd=odd; let even=even;"
             [ngClass]="{ odd: odd, even: even }">
-            <div class="column is-2 has-text-centered">
-              {{ format.name}}
+            <div class="column is-2">
+              <span>{{ format.name}}</span>
             </div>
-            <div class="column is-2 has-text-centered">
-              {{ format.mapServerType}}
+            <div class="column is-2">
+              <span>{{ format.mapServerType}}</span>
             </div>
-            <div class="column is-offset-7 is-1 has-text-centered actions"> 
-                <app-crud-buttons [id]="format.id" (delete)="displayDeletePopup($event)"></app-crud-buttons>
+            <div class="column is-offset-7 is-1 has-text-centered actions">
+              <app-crud-buttons [id]="format.id" (delete)="displayDeletePopup($event)"></app-crud-buttons>
             </div>
           </div>
         </div>
@@ -56,4 +75,4 @@
       </div>
     </div>
   </div>
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/components/formats/list/formats.component.scss b/src/app/components/formats/list/formats.component.scss
index 087d2f4..60e54cc 100644
--- a/src/app/components/formats/list/formats.component.scss
+++ b/src/app/components/formats/list/formats.component.scss
@@ -1,53 +1,3 @@
-section {
-  padding: 20px;
-}
 .section {
   padding-top: 0;
 }
-
-.table {
-  background-color: white;
-  border: 1px solid lightgray;
-}
-
-.center {
-  text-align: center;
-}
-
-img {
-  max-width: 100px;
-}
-
-.header {
-  border-bottom: 1px solid lightgray;
-  background-color: #fafafa;
-  span {
-    color: #999;
-
-  }
-}
-
-.is-sortable .column-title {
-  cursor: pointer;
-}
-
-.table .columns {
-  border-bottom: 1px solid lightgray
-}
-
-i {
-
-  &.title-icon {
-    margin-right: 0.75rem;
-  }
-
-  &.sort-order-icon {
-    padding-left: 0.75rem;
-    cursor: pointer;
-  }
-}
-
-
-.add-item {
-  margin-bottom: 20px;
-}
diff --git a/src/app/components/menu/menu.component.scss b/src/app/components/menu/menu.component.scss
index 7135467..abe3f4f 100644
--- a/src/app/components/menu/menu.component.scss
+++ b/src/app/components/menu/menu.component.scss
@@ -1,6 +1,7 @@
+@import '../../../scss/variables.scss';
+
 .menu {
   padding: 0px;
-  padding-top: 20px;
 
   span {
     color: white;
@@ -37,9 +38,28 @@
 
 li a {
   border-left: 3px solid #333745;
-  padding-left: calc(0.75em - 3px);
+  padding: 1rem calc(1rem - 3px);
 
   &.active-link {
+    background-color: $background-link-hover-color;
     border-color: #d5232a;
+
+    span {
+      color: $menu-selected-color;
+    }
+
+    .icon svg {
+      stroke: $menu-selected-color;
+    }
   }
+
+  &:hover {
+    color: white;
+    background-color: $background-link-hover-color;
+  }
+
+  &:hover:not(.active-link) {
+    border-left: 3px solid $background-link-hover-color;
+  }
+
 }
diff --git a/src/app/components/organizations/list/organizations.component.html b/src/app/components/organizations/list/organizations.component.html
index 56f0f4d..bc59588 100644
--- a/src/app/components/organizations/list/organizations.component.html
+++ b/src/app/components/organizations/list/organizations.component.html
@@ -3,32 +3,50 @@
     <div class="section">
       <div class="columns is-centered is-marginless">
         <div class="column has-text-centered">
-          <h2>{{ totalElement }} producteurs de données trouvées</h2>
+          <h2>{{ totalElement }} producteurs de données trouvés</h2>
         </div>
       </div>
-      <div class="add-item has-text-right">
+      <div class="add-item-link has-text-right">
         <a class="button button-gl" [routerLink]="['new']">
           Ajouter
         </a>
       </div>
-      <div class="table">
+      <div class="table entity-list-table">
         <div class="header columns is-marginless">
-          <div class="column is-2 has-text-centered">
+          <div class="column is-2">
             <span (click)="sortBy('name')" class="is-sortable">
-              <span class="column-title" [ngClass]="{'active': sortOptions.value === name}">Name</span>
-              <span *ngIf="sortOptions.value  === 'name'" class="has-text-danger">
-                <i class="fas sort-order-icon"
-                  [ngClass]="{'fa-arrow-up': sortOptions.order === 'asc', 'fa-arrow-down': sortOptions.order === 'desc'}"></i>
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"
+                    [ngClass]="{'icon-red': sortOptions.value === 'name' && sortOptions.order === 'desc'}"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"
+                    [ngClass]="{'icon-red': sortOptions.value === 'name' && sortOptions.order === 'asc'}"></i>
+                </span>
               </span>
+              <span class="column-title" [ngClass]="{'active': sortOptions.value === name}">Nom</span>
             </span>
           </div>
           <div class="column is-2 has-text-centered">
             <span class="column-title">Logo</span>
           </div>
-          <div class="column is-4 has-text-centered">
-            <span class="column-title">Description</span>
+          <div class="column is-4">
+            <span (click)="sortBy('description')" class="is-sortable">
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"
+                    [ngClass]="{'icon-red': sortOptions.value === 'description' && sortOptions.order === 'desc'}"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"
+                    [ngClass]="{'icon-red': sortOptions.value === 'description' && sortOptions.order === 'asc'}"></i>
+                </span>
+              </span>
+              <span class="column-title">Description</span>
+            </span>
           </div>
-          <div class="column is-3 has-text-centered">
+          <div class="column is-3">
             <span class="column-title">Liens</span>
           </div>
           <div class="column is-1 has-text-centered">
@@ -39,16 +57,16 @@
           <div class="data columns is-multiline is-vcentered is-marginless"
             *ngFor="let organization of organizations; let i=index; let odd=odd; let even=even;"
             [ngClass]="{ odd: odd, even: even }">
-            <div class="column is-2 has-text-centered">
-              {{ organization.name}}
+            <div class="column is-2">
+              <span>{{ organization.name}}</span>
             </div>
             <div class="column is-2 has-text-centered">
               <img src="{{organization.logo}}" alt="">
             </div>
-            <div class="column is-4 has-text-justified">
-              {{ organization.description | slice:0:200}}...
+            <div class="column is-4">
+              <span>{{ organization.description | slice:0:200}}...</span>
             </div>
-            <div class="column is-3 has-text-centered">
+            <div class="column is-3">
               <p *ngFor="let link of organization.links">
                 <a href="{{ link.url }}" target="_blank">{{link.url}}</a>
               </p>
diff --git a/src/app/components/organizations/list/organizations.component.scss b/src/app/components/organizations/list/organizations.component.scss
index 087d2f4..75967d5 100644
--- a/src/app/components/organizations/list/organizations.component.scss
+++ b/src/app/components/organizations/list/organizations.component.scss
@@ -1,53 +1,7 @@
-section {
-  padding: 20px;
-}
 .section {
   padding-top: 0;
 }
 
-.table {
-  background-color: white;
-  border: 1px solid lightgray;
-}
-
-.center {
-  text-align: center;
-}
-
 img {
   max-width: 100px;
 }
-
-.header {
-  border-bottom: 1px solid lightgray;
-  background-color: #fafafa;
-  span {
-    color: #999;
-
-  }
-}
-
-.is-sortable .column-title {
-  cursor: pointer;
-}
-
-.table .columns {
-  border-bottom: 1px solid lightgray
-}
-
-i {
-
-  &.title-icon {
-    margin-right: 0.75rem;
-  }
-
-  &.sort-order-icon {
-    padding-left: 0.75rem;
-    cursor: pointer;
-  }
-}
-
-
-.add-item {
-  margin-bottom: 20px;
-}
diff --git a/src/app/components/resources/list/resources.component.html b/src/app/components/resources/list/resources.component.html
index 67f84eb..298d7dd 100644
--- a/src/app/components/resources/list/resources.component.html
+++ b/src/app/components/resources/list/resources.component.html
@@ -6,39 +6,118 @@
           <h2>{{ totalElement }} ressources trouvées</h2>
         </div>
       </div>
-      <div class="add-item has-text-right">
+      <div class="add-item-link has-text-right">
         <a class="button button-gl" [routerLink]="['new']">
           Ajouter
         </a>
       </div>
-      <div class="table">
+      <div class="table entity-list-table">
         <div class="header columns is-marginless">
-          <div class="column is-2 has-text-centered">
+          <div class="column is-2">
             <span (click)="sortBy('name')" class="is-sortable">
-              <span class="column-title" [ngClass]="{'active': sortOptions.value === name}">Nom</span>
-              <span *ngIf="sortOptions.value  === 'name'" class="has-text-danger">
-                <i class="fas sort-order-icon"
-                  [ngClass]="{'fa-arrow-up': sortOptions.order === 'asc', 'fa-arrow-down': sortOptions.order === 'desc'}"></i>
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"
+                    [ngClass]="{'icon-red': sortOptions.value === 'name' && sortOptions.order === 'desc'}"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"
+                    [ngClass]="{'icon-red': sortOptions.value === 'name' && sortOptions.order === 'asc'}"></i>
+                </span>
               </span>
+              <span class="column-title" [ngClass]="{'active': sortOptions.value === name}">Nom</span>
             </span>
           </div>
-          <div class="column is-1 has-text-centered">
-            <span class="column-title">Acronyme</span>
+          <div class="column is-1">
+            <span (click)="sortBy('acronym')" class="is-sortable">
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"
+                    [ngClass]="{'icon-red': sortOptions.value === 'acronym' && sortOptions.order === 'desc'}"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"
+                    [ngClass]="{'icon-red': sortOptions.value === 'acronym' && sortOptions.order === 'asc'}"></i>
+                </span>
+              </span>
+              <span class="column-title" [ngClass]="{'active': sortOptions.value === acronym}">Acronyme</span>
+            </span>
           </div>
-          <div class="column is-1 has-text-centered">
-            <span class="column-title">Type</span>
+          <div class="column is-1">
+            <span (click)="sortBy('type')" class="is-sortable">
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"
+                    [ngClass]="{'icon-red': sortOptions.value === 'type' && sortOptions.order === 'desc'}"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"
+                    [ngClass]="{'icon-red': sortOptions.value === 'type' && sortOptions.order === 'asc'}"></i>
+                </span>
+              </span>
+              <span class="column-title" [ngClass]="{'active': sortOptions.value === type}">Type</span>
+            </span>
           </div>
-          <div class="column is-4 has-text-centered">
-            <span class="column-title">Description</span>
+          <div class="column is-4">
+            <span (click)="sortBy('description')" class="is-sortable">
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"
+                    [ngClass]="{'icon-red': sortOptions.value === 'description' && sortOptions.order === 'desc'}"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"
+                    [ngClass]="{'icon-red': sortOptions.value === 'description' && sortOptions.order === 'asc'}"></i>
+                </span>
+              </span>
+              <span class="column-title" [ngClass]="{'active': sortOptions.value === description}">Description</span>
+            </span>
           </div>
           <div class="column is-1 has-text-centered">
-            <span class="column-title">Requêtable</span>
+            <span (click)="sortBy('isQueryable')" class="is-sortable">
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"
+                    [ngClass]="{'icon-red': sortOptions.value === 'isQueryable' && sortOptions.order === 'desc'}"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"
+                    [ngClass]="{'icon-red': sortOptions.value === 'isQueryable' && sortOptions.order === 'asc'}"></i>
+                </span>
+              </span>
+              <span class="column-title" [ngClass]="{'active': sortOptions.value === isQueryable}">Requêtable</span>
+            </span>
           </div>
           <div class="column is-1 has-text-centered">
-            <span class="column-title">Téléchargeable</span>
+            <span (click)="sortBy('isDownloadable')" class="is-sortable">
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"
+                    [ngClass]="{'icon-red': sortOptions.value === 'isDownloadable' && sortOptions.order === 'desc'}"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"
+                    [ngClass]="{'icon-red': sortOptions.value === 'isDownloadable' && sortOptions.order === 'asc'}"></i>
+                </span>
+              </span>
+              <span class="column-title"
+                [ngClass]="{'active': sortOptions.value === isDownloadable}">Téléchargeable</span>
+            </span>
           </div>
           <div class="column is-1 has-text-centered">
-            <span class="column-title">Standard</span>
+            <span (click)="sortBy('isStandard')" class="is-sortable">
+              <span class="sort-icons">
+                <span class="icon">
+                  <i class="fas fa-sort-up"
+                    [ngClass]="{'icon-red': sortOptions.value === 'isStandard' && sortOptions.order === 'desc'}"></i>
+                </span>
+                <span class="icon">
+                  <i class="fas fa-sort-down"
+                    [ngClass]="{'icon-red': sortOptions.value === 'isStandard' && sortOptions.order === 'asc'}"></i>
+                </span>
+              </span>
+              <span class="column-title" [ngClass]="{'active': sortOptions.value === isStandard}">Standard</span>
+            </span>
           </div>
           <div class="column is-1 has-text-centered">
             <span class="column-title">Actions</span>
@@ -48,17 +127,28 @@
           <div class="data columns is-multiline is-vcentered is-marginless"
             *ngFor="let resource of resources; let i=index; let odd=odd; let even=even;"
             [ngClass]="{ odd: odd, even: even }">
-            <div class="column is-2 has-text-centered">
-              {{ resource.name}}
+            <div class="column is-2">
+              <span>
+                {{ resource.name}}
+              </span>
+
             </div>
-            <div class="column is-1 has-text-centered">
-              {{ resource.acronym}}
+            <div class="column is-1">
+              <span>
+                {{ resource.acronym}}
+              </span>
+
             </div>
-            <div class="column is-1 has-text-centered">
-              {{ resource.type}}
+            <div class="column is-1">
+              <span>
+                {{ resource.type}}
+              </span>
+
             </div>
-            <div class="column is-4 has-text-centered">
-              {{ resource.description | slice:0:300}}
+            <div class="column is-4">
+              <span>
+                {{ resource.description | slice:0:300}}
+              </span>
             </div>
             <div class="column is-1 has-text-centered">
               <span class="icon has-text-success" *ngIf="resource.isQueryable">
@@ -99,7 +189,6 @@
           </div>
         </div>
       </div>
-
     </div>
   </div>
 </ng-container>
\ No newline at end of file
diff --git a/src/app/components/resources/list/resources.component.scss b/src/app/components/resources/list/resources.component.scss
index c746b91..60e54cc 100644
--- a/src/app/components/resources/list/resources.component.scss
+++ b/src/app/components/resources/list/resources.component.scss
@@ -1,56 +1,3 @@
-section {
-  padding: 20px;
-}
 .section {
   padding-top: 0;
 }
-
-.table {
-  background-color: white;
-  border: 1px solid lightgray;
-}
-
-.center {
-  text-align: center;
-}
-
-img {
-  max-width: 100px;
-}
-
-.header {
-  border-bottom: 1px solid lightgray;
-  background-color: #fafafa;
-  span {
-    color: #999;
-
-  }
-}
-
-.is-sortable .column-title {
-  cursor: pointer;
-}
-
-.table .columns {
-  border-bottom: 1px solid lightgray
-}
-
-.icon {
-  height: unset;
-}
-
-i {
-
-  &.title-icon {
-    margin-right: 0.75rem;
-  }
-
-  &.sort-order-icon {
-    padding-left: 0.75rem;
-    cursor: pointer;
-  }
-}
-
-.add-item {
-  margin-bottom: 20px;
-}
diff --git a/src/index.html b/src/index.html
index 81673aa..4d975d9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -21,6 +21,7 @@
   <meta name="msapplication-config" content="./assets/favicons/browserconfig.xml">
   <meta name="theme-color" content="#242b3f">
 
+  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,500,600,700,800" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css"
     integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
 
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 5c3dadc..c7e633f 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -39,3 +39,5 @@ $button-focus-border-color: $tomato-color;
 
 // Header height
 $header-bar-height: 60px;
+
+$background-link-hover-color: #191c27;
diff --git a/src/styles.scss b/src/styles.scss
index 463ffe4..ff7533c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,7 +2,7 @@
 
 html,
 body {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: $family-sans-serif;
   margin: 0;
   padding: 0;
   height: 100vh;
@@ -22,6 +22,7 @@ input,
 ul,
 tbody {
   color: $brand-color;
+  font-family: $family-sans-serif;
 }
 
 h1,
@@ -135,3 +136,56 @@ textarea.ng-invalid:not(form).ng-touched {
     }
   }
 }
+
+// Style for tables
+.add-item-link {
+  margin-bottom: 1.25rem;
+}
+
+.table.entity-list-table {
+  background-color: white;
+  border: 1px solid $grey-super-light-color;
+
+  span {
+    font-size: 0.875rem;
+  }
+
+  .header {
+    border-bottom: 1px solid $grey-super-light-color;
+    background-color: white;
+
+    span {
+      color: $grey-dark-color;
+    }
+  }
+
+  .columns.even {
+    background-color: $grey-background-color;
+  }
+
+  .sort-icons {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    margin-right: 0.3rem;
+
+    .icon {
+      height: 0.2rem;
+      width: unset;
+      justify-content: center;
+    }
+
+    .icon-red {
+      color: $tomato-color;
+    }
+  }
+
+  .is-sortable {
+    display: flex;
+  }
+
+  .is-sortable .icon,
+  .is-sortable .column-title {
+    cursor: pointer;
+  }
+}
-- 
GitLab