From 9f702f5d1460ebdc35a5b271c9f4e0a5c3b90692 Mon Sep 17 00:00:00 2001 From: Jakob Ketterl Date: Sat, 16 Jan 2021 17:34:17 +0100 Subject: [PATCH] let's try to make the header somewhat responsive --- htdocs/css/openwebrx-header.css | 38 ++++++++++++++++++++++++++++++++- htdocs/map.html | 3 +++ 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/htdocs/css/openwebrx-header.css b/htdocs/css/openwebrx-header.css index c110f9c..f28b52e 100644 --- a/htdocs/css/openwebrx-header.css +++ b/htdocs/css/openwebrx-header.css @@ -57,6 +57,8 @@ #webrx-top-logo { padding: 12px; + /* overwritten by media queries */ + display: none; } #webrx-rx-avatar { @@ -72,11 +74,15 @@ } #webrx-rx-texts { + /* minimum layout width */ + width: 0; + /* will be getting wider with flex */ flex: 1; - padding: 10px; + overflow: hidden; } #webrx-rx-texts div { + margin: 0 10px; padding: 3px; white-space:nowrap; overflow: hidden; @@ -84,6 +90,10 @@ color: #909090; } +#webrx-rx-texts div:first-child { + margin-top: 10px; +} + #webrx-rx-title { font-family: "DejaVu Sans", Verdana, Geneva, sans-serif; font-size: 11pt; @@ -168,6 +178,32 @@ text-shadow: none; } +/* + * Responsive stuff + */ + +@media (min-width: 576px) { + #webrx-rx-texts { + display: initial; + } +} + +@media (min-width: 768px) { +} + +@media (min-width: 992px) { + #webrx-top-logo { + display: initial; + } +} + +@media (min-width: 1200px) { +} + +/* + * Sprites (images) + */ + .sprite-panel-status { background-position: 0 0; width: 44px; diff --git a/htdocs/map.html b/htdocs/map.html index 08e40b4..f93d2e2 100644 --- a/htdocs/map.html +++ b/htdocs/map.html @@ -2,6 +2,9 @@ OpenWebRX Map + + +