Commit de8b6024 authored by berumuron's avatar berumuron
Browse files

imp: Improve the design

parents efee8e90 885e1a55
/* Global */
:root {
--main-color: #22183E;
--main-color-muted: #52486E;
--secondary-color: #542DBC;
--contrast-color: #F2F2F2;
}
* {
box-sizing: border-box;
}
......@@ -15,6 +22,12 @@ html {
line-height: 26px;
}
body {
color: var(--main-color);
background-color: var(--contrast-color);
}
@media(min-width: 800px) {
html {
font-size: 20px;
......@@ -32,6 +45,8 @@ h1, h2, h3 {
h1 {
margin-bottom: 1.75rem;
text-align: center;
}
h1 { font-size: 2rem; line-height: 2.5rem; }
......@@ -52,11 +67,255 @@ p:last-child {
margin-bottom: 0;
}
.text-muted {
color: var(--main-color-muted);
}
/* Links */
a {
color: var(--secondary-color);
}
a.add::before {
margin-right: .25rem;
content: "+";
}
/* Forms */
form {
max-width: 500px;
margin-bottom: 5rem;
}
form .form-group {
margin-bottom: 1rem;
}
form .form-group.form-group-actions {
display: flex;
margin-bottom: 1rem;
flex-direction: row-reverse;
align-items: baseline;
justify-content: space-between;
}
form label {
display: block;
margin-bottom: .25rem;
padding-left: .5rem;
}
form .form-group.form-group-radios label {
display: inline-block;
margin-right: 1rem;
padding-left: 0;
}
form input[type="text"],
form input[type="password"],
form input[type="date"],
form textarea {
display: block;
width: 100%;
height: 2.5rem;
padding: .5rem;
color: var(--main-color);
font-size: 1rem;
line-height: 1.5rem;
font-family: inherit;
background-color: white;
border: 1px solid var(--main-color);
border-radius: .25rem;
transition: box-shadow .2s ease-out;
}
form input[type="text"]:focus,
form input[type="password"]:focus,
form input[type="date"]:focus,
form textarea:focus {
box-shadow: 0 0 0 2px var(--secondary-color);
}
form textarea {
min-height: 7rem;
}
form button[type="submit"] {
vertical-align: middle;
display: inline-block;
max-width: 100%;
margin-right: .25rem;
padding: .25rem 1.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--contrast-color);
font-size: 1.1rem;
line-height: 1.5rem;
background-color: var(--secondary-color);
border: 1px solid var(--main-color);
border-radius: .25rem;
transition: background-color .2s ease-out;
}
form button[type="submit"]:hover,
form button[type="submit"]:focus {
background-color: var(--main-color);
}
/* Containers */
.container {
position: relative;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: .5rem;
padding-right: .5rem;
}
.container.container-small {
max-width: 500px;
}
.container .container-title {
margin-bottom: 2rem;
text-align: center;
}
.container .container-title .container-title-action {
display: inline-block;
margin-left: auto;
margin-right: auto;
padding: .5rem 1rem;
color: var(--secondary-color);
text-decoration: none;
background-color: var(--contrast-color);
border: 1px solid var(--secondary-color);
border-radius: .25rem;
transition: all .2s ease-out;
}
.container .container-title .container-title-action:hover,
.container .container-title .container-title-action:focus {
color: var(--contrast-color);
background-color: var(--secondary-color);
}
@media(min-width: 800px) {
.container .container-title .container-title-action {
position: absolute;
top: 0;
right: .5rem;
}
}
/* App header */
.app-header {
margin-bottom: 1rem;
}
.app-header .app-navigation .container {
display: flex;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
align-items: baseline;
justify-content: space-between;
list-style: none;
}
.app-header .app-navigation a {
display: inline-block;
padding: 1rem;
}
.app-header .app-navigation .app-navigation-title {
font-size: 1.1rem;
font-weight: bold;
}
.app-header .app-navigation .app-navigation-title a {
color: var(--main-color);
text-decoration: none;
}
/* App page */
.app-page {
margin-bottom: 10rem;
}
/* Events structure */
.events-by-year {
margin-bottom: 3rem;
}
.events-by-month {
margin-bottom: 1.5rem;
padding-left: 1rem;
}
.events {
margin-top: 0;
margin-bottom: 0;
padding-left: 1rem;
border-left: .25rem solid var(--secondary-color);
list-style: none;
}
.events .event {
position: relative;
padding-top: .5rem;
padding-bottom: .5rem;
}
.events .event .event-date {
display: inline-block;
width: 5rem;
padding-left: .5rem;
padding-right: .5rem;
color: var(--main-color-muted);
text-align: left;
}
.events .event .event-description {
max-width: 35rem;
margin-left: 5.25rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.events .event.event-private::before {
position: absolute;
left: -1.88rem;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
text-align: center;
line-height: 1.25rem;
background-color: var(--contrast-color);
box-shadow: 0 0 0 3px var(--secondary-color);
border-radius: 1rem;
content: "🔒";
}
/* Folder system */
......@@ -67,6 +326,7 @@ p:last-child {
.folder .folder-toggle {
padding: 0;
color: inherit;
font: inherit;
background: none;
......
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div class="container container-small">
<h1>Connexion</h1>
<form method="post">
......
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div class="container container-small">
<h1>Nouvel évènement</h1>
<form action="" method="post">
......@@ -13,15 +13,15 @@
<div class="form-group">
<label for="title">Titre</label>
<input type="text" name="title" id="title" autofocus />
<input type="text" name="title" id="title" required autofocus />
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" name="date" id="date" />
<input type="date" name="date" id="date" required />
</div>
<div class="form-group">
<div class="form-group form-group-radios">
<input type="radio" name="is_private" id="is_private" value="yes" checked />
<label for="is_private">Privé</label>
......@@ -30,7 +30,7 @@
</div>
<div class="form-group">
<label for="description">Description</label>
<label for="description">Description <span class="text-muted">(facultatif)</span></label>
<textarea name="description" id="description"></textarea>
</div>
......
......@@ -2,13 +2,15 @@
{% block content %}
<div class="container">
<h1>Évènements</h1>
<div class="container-title">
<h1>Temps forts</h1>
{% if g.current_user %}
<a href="{{ url_for('events.create') }}">
Nouvel évènement
</a>
{% endif %}
{% if g.current_user %}
<a class="container-title-action add" href="{{ url_for('events.create') }}">
Nouvel évènement
</a>
{% endif %}
</div>
{% for group_by_year in events|groupby('date.year')|sort(reverse=True) %}
{% set year = group_by_year.grouper %}
......@@ -31,19 +33,17 @@
<ul class="events folder-container">
{% for event in group_by_month.list|sort(attribute='date', reverse=True) %}
<li class="event {{ 'folder folder-folded' if event.description }}">
{% if event.is_private %}
<span>🔒</span>
{% endif %}
{{ event.date.strftime('%d %b') }}&nbsp;:
<li class="event {{ 'event-private' if event.is_private }} {{ 'folder folder-folded' if event.description }}">
<span class="event-date">
{{ event.date.strftime('%d %b') }}
</span>
{% if event.description %}
<button class="folder-toggle">
{{ event.title }}
</button>
<p class="folder-container">
<p class="event-description folder-container">
{{ event.description|replace('\n', '<br />'|safe) }}
</p>
{% else %}
......
......@@ -8,7 +8,7 @@
</head>
<body class="app">
<header>
<header class="app-header">
<nav class="app-navigation">
<ul class="container">
<li class="app-navigation-title">
......@@ -16,8 +16,7 @@
</li>
<li class="app-navigation-auth">
{% if g.current_user %}
{{ g.current_user.username }}
(<a href="{{ url_for('auth.logout') }}">Se déconnecter</a>)
<a href="{{ url_for('auth.logout') }}">Se déconnecter</a>
{% else %}
<a href="{{ url_for('auth.login') }}">Connexion</a>
{% endif %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment