eric/e-tandem_UI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Finished responsive menu

Browse source 
Added menu icons
This commit is contained in:
ericb 2024-12-03 16:50:34 +01:00
parent 8c5c9b7eee
commit 0c36ecccfa
13 changed files with 3640 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

102
static/css/main.css
View file

@ -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) {

3
static/img/icons/dictionnary.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 795 B

17
static/img/icons/filters.svg
View file

@ -1,19 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-linecap: round;
stroke-miterlimit: 133.3;
stroke-width: 50px;
}
</style>
</defs>
<svg width="1.5em" height="1.5em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g>
<g id="Calque_1">
<path class="cls-1" d="M78.2,100.4h133.3M211.6,100.4c0,24.5,19.9,44.4,44.4,44.4s44.4-19.9,44.4-44.4M211.6,100.4c0-24.5,19.9-44.4,44.4-44.4s44.4,19.9,44.4,44.4M300.4,100.4h133.3M78.2,256h266.7M344.9,256c0,24.5,19.9,44.4,44.4,44.4s44.4-19.9,44.4-44.4-19.9-44.4-44.4-44.4-44.4,19.9-44.4,44.4ZM167.1,411.6h266.7M167.1,411.6c0-24.5-19.9-44.4-44.4-44.4s-44.4,19.9-44.4,44.4,19.9,44.4,44.4,44.4,44.4-19.9,44.4-44.4Z"/>
</g>
<path d="M56,80.97h149.94M206.06,80.97c0,27.56,22.38,49.94,49.94,49.94s49.94-22.38,49.94-49.94M206.06,80.97c0-27.56,22.38-49.94,49.94-49.94s49.94,22.38,49.94,49.94M305.94,80.97h149.94M56,256h300M356,256c0,27.56,22.38,49.94,49.94,49.94s49.94-22.38,49.94-49.94-22.38-49.94-49.94-49.94-49.94,22.38-49.94,49.94ZM156,431.03h300M156,431.03c0-27.56-22.38-49.94-49.94-49.94s-49.94,22.38-49.94,49.94,22.38,49.94,49.94,49.94,49.94-22.38,49.94-49.94Z" style="fill: none; stroke: #000; stroke-linecap: round; stroke-miterlimit: 4.69; stroke-width: 30px;"/>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 786 B

After

Width:  |  Height:  |  Size: 699 B

Before After
Before After

20
static/img/icons/received copie.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5px;
}
</style>
</defs>
<!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709) -->
<g>
<g id="Calque_1">
<path class="cls-1" d="M9,3.7h-2.1c-1,0-1.9.6-2.2,1.6l-2.4,7.8c0,.2,0,.4,0,.7v4.2c0,1.2,1,2.2,2.2,2.2h15c1.2,0,2.2-1,2.2-2.2v-4.2c0-.2,0-.4-.1-.7l-2.4-7.8c-.3-.9-1.2-1.6-2.1-1.6h-2.1M2.2,13.5h3.9c.9,0,1.6.5,2,1.2l.3.5c.4.8,1.2,1.2,2,1.2h3.2c.9,0,1.6-.5,2-1.2l.3-.5c.4-.8,1.2-1.2,2-1.2h3.9M12,12.2V4M12,4l3,3M12,4l-3,3"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 792 B

3
static/img/icons/received.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859M12 3v8.25m0 0-3-3m3 3 3-3" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 589 B

3
static/img/icons/sent.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path d="M9,3.75h-2.09c-.99,0-1.86.64-2.15,1.59l-2.41,7.84c-.07.21-.1.44-.1.66v4.16c0,1.24,1.01,2.25,2.25,2.25h15c1.24,0,2.25-1.01,2.25-2.25v-4.16c0-.22-.03-.45-.1-.66l-2.41-7.84c-.29-.94-1.16-1.59-2.15-1.59h-2.09M2.25,13.5h3.86c.85,0,1.63.48,2.01,1.24l.26.51c.38.76,1.16,1.24,2.01,1.24h3.22c.85,0,1.63-.48,2.01-1.24l.26-.51c.38-.76,1.16-1.24,2.01-1.24h3.86M12,13.25V5M12,5l3,3M12,5l-3,3" style="fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 631 B

