style views with bootstrap 4 + css
This commit is contained in:
parent
bc109087ba
commit
8e6e9c1d5b
@ -1,6 +1,6 @@
|
|||||||
# MultiUserOpenRefine
|
# MultiUserOpenRefine
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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
|
||||||
|
|||||||
@ -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.
@ -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 |
BIN
Serwer_django/static/images/logo.png
Normal file
BIN
Serwer_django/static/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
|
Before Width: | Height: | Size: 153 KiB After Width: | Height: | Size: 153 KiB |
90
Serwer_django/static/registration/login.css
Normal file
90
Serwer_django/static/registration/login.css
Normal 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;
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -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 %}
|
||||||
@ -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 %}
|
||||||
@ -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 %}
|
||||||
Loading…
Reference in New Issue
Block a user