From 8e5f8fc6bf918c26359ce6c32fe8f6a60bc5fcc0 Mon Sep 17 00:00:00 2001
From: Frank Sauerburger <frank@sauerburger.com>
Date: Tue, 1 Jun 2021 16:27:58 +0200
Subject: [PATCH] Add dashboard design
---
uhepp-js/src/common.scss | 47 +++++++++++
.../migrations/0010_profile_dashboard.py | 18 +++++
.../templates/uhepp_vault/base.html | 19 ++++-
.../templates/uhepp_vault/plot_dashboard.html | 81 +++++++++++++++++++
4 files changed, 162 insertions(+), 3 deletions(-)
create mode 100644 uhepp_org/uhepp_vault/migrations/0010_profile_dashboard.py
create mode 100644 uhepp_org/uhepp_vault/templates/uhepp_vault/plot_dashboard.html
diff --git a/uhepp-js/src/common.scss b/uhepp-js/src/common.scss
index c44fad1..184d73a 100644
--- a/uhepp-js/src/common.scss
+++ b/uhepp-js/src/common.scss
@@ -167,3 +167,50 @@ body {
.plot-caption:hover .pen{
visibility: visible;
}
+
+.breadcrumb {
+ padding: 0.25rem 0.75rem;
+}
+
+.sidebar {
+
+}
+
+.navbar {
+ position: relative;
+ z-index: 1020;
+}
+
+body.dashboard {
+ margin-bottom: 0;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+
+
+ .container-fluid {
+ height: 100%;
+ }
+
+ .container-fluid > .row {
+ height: 100%;
+ }
+
+ .navbar {
+ .container-fluid {
+ display: block;
+ }
+ padding: 0;
+ .row {
+ & > div {
+ padding: 0.5rem 1rem;
+ align-items: center;
+ display: flex;
+ }
+ }
+ }
+}
diff --git a/uhepp_org/uhepp_vault/migrations/0010_profile_dashboard.py b/uhepp_org/uhepp_vault/migrations/0010_profile_dashboard.py
new file mode 100644
index 0000000..1001bc6
--- /dev/null
+++ b/uhepp_org/uhepp_vault/migrations/0010_profile_dashboard.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.1.7 on 2021-05-31 19:20
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+ dependencies = [
+ ('uhepp_vault', '0009_auto_20210409_1516'),
+ ]
+
+ operations = [
+ migrations.AddField(
+ model_name='profile',
+ name='dashboard',
+ field=models.BooleanField(blank=True, default=False, verbose_name='Show plots in dashboard'),
+ ),
+ ]
diff --git a/uhepp_org/uhepp_vault/templates/uhepp_vault/base.html b/uhepp_org/uhepp_vault/templates/uhepp_vault/base.html
index bb0e002..ebffa6c 100644
--- a/uhepp_org/uhepp_vault/templates/uhepp_vault/base.html
+++ b/uhepp_org/uhepp_vault/templates/uhepp_vault/base.html
@@ -32,10 +32,15 @@
}
</style>
</head>
-<body>
+<body{% block bodymod %}{% endblock %}>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm">
+{% block nav-container %}
<div class="container">
+{% endblock %}
<a class="navbar-brand" href="/">{% svg 'logo' %}</a>
+{% block nav-container-mid %}
+{% endblock %}
+
<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>
@@ -52,7 +57,7 @@
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Explore
</a>
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'uhepp_vault:user-list' %}">Users</a>
<a class="dropdown-item" href="{% url 'uhepp_vault:collection-list' %}">Collections</a>
<a class="dropdown-item" href="{% url 'uhepp_vault:plot-list' %}">Plots</a>
@@ -67,7 +72,7 @@
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</a>
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item"
href="{% url 'uhepp_vault:user-detail' request.user.username %}">
{{ request.user }}</a>
@@ -80,20 +85,27 @@
{% endif %}
</ul>
</div>
+{% block nav-container2 %}
</div>
+{% endblock %}
</nav>
{% block teaser %}
{% endblock %}
+{% block content-fluid %}
<div class="container">
{% block content %}
{% endblock %}
</div>
+{% endblock %}
+
+
{% block loadscript %}
{% endblock %}
+{% block footer %}
<footer class="page-footer">
<div class="container">
<div class="row">
@@ -118,5 +130,6 @@
</div>
</div>
</footer>
+{% endblock %}
</body>
</html>
diff --git a/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_dashboard.html b/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_dashboard.html
new file mode 100644
index 0000000..842b771
--- /dev/null
+++ b/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_dashboard.html
@@ -0,0 +1,81 @@
+{% extends 'uhepp_vault/base.html' %}
+{% load pygmentify_tags %}
+{% load humanize %}
+{% load crispy_forms_tags %}
+
+{% block title %}{{ plot.title }} - uhepp hub{% endblock %}
+
+{% block nav-container %}
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-3 col-lg-2" style="background-color: black">
+{% endblock %}
+{% block nav-container-mid %}
+ </div>
+ <div class="col-md-9 col-lg-10">
+{% endblock %}
+{% block nav-container2 %}
+ </div>
+ </div>
+ </div>
+{% endblock %}
+
+{% block content-fluid %}
+<div class="container-fluid"><div class="row">
+
+ <div class="col-md-3 col-lg-2 sidebar bg-light shadow">
+ Menu
+ </div>
+
+ <div class="col-md-7 col-lg-8">
+ <nav aria-label="breadcrumb" class="d-none d-lg-block small">
+ <ol class="breadcrumb my-2 bg-white p-0">
+ <li class="breadcrumb-item"><a href="/">Home</a></li>
+ <li class="breadcrumb-item"><a href="{% url 'uhepp_vault:user-detail' plot.collection.owner.username %}">{{ plot.collection.owner }}</a></li>
+ <li class="breadcrumb-item"><a href="{% url 'uhepp_vault:collection-detail' plot.collection.id %}">{{ plot.collection.title }}</a></li>
+ <li class="breadcrumb-item active"><a href="{% url 'uhepp_vault:plot-detail' plot.uuid %}">{{ plot }}</a></li>
+ </ol>
+ </nav>
+
+ <h1 class="mb-0">
+ {{ plot }}
+ <i class="text-muted fas {% if plot.collection.visibility >= 30 %} fa-globe-europe
+ {% elif plot.collection.visibility >= 20 %} fa-shield-alt
+ {% elif plot.collection.visibility >= 10 %} fa-lock
+ {% endif %}"></i>
+ </h1>
+
+ <div class="d-none d-lg-inline text-muted small">
+ <i class="fas fa-eye"></i>
+ {{ plot.view_count }} view{{ plot.view_count|pluralize }},
+ <span title="{{ plot.uploaded|date:"Y-m-d H:m" }}">
+ <i class="fas fa-clock"></i>
+ {{ plot.uploaded|naturaltime }}
+ </span>
+ </div>
+ </div>
+
+ <div class="col-md-2 sidebar shadow-sm">
+ Metadata
+ </div>
+
+</div></div>
+{% endblock %}
+
+{% block loadscript %}
+<script>
+/*uhepp.fe.ReactDOM.render(
+ uhepp.fe.React.createElement(uhepp.fe.Uhepp, {
+ width: "555",
+ height: "400",
+ uuid: "{{plot.uuid}}"
+ }),
+ document.getElementById('app-root')
+);*/
+</script>
+{% endblock %}
+
+{% block footer %}
+{% endblock %}
+
+{% block bodymod %} class="dashboard"{% endblock %}
--
GitLab