pangea/django-musician
7
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge branch 'ui-design-login'

Browse source
This commit is contained in:
Santiago Lamora 2019-12-02 17:45:56 +01:00
parent fdcf5b2aa4 3adf1d5d79
commit daa6aee70b
4 changed files with 125 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
musician/static/musician/css/default.css
View file

@ -42,3 +42,60 @@ a:hover {
color: #fff;
background: #6d7fcc;
}*/
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
/** bootstrap override **/
.btn-primary {
color: #fff;
background-color: #8DB823;
border-color: #8DB823;
}
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: #acc862;
border-color: #ccde98;
}
.btn-primary.focus, .btn-primary:focus {
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
/** login **/
#body-login .jumbotron {
background: #282532;/**#50466E;**/
}
#login-content {
background:white;
padding: 2rem;
}
#login-content input[type="text"].form-control,
#login-content input[type="password"].form-control {
border-radius: 0;
border: 0;
border-bottom: 2px solid #8E8E8E;
}
#login-content .form-actions-no-box {
margin-top: 6rem;
}
#login-footer {
margin-top: 1.5rem;
text-align: center;
}
#login-footer a {
color: #FEFBF2;
}

BIN
musician/static/musician/images/logo-pangea-monocrome-h.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

114
musician/templates/auth/login.html
View file

@ -1,50 +1,72 @@
{% extends "auth/login_base.html" %}
{% load i18n %}
{% extends "musician/base.html" %}
{% load i18n static %}
{% block login_content %}
<div>
<form action="{% url 'musician:login' %}" role="form" method="post">
{% csrf_token %}
<input type="hidden" name="next" value="{{ next }}" />
{% block body %}
<div id="div_id_username" class="clearfix control-group {% if form.username.errors %}error{% endif %}">
<div class="form-group">
<label for="id_username">{{ form.username.label }}:</label>
<input type="text" name="username" maxlength="100" autocapitalize="off" autocorrect="off"
class="form-control textinput textInput" id="id_username" required autofocus
{% if form.username.value %}value="{{ form.username.value }}" {% endif %}>
{% if form.username.errors %}
<p class="text-error">
{{ form.username.errors|striptags }}
</p>
{% endif %}
<body id="body-login">
<div class="jumbotron vertical-center">
<div id="login-wrapper" class="container" style="width: 430px;">
<div id="login-content" class="rounded">
<div id="login-branding">
{% block branding %}
<h1>
<img class="img-fluid" src="{% static 'musician/images/logo-pangea-monocrome-h.png' %}"
alt="Pangea.org - Internet etic i solidari" />
</h1>
{% endblock %}
</div><!-- /login-branding -->
<div class="mt-5">
<form action="{% url 'musician:login' %}" role="form" method="post">
{% csrf_token %}
<input type="hidden" name="next" value="{{ next }}" />
<div id="div_id_username"
class="clearfix control-group {% if form.username.errors %}error{% endif %}">
<div class="form-group">
<input type="text" name="username" maxlength="100" autocapitalize="off"
autocorrect="off" class="form-control textinput textInput" id="id_username" required
autofocus placeholder="{{ form.username.label }}"
{% if form.username.value %}value="{{ form.username.value }}" {% endif %}>
{% if form.username.errors %}
<p class="text-error">
{{ form.username.errors|striptags }}
</p>
{% endif %}
</div>
</div>
<div id="div_id_password"
class="clearfix control-group {% if form.password.errors %}error{% endif %}">
<div class="form-group">
<input type="password" name="password" maxlength="100" autocapitalize="off"
autocorrect="off" class="form-control textinput textInput" id="id_password"
placeholder="{{ form.password.label }}" required>
{% if form.password.errors %}
<p class="text-error">
{{ form.password.errors|striptags }}
</p>
{% endif %}
</div>
</div>
{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
<div class="well well-small text-error" style="border: none">{{ error }}</div>
{% endfor %}
{% endif %}
<div class="form-actions-no-box">
<input type="submit" name="submit" value="{% trans 'Log in' %}"
class="btn btn-primary form-control" id="submit-id-submit">
</div>
</form>
</div><!-- /.row-fluid -->
</div>
</div>
<div id="div_id_password" class="clearfix control-group {% if form.password.errors %}error{% endif %}">
<div class="form-group">
<label for="id_password">{{ form.password.label }}:</label>
<input type="password" name="password" maxlength="100" autocapitalize="off" autocorrect="off"
class="form-control textinput textInput" id="id_password" required>
{% if form.password.errors %}
<p class="text-error">
{{ form.password.errors|striptags }}
</p>
{% endif %}
<!--/#login-content-->
<div id="login-footer">
<a href="#password_reset">{% trans "Forgot your password? Click here to recover" %}</a>
</div>
</div>
{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
<div class="well well-small text-error" style="border: none">{{ error }}</div>
{% endfor %}
{% endif %}
<div><a href=#password_reset">{% trans "Have you forgot the password?" %}</a></div>
<div class="form-actions-no-box">
<input type="submit" name="submit" value="{% trans 'Log in' %}" class="btn btn-primary form-control"
id="submit-id-submit">
</div>
</form>
</div>
{% endblock login_content %}
</div><!-- /#login-wrapper -->
</div><!-- /.container-fluid -->
</body>
{% endblock %}

22
musician/templates/auth/login_base.html
View file

@ -1,22 +0,0 @@
{% extends "musician/base.html" %}
{% block body %}
<body class="container">
<div class="container-fluid" style="margin-top: 30px;">
<div class="row-fluid">
<div class="well rounded" style="width: 320px; margin-left: auto; margin-right: auto; background: rgba(169, 169, 169, 0.25); padding: 1em;">
<div class="row-fluid">
<div>
{% block branding %}<h3 style="margin: 0 0 20px;">Musician <span class="small">v{{ version }}</span></h3>{% endblock %}
</div>
</div><!-- /row fluid -->
<div class="row-fluid">
{% block login_content %}
{% endblock login_content %}
</div><!-- /.row-fluid -->
</div><!--/.well-->
</div><!-- /.row-fluid -->
</div><!-- /.container-fluid -->
</body>
{% endblock %}