joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

let's try to make the header somewhat responsive

Browse Source
This commit is contained in:
Jakob Ketterl 2021-01-16 17:34:17 +01:00
parent 992a5c33a2
commit 9f702f5d14
2 changed files with 40 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
htdocs/css/openwebrx-header.css
View File

@ -57,6 +57,8 @@
#webrx-top-logo { #webrx-top-logo {
padding: 12px; padding: 12px;
/* overwritten by media queries */
display: none;
} }
#webrx-rx-avatar { #webrx-rx-avatar {
@ -72,11 +74,15 @@
} }
#webrx-rx-texts { #webrx-rx-texts {
/* minimum layout width */
width: 0;
/* will be getting wider with flex */
flex: 1; flex: 1;
padding: 10px; overflow: hidden;
} }
#webrx-rx-texts div { #webrx-rx-texts div {
margin: 0 10px;
padding: 3px; padding: 3px;
white-space:nowrap; white-space:nowrap;
overflow: hidden; overflow: hidden;
@ -84,6 +90,10 @@
color: #909090; color: #909090;
} }
#webrx-rx-texts div:first-child {
margin-top: 10px;
}
#webrx-rx-title { #webrx-rx-title {
font-family: "DejaVu Sans", Verdana, Geneva, sans-serif; font-family: "DejaVu Sans", Verdana, Geneva, sans-serif;
font-size: 11pt; font-size: 11pt;
@ -168,6 +178,32 @@
text-shadow: none; 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 { .sprite-panel-status {
background-position: 0 0; background-position: 0 0;
width: 44px; width: 44px;

3
htdocs/map.html
View File

@ -2,6 +2,9 @@
<html> <html>
<head> <head>
<title>OpenWebRX Map</title> <title>OpenWebRX Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#222" />
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" />
<script src="compiled/map.js"></script> <script src="compiled/map.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>