Browse Source

style: improvements on forms and responsiveness

master
Lephe 5 months ago
parent
commit
9291855c87

+ 4
- 4
app/forms/login.py View File

@@ -3,7 +3,7 @@ from wtforms import StringField, PasswordField, BooleanField, SubmitField
from wtforms.validators import DataRequired

class LoginForm(FlaskForm):
username = StringField('Pseudonyme :', validators=[DataRequired()])
password = PasswordField('Mot de passe :', validators=[DataRequired()])
remember_me = BooleanField('Se souvenir de moi :')
submit = SubmitField('Connexion')
username = StringField('Identifiant', validators=[DataRequired()])
password = PasswordField('Mot de passe', validators=[DataRequired()])
remember_me = BooleanField('Se souvenir de moi')
submit = SubmitField('Connexion')

+ 0
- 1
app/static/css/container.css View File

@@ -24,6 +24,5 @@ section h2 {

section .avatar {
display: block;
border-radius: 2px;
width: 128px; height: 128px;
}

+ 9
- 2
app/static/css/form.css View File

@@ -24,10 +24,11 @@
.form input[type='email'],
.form input[type='date'],
.form input[type='password'],
.form input[type='search'],
.form textarea {
display: block;
width: 100%; padding: 6px 8px;
border: 1px solid #c0c0c0;
border: 1px solid #c8c8c8;

/* Transitions when resizing with the mouse produces apparent lag */
transition: all .15s ease, width 0s, height 0s;
@@ -36,9 +37,15 @@
.form input[type='email']:focus,
.form input[type='date']:focus,
.form input[type='password']:focus,
.form input[type='search']:focus,
.form textarea:focus {
border-color: #91bfef;
box-shadow: 0 0 0 3px rgba(87, 143, 228, 0.42);
box-shadow: 0 0 0 3px rgba(87, 143, 228, 0.4);
}

.form textarea {
max-width: 100%;
resize: vertical;
}

.form input[type="submit"] {

+ 2
- 2
app/static/css/global.css View File

@@ -32,11 +32,11 @@ a:focus {
outline: none;
}

p {
section p {
line-height: 20px;
}

ul {
section ul {
line-height: 24px;
}


+ 24
- 19
app/static/css/header.css View File

@@ -8,14 +8,24 @@ header {

display: flex; align-items: center; justify-content: space-between;
flex-flow: row wrap;
}
@media screen and (max-width: 1000px) {
header {
height: 75px;
}
header .title {
page-break-after: always;
}

/* When the search field occupies the rightmost position, the calculated
position of the svg icon (on the right) might overflow from the header and
induce horizontal scrolling. */
overflow: hidden;
}
@media screen and (max-width: 1199px) {
#spotlight {
display: none;
}
header input[type="search"] {
width: 200px;
}
}
@media screen and (max-width: 849px) {
header .form {
display: none;
}
}

header .title a {
@@ -46,30 +56,25 @@ header a {
cursor: pointer;
}

header form {
header .form {
/* The search icon is draws inside the input field but its space is allocated
on the right. Apply a negative margin to compensate this:
-24px for the search icon
-2px for the spacing between the search icon and the field */
margin-right: -26px;
}
header input[type="search"] {
header .form input[type="search"] {
display: inline-block; width: 250px;
padding: 5px 35px 5px 10px;
border: 0; border-radius: 1px;
font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif;
box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease;
border-color: #d8d8d8;
}
header input[type="search"] ~ a {
header .form input[type="search"] ~ a {
position: relative; left: -33px;
}
header input[type="search"]:focus {
box-shadow: 0 0 4px rgba(0, 102, 255, .9);
}
header input[type="search"] ~ a > svg > path {
header .form input[type="search"] ~ a > svg > path {
fill: #cccccc; transition: .15s ease;
}
header input[type="search"]:focus ~ a > svg > path {
header .form input[type="search"]:focus ~ a > svg > path {
fill: #333333;
}


+ 5
- 16
app/static/css/light.css View File

@@ -66,7 +66,6 @@
#menu {
width: 100%; height: 0; overflow-x: hidden;
font-family: NotoSans; font-size: 12px;
background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
transition: .1s ease;
position: unset;
left: unset;
@@ -81,26 +80,15 @@
width: 100%;
}
#menu h2 {
margin: 10px 0 10px 40px;
font-size: 15px;
}
#menu h2 > svg {
width: 30px;
width: 24px;
}

#menu h3 {
margin: 10px 0 10px 40px;
}
#menu hr {
margin: 10px 15px 0 15px;
}

#menu > div > a,
#menu span {
display: block; margin: 10px 15px;
}
#menu span {
/*font-style: italic;*/ color: #b8b8b8;
display: block;
color: #b8b8b8;
font-size: 10px;
}
#menu span > a {
@@ -110,7 +98,8 @@
}
#menu ul {
list-style: none;
margin: 10px 15px; padding: 0;
margin: 10px 0; padding: 0;
line-height: 20px;
color: #b8b8b8;
}
#menu li {

+ 19
- 29
app/static/css/navbar.css View File

@@ -94,8 +94,7 @@ nav a:focus {
left: -240px; width: 300px; /* left-to-right animation */
/*left: 60px; width: 0;*/ /* scroll animation */
height: 100%; overflow-x: hidden; overflow-y: auto;
font-family: NotoSans; font-size: 14px;
background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
background: #1c2124; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
transition: .15s ease;
}

@@ -121,6 +120,7 @@ nav a:focus {

#menu > div {
width: 300px;
padding: 16px;
display: none;
}
#menu > div.opened {
@@ -128,22 +128,20 @@ nav a:focus {
}

#menu h2 {
margin: 5% 0 20px 40px;
font-family: Cantarell; font-weight: normal; font-size: 19px;
margin: 0 0 20px 0;
font-family: Cantarell; font-weight: bold; font-size: 18px;
color: #ffffff;
display: flex; align-items: center;
}
#menu h2 a {
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
font-size: inherit; opacity: inherit;
}
#menu h2 > svg {
width: 42px; vertical-align: middle; margin-right: 8px;
width: 32px; vertical-align: middle; margin-right: 8px;
}
#menu h2 img {
width: 64px; border-radius: 2px; vertical-align: middle; margin-right: 10px;
height: 48px; vertical-align: middle; margin-right: 10px;
}
#menu h2 a:hover,
#menu h2 a:focus {
@@ -151,14 +149,14 @@ nav a:focus {
}

