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; text-align: right !important;
} }
.chart-card .apexcharts-svg {
border-radius: 0 0 var(--border-radius-lg,.5rem) var(--border-radius-lg,.5rem);
}
:root { :root {
--color-neutral-000: white; --color-neutral-000: white;
--color-neutral-50: #F8FAFC; --color-neutral-50: #F8FAFC;

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

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

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

@ -18,23 +18,23 @@
{% endblock %} {% endblock %}
</head> </head>
<body class="bg-neutral-100 min-h-full"> <body class="bg-neutral-100 min-h-full overflow-x-hidden">
{% block body %} {% block body %}
<section class="max-w-screen-xl mx-auto px-4 py-4 md:py-12 md:flex"> <section class="max-w-screen-xl mx-auto px-4 py-4 md:py-12 md:flex">
<aside <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' %}"> <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-3x text-urge-600 hidden md:block"></i>
<i class="fas fa-binoculars fa-2x text-urge-600 md:hidden"></i> <i class="fas fa-binoculars fa-2x text-urge-600 md:hidden"></i>
</a> </a>
<button class="button ~neutral !low md:hidden" <a class="button ~neutral !low md:hidden"
onclick="document.getElementById('navMenuExpanded').classList.toggle('hidden')"> onclick="document.getElementById('navMenuExpanded').classList.toggle('hidden')">
<span class="icon"> <span class="icon">
<i class="fas fa-bars"></i> <i class="fas fa-bars"></i>
</span> </span>
</button> </a>
<hr class="sep h-4 md:h-8 w-full"> <hr class="sep h-4 md:h-8 w-full">
<div id="navMenuExpanded" <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"> 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 %} {% for service in user.collaborating_services.all %}
{% contextual_url 'dashboard:service' service.uuid as url %} {% 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 %} {% endfor %}
<hr class="sep h-8"> <hr class="sep h-8">

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

@ -1,13 +1,12 @@
{% load humanize helpers %} {% 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 %} {% with stats=object.stats %}
<div class="p-4 md:flex justify-between"> <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"> <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"> <h3 class="heading text-xl md:text-2xl mr-2 mb-1 text-urge-600 flex items-center truncate" title="{{object.name}}">
<h3 class="heading text-xl md:text-2xl mr-2 mb-1 text-urge-600 flex items-center">
{{object.link|iconify}} {{object.link|iconify}}
<span>{{object.name}}</span> <span class="truncate">{{object.name}}</span>
</h3> </h3>
{% include 'dashboard/includes/stats_status_chip.html' %} {% include 'dashboard/includes/stats_status_chip.html' %}
</div> </div>

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

@ -1,6 +1,6 @@
{% load helpers %} {% load helpers %}
<div> <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> {% if disable_turbolinks %}data-turbolinks="false"{% endif %} href="{{url}}">{{icon}} <span class="truncate">{{label}}</span></a>
</div> </div>

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

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

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

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

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

@ -10,7 +10,7 @@
{% endblock %} {% endblock %}
{% block service_content %} {% 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' %} {% include 'dashboard/includes/session_list.html' %}
</div> </div>
{% pagination page_obj request %} {% pagination page_obj request %}

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

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

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

@ -172,7 +172,7 @@ def iconify(text):
domain = text + ".com" domain = text + ".com"
return SafeString( 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>'
) )