From 9b7a5f0582e8fa4322f93e8eca7078a8eae7ba11 Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Wed, 4 Aug 2021 11:28:11 +0200
Subject: [PATCH] Improve layout + logout
---
src/App.tsx | 2 +-
src/components/DateSelector/dateSelector.scss | 5 +++++
src/components/Editing/Editing.tsx | 2 +-
src/components/Editing/editing.scss | 11 ++++++++---
src/components/Layout/layout.module.scss | 3 +++
src/components/Menu/Menu.tsx | 12 ++++++++++--
src/components/Menu/menu.scss | 10 +++++++---
src/components/Modal/modal.scss | 2 +-
src/components/Navbar/navbar.scss | 1 +
src/hooks/useAuth.ts | 5 +++--
src/styles/config/_layout.scss | 1 +
11 files changed, 41 insertions(+), 13 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index 919aef49..9829f71b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,7 +25,7 @@ function App() {
return () => {
subscribed = false
}
- }, [isLogged])
+ }, [isLogged, setisLogged])
return (
<BrowserRouter>
diff --git a/src/components/DateSelector/dateSelector.scss b/src/components/DateSelector/dateSelector.scss
index 4b4539cf..8154e6a4 100644
--- a/src/components/DateSelector/dateSelector.scss
+++ b/src/components/DateSelector/dateSelector.scss
@@ -1,5 +1,6 @@
@import '../../styles/config/colors';
@import '../../styles/config/typography';
+@import '../../styles/config/breakpoints';
.date-selector {
display: flex;
align-items: center;
@@ -7,6 +8,10 @@
height: 3rem;
margin: auto;
max-width: 250px;
+ @media screen and(min-width: $width-desktop) {
+ position: relative;
+ left: -2rem;
+ }
.text {
@include text-large();
color: white;
diff --git a/src/components/Editing/Editing.tsx b/src/components/Editing/Editing.tsx
index 9fef0a70..2755666e 100644
--- a/src/components/Editing/Editing.tsx
+++ b/src/components/Editing/Editing.tsx
@@ -142,12 +142,12 @@ const Editing: React.FC = () => {
<p className="title pagetitle">
Édition des informations et de la citation du mois
</p>
+ <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
</div>
{isLoading ? (
<Loader />
) : (
<div className="content">
- <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
<MonthlyNews
header={header}
quote={quote}
diff --git a/src/components/Editing/editing.scss b/src/components/Editing/editing.scss
index ecbd9869..4987046c 100644
--- a/src/components/Editing/editing.scss
+++ b/src/components/Editing/editing.scss
@@ -1,17 +1,22 @@
@import '../../styles/config/typography.scss';
+@import '../../styles/config/layout.scss';
.header {
+ position: fixed;
+ z-index: 1500;
+ width: inherit;
background: radial-gradient(
74.83% 76.97% at 50% 13.64%,
#343641 0%,
#1b1c22 100%
);
- height: 5rem;
- box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
- 0px 8px 10px rgb(0 0 0 / 14%);
+ height: $navigator-height;
+ box-shadow: 0px 5px 5px rgb(0 0 0 / 0%), 0px 3px 14px rgb(0 0 0 / 0%),
+ 0px 8px 10px rgb(0 0 0 / 15%);
padding: 1.7rem;
}
.content {
padding: 1rem;
+ margin-top: $navigator-height;
}
.subtitle {
margin: 1rem 0;
diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss
index e6bd32e6..4b8d70d0 100644
--- a/src/components/Layout/layout.module.scss
+++ b/src/components/Layout/layout.module.scss
@@ -12,6 +12,8 @@
left: 0;
width: $menu-width;
height: 100vh;
+ z-index: 1501;
+
@media screen and(max-width: $width-phone) {
width: 0;
display: none;
@@ -23,6 +25,7 @@
left: 0;
height: $navbar-height;
width: 100%;
+ z-index: 1500;
}
.wrapper {
flex: 1;
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 8f7fdf8d..26383e99 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -6,8 +6,14 @@ import { NavLink } from 'react-router-dom'
import { UserContext } from '../../hooks/userContext'
const Menu: React.FC = () => {
- const { isLogged, logoutUser } = useContext(UserContext)
+ const { isLogged, logoutUser, setisLogged } = useContext(UserContext)
+ const handleLogout = () => {
+ if (logoutUser && setisLogged) {
+ logoutUser()
+ setisLogged(false)
+ }
+ }
return (
<nav className={'menu'}>
<div className="logo-container">
@@ -24,7 +30,9 @@ const Menu: React.FC = () => {
</div>
<div className="administration">
{isLogged ? (
- <p onClick={logoutUser}>Logout</p>
+ <button className="btnValid logButton" onClick={handleLogout}>
+ Logout
+ </button>
) : (
<NavLink to="/login" activeClassName="active">
Login
diff --git a/src/components/Menu/menu.scss b/src/components/Menu/menu.scss
index 09c90162..e4d3cfc0 100644
--- a/src/components/Menu/menu.scss
+++ b/src/components/Menu/menu.scss
@@ -10,6 +10,9 @@
border-top: unset;
border-right: unset;
background-color: $grey-dark;
+ position: relative;
+ z-index: 1501;
+
.logo-container {
display: flex;
}
@@ -35,7 +38,8 @@
.administration {
margin-top: auto;
}
-}
-.mobileMenu {
- margin-left: -$menu-width;
+ .logButton {
+ width: 100px;
+ min-width: 0;
+ }
}
diff --git a/src/components/Modal/modal.scss b/src/components/Modal/modal.scss
index 11500dab..bf0f5ffd 100644
--- a/src/components/Modal/modal.scss
+++ b/src/components/Modal/modal.scss
@@ -8,7 +8,7 @@
position: fixed;
top: 0;
width: 100%;
- z-index: 999;
+ z-index: 9999;
.modal-container {
align-items: center;
diff --git a/src/components/Navbar/navbar.scss b/src/components/Navbar/navbar.scss
index 93bb05ba..b39e8805 100644
--- a/src/components/Navbar/navbar.scss
+++ b/src/components/Navbar/navbar.scss
@@ -10,6 +10,7 @@
align-items: center;
justify-content: center;
padding: 0 1rem;
+ z-index: 1500;
.menu-list {
display: flex;
align-items: center;
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index f9d7e532..3b9ba236 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -1,6 +1,7 @@
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
import axios from 'axios'
import { User } from '../models/user.model'
+import { UserContext } from './userContext'
const _apiUrl: string = 'https://localhost:1443/'
@@ -13,7 +14,7 @@ export interface Auth {
}
export const useAuth = (): Auth => {
const [error, setError] = useState(null)
-
+ const { setisLogged } = useContext(UserContext)
//login user
const loginUser = async (): Promise<void> => {
try {
diff --git a/src/styles/config/_layout.scss b/src/styles/config/_layout.scss
index 1a3df8c1..b63b2df1 100644
--- a/src/styles/config/_layout.scss
+++ b/src/styles/config/_layout.scss
@@ -1,2 +1,3 @@
$menu-width: 8rem;
$navbar-height: 3.5rem;
+$navigator-height: 8rem;
--
GitLab