#menu h3 {
margin: 20px 0 20px 40px;
font-family: Cantarell; font-weight: normal; font-size: 15px;
margin: 16px 0;
font-family: Cantarell; font-weight: bold; font-size: 15px;
color: #ffffff;
}
#menu hr {
margin: 15px;
margin: 15px 0;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, .15);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#menu ul {
@@ -166,7 +164,7 @@ nav a:focus {
}
#menu a,
#menu li {
display: block; margin: 10px 15px;
display: block; margin: 10px 0;
transition: opacity .15s ease;
}
#menu li {
@@ -175,6 +173,7 @@ nav a:focus {
#menu li > a {
display: inline;
margin: 0; font-style: normal;
font-size: 13px;
}
#menu a > img {
vertical-align: middle;
@@ -186,32 +185,23 @@ nav a:focus {
}

#menu form {
padding: 0 5%;
padding: 0 8%;
}
#menu form input[type="text"],
#menu form input[type="password"] {
display: block; width: 100%;
margin: 0; padding: 5px 2%;
margin: 3px 0 8px 0; padding: 5px 2%;
font-size: 14px; color: inherit;
background: #e8e8e8; transition: background .15s ease;
border: none;
border-color: #141719;
}
#menu form input[type="text"]:focus,
#menu form input[type="password"]:focus {
background: #ffffff;
}
#menu form input[type="text"] {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#menu form input[type="password"] {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 0 0 3px rgba(87, 143, 228, 0.6);
border-color: #2d4b5f;
}
#menu form input[type="submit"] {
width: 100%;
margin-top: 10px; margin-bottom: 5px;
border-radius: 5px;
margin: 16px 0 5px 0;
}
#menu form label {
font-size: 13px; color: #FFFFFF; opacity: .7;

+ 6
- 5
app/static/css/responsive.css View File

