Using bootstrap and better view resolution

This commit is contained in:
Dirk Jahnke 2022-03-10 11:33:06 +01:00
parent 02bc2f4667
commit 7e446bcbec
23 changed files with 438 additions and 58 deletions

View File

@ -0,0 +1,32 @@
{% extends "base.html" %}
{% load static %}
{% block title %}Delete Container: {{ object.named_id }}{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Container: {{ container.named_id }}</h2>
<div>{{ container.description }}</div>
<div>Color: {{ container.color }}</div>
<div>Container Type: <a href="{% url 'container:container_type_detail' container.container_type.id %}">{{ container.container_type.named_id }}</a></div>
</div>
</div>
<!-- Action buttons -->
<div class="row">
<div class="col-sm-12">
<a class="btn btn-primary" href="{% url 'container:edit' %}" role="button">Edit</a>
<a class="btn btn-primary" href="{% url 'container:delete' %}" role="button">Delete</a>
</div>
</div>
<!-- End Action buttons -->
</div>
{% endblock content %}

View File

@ -0,0 +1,32 @@
{% extends "base.html" %}
{% load static %}
{% block title %}Container: {{ container.named_id }}{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Container: {{ container.named_id }}</h2>
<div>{{ container.description }}</div>
<div>Color: {{ container.color }}</div>
<div>Container Type: <a href="{% url 'container:container_type_detail' container.container_type.id %}">{{ container.container_type.named_id }}</a></div>
</div>
</div>
<!-- Action buttons -->
<div class="row">
<div class="col-sm-12">
<a class="btn btn-primary" href="{% url 'container:edit' container.id %}" role="button">Edit</a>
<a class="btn btn-primary" href="{% url 'container:delete' container.id %}" role="button">Delete</a>
</div>
</div>
<!-- End Action buttons -->
</div>
{% endblock content %}

View File

@ -1,4 +0,0 @@
<h1>Container: {{ container.named_id }}</h1>
<div>{{ container.description }}</div>
<div>Color: {{ container.color }}</div>
<div>Container Type: <a href="{% url 'container:container_type_details' container.container_type.id %}">{{ container.container_type.named_id }}</a></div>

View File

@ -0,0 +1,32 @@
{% extends "base.html" %}
{% load static %}
{% block title %}Edit Container: {{ object.named_id }}{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Container: {{ container.named_id }}</h2>
<div>{{ container.description }}</div>
<div>Color: {{ container.color }}</div>
<div>Container Type: <a href="{% url 'container:container_type_detail' container.container_type.id %}">{{ container.container_type.named_id }}</a></div>
</div>
</div>
<!-- Action buttons -->
<div class="row">
<div class="col-sm-12">
<a class="btn btn-primary" href="{% url 'container:edit' %}" role="button">Edit</a>
<a class="btn btn-primary" href="{% url 'container:delete' %}" role="button">Delete</a>
</div>
</div>
<!-- End Action buttons -->
</div>
{% endblock content %}

View File

@ -0,0 +1,33 @@
{% extends "base.html" %}
{% load static %}
{% block title %}Container: {{ container.named_id }}{% endblock %}
{% block content %}
<div class="container">
<div>New Container:</div>
{% if container_list %}
<ul>
{% for container in container_list %}
<li><a href="{% url 'container:detail' container.id %}">{{ container.named_id }}: {{ container.description }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No container are available.</p>
{% endif %}
</div>
<div>
{% if container_type_list %}
<div>New Container Types:</div>
<ul>
{% for ctype in container_type_list %}
<li><a href="{% url 'container:container_type_detail' ctype.id %}">{{ ctype.named_id }} {{ ctype.description }}</a></li>
{% endfor %}
</ul>
</div>
{% else %}
<p>No container types are available.</p>
{% endif %}
</div>
{% endblock content %}

View File

@ -0,0 +1,47 @@
{% extends "base.html" %}
{% load static %}
{% block title %}Container Type: {{ container_type.named_id }}{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Container Type: {{ container_type.named_id }}</h2>
<div>{{ container_type.description }}</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="row">
<div class="col-sm-2">Size:</div><div class="col-sm-3">{{ container_type.width }}mm x {{ container_type.length }}mm x {{ container_type.height }}mm</div>
<div class="col-sm-2">Inner Size:</div><div class="col-sm-3">
{% if container_type.inner_width and container_type.inner_length and container_type.inner_height %}
{{ container_type.inner_width }}mm x {{ container_type.inner_length }}mm x {{ container_type.inner_height }}mm
{% endif %}
</div>
</div>
<div class="row">
<div class="col-sm-2">Has Cover:</div><div class="col-sm-3">{% if container_type.has_cover %} yes {% else %} no {% endif %}</div>
<div class="col-sm-2">Can hold Containers:</div><div class="col-sm-3">{% if container_type.contains_container %} yes {% else %} no {% endif %}</div>
</div>
</div>
</div>
<table>
</table>
<!-- Action buttons -->
<div class="row">
<div class="col-sm-12">
</div>
</div>
<!-- End Action buttons -->
</div>
{% endblock content %}

View File

@ -1,8 +0,0 @@
<h1>Container: {{ container_type.named_id }}</h1>
<div>{{ container_type.description }}</div>
<table>
<tr><td>Width:</td><td>{{ container_type.width }} mm</td><td>Inner Width:</td><td>{{ container_type.inner_width }} mm</td></tr>
<tr><td>Length:</td><td>{{ container_type.length }} mm</td><td>Inner Length:</td><td>{{ container_type.inner_length }} mm</td></tr>
<tr><td>Height:</td><td>{{ container_type.height }} mm</td><td>Inner Height:</td><td>{{ container_type.inner_height }} mm</td></tr>
<tr><td>Has Cover:</td><td>{% if container_type.has_cover %} yes {% else %} no {% endif %}</td><td>Can hold Containers:</td><td>{% if container_type.contains_container %} yes {% else %} no {% endif %}</td></tr>
</table>

View File

@ -0,0 +1,21 @@
{% extends "base.html" %}
{% load static %}
{% block title %}Container: {{ container.named_id }}{% endblock %}
{% block content %}
<div class="container">
{% if container_type_list %}
<div>New Container Types:</div>
<ul>
{% for ctype in container_type_list %}
<li><a href="{% url 'container:container_type_detail' ctype.id %}">{{ ctype.named_id }} {{ ctype.description }}</a></li>
{% endfor %}
</ul>
</div>
{% else %}
<p>No container types are available.</p>
{% endif %}
</div>
{% endblock content %}

View File

@ -1,24 +0,0 @@
<div>
<div>New Container:</div>
{% if container_list %}
<ul>
{% for container in container_list %}
<li><a href="{% url 'container:container_details' container.id %}">{{ container.named_id }}: {{ container.description }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No container are available.</p>
{% endif %}
</div>
<div>
<div>New Container Types:</div>
{% if container_type_list %}
<ul>
{% for ctype in container_type_list %}
<li><a href="{% url 'container:container_type_details' ctype.id %}">{{ ctype.named_id }} {{ ctype.description }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No container types are available.</p>
{% endif %}
</div>

View File

@ -4,9 +4,11 @@ from . import views
app_name = 'container'
urlpatterns = [
path('', views.index, name='index'),
path('<int:container_id>/', views.container_details, name='container_details'),
path('type/<int:container_type_id>/', views.container_type_details, name='container_type_details'),
# path('type/<string:container_type_named_id>/', views.container_type_details, name='container_type_details'),
path('', views.IndexView.as_view(), name='index'),
path('<int:pk>/', views.DetailView.as_view(), name='detail'),
path('edit/<int:pk>/', views.EditView.as_view(), name='edit'),
path('delete/<int:pk>/', views.DeleteView.as_view(), name='delete'),
path('type/', views.TypeIndexView.as_view(), name='container_type_index'),
path('type/<int:pk>/', views.TypeDetailView.as_view(), name='container_type_detail'),
]

View File

@ -2,27 +2,39 @@ from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader
from django.http import Http404
from django.urls import reverse
from django.views import generic
from .models import Container, ContainerType
def index(request):
container_list = Container.objects.order_by('-created_ts')[:5]
container_type_list = ContainerType.objects.order_by('-created_ts')[:5]
ctx = {'container_list': container_list, 'container_type_list': container_type_list}
return render(request, 'container/index.html', ctx)
class IndexView(generic.ListView):
template_name = 'container/container_index.html'
context_object_name = 'container_list'
def container_type_details(request, container_type_id):
try:
ctype = ContainerType.objects.get(pk=container_type_id)
except ContainerType.DoesNotExist:
raise Http404("Container Type does not exist")
return render(request, 'container/container_type_details.html', {'container_type': ctype})
def get_queryset(self):
# Return the last five created containers
return Container.objects.order_by('-created_ts')[:5]
def container_details(request, container_id):
try:
container = Container.objects.get(pk=container_id)
except Container.DoesNotExist:
raise Http404("Container does not exist")
return render(request, 'container/container_details.html', {'container': container})
class TypeIndexView(generic.ListView):
template_name = 'container/container_type_index.html'
context_object_name = 'container_type_list'
def get_queryset(self):
# Return the last five created container types
return ContainerType.objects.order_by('-created_ts')[:5]
class DetailView(generic.DetailView):
model = Container
# template_name = 'container/detail.html'
class TypeDetailView(generic.DetailView):
model = ContainerType
context_object_name = 'container_type'
template_name = 'container/container_type_detail.html'
class EditView(generic.DetailView):
model = Container
class DeleteView(generic.DetailView):
model = Container

View File

@ -55,7 +55,7 @@ ROOT_URLCONF = 'homelog.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'DIRS': [ BASE_DIR / 'homelog/templates' ],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [

113
homelog/templates/base.html Normal file
View File

@ -0,0 +1,113 @@
{% load static i18n %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE }}">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{% block title %}homelog{% endblock title %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Home Logistics -- remember where things are">
<meta name="author" content="Dirk Jahnke">
<link rel="icon" href="{% static 'images/favicons/favicon.ico' %}">
{% block css %}
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Your stuff: Third-party CSS libraries go here -->
<!-- This file stores project-specific CSS -->
<link href="{% static 'css/project.css' %}" rel="stylesheet">
{% endblock %}
<!-- Le javascript
================================================== -->
{# Placed at the top of the document so pages load faster with defer #}
{% block javascript %}
<!-- Bootstrap JS -->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Your stuff: Third-party javascript libraries go here -->
<!-- place project specific Javascript in this file -->
<script defer src="{% static 'js/project.js' %}"></script>
{% endblock javascript %}
</head>
<body>
<div class="mb-1">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="{% url 'home' %}">homelog</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'home' %}">Home <span class="visually-hidden">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
{% if request.user.is_authenticated %}
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
{# <a class="nav-link" href="{% url 'users:detail' request.user.username %}">{% translate "My Profile" %}</a> #}
nyi my profile
</li>
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
{# <a class="nav-link" href="{% url 'account_logout' %}">{% translate "Sign Out" %}</a> #} Logout
</li>
{% else %}
{% if ACCOUNT_ALLOW_REGISTRATION %}
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a id="sign-up-link" class="nav-link" href="{% url 'account_signup' %}">{% translate "Sign Up" %}</a>
</li>
{% endif %}
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a id="log-in-link" class="nav-link" href="{% url 'account_login' %}">{% translate "Sign In" %}</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
{% if messages %}
{% for message in messages %}
<div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% block content %}
<p>Use this document as a way to quick start any new project.</p>
{% endblock content %}
</div> <!-- /container -->
{% block modal %}{% endblock modal %}
{% block inline_javascript %}
{% comment %}
Script tags with only code, no src (defer by default). To run
with a "defer" so that you run inline code:
<script>
window.addEventListener('DOMContentLoaded', () => {/* Run whatever you want */});
</script>
{% endcomment %}
{% endblock inline_javascript %}
</body>
</html>

View File

@ -0,0 +1,8 @@
{% extends "base.html" %}
{% load static %}
{% block content %}
This is ABOUT
{% endblock %}

View File

@ -0,0 +1,11 @@
{% extends "base.html" %}
{% load static %}
{% block content %}
<h2>This is HOME</h2>
<a href="{% url 'container:container_type_index' %}">Container Types</a><br>
<a href="{% url 'container:index' %}">Container</a><br>
{% endblock %}

View File

@ -15,8 +15,16 @@ Including another URLconf
"""
from django.contrib import admin
from django.urls import include, path
from django.views.generic import TemplateView
from homelog import views
urlpatterns = [
]
urlpatterns = [
path('', TemplateView.as_view(template_name="homelog/home.html"), name='index'),
path('home/', TemplateView.as_view(template_name="homelog/home.html"), name='home'),
path('about/', TemplateView.as_view(template_name="homelog/about.html"), name='about'),
path('container/', include('container.urls')),
path('admin/', admin.site.urls),
]

14
homelog/views.py Normal file
View File

@ -0,0 +1,14 @@
from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader
from django.http import Http404
"""
def home(request):
return render(request, 'homelog/home.html')
def about(request):
return render(request, 'homelog/about.html')
"""

13
static/css/project.css Normal file
View File

@ -0,0 +1,13 @@
/* These styles are generated from project.scss. */
.alert-debug {
color: black;
background-color: white;
border-color: #d6e9c6;
}
.alert-error {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}

0
static/fonts/.gitkeep Normal file
View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

1
static/js/project.js Normal file
View File

@ -0,0 +1 @@
/* Project specific Javascript goes here. */

View File

37
static/sass/project.scss Normal file
View File

@ -0,0 +1,37 @@
// project specific CSS goes here
////////////////////////////////
//Variables//
////////////////////////////////
// Alert colors
$white: #fff;
$mint-green: #d6e9c6;
$black: #000;
$pink: #f2dede;
$dark-pink: #eed3d7;
$red: #b94a48;
////////////////////////////////
//Alerts//
////////////////////////////////
// bootstrap alert CSS, translated to the django-standard levels of
// debug, info, success, warning, error
.alert-debug {
background-color: $white;
border-color: $mint-green;
color: $black;
}
.alert-error {
background-color: $pink;
border-color: $dark-pink;
color: $red;
}