style views with bootstrap 4 + css
This commit is contained in:
parent
bc109087ba
commit
8e6e9c1d5b
@ -1,6 +1,6 @@
|
||||
# MultiUserOpenRefine
|
||||
|
||||
|
||||
|
||||
|
||||
MultiUserOpenRefine is an extension to open-source tool that, in addition to
|
||||
all the features described below, allows creating user accounts, each providing
|
||||
|
||||
@ -37,6 +37,7 @@ INSTALLED_APPS = [
|
||||
'django.contrib.sessions',
|
||||
'django.contrib.messages',
|
||||
'django.contrib.staticfiles',
|
||||
'crispy_forms'
|
||||
]
|
||||
|
||||
MIDDLEWARE = [
|
||||
@ -130,3 +131,4 @@ LOGOUT_REDIRECT_URL = 'home'
|
||||
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
|
||||
|
||||
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
|
||||
CRISPY_TEMPLATE_PACK = 'bootstrap4'
|
||||
|
||||
Binary file not shown.
@ -1,3 +1,7 @@
|
||||
body {
|
||||
background-color: #818fb7;
|
||||
.rounded_div {
|
||||
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>
|
||||
<html>
|
||||
<head>
|
||||
{% load static %}
|
||||
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
|
||||
<link rel="stylesheet" href="{% static 'base.css'%}">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
|
||||
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<meta charset="utf-8">
|
||||
<title>{% block title %}Auth{% endblock %}</title>
|
||||
<title>{% block title %}MultiUserOpenRefine{% endblock %}</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
<div class="container">
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
@ -5,11 +5,11 @@
|
||||
|
||||
{% block content %}
|
||||
{% if user.is_authenticated %}
|
||||
Hi {{ user.username }}!
|
||||
<p><a href="{% url 'logout' %}">Log Out</a></p>
|
||||
<p>Hi {{ user.username }}!</p>
|
||||
<p><a href="{% url 'logout' %}" class="btn btn-light">Log Out</a></p>
|
||||
{% else %}
|
||||
<p>You are not logged in</p>
|
||||
<p><a href="{% url 'login' %}">Log In</a></p>
|
||||
<p><a href="{% url 'signup' %}">Sign Up</a></p>
|
||||
<p><a href="{% url 'login' %}" class="btn btn-light">Log In</a></p>
|
||||
<p><a href="{% url 'signup' %}" class="btn btn-light">Create an account</a></p>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@ -8,6 +8,6 @@
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
{{ form.as_p }}
|
||||
<button type="submit">Log In</button>
|
||||
<button class="btn btn-light" type="submit">Log In</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
@ -8,6 +8,6 @@
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
{{ form.as_p }}
|
||||
<button type="submit">Sign Up</button>
|
||||
<button class="btn btn-light" type="submit">Sign Up</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user