chris/website-gemompel
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #123 from joker-x/responsive

Browse source 
Responsive improvements
This commit is contained in:
Jonas Herzig 2020-07-21 11:23:45 +02:00 committed by GitHub
parent e74fe04d07 53992a1f59
commit 939381cc9d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/index.html
View file

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon as generated by realfavicongenerator.net (slightly modified for webpack) --> <!-- Favicon as generated by realfavicongenerator.net (slightly modified for webpack) -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="favicon/favicon-32x32.png" sizes="32x32">

46
themes/MetroMumbleLight/main.scss
View file

@ -537,3 +537,49 @@ form {
.minimal .user-status { .minimal .user-status {
height: 19px; height: 19px;
} }
/* Mobile view */
@media only screen and (max-width: 600px) and (min-width: 320px) and (min-height: 600px) {
.toolbar-horizontal ~ .channel-root-container, .toolbar-vertical ~ .channel-root-container {
height:calc(100% - 440px);
position:static;
width:100%;
}
.toolbar-horizontal ~ .chat, .toolbar-vertical ~ .chat {
position:fixed;
bottom: 60px;
left:0;
width:100%;
height:330px;
y-overflow:auto;
font-size:0.8em;
z-index:10;
}
.toolbar-vertical {
flex-direction: row;
height: 36px;
margin-top: 4px;
margin-left: 1%;
padding-left: 5px;
}
#message-box {
margin: 10px 5px 10px 5px;
padding: 10px;
height: 2em;
font-size: 1.2em;
font-weight: bold;
}
.handle-vertical, .handle-horizontal {
display: none;
}
.dialog {
min-width: 350px;
}
}