From 7d57de43e25c11eeb9e0743f753c77e29eddb5c6 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Tue, 13 Feb 2024 11:09:55 +0100
Subject: [PATCH] chore(ui): harmonize navbar
---
.../post-header/post-header.component.html | 2 +-
.../post-header/post-header.component.scss | 11 ++++++-----
src/app/profile/edit/edit.component.scss | 17 ++++++++++++-----
.../personal-offer-edition.component.scss | 18 ++++++++++++------
4 files changed, 31 insertions(+), 17 deletions(-)
diff --git a/src/app/post/components/post-header/post-header.component.html b/src/app/post/components/post-header/post-header.component.html
index cd783f259..8bf8fcd8a 100644
--- a/src/app/post/components/post-header/post-header.component.html
+++ b/src/app/post/components/post-header/post-header.component.html
@@ -8,7 +8,7 @@
<nav>
<span
*ngFor="let tag of tags.others"
- class="btnTag"
+ class="tag"
tabindex="0"
role="listitem"
[ngClass]="{ active: tag.slug === mainActiveTag.slug || tag.name === mainActiveTag.slug }"
diff --git a/src/app/post/components/post-header/post-header.component.scss b/src/app/post/components/post-header/post-header.component.scss
index 4def009a7..74e3b8ada 100644
--- a/src/app/post/components/post-header/post-header.component.scss
+++ b/src/app/post/components/post-header/post-header.component.scss
@@ -25,15 +25,16 @@ header {
nav {
display: flex;
overflow-x: auto;
- .btnTag {
+ white-space: nowrap;
+ .tag {
+ cursor: pointer;
+ user-select: none;
+ @include font-regular-14;
+ box-sizing: border-box;
padding: 0 16px;
height: 60px;
- @include font-regular-14;
display: flex;
align-items: center;
- cursor: pointer;
- user-select: none;
- white-space: nowrap;
border-bottom: 3px solid transparent;
transition: all 0.3s ease-in-out;
&.active {
diff --git a/src/app/profile/edit/edit.component.scss b/src/app/profile/edit/edit.component.scss
index 35af539ae..e7117bd43 100644
--- a/src/app/profile/edit/edit.component.scss
+++ b/src/app/profile/edit/edit.component.scss
@@ -61,17 +61,24 @@
border-bottom: 1px solid $grey-5;
.tab {
- padding-bottom: 1rem;
- justify-content: center;
+ cursor: pointer;
+ user-select: none;
+ @include font-regular-14;
+ box-sizing: border-box;
+ padding: 0 16px;
+ height: 60px;
display: flex;
+ justify-content: center;
+ align-items: center;
flex: 1;
- user-select: none;
+ border-bottom: 3px solid transparent;
+ transition: all 0.3s ease-in-out;
&:hover {
- cursor: pointer;
+ border-color: $grey-4;
}
&.selected {
font-weight: bold;
- border-bottom: 2px solid $grey-1;
+ border-color: $grey-1;
}
}
}
diff --git a/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss b/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss
index 4af3aaa7f..1fec51d62 100644
--- a/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss
+++ b/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss
@@ -65,21 +65,27 @@
justify-content: flex-start;
overflow-x: auto;
white-space: nowrap;
-
border-bottom: 1px solid $grey-5;
.tab {
- padding-bottom: 1rem;
- justify-content: center;
+ cursor: pointer;
+ user-select: none;
+ @include font-regular-14;
+ box-sizing: border-box;
+ padding: 0 16px;
+ height: 60px;
display: flex;
+ justify-content: center;
+ align-items: center;
flex: 1;
- user-select: none;
+ border-bottom: 3px solid transparent;
+ transition: all 0.3s ease-in-out;
&:hover {
- cursor: pointer;
+ border-color: $grey-4;
}
&.selected {
font-weight: bold;
- border-bottom: 2px solid $grey-1;
+ border-color: $grey-1;
}
}
}
--
GitLab