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

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

@ -42,7 +42,8 @@
{{_R("location")}} {{_R("location")}}
</div> </div>
</div> </div>
<div id="c2"> <div id="c2c3">
<div id="c2">
<div hx-get="u-messages" hx-trigger="every 300s [document.visibilityState === 'visible']"> <div hx-get="u-messages" hx-trigger="every 300s [document.visibilityState === 'visible']">
{% if (messages.haveMessages() || (auth.isAdmin && messages.haveToDos())) { %} {% if (messages.haveMessages() || (auth.isAdmin && messages.haveToDos())) { %}
<div id="messages"> <div id="messages">
@ -63,8 +64,8 @@
</div> </div>
</div> </div>
{{_R("activator", { id: "local-and-neighbor-devices", activate: [ ".noctrl:first-child", ".noctrl:nth-child(2)" ] })}} {{_R("activator", { id: "local-and-neighbor-devices", activate: [ ".noctrl:first-child", ".noctrl:nth-child(2)" ] })}}
</div> </div>
<div id="c3"> <div id="c3">
<div id="radio-and-antenna"> <div id="radio-and-antenna">
{{_R("radio-and-antenna")}} {{_R("radio-and-antenna")}}
</div> </div>
@ -94,6 +95,7 @@
</div> </div>
</div> </div>
{% } %} {% } %}
</div>
</div> </div>
{% } else { %} {% } else { %}
<div id="general"> <div id="general">

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

@ -167,7 +167,6 @@ body.authenticated .ctrl:hover
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 330px; min-width: 330px;
width: 330px;
} }
#general #general
{ {
@ -175,8 +174,9 @@ body.authenticated .ctrl:hover
flex-direction: column; flex-direction: column;
padding: 10px 5px; padding: 10px 5px;
} }
#location #c2c3
{ {
display: flex;
} }
#c2 #c2
{ {
@ -204,14 +204,29 @@ body.authenticated .ctrl:hover
padding: 20px 0 0 5px; padding: 20px 0 0 5px;
container-type: inline-size; 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 #radio-and-antenna
{ {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#mesh-summary
{
}
#tunnels #tunnels
{ {
display: flex; display: flex;