More work on the UI

This commit is contained in:
2022-04-09 22:40:08 +02:00
parent 440c640d9f
commit c1315332e3
21 changed files with 306 additions and 272 deletions

View File

@@ -0,0 +1,23 @@
import os
import subprocess
def git_suffix(fname):
"""
:returns: `<short git hash>` if Git repository found
"""
try:
gh = subprocess.check_output(
['git', 'rev-parse', '--short', 'HEAD'],
stderr=open(os.devnull, 'w')).strip()
gh = "-git" + gh.decode() if gh else ''
except Exception:
# trapping everything on purpose; git may not be installed or it
# may not work properly
gh = ''
return gh
__version__ = '0.0.1'
__version__ += git_suffix(__file__)

View File

@@ -27,6 +27,7 @@ admin.site.site_header = "Trains assets manager"
urlpatterns = [
path('', GetHome.as_view(), name='index'),
path('page/<int:page>', GetHome.as_view(), name='index_pagination'),
path("ht/", include("health_check.urls")),
path("admin/", admin.site.urls),
path("api/v1/consist/", include(consist_urls)),

View File

@@ -0,0 +1,18 @@
# Generated by Django 4.0.3 on 2022-04-09 20:31
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
('portal', '0002_alter_siteconfiguration_site_name'),
]
operations = [
migrations.RenameField(
model_name='siteconfiguration',
old_name='maps_per_page',
new_name='items_per_page',
),
]

View File

@@ -0,0 +1,22 @@
# Generated by Django 4.0.3 on 2022-04-09 20:37
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
('portal', '0003_rename_maps_per_page_siteconfiguration_items_per_page'),
]
operations = [
migrations.RenameField(
model_name='siteconfiguration',
old_name='footer_short',
new_name='footer_extended',
),
migrations.RemoveField(
model_name='siteconfiguration',
name='show_copyright',
),
]

View File

@@ -1,6 +1,7 @@
import django
from django.db import models
from dcc import __version__ as app_version
from solo.models import SingletonModel
@@ -10,7 +11,7 @@ class SiteConfiguration(SingletonModel):
default="Trains assets manager")
site_author = models.CharField(max_length=256, blank=True)
about = models.TextField(blank=True)
maps_per_page = models.CharField(
items_per_page = models.CharField(
max_length=2, choices=[
(str(x * 3), str(x * 3)) for x in range(2, 11)],
default='6'
@@ -18,9 +19,7 @@ class SiteConfiguration(SingletonModel):
homepage_content = models.TextField(blank=True)
footer = models.TextField(blank=True)
footer_short = models.TextField(blank=True)
show_copyright = models.BooleanField(default=True)
footer_extended = models.TextField(blank=True)
show_version = models.BooleanField(default=True)
class Meta:
@@ -29,8 +28,8 @@ class SiteConfiguration(SingletonModel):
def __str__(self):
return "Site Configuration"
# def version(self):
# return app_version
def version(self):
return app_version
def django_version(self):
return django.get_version()

View File

@@ -1,29 +0,0 @@
/* titillium-web-regular - latin */
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 400;
src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'),
url('../fonts/titillium-web-v6-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/titillium-web-v6-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* titillium-web-italic - latin */
@font-face {
font-family: 'Titillium Web';
font-style: italic;
font-weight: 400;
src: local('Titillium Web Italic'), local('TitilliumWeb-Italic'),
url('../fonts/titillium-web-v6-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/titillium-web-v6-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* titillium-web-700 - latin */
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 700;
src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'),
url('../fonts/titillium-web-v6-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/titillium-web-v6-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

View File

@@ -1,61 +1,3 @@
body {
font-family: 'Titillium Web','Segoe UI',Arial,sans-serif;
}
:root {
--jumbotron-padding-y: 3rem;
}
#navbarHeader p {
color: #6c757d;
}
.jumbotron {
padding-top: var(--jumbotron-padding-y);
padding-bottom: var(--jumbotron-padding-y);
margin-bottom: 0;
border-radius: 0;
background-color: #fff;
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron-heading {
font-weight: 300;
}
.jumbotron .container {
max-width: 40rem;
}
.card > a > img {
width: 100%;
}
.published-info {
text-align: right;
font-size: .7rem;
}
.navbar img#site-logo {
max-width: 200px;
max-height: 100px;
}
.page-item.active .page-link {
background-color: #343a40;
border-color: #343a40;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer a {
color: #fff;
font-weight: bold;
}
footer a:hover {
color: #fff;
}
footer p {
display: inline;
margin-bottom: .25rem;
}
footer p.float-right > a {
font-weight: normal;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

View File

@@ -1 +0,0 @@
<svg width="356" height="280" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 280" preserveAspectRatio="none"><defs><style type="text/css">#holder_1602090c11a text { fill:#eceeef;font-weight:bold;font-family:Arial, Helvetica, Open Sans, sans-serif, monospace;font-size:18pt } </style></defs><g id="holder_1602090c11a"><rect width="356" height="280" fill="#55595c"/><g><text y="147.2" x="84.5">Missing thumbnail</text></g></g></svg>

Before

Width:  |  Height:  |  Size: 436 B

View File

@@ -1,10 +0,0 @@
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'index' %}">Home</a></li>
{% for p in pages %}
<li class="breadcrumb-item{% if forloop.last %} active {% endif %}" aria-current="page">{% if forloop.last %}{{ p.name }}{% else %}
<a href="{% url 'portal_page' p.path %}">{{ p.name }}</a>
{% endif %}</li>
{% endfor %}
</ol>
</nav>

View File

@@ -1,17 +1,14 @@
<footer class="bg-dark text-white">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>{% if site_conf.show_copyright %}&copy; {% now "Y" %} {% endif %}</p>
{% if rolling_stock and site_conf.footer_short %}
{{ site_conf.footer_short | safe }}
{% else %}
{{ site_conf.footer | safe }}
{% endif %}
</div>
{% if site_conf.show_version and not map %}<div class="container">
<p class="small text-muted">Version: {{ site_conf.version }}</p>
</div>{% endif %}
</footer>
<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Back to top</a>
</p>
<p class="mb-1">&copy; {% now "Y" %} {{ site_conf.footer }}</p>
<p class="mb-0">{{ site_conf.footer_extended }}</p>
</div>
{% if site_conf.show_version %}
<div class="container">
<p class="small text-muted">Version: {{ site_conf.version }}</p>
</div>
{% endif %}
</footer>

View File

@@ -6,142 +6,214 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{{ site_conf.about }}">
<meta name="author" content="{{ site_conf.site_author }}">
<link rel="icon" type="image/png" href="{% static 'favicon-196x196.png' %}" sizes="196x196">
<link rel="icon" type="image/png" href="{% static 'favicon-128.png' %}" sizes="128x128">
<link rel="icon" type="image/png" href="{% static 'favicon-96x96.png' %}" sizes="96x96">
<link rel="icon" type="image/png" href="{% static 'favicon-32x32.png' %}" sizes="32x32">
<link rel="icon" type="image/png" href="{% static 'favicon-16x16.png' %}" sizes="16x16">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.88.1">
<title>{{ site_conf.site_name }}</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/album/">
<!-- Bootstrap core CSS -->
<link href="{% static "css/dist/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/fonts.css" %}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="{% static "css/main.css" %}" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<body class="bg-dark">
<div class="container-fluid">
<header>
{% include 'navbar.html' %}
<div class="row collapse bg-dark shadow-sm" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
{% if site_conf.about %}<h4 class="text-white">About</h4>
<div class="text-justify text-muted">{{ site_conf.about | safe }}</div>{% endif %}
</div>
<div class="col-sm-4 offset-md-1 py-4 text-right">
{% include 'login.html' %}
</div>
</div>
</div>
</div>
</header>
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
<strong>{{ site_conf.site_name }}</strong>
</a>
{% include 'login.html' %}
</div>
</div>
</header>
<main class="bg-light">
<div class="bg-white py-5">
<div class="container">
{{ site_conf.homepage_content | safe }}
</div>
<main>
<section class="py-1 text-start container">
<div class="row py-lg-5">
<div class="mx-auto">
<h1 class="fw-light">About</h1>
<p class="lead text-muted">{{ site_conf.about | safe }}</p>
</div>
</div>
</section>
<a id="maps"></a>
<div class="album py-5">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
{% if tags %}<p>active filter:
{% for t in tags %}<span class="badge" style="background-color: {{ t.color }}; color: {{ t.label_color }};">{{ t.tag }}</span>{# new line is required #}
{% endfor %}</p>{% endif %}
</div>
</div>
<div class="row">
{% for r in rolling_stock %}
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<a href="{{ r.get_absolute_url }}">
{% for t in r.thumbnail.all %}{% if t.is_thumbnail %}<img src="{{ t.image.url }}" alt="Card image cap">
{% else %}<img class="card-img-top" src="{% static "img/empty.svg" %}">{% endif %}</a>{% endfor %}
<div class="card-body">
<p class="card-text"><strong>{{ r }}</strong></p>{{ r.description|safe|truncatechars_html:256 }}
<p class="card-text">
{% for t in r.tags.all %}<a class="badge"
style="background-color: {{ t.color }}; color: {{ t.label_color }};" href="{# url 'tags_filtered' t.tag #}">{{ t.tag }}</a>{# new line is required #}
{% endfor %}
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a class="btn btn-sm btn-outline-secondary" href="{{ r.get_absolute_url }}">View</a>
{% if request.user.is_staff %}<a class="btn btn-sm btn-outline-danger" href="{% url 'admin:roster_rollingstock_change' r.pk %}">Edit</a>{% endif %}
</div>
<small class="text-muted published-info">Last update: <em>{{ r.updated_time | date:"M d, Y" }}</em></small>
</div>
</div>
<div class="album py-5 bg-light">
<div class="container">
<a id="rolling-stock"></a>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
{% for r in rolling_stock %}
<div class="col">
<div class="card shadow-sm">
<a href="#">
{% for t in r.thumbnail.all %}{% if t.is_thumbnail %}<img src="{{ t.image.url }}" alt="Card image cap">
{% else %}
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Missing thumbnail</text></svg>
{% endif %}</a>{% endfor %}
<div class="card-body">
<p class="card-text"><strong>{{ r }}</strong></p>
<table class="table table-striped">
<thead>
<tr>
<th colspan="2" scope="row">Data</th>
</tr>
</thead>
<tbody>
<tr>
<th width="35%" scope="row">Type</th>
<td>{{ r.rolling_class.type }}</td>
</tr>
<tr>
<th scope="row">Company</th>
<td>{{ r.rolling_class.company }}</td>
</tr>
<tr>
<th scope="row">Class</th>
<td>{{ r.rolling_class.identifier }}</td>
</tr>
<tr>
<th scope="row">Road number</th>
<td>{{ r.road_number }}</td>
</tr>
<tr>
<th scope="row">Era</th>
<td>{{ r.era }}</td>
</tr>
</tbody>
</table>
<div class="btn-group mb-4">
<button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#collapseModel{{ r.pk }}" aria-expanded="false" aria-controls="collapseModel{{ r.pk }}">Model data</button>
{% if r.decoder %}
<button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDCC{{ r.pk }}" aria-expanded="false" aria-controls="collapseDCC{{ r.pk }}">DCC data</button>
{% endif %}
<a class="btn btn-sm btn-outline-primary" href="#">Show all data</a>
{% if request.user.is_staff %}<a class="btn btn-sm btn-outline-danger" href="{% url 'admin:roster_rollingstock_change' r.pk %}">Edit</a>{% endif %}
</div>
</div>
{% endfor %}
{% if request.user.is_staff and not rolling_stock.has_next %}
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a class="btn btn-sm btn-secondary" href="{#% url 'admin:rolling_stock_add' %#}">Add a new map</a>
</div>
</div>
</div>
<div class="collapse" id="collapseModel{{ r.pk }}">
<table class="table table-striped">
<thead>
<tr>
<th colspan="2" scope="row">Model data</th>
</tr>
</thead>
<tbody>
<tr>
<th width="35%" scope="row">Manufacturer</th>
<td>{{ r.manufacturer }}</td>
</tr>
<tr>
<th scope="row">Scale</th>
<td>{{ r.scale }}</td>
</tr>
<tr>
<th scope="row">SKU</th>
<td>{{ r.sku }}</td>
</tr>
</tbody>
</table>
</div>
</div>
{% endif %}
</div>
{% if rolling_stock.has_other_pages %}
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
{% if rolling_stock.has_previous %}
<li class="page-item">
<a class="page-link" href="/page/{{ rolling_stock.previous_page_number }}#rolling_stock" tabindex="-1">Previous</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
{% endif %}
{% for i in rolling_stock.paginator.page_range %}
{% if rolling_stock.number == i %}
<li class="page-item active">
<span class="page-link">{{ i }}<span class="sr-only">(current)</span></span>
</li>
{% else %}
<li class="page-item"><a class="page-link" href="/page/{{ i }}#rolling_stock">{{ i }}</a></li>
{% endif %}
{% if r.decoder %}
<div class="collapse" id="collapseDCC{{ r.pk }}">
<table class="table table-striped">
<thead>
<tr>
<th colspan="2" scope="row">DCC data</th>
</tr>
</thead>
<tbody>
<tr>
<th width="35%" scope="row">Decoder</th>
<td>{{ r.decoder }}</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>{{ r.address }}</td>
</tr>
</tbody>
</table>
</div>
{% endif %}
{% if r.tags.all %}
<p class="card-text"><small>Tags:</small>
{% for t in r.tags.all %}<span class="badge bg-primary">
{{ t.name }}</span>{# new line is required #}
{% endfor %}
{% if rolling_stock.has_next %}
<li class="page-item">
<a class="page-link" href="/page/{{ rolling_stock.next_page_number }}#rolling_stock" tabindex="-1">Next</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">Next</span>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
{% endif %}
</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">Updated {{ r.updated_time | date:"M d, Y H:m" }}</small>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</main>
</div>
<div class="container">
{% if rolling_stock.has_other_pages %}
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center mt-4">
{% if rolling_stock.has_previous %}
<li class="page-item">
<a class="page-link" href="/page/{{ rolling_stock.previous_page_number }}#rolling_stock" tabindex="-1">Previous</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
{% endif %}
{% for i in rolling_stock.paginator.page_range %}
{% if rolling_stock.number == i %}
<li class="page-item active">
<span class="page-link">{{ i }}</span></span>
</li>
{% else %}
<li class="page-item"><a class="page-link" href="/page/{{ i }}#rolling-stock">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if rolling_stock.has_next %}
<li class="page-item">
<a class="page-link" href="/page/{{ rolling_stock.next_page_number }}#rolling-stock" tabindex="-1">Next</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">Next</span>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
</div>
</div>
</div>
</main>
{% include 'footer.html' %}
{% include 'footer.html' %}
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static "js/dist/jquery.min.js" %}"></script>
<script src="{% static "js/dist/bootstrap.bundle.min.js" %}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -1,18 +1,20 @@
{% if request.user.is_staff %}
<div class="btn-group" role="group" aria-label="User actions">
<button type="button" class="btn btn-sm btn-outline-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Welcome back, <strong>{{ request.user }}</strong>
</button>
<div class="dropdown-menu">
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'admin:index' %}">Admin</a>
<a class="dropdown-item" href="{% url 'admin:portal_siteconfiguration_changelist' %}">Site configuration</a>
<a class="dropdown-item" href="{% url 'admin:password_change' %}">Change password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="{% url 'admin:logout' %}?next={{ request.path }}">Logout</a>
</div>
</div>
{% else %}
<a class="btn btn-sm btn-outline-light" href="{% url 'admin:login' %}?next={{ request.path }}">Log in</a>
{% endif %}
{% if request.user.is_staff %}
<div class="dropdown">
<button class="btn btn-sm btn-outline-light dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Welcome back, <strong>{{ request.user }}</strong>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu2">
<li><a class="dropdown-item" href="{% url 'admin:roster_rollingstock_changelist' %}">Rolling stock</a></li>
<li><a class="dropdown-item" href="{% url 'admin:consist_consist_changelist' %}">Consists</a></li>
<li><a class="dropdown-item" href="{% url 'admin:app_list' 'metadata' %}">Metadata</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="{% url 'admin:index' %}">Admin</a></li>
<li><a class="dropdown-item" href="{% url 'admin:portal_siteconfiguration_changelist' %}">Site configuration</a></li>
<li><a class="dropdown-item" href="{% url 'admin:driver_driverconfiguration_changelist' %}">DCC configuration</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="{% url 'admin:logout' %}?next={{ request.path }}">Logout</a></li>
</ul>
</div>
{% else %}
<a class="btn btn-sm btn-outline-light" href="{% url 'admin:login' %}?next={{ request.path }}">Log in</a>
{% endif %}

View File

@@ -1,10 +0,0 @@
<div class="row navbar navbar-dark">
<div class="container d-flex justify-content-between">
<a href="{% url 'index' %}" class="navbar-brand mr-auto">{% if site_conf.site_logo %}<img class="mr-2 d-inline-block" src="{{ site_conf.site_logo.url }}" alt="website logo" id="site-logo" />{% endif %}<strong class="align-middle">{{ site_conf.site_name }}</strong></a>
{% if rolling_stock %}<span class="navbar-brand">{{ rolling_stock.identifier }}</span>{% endif %}
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>

6
dcc/portal/utils.py Normal file
View File

@@ -0,0 +1,6 @@
from django.apps import apps
def get_site_conf():
SiteConfiguration = apps.get_model('portal', 'SiteConfiguration')
return SiteConfiguration.get_solo()

View File

@@ -2,14 +2,16 @@ from django.views import View
from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from portal.utils import get_site_conf
from roster.models import RollingStock, RollingStockImage
class GetHome(View):
def get(self, request, page=1):
site_conf = get_site_conf()
rolling_stock = RollingStock.objects.all()
thumbnails = RollingStockImage.objects.filter(is_thumbnail=True)
paginator = Paginator(rolling_stock, 6)
paginator = Paginator(rolling_stock, site_conf.items_per_page)
try:
rolling_stock = paginator.page(page)