Skip to content
Snippets Groups Projects
Verified Commit 8e5f8fc6 authored by Frank Sauerburger's avatar Frank Sauerburger
Browse files

Add dashboard design

parent 2f649020
No related branches found
No related tags found
1 merge request!33Draft: Resolve "UI redesign"
Pipeline #7982 waiting for manual action
This commit is part of merge request !33. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
uhepp-js/src/common.scss
+ 47
− 0
Edit View file @ 8e5f8fc6
...@@ -167,3 +167,50 @@ body { ...@@ -167,3 +167,50 @@ body {
.plot-caption:hover .pen{ .plot-caption:hover .pen{
visibility: visible; 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;
}
}
}
}
uhepp_org/uhepp_vault/migrations/0010_profile_dashboard.py 0 → 100644
+ 18
− 0
Edit View file @ 8e5f8fc6
# 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'),
),
]
uhepp_org/uhepp_vault/templates/uhepp_vault/base.html
+ 16
− 3
Edit View file @ 8e5f8fc6
...@@ -32,10 +32,15 @@ ...@@ -32,10 +32,15 @@
} }
</style> </style>
</head> </head>
<body> <body{% block bodymod %}{% endblock %}>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm">
{% block nav-container %}
<div class="container"> <div class="container">
{% endblock %}
<a class="navbar-brand" href="/">{% svg 'logo' %}</a> <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"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
...@@ -52,7 +57,7 @@ ...@@ -52,7 +57,7 @@
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Explore Explore
</a> </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:user-list' %}">Users</a>
<a class="dropdown-item" href="{% url 'uhepp_vault:collection-list' %}">Collections</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> <a class="dropdown-item" href="{% url 'uhepp_vault:plot-list' %}">Plots</a>
...@@ -67,7 +72,7 @@ ...@@ -67,7 +72,7 @@
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account Account
</a> </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" <a class="dropdown-item"
href="{% url 'uhepp_vault:user-detail' request.user.username %}"> href="{% url 'uhepp_vault:user-detail' request.user.username %}">
{{ request.user }}</a> {{ request.user }}</a>
...@@ -80,20 +85,27 @@ ...@@ -80,20 +85,27 @@
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
{% block nav-container2 %}
</div> </div>
{% endblock %}
</nav> </nav>
{% block teaser %} {% block teaser %}
{% endblock %} {% endblock %}
{% block content-fluid %}
<div class="container"> <div class="container">
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div> </div>
{% endblock %}
{% block loadscript %} {% block loadscript %}
{% endblock %} {% endblock %}
{% block footer %}
<footer class="page-footer"> <footer class="page-footer">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
...@@ -118,5 +130,6 @@ ...@@ -118,5 +130,6 @@
</div> </div>
</div> </div>
</footer> </footer>
{% endblock %}
</body> </body>
</html> </html>
uhepp_org/uhepp_vault/templates/uhepp_vault/plot_dashboard.html 0 → 100644
+ 81
− 0
Edit View file @ 8e5f8fc6
{% 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 %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment