diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 30f696c92d9811028070dc879bb6545841908ad3..9f102748e0710c63413fe8a07fbba34afae76ac2 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 9bb68d7be561e6f54b47659456ac6e85f63b8a16..2f14f472a42f5adf51ba09e656df3cb07a85a534 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 087d2f4242ed39d8f3505d06012bf823f015572e..60e54cc57c1c724a268114806e46807cba7cf38e 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 7135467e831e294b20fb8824a8a08e504c17fd2b..abe3f4fa0a50204dbd6df6b16495961d7f709354 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 56f0f4d072cdf567138999827c3c766bbfe3e14c..bc595889e145217813e2c2514bf8044e0c915a85 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 087d2f4242ed39d8f3505d06012bf823f015572e..75967d55481be1eec5cd3650d95b0685f4668141 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 67f84ebc6389a162554ef6300e57f97b2ccc1b1c..298d7dde393c10b9dadd503158e8a3858c9c3d9d 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 c746b911909d67f2432690682808294ac825224e..60e54cc57c1c724a268114806e46807cba7cf38e 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 81673aade82e6d18bab4b5a252e12f287c82e87b..4d975d93c83aa45567fe6a0210cee1fd890c83d5 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 5c3dadccc30d9ec2df015d334f8b6880437c3d3c..c7e633f574aa6110575f10b93a57a0778f14cc9b 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 463ffe405db4c2aea15d78206036c9ae2fccb2d7..ff7533ca18b7d85d0cdc1cacad4c1407f9e4d9f1 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;
+ }
+}