Phase in crispy forms for rendering with bootstrap
This commit is contained in:
Nico Schottelius
parent
936a8fb701
commit
da9ddab82d
8 changed files with 140 additions and 144 deletions
|
|
@ -1,3 +1,4 @@
|
||||||
django
|
django
|
||||||
django-auth-ldap
|
django-auth-ldap
|
||||||
psycopg2
|
psycopg2
|
||||||
|
django-crispy-forms
|
||||||
|
|
|
||||||
1
ubookmark/forms.py
Normal file
1
ubookmark/forms.py
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
from django import forms
|
||||||
|
|
@ -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'
|
||||||
|
|
|
||||||
79
ubookmark/templates/ubookmark/base.html
Normal file
79
ubookmark/templates/ubookmark/base.html
Normal 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>
|
||||||
14
ubookmark/templates/ubookmark/bookmarkmodel_form.html
Normal file
14
ubookmark/templates/ubookmark/bookmarkmodel_form.html
Normal 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 %}
|
||||||
|
|
@ -1,78 +1,16 @@
|
||||||
{% load static %}
|
{% extends 'ubookmark/base.html' %}
|
||||||
|
|
||||||
<!doctype html>
|
{% block content %}
|
||||||
<html lang="en">
|
<div class="container">
|
||||||
<head>
|
<div class="row">
|
||||||
<!-- 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="/login">Login</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
{% autoescape off %}
|
{% autoescape off %}
|
||||||
{{ site_description }}
|
{{ site_description }}
|
||||||
{% endautoescape %}
|
{% endautoescape %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
<div class="container">
|
<div class="row">
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
{% for bookmark in object_list %}
|
{% for bookmark in object_list %}
|
||||||
<li class="list-group-item">
|
<li class="list-group-item">
|
||||||
|
|
@ -85,62 +23,5 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
</div>
|
||||||
<div class="container">
|
{% endblock %}
|
||||||
<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>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<footer class="footer">
|
|
||||||
<div class="container">
|
|
||||||
<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>
|
|
||||||
|
|
|
||||||
|
|
@ -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),
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue