style views with bootstrap 4 + css

This commit is contained in:
Michał Najborowski 2022-01-25 18:48:45 +01:00
parent bc109087ba
commit 8e6e9c1d5b
12 changed files with 123 additions and 16 deletions

View File

@ -1,6 +1,6 @@
# MultiUserOpenRefine # MultiUserOpenRefine
![MultiUserOpenRefine](logo.svg) ![MultiUserOpenRefine](Serwer_django/static/images/logo.svg)
MultiUserOpenRefine is an extension to open-source tool that, in addition to MultiUserOpenRefine is an extension to open-source tool that, in addition to
all the features described below, allows creating user accounts, each providing all the features described below, allows creating user accounts, each providing

View File

@ -37,6 +37,7 @@ INSTALLED_APPS = [
'django.contrib.sessions', 'django.contrib.sessions',
'django.contrib.messages', 'django.contrib.messages',
'django.contrib.staticfiles', 'django.contrib.staticfiles',
'crispy_forms'
] ]
MIDDLEWARE = [ MIDDLEWARE = [
@ -130,3 +131,4 @@ LOGOUT_REDIRECT_URL = 'home'
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field # https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
CRISPY_TEMPLATE_PACK = 'bootstrap4'

Binary file not shown.

View File

@ -1,3 +1,7 @@
body { .rounded_div {
background-color: #818fb7; border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

View File

Before

Width:  |  Height:  |  Size: 153 KiB

After

Width:  |  Height:  |  Size: 153 KiB

View File

@ -0,0 +1,90 @@
/* 'Open Sans' font from Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
background: #456;
font-family: 'Open Sans', sans-serif;
}
.login {
width: 400px;
margin: 16px auto;
font-size: 16px;
}
/* Reset top and bottom margins from certain elements */
.login-header,
.login p {
margin-top: 0;
margin-bottom: 0;
}
/* The triangle form is achieved by a CSS hack */
.login-triangle {
width: 0;
margin-right: auto;
margin-left: auto;
border: 12px solid transparent;
border-bottom-color: #28d;
}
.login-header {
background: #28d;
padding: 20px;
font-size: 1.4em;
font-weight: normal;
text-align: center;
text-transform: uppercase;
color: #fff;
}
.login-container {
background: #ebebeb;
padding: 12px;
}
/* Every row inside .login-container is defined with p tags */
.login p {
padding: 12px;
}
.login input {
box-sizing: border-box;
display: block;
width: 100%;
border-width: 1px;
border-style: solid;
padding: 16px;
outline: 0;
font-family: inherit;
font-size: 0.95em;
}
.login input[type="email"],
.login input[type="password"] {
background: #fff;
border-color: #bbb;
color: #555;
}
/* Text fields' focus effect */
.login input[type="email"]:focus,
.login input[type="password"]:focus {
border-color: #888;
}
.login input[type="submit"] {
background: #28d;
border-color: transparent;
color: #fff;
cursor: pointer;
}
.login input[type="submit"]:hover {
background: #17c;
}
/* Buttons' focus effect */
.login input[type="submit"]:focus {
border-color: #05a;
}

View File

@ -2,17 +2,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
{% load static %} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'base.css'%}">
<meta charset="utf-8"> <meta charset="utf-8">
<title>{% block title %}Auth{% endblock %}</title> <title>{% block title %}MultiUserOpenRefine{% endblock %}</title>
</head> </head>
<body> <body>
<main> <main>
{% block content %} <div class="container">
{% endblock %} <div style="position: page; vertical-align: center">
<div class="row justify-content-center">
<div class="col-8">
<img src="../static/images/logo.png" alt="logo"
style="padding-top: 10px; height: auto; width: 50%; display: block; margin-left: auto; margin-right: auto;">
<h1 class="mt-2" style="text-align: center; padding-bottom: 10px">MultiUserOpenRefine</h1>
<div style="border-radius: 25px; border: 4px solid #e0e0e0; padding: 20px; box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
</main> </main>
</body> </body>
</html> </html>

View File

@ -5,11 +5,11 @@
{% block content %} {% block content %}
{% if user.is_authenticated %} {% if user.is_authenticated %}
Hi {{ user.username }}! <p>Hi {{ user.username }}!</p>
<p><a href="{% url 'logout' %}">Log Out</a></p> <p><a href="{% url 'logout' %}" class="btn btn-light">Log Out</a></p>
{% else %} {% else %}
<p>You are not logged in</p> <p>You are not logged in</p>
<p><a href="{% url 'login' %}">Log In</a></p> <p><a href="{% url 'login' %}" class="btn btn-light">Log In</a></p>
<p><a href="{% url 'signup' %}">Sign Up</a></p> <p><a href="{% url 'signup' %}" class="btn btn-light">Create an account</a></p>
{% endif %} {% endif %}
{% endblock %} {% endblock %}

View File

@ -8,6 +8,6 @@
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}
{{ form.as_p }} {{ form.as_p }}
<button type="submit">Log In</button> <button class="btn btn-light" type="submit">Log In</button>
</form> </form>
{% endblock %} {% endblock %}

View File

@ -8,6 +8,6 @@
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}
{{ form.as_p }} {{ form.as_p }}
<button type="submit">Sign Up</button> <button class="btn btn-light" type="submit">Sign Up</button>
</form> </form>
{% endblock %} {% endblock %}