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

Make favicon not squish and add ellipsis overflow

Browse Source 
General styling improvements

Many UI Improvements

- 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

Disable wrapping in table cells, prefer ellipsis

Ellipsis overflow for long url on hit page

Fix flex grow in header not working as intended

Remove forgotten truncatechars

Fix code checks, add button role and tabindex
This commit is contained in:
CasperVerswijvelt 2021-04-07 21:39:54 +02:00 committed by R. Miles McCain
parent fdf2ab719b
commit 14a7ec68f3
12 changed files with 52 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,14 @@
text-align: right !important; text-align: right !important;
} }
.chart-card .apexcharts-svg {
border-radius: 0 0 var(--border-radius-lg, 0.5rem) var(--border-radius-lg, 0.5rem);
}
.max-w-0 {
max-width: 0;
}
: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 %}

12
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 tabindex="0" role="button" 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">
@ -43,7 +43,7 @@
{% for service in user.owning_services.all %} {% for service in user.owning_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:16 url=url icon=service.link|iconify %} {% include 'dashboard/includes/sidebar_portal.html' with label=service.name url=url icon=service.link|iconify %}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
@ -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 url=url %}
{% endfor %} {% endfor %}
<hr class="sep h-8"> <hr class="sep h-8">

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

@ -1,16 +1,16 @@
{% 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"> <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"> <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}} {{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>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6"> <div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-3 lg:gap-6 md:flex-none">
<div> <div>
<p>Sessions</p> <p>Sessions</p>
<p class="label"> <p class="label">

4
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}} {{label}}</a> {% if disable_turbolinks %}data-turbolinks="false"{% endif %} href="{{url}}">{{icon}} <span class="truncate">{{label}}</span></a>
</div> </div>

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

@ -2,7 +2,7 @@
{% with stats=object.get_daily_stats %} {% with stats=object.get_daily_stats %}
{% if stats.currently_online > 0 %} {% if stats.currently_online > 0 %}
<span class="chip ~positive !high"> <span class="chip ~positive !high whitespace-nowrap">
{{stats.currently_online|intcomma}} online {{stats.currently_online|intcomma}} online
</span> </span>
{% endif %} {% endif %}

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 %}

22
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">
@ -109,7 +109,7 @@
<tbody> <tbody>
{% for location in stats.locations %} {% for location in stats.locations %}
<tr> <tr>
<td>{{location.location|default:"Unknown"|urldisplay}}</td> <td class="truncate w-full max-w-0">{{location.location|default:"Unknown"|urldisplay}}</td>
<td class="rf">{{location.count|intcomma}}</td> <td class="rf">{{location.count|intcomma}}</td>
</tr> </tr>
{% empty %} {% empty %}
@ -131,7 +131,7 @@
<tbody> <tbody>
{% for referrer in stats.referrers %} {% for referrer in stats.referrers %}
<tr> <tr>
<td>{{referrer.referrer|default:"Direct"|urldisplay}}</td> <td class="truncate w-full max-w-0">{{referrer.referrer|default:"Direct"|urldisplay}}</td>
<td class="rf">{{referrer.count|intcomma}}</td> <td class="rf">{{referrer.count|intcomma}}</td>
</tr> </tr>
{% empty %} {% empty %}
@ -153,7 +153,9 @@
<tbody> <tbody>
{% for country in stats.countries %} {% for country in stats.countries %}
<tr> <tr>
<td><span class="{{country.country|flag_class}}"></span></span>{{country.country|country_name}}</td> <td class="truncate w-full max-w-0" title="{{country.country|country_name}}">
<span class="{{country.country|flag_class}}"></span> {{country.country|country_name}}
</td>
<td class="rf">{{country.count|intcomma}}</td> <td class="rf">{{country.count|intcomma}}</td>
</tr> </tr>
{% empty %} {% empty %}
@ -175,7 +177,9 @@
<tbody> <tbody>
{% for os in stats.operating_systems %} {% for os in stats.operating_systems %}
<tr> <tr>
<td class="flex items-center">{{os.os|iconify}}<span>{{os.os|default:"Unknown"}}</span></td> <td class="flex items-center truncate w-full max-w-0" title="{{os.os|default:'Unknown'}}">
{{os.os|iconify}}<span>{{os.os|default:"Unknown"}}</span>
</td>
<td class="rf">{{os.count|intcomma}}</td> <td class="rf">{{os.count|intcomma}}</td>
</tr> </tr>
{% empty %} {% empty %}
@ -197,7 +201,7 @@
<tbody> <tbody>
{% for browser in stats.browsers %} {% for browser in stats.browsers %}
<tr> <tr>
<td class="flex items-center"> <td class="flex items-center truncate w-full max-w-0" title="{{browser.browser|default:'Unknown'}}">
{{browser.browser|iconify}}<span>{{browser.browser|default:"Unknown"}}</span></td> {{browser.browser|iconify}}<span>{{browser.browser|default:"Unknown"}}</span></td>
<td class="rf">{{browser.count|intcomma}}</td> <td class="rf">{{browser.count|intcomma}}</td>
</tr> </tr>
@ -220,7 +224,7 @@
<tbody> <tbody>
{% for device_type in stats.device_types %} {% for device_type in stats.device_types %}
<tr> <tr>
<td>{{device_type.device_type|default:"Unknown"|title}}</td> <td class="truncate w-full max-w-0">{{device_type.device_type|default:"Unknown"|title}}</td>
<td class="rf">{{device_type.count|intcomma}}</td> <td class="rf">{{device_type.count|intcomma}}</td>
</tr> </tr>
{% empty %} {% empty %}
@ -234,7 +238,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>

4
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>
@ -72,7 +72,7 @@
</div> </div>
<div class="md:flex card ~neutral !low flex-grow justify-between"> <div class="md:flex card ~neutral !low flex-grow justify-between">
<div class="mb-4 md:mb-0 md:w-1/2"> <div class="mb-4 md:mb-0 md:w-1/2">
<p class="label font-medium text-lg">{{hit.location|default:"Unknown"|urlize}}</p> <p class="label font-medium text-lg truncate">{{hit.location|default:"Unknown"|urlize}}</p>
{% if hit.referrer %} {% if hit.referrer %}
<p>via {{hit.referrer|urlize}}<p> <p>via {{hit.referrer|urlize}}<p>
{% endif %} {% endif %}

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 truncate" 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 truncate">
{{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 %}

4
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"><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>'
) )
@ -181,7 +181,7 @@ def urldisplay(url):
if url.startswith("http"): if url.startswith("http"):
display_url = url.replace("http://", "").replace("https://", "") display_url = url.replace("http://", "").replace("https://", "")
return SafeString( return SafeString(
f"<a href='{url}' title='{url}' rel='nofollow' class='flex items-center'>{iconify(url)} {escape(display_url if len(display_url) < 40 else display_url[:40] + '...')}</a>" f"<a href='{url}' title='{url}' rel='nofollow' class='flex items-center mr-1'>{iconify(url)}<span class='truncate'>{escape(display_url)}</span></a>"
) )
else: else:
return url return url