diff --git a/uhepp-js/src/common.scss b/uhepp-js/src/common.scss index c44fad169cbd4b25973657613fc3bf9f535aae5c..184d73ac87f2e1dd64829bfb32ac57a724324827 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 0000000000000000000000000000000000000000..1001bc6a1b87d634232e7031d22c3e466c5f2d4f --- /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 bb0e002f7b43e07f8770bb3179421ceca1665837..ebffa6cc0931b2b36c1666caf3e73586291518a6 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 0000000000000000000000000000000000000000..842b771eab3c1453cab3f37e2387e6f1861fd5b5 --- /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 %}