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