Merge pull request #123 from joker-x/responsive
Responsive improvements
This commit is contained in:
commit
939381cc9d
|
@ -2,6 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- 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="icon" type="image/png" href="favicon/favicon-32x32.png" sizes="32x32">
|
||||
|
|
|
@ -537,3 +537,49 @@ form {
|
|||
.minimal .user-status {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue