Phase in crispy forms for rendering with bootstrap

This commit is contained in:
Nico Schottelius 2020-04-25 20:36:33 +02:00
parent 936a8fb701
commit da9ddab82d
8 changed files with 140 additions and 144 deletions

View file

@ -1,3 +1,4 @@
django django
django-auth-ldap django-auth-ldap
psycopg2 psycopg2
django-crispy-forms

1
ubookmark/forms.py Normal file
View file

@ -0,0 +1 @@
from django import forms

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',
'ubookmark' 'ubookmark'
] ]
@ -151,3 +152,5 @@ AUTHENTICATION_BACKENDS = [
] ]
AUTH_USER_MODEL = 'ubookmark.User' AUTH_USER_MODEL = 'ubookmark.User'
CRISPY_TEMPLATE_PACK = 'bootstrap4'

View file

@ -0,0 +1,79 @@
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static '/bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static '/css/sticky-footer-navbar.css' %}">
<title>{{ site_name }} powered by ubookmark</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">{{ site_name }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
{% if page_obj.has_previous %}
<li class="nav-item">
<a class="nav-link" href="?page=1">first</a>
</li>
<li class="nav-item">
<a class="nav-link" href="?page={{ page_obj.previous_page_number }}">previous</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link disabled" href="#">first</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">previous</a>
</li>
{% endif %}
<li class="nav-item active">
<a class="nav-link" href="#">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</a>
</li>
{% if page_obj.has_next %}
<li class="nav-item">
<a class="nav-link" href="?page={{ page_obj.next_page_number }}">next</a>
</li>
<li class="nav-item">
<a class="nav-link" href="?page={{ page_obj.paginator.num_pages }}">last</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link disabled" href="#">next</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">last</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="/submit">submit</a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
<footer class="footer">
<div class="container">
<span class="text-muted">Powered by
<a href="http://ungleich.ch/u/projects/ubookmark">ubookmark</a>,
a FOSS product created by <a href="https://ungleich.ch">ungleich</a>.</span>
</div>
</footer>
<script src="{% static '/bootstrap/js/bootstrap.min.js' %}"</script>
</body>
</html>

View file

@ -0,0 +1,14 @@
{% extends 'ubookmark/base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<input type="submit" value="Submit URL">
</form>
</div>
{% endblock %}

View file

@ -1,146 +1,27 @@
{% load static %} {% extends 'ubookmark/base.html' %}
<!doctype html> {% block content %}
<html lang="en"> <div class="container">
<head> <div class="row">
<!-- Required meta tags --> {% autoescape off %}
<meta charset="utf-8"> {{ site_description }}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> {% endautoescape %}
</div>
</div>
<!-- Bootstrap CSS --> <div class="container">
<link rel="stylesheet" href="{% static '/bootstrap/css/bootstrap.min.css' %}"> <div class="row">
<link rel="stylesheet" href="{% static '/css/sticky-footer-navbar.css' %}"> <ul class="list-group">
{% for bookmark in object_list %}
<li class="list-group-item">
<title>{{ site_name }} powered by ubookmark</title> <a href="{{ bookmark.url }}">{{ bookmark.comment }}
</head> ({{ bookmark.url }}) </a>
<body> <div class="text-muted">
<nav class="navbar navbar-expand-lg navbar-light bg-light"> (posted by {{ bookmark.owner }} on {{ bookmark.posted_at }})
<a class="navbar-brand" href="#">{{ site_name }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
{% if page_obj.has_previous %}
<li class="nav-item">
<a class="nav-link" href="?page=1">first</a>
</li>
<li class="nav-item">
<a class="nav-link" href="?page={{ page_obj.previous_page_number }}">previous</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link disabled" href="#">first</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">previous</a>
</li>
{% endif %}
<li class="nav-item active">
<a class="nav-link" href="#">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</a>
</li>
{% if page_obj.has_next %}
<li class="nav-item">
<a class="nav-link" href="?page={{ page_obj.next_page_number }}">next</a>
</li>
<li class="nav-item">
<a class="nav-link" href="?page={{ page_obj.paginator.num_pages }}">last</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link disabled" href="#">next</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">last</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
</ul>
</div>
</nav>
<div class="container">
{% autoescape off %}
{{ site_description }}
{% endautoescape %}
</div>
</div>
<div class="container">
<ul class="list-group">
{% for bookmark in object_list %}
<li class="list-group-item">
<a href="{{ bookmark.url }}">{{ bookmark.comment }}
({{ bookmark.url }}) </a>
<div class="text-muted">
(posted by {{ bookmark.owner }} on {{ bookmark.posted_at }})
</div>
</li>
{% endfor %}
</ul>
</div>
<!--
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<nav aria-label="Page navigation example">
<ul class="pagination">
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page=1">BOTTOM first</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">previous</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#">first</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">previous</a>
</li>
{% endif %}
<li class="page-item disabled">
<a class="page-link" href="#">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</a>
</li>
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}">next</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">last</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#">next</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">last</a>
</li>
{% endif %}
</nav>
</div> </div>
</div> </li>
</div> {% endfor %}
--> </ul>
</div>
<footer class="footer"> </div>
<div class="container"> {% endblock %}
<span class="text-muted"><a href="http://ungleich.ch/u/projects/ubookmark">ubookmark</a>
is a FOSS product created by <a href="https://ungleich.ch">ungleich</a>.</span>
</div>
</footer>
<script src="{% static '/bootstrap/js/bootstrap.min.js' %}"</script>
</body>
</html>

View file

@ -20,5 +20,6 @@ from ubookmark import views
urlpatterns = [ urlpatterns = [
path('', views.IndexView.as_view(), name='index'), path('', views.IndexView.as_view(), name='index'),
path('submit/', views.SubmitView.as_view(), name='submit'),
path('admin/', admin.site.urls), path('admin/', admin.site.urls),
] ]

View file

@ -1,10 +1,12 @@
from django.views.generic.list import ListView from django.views.generic.list import ListView
from django.views.generic.edit import CreateView
from django.contrib.auth import views as auth_views
from django.conf import settings from django.conf import settings
from ubookmark.models import * from ubookmark.models import *
class IndexView(ListView): class IndexView(ListView):
model = BookmarkModel model = BookmarkModel
paginate_by = 3 paginate_by = 3
queryset = BookmarkModel.objects.order_by('-posted_at') queryset = BookmarkModel.objects.order_by('-posted_at')
@ -15,3 +17,17 @@ class IndexView(ListView):
context['site_description'] = settings.SITE_DESCRIPTION context['site_description'] = settings.SITE_DESCRIPTION
return context return context
class SubmitView(CreateView):
model = BookmarkModel
fields = [ 'comment', 'url' ]
def get_context_data(self, **kwargs):
context = super(CreateView, self).get_context_data(**kwargs)
context['site_name'] = settings.SITE_NAME
context['site_description'] = settings.SITE_DESCRIPTION
return context
class LoginView(auth_views.LoginView):
pass