Upload new base html

This commit is contained in:
augustin64 2023-06-10 16:46:55 +02:00
parent bf6ab63644
commit f73e5bbd42
3 changed files with 440 additions and 338 deletions

View File

@ -1,43 +1,19 @@
@media (max-width: 1024px) {
html {
font-size: 13px;
padding: 0;
}
body {
margin: 0;
max-width: none;
}
nav {
padding: 0;
width: 100vw;
}
body {
border-radius: 0px;
border-width: 0px;
}
nav {
border-radius: 0px;
}
}
@media (max-width: 750px) { @media (max-width: 750px) {
#partitions-grid { :root {
grid-template-columns: repeat(auto-fill, 170px); --sidebar-size: 75vw;
} }
.partition { #content {
width: 160px; min-width: calc(100vw - 100px);
} }
.partition-thumbnail { /* Make content not scrollable */
width: 160px; #content-container {
height: 160px; overflow: hidden;
} }
.edit-button { /* calc(var(--sidebar-size) - 20px) seems not to be working so I'm hardcoding this.. */
transform: translateX(-40%) translateY(-130%); #settings-container {
width: calc(75vw - 20px);
} }
} }

View File

@ -1,204 +1,223 @@
@import url('https://augustin64.fr/static/font/iosevka.css');
/** Color Schemes */
/* Themes used: Catppuccin Latte & Moccha
* https://github.com/catppuccin/catppuccin */
/* Light theme : catppuccin Latte */
:root { :root {
--background-primary: white; --color-rosewater: #f5e0dc;
--background-secondary: #eee; --color-flamingo: #f2cdcd;
--color-primary: black; --color-pink: #f5c2e7;
--color-highlight: #377ba8; --color-mauve: #cba6f7;
--background-head: lightgray; --color-red: #f38ba8;
--background-head-hover: #ddd; --color-maroon: #eba0ac;
--background-flash: #cae6f6; --color-peach: #fab387;
--shadow-color: #7f7f7f; --color-yellow: #f9e2af;
--border-color: black; --color-green: #a6e3a1;
--color-teal: #94e2d5;
--color-sky: #89dceb;
--color-sapphire: #74c7ec;
--color-blue: #89b4fa;
--color-lavender: #b4befe;
--color-text: #cdd6f4;
--color-subtext1: #bac2de;
--color-subtext0: #a6adc8;
--color-overlay2: #9399b2;
--color-overlay1: #7f849c;
--color-overlay0: #6c7086;
--color-surface2: #585b70;
--color-surface1: #45475a;
--color-surface0: #313244;
--color-base: #1e1e2e;
--color-mantle: #181825;
--color-crust: #11111b;
--font-family: Iosevka Web;
} }
@media (prefers-color-scheme: dark) { /* Dark theme: Catpuccin Mocha */
@media (prefers-color-scheme: light) {
:root { :root {
--background-primary: black; --color-rosewater: #dc8a78;
--background-secondary: #18181a; --color-flamingo: #dd7878;
--color-primary: white; --color-pink: #ea76cb;
--color-highlight: #9fc0ff; --color-mauve: #8839ef;
--background-head: #232327; --color-red: #d20f39;
--background-head-hover: #18181a; --color-maroon: #e64553;
--background-flash: #002c45; --color-peach: #fe640b;
--shadow-color: #282828; --color-yellow: #df8e1d;
--border-color: #6c6c6c; --color-green: #40a02b;
--color-teal: #179299;
--color-sky: #04a5e5;
--color-sapphire: #209fb5;
--color-blue: #1e66f5;
--color-lavender: #7287fd;
--color-text: #4c4f69;
--color-subtext1: #5c5f77;
--color-subtext0: #6c6f85;
--color-overlay2: #7c7f93;
--color-overlay1: #8c8fa1;
--color-overlay0: #9ca0b0;
--color-surface2: #acb0be;
--color-surface1: #bcc0cc;
--color-surface0: #ccd0da;
--color-base: #eff1f5;
--color-mantle: #e6e9ef;
--color-crust: #dce0e8;
} }
} }
html {
font-family: sans-serif; /** Various settings (variables) */
background: var(--background-secondary); :root {
color: var(--color-primary); /*--sidebar-size: max(10vw, 160px);*/
padding: 1rem; --sidebar-size: 200px;
} }
body {
max-width: 960px;
margin: 0 auto;
background: var(--background-head);
color: var(--color-primary);
border-color: var(--border-color); /** Generic things */
border-style: solid; h1 {
border-radius: 3px; margin-left: 30px;
border-width: 1px;
}
h1, h2, h3,
h4, h5, h6 {
font-family: serif;
color: var(--color-highlight);
margin: 1rem 0;
} }
a { a {
color: var(--color-highlight);
}
hr {
border: none;
border-top: 1px solid var(--background-head);
}
nav {
background: var(--background-head);
display: flex;
align-items: center;
padding: 0 0.5rem;
border-radius: 3px;
}
nav h1 {
flex: auto;
margin: 0;
}
nav h1 a {
text-decoration: none; text-decoration: none;
padding: 0.25rem 0.5rem; color: var(--color-blue);
} }
nav ul { body {
display: flex; color: var(--color-text);
list-style: none; background-color: var(--color-base);
margin: 0;
padding: 0;
} }
nav ul li a, #page-header {
nav ul li span, margin-left: 10px;
header .action {
display: block;
padding: 0.5rem;
} }
button,
input,
select {
background-color: var(--background-secondary);
color: var(--color-primary);
border-width: 1px; /** Just general styling of elements */
#content-container {
background-color: var(--color-base);
position: absolute;
top: 0;
left: var(--sidebar-size);
right: 0;
bottom: 0;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
padding: 0 25px;
}
.album-cover {
padding: 5px;
margin: 5px;
border-radius: 3px; border-radius: 3px;
border-color: var(--border-color); background-color: inherit;
} }
.content { .album-cover:hover {
padding: 0 1rem 1rem; background-color: var(--color-base);
background: var(--background-primary); }
border-color: var(--border-color);
border-style: solid; /** Sidebar toggle */
#sidebar {
background-color: var(--color-mantle);
width: var(--sidebar-size);
position: fixed;
top: 0;
left: 0;
bottom: 0;
}
#slide {
padding: 10px 6px 3px 10px;
border-radius: 3px; border-radius: 3px;
border-width: 1px; background-color: var(--color-crust);
color: var(--color-blue);
} }
.content>header { #slide-sidebar {
border-bottom: 1px solid var(--background-head); display: none;
}
input:checked#slide-sidebar~#content-container {
left: 0;
overflow: unset;
}
input:checked#slide-sidebar~#sidebar {
display: none;
transition: display 0s 0.5s;
}
input:checked#slide-sidebar~label {
left: 10px;
}
#slide-sidebar~label {
z-index: 1;
position: absolute;
top: 20px;
left: calc(var(--sidebar-size) + 10px);
background-color: var(--color-base);
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
/** Albums: users */
#album-header {
display: flex; display: flex;
align-items: flex-end;
} }
.content>header h1 { section#users {
flex: auto;
margin: 1rem 0 0.25rem 0;
}
.flash {
margin: 1em 0;
padding: 1em;
background: var(--background-flash);
border: 1px solid var(--color-highlight);
border-radius: 3px;
}
.content:last-child {
margin-bottom: 0;
}
.content form {
margin: 1em 0;
display: flex; display: flex;
flex-direction: column;
} }
.content label { #header-actions {
font-weight: bold; align-self: center;
margin-bottom: 0.5em; margin-left: auto;
margin-right: 0;
display: flex;
} }
.content input, .user-profile-picture,
.content textarea { .dropdown {
margin-bottom: 1em;
}
.content textarea {
min-height: 12em;
resize: vertical;
}
input[type=submit] {
align-self: start;
min-width: 10em;
}
.partition {
background-color: var(--background-head);
text-decoration: none;
border-color: var(--border-color);
border-radius: 5px;
border-style: solid;
border-width: 1px;
margin: 3px; margin: 3px;
width: 178px; width: 30px;
box-shadow: 2px 2px 2px var(--shadow-color); height: 30px;
}
text-align: center;
line-height: 30px;
.partition-thumbnail {
width: 178px;
height: 178px;
background-color: var(--background-primary);
border-radius: 5px; border-radius: 5px;
font-weight: 600;
} }
.partition-description { .user-profile-picture {
padding: 2px; color: var(--color-mantle);
color: var(--color-primary);
min-height: 40px;
} }
.partition-author { .dropdown {
font-size: .8rem; background-color: var(--color-surface1);
} }
.button-href {
text-decoration: none;
}
/** Partitions Grid */
#partitions-grid { #partitions-grid {
margin-top: 50px;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 200px); grid-template-columns: repeat(auto-fill, 200px);
justify-content: center; justify-content: center;
overflow-x: scroll;
} }
#partitions-grid a { #partitions-grid a {
@ -210,180 +229,226 @@ input[type=submit] {
overflow-x: scroll; overflow-x: scroll;
} }
#header-actions { .partition {
margin-bottom: 5px; background-color: var(--color-surface0);
display: inherit;
width: 178px;
margin: 15px 0;
border-radius: 5px;
} }
#cancel-deletion { img.partition-thumbnail {
width: 133.333px; border-radius: 5px 5px 0 0;
height: 178px;
width: 178px;
background-color: var(--color-surface2);
} }
#search-bar { .partition {
max-width: 50%; color: var(--color-text);
margin-bottom: .25rem;
} }
#search-form { .partition-author {
display: block; font-style: italic;
text-align: center; font-size: .9rem;
} }
.add-to-album { .partition-description {
width: 100%; padding: 3px;
width: -moz-available; min-height: 50px;
width: -webkit-fill-available;
width: stretch;
} }
#nb-queries-label { /** Sidebar: "settings" */
font-size: .7rem; #albums {
font-weight: lighter; overflow: scroll;
height: 70vh;
} }
.user-profile-picture { .user {
min-width: 25px;
max-width: 25px;
min-height: 23px;
max-height: 23px;
text-align: center;
padding-top: 2px;
border-radius: 50%;
margin: 1px;
color: white;
text-shadow: 1px 1px 4px var(--shadow-color);
font-size: 18px;
border: 1px solid black;
box-shadow: 1px 2px 2px var(--shadow-color);
}
#users-list {
display: flex; display: flex;
margin-right: 15px;
margin-top: 1px;
} }
.dropbtn { .username {
width: 30px; margin-top: 7px;
height: 30px; margin-left: 5px;
background-image: radial-gradient(circle, var(--color-primary) 2px, var(--background-head) 3px); }
background-size: 100% 33.33%;
box-shadow: 1px 2px 2px var(--shadow-color); #settings-container>button {
background-color: inherit;
color: inherit;
border-style: none;
border-radius: 3px;
font-size: .9rem;
width: -moz-available;
padding: 5px;
}
#settings-container>button:hover {
background-color: var(--color-crust);
}
#settings-container {
position: fixed;
bottom: 0;
background-color: var(--color-base);
width: 180px; /*TODO width: calc(var-(--sidebar-size) - 20px); ?*/
padding: 5px;
margin: 5px;
border-color: var(--border-color);
border-style: solid;
border-width: 1px;
border-radius: 3px; border-radius: 3px;
} }
.userdropbtn { button#logout:hover {
background-color: var(--background-head); background-color: var(--color-red);
height: 30px; color: var(--color-mantle);
border: none; }
button#logout {
color: var(--color-red);
}
button#logout>svg {
scale: 0.9;
position: absolute;
top: 7px;
left: 10px;
}
#settings-container>.user {
margin-top: 6px;
border-radius: 3px; border-radius: 3px;
color: var(--color-primary);
} }
.dropdown { #settings-container>.user:hover {
position: relative; background-color: var(--color-mantle);
float: right;
} }
/** Dropdown */
.dropdown-content { .dropdown-content {
display: none; display: none;
position: absolute; position: absolute;
background-color: var(--background-secondary); z-index: 2;
background-color: var(--color-surface1);
font-size: 0.9rem;
transform: translateX(-130px);
min-width: 160px; min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); border-radius: 3px;
z-index: 1;
border-radius: 5px; box-shadow: 0 4px 10px var(--color-surface1); /* Little shadow to add some depth */
transform: translate(-130px);
font-size: 0.7rem;
} }
.dropdown-content a {
color: var(--color-primary);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: var(--background-head);
border-radius: 5px;
}
.dropdown:hover .dropdown-content { .dropdown:hover .dropdown-content {
display: block; display: block;
border-radius: 5px; width: unset;
} }
#delete-album { .dropdown-content > a > div:hover {
background-color: #c61918; background-color: var(--color-surface0);
border-radius: 5px;
color: whitesmoke;
} }
table { .dropdown-content > a {
border: thin solid var(--border-color); color: var(--color-text);
border-collapse: collapse;
text-align: center;
width: 80%;
margin: 10%;
} }
.user-profile {
display: inline-flex;
overflow-y: scroll;
width: 80%;
}
.table-username {
margin-left: 10px;
}
td { /** Dialogs */
border: thin solid var(--border-color); dialog {
} display: none;
z-index: 3;
.edit-button { /* Geometry */
float: right; top: 0;
transform: translateX(-80%) translateY(-150%); border-width: 2px;
padding: 2%;
border-color: var(--border-color);
border-style: solid;
border-radius: 3px; border-radius: 3px;
border-width: 1px;
box-shadow: 1px 2px 2px var(--shadow-color); /* Colors */
background-color: var(--background-secondary); background-color: var(--color-crust);
color: var(--color-text);
border-color: var(--color-lavender);
min-width: 75vw;
} }
#paroles { .close-dialog {
font-family: inherit; float: right;
font-size: 0.8rem;
} }
.button:hover { dialog:target {
background-color: var(--background-head-hover); display: block;
} }
.button { dialog:target ~ .mask {
display: inline; display: block;
background-color: var(--background-head);
padding: 2px;
margin: 2px;
border-radius: 2px;
font-size: 0.9rem;
} }
#actions-rapides { .mask {
text-align: center; display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--color-crust);
z-index: 1;
opacity: 50%;
} }
#actions-rapides a {
text-decoration: none; /** Forms */
input[type="text"],
input[type="search"],
select,
textarea {
padding: 7px;
background-color: var(--color-surface1);
color: var(--color-text);
margin: 3px;
border-radius: 3px;
border-width: 0;
border-style: unset;
}
textarea {
resize: vertical;
}
input[type="submit"] {
padding: 10px 20px;
border: none;
border-radius: 3px;
margin: 5px;
background-color: var(--color-blue);
color: var(--color-base);
cursor: pointer;
}
/* Styles for input[type="file"] */
input[type="file"] {
padding: 7px 20px;
border: none;
border-radius: 3px;
margin: 3px;
background-color: var(--color-blue);
color: var(--color-base);
cursor: pointer;
}
/** Search bar */
#search-form {
margin: 10px;
}
#search-bar {
width: -moz-available;
}
#search-submit {
padding: 5px 5px;
} }

View File

@ -1,7 +1,9 @@
<!doctype html> <!DOCTYPE html>
<html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>{% block title %}{% endblock %} - PartitionCloud</title> <title>{% block title %}{% endblock %} - PartitionCloud</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='mobile.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='mobile.css') }}">
@ -9,35 +11,94 @@
<link rel="apple-touch-icon" href="{{ url_for('static', filename='icon.png') }}"> <link rel="apple-touch-icon" href="{{ url_for('static', filename='icon.png') }}">
<link rel="manifest" href="{{ url_for('static', filename='manifest.webmanifest') }}" /> <link rel="manifest" href="{{ url_for('static', filename='manifest.webmanifest') }}" />
</head> </head>
<nav>
<h1><a href="{{ url_for('albums.index') }}">PartitionCloud</a></h1>
<div class="dropdown"> <body>
<div id="dialogs">
<!-- This div contains needed needed dialogs for the page
They will only appear if the user clicks a button for one of them -->
{% block dialogs %}{% endblock %}
<div class="mask" id="!"></div>
</div>
<div id="main-container">
<input id="slide-sidebar" type="checkbox" role="button" />
<label for="slide-sidebar">
<div id="slide">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-playlist" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M17 17v-13h4"></path>
<path d="M13 5h-10"></path>
<path d="M3 9l10 0"></path>
<path d="M9 13h-6"></path>
</svg>
</div>
</label>
<div id="sidebar">
{% if g.user %} {% if g.user %}
<button class="userdropbtn">{{ g.user['username'] }}</button> <form id="search-form" action="/albums/search" method="post">
{% else %} <input type="search" id="search-bar" required="" placeholder="Rechercher" name="query">
<button class="userdropbtn">Connexion</button> <br>
<select id="nb-queries" name="nb-queries">
{% for i in range(0, user.max_queries+1) %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
<label for="nb-queries" id="nb-queries-label">en ligne</label>
<input id="search-submit" type="submit" value="Go">
</form>
{% endif %} {% endif %}
<div class="dropdown-content"> <h1>Albums</h1>
{% if not g.user %} <section id="albums">
<a href="{{ url_for('auth.register') }}">Créer un compte</a> {% if user.get_albums() |length != 0 %}
<a href="{{ url_for('auth.login') }}">Se connecter</a> {% for album in user.albums %}
<a href="/albums/{{ album['uuid'] }}">
<div class="album-cover" id="album-1">
{{ album["name"] }}
</div>
</a>
{% endfor %}
{% else %} {% else %}
{% if g.user.access_level == 1 %} <div>Aucun album disponible</div>
<a href="/admin">Panneau Admin</a>
{% endif %}
<a href="{{ url_for('auth.logout') }}">Déconnexion</a>
{% endif %} {% endif %}
</section>
<div id="settings-container">
{% if g.user %}
<button href="{{ url_for('auth.logout') }}" id="logout">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-logout" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
<path d="M9 12h12l-3 -3"></path>
<path d="M18 15l3 -3"></path>
</svg>
Déconnexion
</button><br/>
{% else %}
<button href="{{ url_for('auth.register') }}">Créer un compte</button>
<button href="{{ url_for('auth.login') }}">Se connecter</button>
{% endif %}
{% if g.user.access_level == 1 %}
<button href="/admin">Panneau admin</button><br/>
{% endif %}
<div class="user">
<div class="user-profile-picture" style="background-color:var(--color-pink);"
title="augustin64">
A
</div>
<div class="username">augustin64</div>
</div>
</div>
</div> </div>
</nav> <div id="content-container">
<section class="content"> <header id="page-header">
<header> {% block header %}{% endblock %}
{% block header %}{% endblock %} </header>
<div id="header-actions"> <section id="content">
{% block header_actions %}{% endblock %} {% block content %}{% endblock %}
</section>
</div> </div>
</header> </div>
{% for message in get_flashed_messages() %} </body>
<div class="flash">{{ message }}</div>
{% endfor %} </html>
{% block content %}{% endblock %}
</section>