Mirrors
/
aredn
mirror of https://github.com/aredn/aredn.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make 3 column layour responsive if browser is narrow (#1741)

This commit is contained in:
Tim Wilkinson 2024-12-03 14:26:17 -08:00 committed by GitHub
parent d38b1a3081
commit 77de9c3860
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 67 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
files/app/partial/status.ut
View File

@ -42,58 +42,60 @@
{{_R("location")}}
</div>
</div>
<div id="c2">
<div hx-get="u-messages" hx-trigger="every 300s [document.visibilityState === 'visible']">
{% if (messages.haveMessages() || (auth.isAdmin && messages.haveToDos())) { %}
<div id="messages">
{{_R("messages")}}
</div>
{% } %}
</div>
<div id="services">
{% if (auth.isAdmin) { %}
{{_R("internal-services" )}}
<div id="c2c3">
<div id="c2">
<div hx-get="u-messages" hx-trigger="every 300s [document.visibilityState === 'visible']">
{% if (messages.haveMessages() || (auth.isAdmin && messages.haveToDos())) { %}
<div id="messages">
{{_R("messages")}}
</div>
{% } %}
{{_R("local-services")}}
</div>
<div id="local-and-neighbor-devices">
<hr>
<div hx-get="u-local-and-neighbor-devices" hx-trigger="every 60s [document.visibilityState === 'visible']">
{{_R("local-and-neighbor-devices")}}
</div>
</div>
{{_R("activator", { id: "local-and-neighbor-devices", activate: [ ".noctrl:first-child", ".noctrl:nth-child(2)" ] })}}
</div>
<div id="c3">
<div id="radio-and-antenna">
{{_R("radio-and-antenna")}}
</div>
<div id="mesh-summary">
<hr>
<div hx-get="u-mesh-summary" hx-trigger="every 120s [document.visibilityState === 'visible']">
{{_R("mesh-summary")}}
<div id="services">
{% if (auth.isAdmin) { %}
{{_R("internal-services" )}}
{% } %}
{{_R("local-services")}}
</div>
</div>
<div id="dhcp">
<hr>
<div hx-get="u-dhcp" hx-trigger="every 120s [document.visibilityState === 'visible']">
{{_R("dhcp")}}
<div id="local-and-neighbor-devices">
<hr>
<div hx-get="u-local-and-neighbor-devices" hx-trigger="every 60s [document.visibilityState === 'visible']">
{{_R("local-and-neighbor-devices")}}
</div>
</div>
{{_R("activator", { id: "local-and-neighbor-devices", activate: [ ".noctrl:first-child", ".noctrl:nth-child(2)" ] })}}
</div>
{% if (length(hardware.getEthernetPorts()) > 0) { %}
<div id="ports-and-xlinks">
<hr>
{{_R("ports-and-xlinks")}}
</div>
{% } %}
{% if (fs.access("/usr/bin/wg") || fs.access("/usr/sbin/vtund")) { %}
<div id="tunnels">
<hr>
<div hx-get="u-tunnels" hx-trigger="every 120s [document.visibilityState === 'visible']">
{{_R("tunnels")}}
<div id="c3">
<div id="radio-and-antenna">
{{_R("radio-and-antenna")}}
</div>
<div id="mesh-summary">
<hr>
<div hx-get="u-mesh-summary" hx-trigger="every 120s [document.visibilityState === 'visible']">
{{_R("mesh-summary")}}
</div>
</div>
<div id="dhcp">
<hr>
<div hx-get="u-dhcp" hx-trigger="every 120s [document.visibilityState === 'visible']">
{{_R("dhcp")}}
</div>
</div>
{% if (length(hardware.getEthernetPorts()) > 0) { %}
<div id="ports-and-xlinks">
<hr>
{{_R("ports-and-xlinks")}}
</div>
{% } %}
{% if (fs.access("/usr/bin/wg") || fs.access("/usr/sbin/vtund")) { %}
<div id="tunnels">
<hr>
<div hx-get="u-tunnels" hx-trigger="every 120s [document.visibilityState === 'visible']">
{{_R("tunnels")}}
</div>
</div>
{% } %}
</div>
{% } %}
</div>
{% } else { %}
<div id="general">

25
files/app/resource/css/user.css
View File

@ -167,7 +167,6 @@ body.authenticated .ctrl:hover
display: flex;
flex-direction: column;
min-width: 330px;
width: 330px;
}
#general
{
@ -175,8 +174,9 @@ body.authenticated .ctrl:hover
flex-direction: column;
padding: 10px 5px;
}
#location
#c2c3
{
display: flex;
}
#c2
{
@ -204,14 +204,29 @@ body.authenticated .ctrl:hover
padding: 20px 0 0 5px;
container-type: inline-size;
}
@media (max-width: 1200px)
{
#c2c3
{
flex-direction: column;
}
#c3
{
padding-left: 15px;
}
}
@media (max-width: 800px)
{
#main-container
{
flex-direction: column;
}
}
#radio-and-antenna
{
display: flex;
flex-direction: column;
}
#mesh-summary
{
}
#tunnels
{
display: flex;