From fa6527b24fd8adacf2eb0ded05d8d1503672779f Mon Sep 17 00:00:00 2001
From: Julien Constant <49886317+Juknum@users.noreply.github.com>
Date: Thu, 6 Apr 2023 16:09:29 +0200
Subject: [PATCH 1/2] =?UTF-8?q?[FIX]=20Deuxi=C3=A8me=20vague=20de=20fixes?=
=?UTF-8?q?=20pour=20la=20mise=20=C3=A0=20jour=20de=20mars=20(#619)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
core/static/core/header.scss | 71 +++++++-----
core/static/core/navbar.scss | 192 ++++++++++++++++++--------------
core/static/sas/album.scss | 5 +
core/static/sas/picture.scss | 5 +-
core/templates/core/base.jinja | 103 +++++++++--------
sas/models.py | 23 ++--
sas/templates/sas/album.jinja | 2 +-
sas/templates/sas/picture.jinja | 2 +-
8 files changed, 231 insertions(+), 172 deletions(-)
diff --git a/core/static/core/header.scss b/core/static/core/header.scss
index dea1aab4..5888a965 100644
--- a/core/static/core/header.scss
+++ b/core/static/core/header.scss
@@ -1,6 +1,15 @@
+$hovered-text-color: #c2c2c2;
+$text-color: white;
+
+$background-color: #354a5f;
+$background-color-hovered: #283747;
+
+$red-text-color: #eb2f06;
+$hovered-red-text-color: #ff4d4d;
+
.header {
box-sizing: border-box;
- background-color: #354a5f;
+ background-color: $background-color;
box-shadow: 3px 3px 3px 0 #dfdfdf;
border-radius: 0;
width: 100%;
@@ -24,11 +33,11 @@
gap: 10px;
>a {
- color: #fff;
+ color: $text-color;
}
&:hover>a {
- color: #1a78b3;
+ color: $hovered-text-color;
}
@media (max-width: 607px) {
@@ -51,7 +60,7 @@
}
&-text {
- color: white;
+ color: $text-color;
display: flex;
flex-direction: column;
justify-content: center;
@@ -89,16 +98,16 @@
border-radius: 0;
margin: 0;
box-sizing: border-box;
- background-color: #354a5f;
+ background-color: $background-color;
width: 45px;
height: 25px;
padding: 0;
- color: white;
+ color: $text-color;
font-weight: normal;
line-height: 1.3em;
&:hover {
- background-color: #283747;
+ background-color: $background-color-hovered;
}
}
}
@@ -126,13 +135,13 @@
align-items: center;
text-transform: uppercase;
text-decoration: none;
- color: white;
+ color: $text-color;
margin: 0;
font-size: .9em;
width: 120px;
&:hover {
- background-color: #283747;
+ background-color: $background-color-hovered;
}
}
}
@@ -198,30 +207,34 @@
> a {
display: block;
- width: 40px;
+ min-width: 40px;
height: 40px;
border-radius: 50%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
- background-color: #354a5f;
+ background-color: $background-color;
}
>.options {
display: flex;
flex-direction: column;
- gap: 2px;
+ gap: 5px;
>.username {
display: flex;
justify-content: flex-end;
gap: 5px;
+ @media (max-width: 500px) {
+ justify-content: flex-start;
+ }
+
>a {
- color: white;
+ color: $text-color;
&:hover {
- color: #1a78b3;
+ color: $hovered-text-color;
}
}
}
@@ -230,7 +243,7 @@
width: 100%;
display: flex;
justify-content: flex-end;
- gap: 5px;
+ gap: 15px;
@media (max-width: 1200px) {
justify-content: flex-start;
@@ -238,17 +251,17 @@
>a {
text-align: right;
- color: white;
+ color: $text-color;
&:hover {
- color: #1a78b3;
+ color: $hovered-text-color;
}
&:last-child {
- color: #eb2f06;
+ color: $red-text-color;
&:hover {
- color: #cc2804;
+ color: $hovered-red-text-color;
}
}
}
@@ -265,16 +278,16 @@
position: relative;
>a {
- color: white;
+ color: $text-color;
position: relative;
font-size: 25px;
&:hover {
- color: #1a78b3;
+ color: $hovered-text-color;
}
>span {
- color: white;
+ color: $text-color;
font-size: 14px;
display: flex;
justify-content: center;
@@ -282,7 +295,7 @@
width: 10px;
height: 10px;
padding: 5px;
- background-color: #eb2f06;
+ background-color: $red-text-color;
border-radius: 50%;
position: absolute;
top: -50%;
@@ -388,9 +401,13 @@
border-radius: 5px;
font-size: .9em;
margin: 0;
- background-color: #283747;
+ background-color: $background-color-hovered;
padding: 0 10px;
- color: white;
+ color: $text-color;
+
+ &::placeholder {
+ color: $hovered-text-color;
+ }
}
}
}
@@ -418,10 +435,10 @@
>li>a {
display: flex;
- color: white;
+ color: $text-color;
&:hover {
- color: #1a78b3;
+ color: $hovered-text-color;
}
>span {
diff --git a/core/static/core/navbar.scss b/core/static/core/navbar.scss
index 2eede6c0..7b0caa06 100644
--- a/core/static/core/navbar.scss
+++ b/core/static/core/navbar.scss
@@ -1,13 +1,9 @@
nav.navbar {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
background-color: hsl(203, 75%, 40%);
margin: 1em;
color: white;
border-radius: 0.6em;
+ min-height: 40px;
@media (max-width: 500px) {
position: relative;
@@ -17,92 +13,124 @@ nav.navbar {
margin: .2em;
}
- > .menu,
- > .link {
- box-sizing: border-box;
- width: 130px;
- height: 52px;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
-
- @media (max-width: 500px) {
- width: 100%;
- height: auto;
- justify-content: flex-start;
-
- &:first-child {
- border-radius: .6em .6em 0 0;
- }
-
- &:last-child {
- border-radius: 0 0 .6em .6em;
-
- > .content {
- box-shadow: 3px 3px 3px 0 #dfdfdf;
- }
- }
- }
- }
-
- > .menu > .head,
- > .link {
- color: white;
- padding: 10px 20px;
- box-sizing: border-box;
-
- @media (max-width: 500px) {
- padding: 10px;
- }
- }
-
- .link:hover,
- .menu:hover {
- background-color: rgba(0, 0, 0, .2);
- }
-
- > .menu:hover > .content,
- > .menu > .head:hover + .content,
- > .menu > .content:hover {
- display: flex;
- }
-
- > .menu {
- display: flex;
+ > .expand-button {
+ background-color: transparent;
+ display: none;
position: relative;
+ padding: 10px;
+ cursor: pointer;
+ width: 40px;
+ height: 40px;
+ justify-content: center;
+ align-items: center;
+ margin: 0;
- > .content {
- z-index: 10;
- display: none;
- position: absolute;
- top: 100%;
- background-color: white;
- margin: 0;
- list-style-type: none;
+ > i {
+ font-size: 1.5em;
+ color: white;
+ }
+
+ @media (max-width: 500px) {
+ display: flex;
+ }
+ }
+
+ > .content {
+ @media (min-width: 500px) {display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ display: flex !important;
+ }
+
+ > .menu,
+ > .link {
+ box-sizing: border-box;
width: 130px;
- box-shadow: 3px 3px 3px 0 #dfdfdf;
- flex-direction: column;
+ height: 52px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
@media (max-width: 500px) {
- position: absolute;
- flex-direction: row;
- flex-wrap: wrap;
width: 100%;
- box-shadow: inset 3px 3px 3px 0 #dfdfdf;
- }
+ height: auto;
+ justify-content: flex-start;
- > li > a {
- display: flex;
- padding: 15px 20px;
-
- @media (max-width: 500px) {
- padding: 10px;
+ &:first-child {
+ border-radius: .6em .6em 0 0;
}
- &:hover {
- color: hsl(203, 75%, 40%);
- background-color: rgba(0, 0, 0, .05);
+ &:last-child {
+ border-radius: 0 0 .6em .6em;
+
+ > .content {
+ box-shadow: 3px 3px 3px 0 #dfdfdf;
+ }
+ }
+ }
+ }
+
+ > .menu > .head,
+ > .link {
+ color: white;
+ padding: 10px 20px;
+ box-sizing: border-box;
+
+ @media (max-width: 500px) {
+ padding: 10px;
+ }
+ }
+
+ .link:hover,
+ .menu:hover {
+ background-color: rgba(0, 0, 0, .2);
+ }
+
+ > .menu:hover > .content,
+ > .menu > .head:hover + .content,
+ > .menu > .content:hover {
+ display: flex;
+ }
+
+ > .menu {
+ display: flex;
+ position: relative;
+
+ > .content {
+ z-index: 10;
+ display: none;
+ position: absolute;
+ top: 100%;
+ background-color: white;
+ margin: 0;
+ list-style-type: none;
+ width: 130px;
+ box-shadow: 3px 3px 3px 0 #dfdfdf;
+ flex-direction: column;
+
+ @media (max-width: 500px) {
+ position: absolute;
+ flex-direction: row;
+ flex-wrap: wrap;
+ width: 100%;
+ box-shadow: inset 3px 3px 3px 0 #dfdfdf;
+ }
+
+ > li > a {
+ display: flex;
+ padding: 15px 20px;
+
+ @media (max-width: 500px) {
+ padding: 10px;
+ }
+
+ &:hover {
+ color: hsl(203, 75%, 40%);
+ background-color: rgba(0, 0, 0, .05);
+ }
}
}
}
diff --git a/core/static/sas/album.scss b/core/static/sas/album.scss
index fbbba94b..b84d0dd3 100644
--- a/core/static/sas/album.scss
+++ b/core/static/sas/album.scss
@@ -160,6 +160,7 @@ main {
> .photo,
> .album {
box-sizing: border-box;
+ background-color: #333333;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
@@ -167,6 +168,10 @@ main {
width: calc(16 / 9 * 128px);
height: 128px;
+ &.vertical {
+ background-size: contain;
+ }
+
margin: 0;
padding: 0;
box-shadow: none;
diff --git a/core/static/sas/picture.scss b/core/static/sas/picture.scss
index 520c8d9d..d65bf826 100644
--- a/core/static/sas/picture.scss
+++ b/core/static/sas/picture.scss
@@ -70,7 +70,7 @@
> #next {
width: calc(50% - 5px);
aspect-ratio: 16/9;
- background: #aaa;
+ background: #333333;
> a {
display: flex;
@@ -241,6 +241,7 @@
> .infos {
display: flex;
flex-direction: column;
+ width: 50%;
> div > div {
display: flex;
@@ -260,7 +261,7 @@
> .tools {
display: flex;
flex-direction: column;
- width: 100%;
+ width: 50%;
> div {
display: flex;
diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja
index 79e15d8b..ea610aa8 100644
--- a/core/templates/core/base.jinja
+++ b/core/templates/core/base.jinja
@@ -16,7 +16,6 @@
{# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}
{% endblock %}
-
@@ -196,52 +195,55 @@
{% block nav %}
{% if not popup %}