theluyuan/shynet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Many UI Improvements

Browse Source 
- Consistent spacing between titles and content
- Removed many ugly text squishing by hiding overflowing text with ellipsis
- Fixed Service favicon being squisched by long service name
- Hide scrollbar in 'more session' screen when content isn't scrollable
- Fix apexcharts tooltips and labels being cut off by card class
This commit is contained in:
CasperVerswijvelt 2021-04-20 22:20:16 +02:00 committed by R. Miles McCain
parent c06b7a094a
commit b144efaa9b
11 changed files with 32 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
shynet/dashboard/static/dashboard/css/global.css
View File

@ -15,6 +15,10 @@
text-align: right !important;
}
.chart-card .apexcharts-svg {
border-radius: 0 0 var(--border-radius-lg,.5rem) var(--border-radius-lg,.5rem);
}
:root {
--color-neutral-000: white;
--color-neutral-50: #F8FAFC;

4
shynet/dashboard/templates/account/base.html
View File

@ -1,8 +1,8 @@
{% extends "base.html" %}
{% block content %}
<div>
<h4 class="heading">{% block page_title %}{% endblock %}</h4>
<div class="flex-1 truncate">
<h4 class="heading truncate">{% block page_title %}{% endblock %}</h4>
</div>
<hr class="sep">
{% block main %}

10
shynet/dashboard/templates/base.html
View File

@ -18,23 +18,23 @@
{% endblock %}
</head>
<body class="bg-neutral-100 min-h-full">
<body class="bg-neutral-100 min-h-full overflow-x-hidden">
{% block body %}
<section class="max-w-screen-xl mx-auto px-4 py-4 md:py-12 md:flex">
<aside
class="mb-8 md:w-2/12 md:pr-6 relative flex flex-wrap md:block justify-between items-center overflow-x-hidden">
class="mb-2 md:w-2/12 md:pr-6 relative flex flex-wrap md:block justify-between items-center overflow-x-hidden">
<a class="icon ~urge ml-2 md:ml-6 md:mb-8 md:mt-3" href="{% url 'dashboard:dashboard' %}">
<i class="fas fa-binoculars fa-3x text-urge-600 hidden md:block"></i>
<i class="fas fa-binoculars fa-2x text-urge-600 md:hidden"></i>
</a>
<button class="button ~neutral !low md:hidden"
<a class="button ~neutral !low md:hidden"
onclick="document.getElementById('navMenuExpanded').classList.toggle('hidden')">
<span class="icon">
<i class="fas fa-bars"></i>
</span>
</button>
</a>
<hr class="sep h-4 md:h-8 w-full">
<div id="navMenuExpanded"
class="bg-neutral-000 shadow-lg md:shadow-none p-4 hidden rounded-lg md:block md:bg-transparent md:border-none md:p-0 w-full">
@ -62,7 +62,7 @@
{% for service in user.collaborating_services.all %}
{% contextual_url 'dashboard:service' service.uuid as url %}
{% include 'dashboard/includes/sidebar_portal.html' with label=service.name|truncatechars:20 url=url %}
{% include 'dashboard/includes/sidebar_portal.html' with label=service.name|truncatechars:2 url=url %}
{% endfor %}
<hr class="sep h-8">

11
shynet/dashboard/templates/dashboard/includes/service_overview.html
View File

@ -1,13 +1,12 @@
{% load humanize helpers %}
<a class="card ~neutral !low service mb-6 p-0" href="{% contextual_url 'dashboard:service' object.uuid %}">
<a class="card chart-card overflow-visible ~neutral !low service mb-6 p-0" href="{% contextual_url 'dashboard:service' object.uuid %}">
{% with stats=object.stats %}
<div class="p-4 md:flex justify-between">
<div class="flex items-center mb-4 md:mb-0 md:flex-1 md:min-w-0">
<h3 class="heading text-xl md:text-2xl mr-2 mb-1 text-urge-600 flex items-center truncate">
<h3 class="heading text-xl md:text-2xl mr-2 mb-1 text-urge-600 flex items-center">
<div class="p-4 md:flex justify-between overflow-none">
<div class="flex items-center mb-4 md:mb-0 md:flex-1 md:min-w-0 truncate pr-0 md:pr-2">
<h3 class="heading text-xl md:text-2xl mr-2 mb-1 text-urge-600 flex items-center truncate" title="{{object.name}}">
{{object.link|iconify}}
<span>{{object.name}}</span>
<span class="truncate">{{object.name}}</span>
</h3>
{% include 'dashboard/includes/stats_status_chip.html' %}
</div>

2
shynet/dashboard/templates/dashboard/includes/sidebar_portal.html
View File

@ -1,6 +1,6 @@
{% load helpers %}
<div>
<a class="portal !low {% if request.get_full_path|startswith:url %}~urge active bg-neutral-100{% endif %} flex items-center"
<a class="portal !low {% if request.get_full_path|startswith:url %}~urge active bg-neutral-100{% endif %} flex items-center" title="{{label}}"
{% if disable_turbolinks %}data-turbolinks="false"{% endif %} href="{{url}}">{{icon}} <span class="truncate">{{label}}</span></a>
</div>

6
shynet/dashboard/templates/dashboard/pages/dashboard.html
View File

@ -4,8 +4,8 @@
{% block content %}
<div class="md:flex justify-between items-center">
<div>
<h4 class="heading">{{request.site.name|default:"Dashboard"}}</h4>
<div class="flex-1 truncate display-none md:display-block mr-4 md:mb-0 mb-4" title="{{request.site.name|default:"Dashboard"}}">
<h4 class="heading truncate">{{request.site.name|default:"Dashboard"}}</h4>
</div>
<div class="flex items-center">
<div class="mr-1">
@ -17,7 +17,7 @@
{% endif %}
</div>
</div>
<hr class="sep">
<hr class="sep h-8 md:h-12">
{% for object in object_list|dictsortreversed:"stats.session_count" %}
{% include 'dashboard/includes/service_overview.html' %}
{% empty %}

6
shynet/dashboard/templates/dashboard/pages/service.html
View File

@ -93,10 +93,10 @@
</article>
{% endwith %}
</div>
{% endif %}
<div class="card ~neutral !low py-0 mb-6">
<div class="card overflow-visible ~neutral !low py-0 mb-6">
{% include 'dashboard/includes/time_chart.html' with data=stats.session_chart_data %}
</div>
{% endif %}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="card ~neutral !low limited-height py-2">
<table class="table">
@ -234,7 +234,7 @@
</div>
<div class="card ~neutral !low limited-height py-2">
{% include 'dashboard/includes/session_list.html' %}
<hr class="sep h-8">
<hr class="sep h-8 md:h-12">
<a href="{% contextual_url 'dashboard:service_session_list' service.uuid %}" class="button ~neutral w-auto mb-2">View more
sessions
&rarr;</a>

2
shynet/dashboard/templates/dashboard/pages/service_session.html
View File

@ -21,7 +21,7 @@
{{session.last_seen|date:"g:i a"}}{% if session.is_currently_active %} <span class="chip ~positive !high text-base">Online</span>{% endif %}</p>
</div>
</div>
<hr class="sep h-8">
<hr class="sep h-8 md:h-12">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-gray-400 font-medium">
<div>
<p>Browser</p>

2
shynet/dashboard/templates/dashboard/pages/service_session_list.html
View File

@ -10,7 +10,7 @@
{% endblock %}
{% block service_content %}
<div class="card ~neutral !low mb-8 pt-2 max-w-full overflow-x-scroll">
<div class="card ~neutral !low mb-8 pt-2 max-w-full overflow-x-auto">
{% include 'dashboard/includes/session_list.html' %}
</div>
{% pagination page_obj request %}

12
shynet/dashboard/templates/dashboard/service_base.html
View File

@ -6,21 +6,21 @@
{% block content %}
<div class="md:flex justify-between items-center" id="heading">
<a class="flex items-center mb-4 md:mb-0" href="{% contextual_url 'dashboard:service' object.uuid %}">
<h3 class="heading leading-none mr-4">
<a class="flex items-center mb-4 md:mb-0 flex-1" href="{% contextual_url 'dashboard:service' object.uuid %}">
<h3 class="heading items-center mr-4 md:mr-2 flex flex-1 w-0">
{{object.link|iconify}}
{{object.name}}
<span class="flex-1 truncate ml-2" title="{{object.name}}">{{object.name}}</span>
</h3>
<div class='text-3xl'>
<div class="text-3xl md:mr-2">
{% include 'dashboard/includes/stats_status_chip.html' %}
</div>
</a>
<div class="flex items-center">
<div class="flex items-center flex-none">
{% block service_actions %}
{% endblock %}
</div>
</div>
<hr class="sep h-8">
<hr class="sep h-8 md:h-12">
{% block service_content %}
{% endblock %}
{% endblock %}

2
shynet/dashboard/templatetags/helpers.py
View File

@ -172,7 +172,7 @@ def iconify(text):
domain = text + ".com"
return SafeString(
f'<span class="icon mr-1" flex-none><img src="https://icons.duckduckgo.com/ip3/{domain}.ico"></span>'
f'<span class="icon mr-1 flex-none"><img src="https://icons.duckduckgo.com/ip3/{domain}.ico"></span>'
)