revamp login & change header to three columns

This commit is contained in:
Lukas 2021-09-08 22:41:05 +02:00
parent dc70ea1cfd
commit 185c2764f7
5 changed files with 48 additions and 14 deletions

View File

@ -125,3 +125,6 @@ STATIC_URL = '/static/'
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
LOGIN_REDIRECT_URL = '/'

View File

@ -104,10 +104,31 @@ footer p {
.header { .header {
width: 100vw; width: 100vw;
display: flex; display: flex;
flex-direction: row; flex-flow: row;
position: absolute; position: absolute;
} }
.header-left {
flex: 1;
display: flex;
justify-content: flex-start;
align-items: center;
}
.header-center {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.header-right {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-link { .header-link {
color: white; color: white;
margin: 1rem; margin: 1rem;
@ -123,12 +144,10 @@ footer p {
} }
.header-text { .header-text {
margin: 1rem 1rem 1rem auto;
font-size: 1rem; font-size: 1rem;
color: #ccc;
} }
#logo { #logo-img {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }

View File

@ -13,13 +13,21 @@
<body> <body>
<header class="header shade"> <header class="header shade">
<div> <!-- left -->
<a href="/"><img id="logo" src="{% static 'img/logo.png' %}" alt="Logo"></a> <div class="header-left">
<a href="/"><img id="logo-img" src="{% static 'img/logo.png' %}" alt="Logo"></a>
</div> </div>
<div class="header-text">Sign in:</div> <!-- center -->
<a href="/login" class="header-link">PyHub</a> <div class="header-center">
Test
</div>
<!-- right -->
<div class="header-right">
<span class="header-text">Sign in:</span>
<a href="/auth/login/" class="header-link">PyHub</a>
<a href="#" class="header-link">Github</a> <a href="#" class="header-link">Github</a>
<a href="#" class="header-link">Twitter</a> <a href="#" class="header-link">Twitter</a>
</div>
</header> </header>
<section class="landing-section landing-bg"> <section class="landing-section landing-bg">

View File

@ -21,8 +21,12 @@
<div class="login-section-content shade"> <div class="login-section-content shade">
<h1 class="brand">&lt;PyHub Login&gt;</h1> <h1 class="brand">&lt;PyHub Login&gt;</h1>
<form class="login-form" method="post" action=""> <form class="login-form" method="post" action="">
{% csrf_token %}
{{ form.as_p }}
<!--
<span><input class="login-input" type="text" name="login" value="" placeholder="Username or Email"></span> <span><input class="login-input" type="text" name="login" value="" placeholder="Username or Email"></span>
<span><input class="login-input" type="password" name="password" value="" placeholder="Password"></span> <span><input class="login-input" type="password" name="password" value="" placeholder="Password"></span>
-->
<div class="spaced"> <div class="spaced">
<span class="remember_me"> <span class="remember_me">
<label><input type="checkbox" name="remember_me" id="remember_me">Remember me</label> <label><input type="checkbox" name="remember_me" id="remember_me">Remember me</label>

View File

@ -1,7 +1,7 @@
from django.urls import path from django.urls import path, include
from . import views from . import views
urlpatterns = [ urlpatterns = [
path('', views.index, name='index'), path('', views.index, name='index'),
path('login/', views.login, name='login'), path('auth/', include('django.contrib.auth.urls')),
] ]