3
static/img/icons/translations.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 441 B

3
static/img/icons/user-management.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 709 B

3
static/img/icons/warning.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 375 B

2
static/img/logo/forum-bilinguisme.svg
View file

@ -1,4 +1,4 @@
<svg viewBox="0 0 400 118" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="8em" viewBox="0 0 400 118" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_19_533)">
<g clip-path="url(#clip1_19_533)">
<path d="M137.482 73.7247V43.92C137.348 41.7318 139.016 39.8494 141.207 39.7153C141.332 39.7083 141.459 39.7083 141.584 39.7083H161.278C163.536 39.7083 165.365 41.5435 165.365 43.8024C165.365 46.0612 163.536 47.8965 161.278 47.8965H145.762V55.3153H159.428C161.689 55.1977 163.614 56.9271 163.741 59.1788C163.859 61.44 162.127 63.3647 159.875 63.4894C159.727 63.4965 159.576 63.4965 159.428 63.4894H145.762V73.7294C145.762 76.0165 143.892 77.8871 141.598 77.8871C139.296 77.8871 137.431 76.0165 137.431 73.7294L137.482 73.7247Z" fill="#203E9A"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Before After
Before After

2
static/img/logo/logo_e-tandem-Bilinguisme_FR.svg
View file

@ -1,4 +1,4 @@
<svg width="400" height="160" viewBox="0 0 400 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg height="3em" viewBox="0 0 400 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M104.281 79.3825C104.281 87.4337 97.753 93.9639 89.7018 93.9639C81.6496 93.9639 75.1214 87.4337 75.1214 79.3825V33.695C75.1214 25.6438 81.6496 19.1137 89.7018 19.1137C97.753 19.1137 104.281 25.6438 104.281 33.695V79.3825Z" fill="#676767"/>
<path d="M85.7185 32.535C86.9499 32.535 87.9481 31.5368 87.9481 30.3054C87.9481 29.074 86.9499 28.0758 85.7185 28.0758C84.4872 28.0758 83.489 29.074 83.489 30.3054C83.489 31.5368 84.4872 32.535 85.7185 32.535Z" fill="white"/>
<path d="M93.3055 32.535C94.5369 32.535 95.5351 31.5368 95.5351 30.3054C95.5351 29.074 94.5369 28.0758 93.3055 28.0758C92.0741 28.0758 91.0759 29.074 91.0759 30.3054C91.0759 31.5368 92.0741 32.535 93.3055 32.535Z" fill="white"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 71 KiB

Before After
Before After

2
static/img/logo/logo_e-tandem_FR.svg
View file

@ -1,4 +1,4 @@
<svg width="400" height="160" viewBox="0 0 400 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg height="3em" viewBox="0 0 400 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M162.281 79.3825C162.281 87.4337 155.753 93.9638 147.702 93.9638C139.65 93.9638 133.121 87.4337 133.121 79.3825V33.695C133.121 25.6438 139.65 19.1137 147.702 19.1137C155.753 19.1137 162.281 25.6438 162.281 33.695V79.3825Z" fill="#322C6A"/>
<path d="M143.718 32.535C144.95 32.535 145.948 31.5368 145.948 30.3054C145.948 29.074 144.95 28.0758 143.718 28.0758C142.487 28.0758 141.489 29.074 141.489 30.3054C141.489 31.5368 142.487 32.535 143.718 32.535Z" fill="white"/>
<path d="M151.306 32.535C152.537 32.535 153.535 31.5368 153.535 30.3054C153.535 29.074 152.537 28.0758 151.306 28.0758C150.074 28.0758 149.076 29.074 149.076 30.3054C149.076 31.5368 150.074 32.535 151.306 32.535Z" fill="white"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 55 KiB

Before After
Before After