From 8c5c9b7eeeeab814041ac5075333e5fbb5134bf7 Mon Sep 17 00:00:00 2001 From: ericb Date: Mon, 2 Dec 2024 17:28:49 +0100 Subject: [PATCH 1/2] Added user image profile in Mobile sideMenu --- static/css/main.css | 14 +++++++++++--- tandem-list.html | 39 ++++++++++++++++++++++++--------------- 2 files changed, 35 insertions(+), 18 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 141f969..9949aff 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -242,7 +242,7 @@ article li:not(:first-of-type){ color: darkgray; } .profile .user-avatar{ - text-align:center; + text-align: center; } .user-avatar img{ width: 9rem; @@ -392,7 +392,7 @@ footer a img{ width: 1em; } .navbar-brand{ - margin: 0 auto; + margin-left: 1rem; } .lead{ hyphens: none; @@ -407,7 +407,7 @@ footer a img{ .partners-logo-grid{ grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); } - .profile .user-avatar, .profile .user-pseudo{ + .profile .user-avatar, .profile .user-pseudo, .offcanvas .user-avatar{ margin: 0 auto; text-align: center } @@ -428,6 +428,14 @@ footer a img{ width: fit-content; margin: calc(var(--div-padding) / 1.25) auto 0; } + .offcanvas .user-avatar{ + margin: 0 auto; + text-align: center + } + .offcanvas .user-avatar img{ + width: 5rem; + height: 5rem; + } .offcanvas-body{ padding: 0; background: rgb(253, 195, 20); diff --git a/tandem-list.html b/tandem-list.html index a184ea4..e30e33e 100644 --- a/tandem-list.html +++ b/tandem-list.html @@ -29,6 +29,10 @@ -->
From 0c36ecccfabb0c96c7e9615d3f0ed94009e60c42 Mon Sep 17 00:00:00 2001 From: ericb Date: Tue, 3 Dec 2024 16:50:34 +0100 Subject: [PATCH 2/2] Finished responsive menu Added menu icons --- static/css/main.css | 102 +- static/img/icons/dictionnary.svg | 3 + static/img/icons/filters.svg | 17 +- static/img/icons/received copie.svg | 20 + static/img/icons/received.svg | 3 + static/img/icons/sent.svg | 3 + static/img/icons/translations.svg | 3 + static/img/icons/user-management.svg | 3 + static/img/icons/warning.svg | 3 + static/img/logo/forum-bilinguisme.svg | 2 +- .../img/logo/logo_e-tandem-Bilinguisme_FR.svg | 2 +- static/img/logo/logo_e-tandem_FR.svg | 2 +- tandem-list.html | 3571 ++++++++++++++++- 13 files changed, 3640 insertions(+), 94 deletions(-) create mode 100644 static/img/icons/dictionnary.svg create mode 100644 static/img/icons/received copie.svg create mode 100644 static/img/icons/received.svg create mode 100644 static/img/icons/sent.svg create mode 100644 static/img/icons/translations.svg create mode 100644 static/img/icons/user-management.svg create mode 100644 static/img/icons/warning.svg diff --git a/static/css/main.css b/static/css/main.css index 9949aff..6a8f4dd 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -8,21 +8,6 @@ html { font-kerning: normal; overflow-x: hidden; } -body { - font-family: var(--bs-body-font-family); - background-color: var(--background); - overflow-x: hidden; - letter-spacing: .125px; -/* -webkit-font-smoothing: antialiased; */ - font-variant-ligatures: no-common-ligatures; -} -h1, h2, h3, h4, h5{ - font-family: var(--bs-ttl-font-family); -} -/* ::selection, ::-moz-selection { - background-color: var(--grauwert3); - text-shadow: none; -} */ :root{ --background: rgb(240,240,240); --background-wrapper: rgb(250,250,250); @@ -32,13 +17,46 @@ h1, h2, h3, h4, h5{ --accent:45,98%; /* hsl */ --accent-normal: hsl(var(--accent), 54%); --accent-light: hsl(var(--accent), 75%); - --bs-btn-hover-bg: #f28705; - --bs-link-color: #f28705; + --bs-btn-hover-bg: rgb(242, 135, 5); + --bs-link-color: rgb(242, 135, 5); --bs-body-font-family: 'Nunito', Arial, Tahoma, sans-serif; --bs-ttl-font-family: 'Lexend', Arial, Tahoma, sans-serif; --top-bar: 6.125rem; --bottom-bar: 5em; --div-padding: 3em; + --bs-navbar-color: rgba(242, 135, 5, .15); +} +body { + font-family: var(--bs-body-font-family); + background-color: var(--background); + overflow-x: hidden; + letter-spacing: .125px; + font-variant-ligatures: no-common-ligatures; +} +h1, h2, h3, h4, h5{ + font-family: var(--bs-ttl-font-family); +} +::selection, ::-moz-selection { + text-shadow: none; +} +.navbar-toggler{ + color: var(--bs-btn-hover-bg); +} +.custom-toggler.navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(245,135,5,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +} +.btn-link, .text-link{ + color: var(--bs-link-color); + text-decoration: none; +} +.btn-link{ + padding: .725rem 1rem; +} +.btn-link:hover, .btn-link:focus-visible, .text-link:hover, .text-link:focus-visible{ + text-decoration: underline; + color: var(--bs-link-color); + background-color: transparent; + text-underline-offset: 0.375em; } .top-bar{ height: var(--top-bar); @@ -49,7 +67,7 @@ h1, h2, h3, h4, h5{ height: 100%; } /* navbar */ -.navbar img{ +.navbar-brand img{ height: calc(var(--top-bar) - 1.5em); } #mainNav, .offcanvas-backdrop{ @@ -77,8 +95,10 @@ h1, h2, h3, h4, h5{ justify-content: center; } -/* side menu */ - +/* left side menu */ +.nav-item .badge{ + background-color: var(--bs-link-color); +} .side-menu .nav-link{ color: black; padding: 0.725rem 1rem; @@ -109,9 +129,6 @@ h1, h2, h3, h4, h5{ margin-bottom: 0.5rem; padding-bottom: 0.5rem; } -.separator.menu-admin{ - text-transform: uppercase; -} /* heros */ .hero{ @@ -237,9 +254,10 @@ article li:not(:first-of-type){ left: 0; justify-content: center; align-items: center; - font-size: 2rem; - line-height: .525; + font-size: 1.2em; + line-height: .425em; color: darkgray; + letter-spacing: .25em; } .profile .user-avatar{ text-align: center; @@ -249,7 +267,7 @@ article li:not(:first-of-type){ height: 9rem; object-fit: cover; object-position: top; - border: 2px solid #f28705; + border: 2px solid white; border-radius: 50%; } .profile .label{ @@ -268,7 +286,7 @@ article li:not(:first-of-type){ /* search filters */ #search-filters{ border: 1px solid white; - background-color: var(--accent-light); + background-color: rgba(255,255,255,.5); margin-top: 0.5rem; } #search-filters form{ @@ -368,15 +386,18 @@ footer a img{ min-height: 2.5em; } .ui-btn{ - padding: 1rem; + display: inline-flex; background-color: white; - width: fit-content; border-radius: 0.5rem; } .icon-ui{ - width: 1.5em; - height: 1.5em; - margin-right: 0.75rem; + width: 1.25em; + height: 1.25em; + margin-right: 0.65em; +} +nav .icon-ui{ + display: inline-flex; + margin-right: .75rem; } /* media queries */ @media (width <= 576px) { @@ -387,10 +408,6 @@ footer a img{ --div-padding: 2em; --bottom-bar: 40px; } - - .navbar-toggler-icon { - width: 1em; - } .navbar-brand{ margin-left: 1rem; } @@ -449,10 +466,13 @@ footer a img{ flex-direction: column !important; } .offcanvas .nav-link{ + display: flex; + align-items: center; background: none; padding: var(--bs-nav-link-padding-y) calc(var(--div-padding) / 2); border-radius: 0; color: black; + width: 100%; } .offcanvas .nav-link.active{ background-color: rgba(255,255,255,.5); @@ -470,6 +490,10 @@ footer a img{ .offcanvas li:not(:first-child){ margin-top: initial; } + .offcanvas .user-pseudo{ + font-weight: 700; + margin-top: .5em; + } #side-lang{ display: flex; align-items: center; @@ -477,8 +501,12 @@ footer a img{ padding: var(--div-padding); } .separator.menu-admin{ - margin-top: 1.5rem; + margin-top: .5rem; padding-left: 2rem; + padding-bottom: 0; + } + .separator.menu-admin > .btn-link{ + padding: .725rem 1rem .725rem 0; } } @media (576px <= width <= 992px) { diff --git a/static/img/icons/dictionnary.svg b/static/img/icons/dictionnary.svg new file mode 100644 index 0000000..f105f4f --- /dev/null +++ b/static/img/icons/dictionnary.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/static/img/icons/filters.svg b/static/img/icons/filters.svg index 768a792..a54a2c7 100644 --- a/static/img/icons/filters.svg +++ b/static/img/icons/filters.svg @@ -1,19 +1,6 @@ - - - - + - - - + \ No newline at end of file diff --git a/static/img/icons/received copie.svg b/static/img/icons/received copie.svg new file mode 100644 index 0000000..9c83c33 --- /dev/null +++ b/static/img/icons/received copie.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/icons/received.svg b/static/img/icons/received.svg new file mode 100644 index 0000000..7f5f8fc --- /dev/null +++ b/static/img/icons/received.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/static/img/icons/sent.svg b/static/img/icons/sent.svg new file mode 100644 index 0000000..c6dc6f8 --- /dev/null +++ b/static/img/icons/sent.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/static/img/icons/translations.svg b/static/img/icons/translations.svg new file mode 100644 index 0000000..b57af78 --- /dev/null +++ b/static/img/icons/translations.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/static/img/icons/user-management.svg b/static/img/icons/user-management.svg new file mode 100644 index 0000000..1b6f452 --- /dev/null +++ b/static/img/icons/user-management.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/static/img/icons/warning.svg b/static/img/icons/warning.svg new file mode 100644 index 0000000..a83df01 --- /dev/null +++ b/static/img/icons/warning.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/static/img/logo/forum-bilinguisme.svg b/static/img/logo/forum-bilinguisme.svg index 58157a3..6609f41 100644 --- a/static/img/logo/forum-bilinguisme.svg +++ b/static/img/logo/forum-bilinguisme.svg @@ -1,4 +1,4 @@ - + diff --git a/static/img/logo/logo_e-tandem-Bilinguisme_FR.svg b/static/img/logo/logo_e-tandem-Bilinguisme_FR.svg index 1a11f3d..c94d698 100644 --- a/static/img/logo/logo_e-tandem-Bilinguisme_FR.svg +++ b/static/img/logo/logo_e-tandem-Bilinguisme_FR.svg @@ -1,4 +1,4 @@ - + diff --git a/static/img/logo/logo_e-tandem_FR.svg b/static/img/logo/logo_e-tandem_FR.svg index 83f8da8..05b3b45 100644 --- a/static/img/logo/logo_e-tandem_FR.svg +++ b/static/img/logo/logo_e-tandem_FR.svg @@ -1,4 +1,4 @@ - + diff --git a/tandem-list.html b/tandem-list.html index e30e33e..52af7ea 100644 --- a/tandem-list.html +++ b/tandem-list.html @@ -21,7 +21,7 @@
+
+
+ + +
+
-
-
- - -
-
@@ -363,23 +3853,26 @@ +