@@ -27,18 +27,19 @@
#menu li {
font-size: 11px;
}
#menu a {
font-size: 14px;
}
}

@media screen and (max-width: 1099px) {
@media screen and (max-width: 1199px) {
.home-pinned-content article:nth-child(5) {
display: none;
}

section {
width: 90%;
}
}

@media screen and (max-width: 799px) {
@media screen and (max-width: 849px) {
.home-pinned-content article:nth-child(4) {
display: none;
}

+ 4
- 2
app/templates/account.html View File

@@ -1,9 +1,11 @@
{% extends "base/base.html" %}

{% block title %}
<h1>Gestion du compte</h1>
{% endblock %}

{% block content %}
<section class="form">
<h1>Gestion du compte</h1>

<form action="{{ url_for('edit_account') }}" method="post" enctype="multipart/form-data">
{{ form.hidden_tag() }}


+ 1
- 11
app/templates/base/header.html View File

@@ -1,5 +1,5 @@
<div class=spacer></div>
<form action={{url_for('search')}} method="get">
<form action={{url_for('search')}} method="get" class=form>
<input type="search" name="q" id="q" placeholder="{{search_form.label}}" />
<a role=button onclick="this.parentNode.submit();" href=#>
<svg viewBox="0 0 24 24">
@@ -8,16 +8,6 @@
</a>
</form>

{% if current_user.is_authenticated %}
<div class=links>
<a href="{{ url_for('user', username=current_user.name) }}" role=button title='Mon compte'>
<svg viewBox="0 0 24 24">
<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path>
</svg>
</a>
</div>
{% endif %}

<div id="spotlight">
<a href="#" class="button bg-red">Jeu du mois : février 2019</a>
</div>

+ 6
- 4
app/templates/base/navbar/account.html View File

@@ -2,9 +2,9 @@
<div>
<h2>
<a href="{{ url_for('user', username=current_user.name) }}">
<img src="{{ url_for('static', filename=current_user.avatar) }}">
<div>{{ current_user.name }}</div>
</a>
<img src="{{ url_for('static', filename=current_user.avatar) }}"></a>
<a href="{{ url_for('user', username=current_user.name) }}">
{{ current_user.name }}</a>
</h2>
<a href="#">
<svg viewBox="0 0 24 24">
@@ -43,9 +43,11 @@
{% else %}
<div>
<h2>Invité</h2>
<form method="post" action="{{url_for('login')}}" class="login">
<form method="post" action="{{url_for('login')}}" class="login form">
{{ login_form.hidden_tag() }}
{{ login_form.username.label }}
{{ login_form.username(size=32, placeholder="Identifiant") }}
{{ login_form.password.label }}
{{ login_form.password(size=32, placeholder="Mot de passe") }}
{{ login_form.submit(class_="bg-green") }}
{{ login_form.remember_me.label }} {{ login_form.remember_me() }}

+ 0
- 4
app/templates/base/navbar/programs.html View File

@@ -39,15 +39,11 @@
<ul>
<li><a href="#"><img src="{{ url_for('static', filename = 'images/fruit_ninja.gif') }}">Fruit Ninja</a></li>
<li><a href="#"><img src="{{ url_for('static', filename = 'images/clonelab.gif') }}">Clonelab</a></li>
<li><a href="#"><img src="{{ url_for('static', filename = 'images/gravity_duck.png') }}">Gravity Duck</a></li>
<li><a href="#"><img src="{{ url_for('static', filename = 'images/calcraft.gif') }}">Calcraft</a></li>
</ul>

<hr />
<h3>Coup de cœur</h3>
<ul>
<li><a href="#"><img src="{{ url_for('static', filename = 'images/fruit_ninja.gif') }}">Fruit Ninja</a></li>
<li><a href="#"><img src="{{ url_for('static', filename = 'images/clonelab.gif') }}">Clonelab</a></li>
<li><a href="#"><img src="{{ url_for('static', filename = 'images/gravity_duck.png') }}">Gravity Duck</a></li>
<li><a href="#"><img src="{{ url_for('static', filename = 'images/calcraft.gif')}}">Calcraft</a></li>
</ul>

Loading…
Cancel
Save