dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Better sidebar layout for mobile

This commit is contained in:
yflory 2020-02-06 16:06:09 +01:00
parent 12a45377e7
commit 331054870f
2 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
customize.dist/src/less2/include/sidebar-layout.less
View File

@ -1,6 +1,7 @@
@import (reference) "/customize/src/less2/include/colortheme-all.less";
@import (reference) "/customize/src/less2/include/leftside-menu.less";
@import (reference) "/customize/src/less2/include/buttons.less";
@import (reference) "/customize/src/less2/include/browser.less";
@sidebar_button-width: 400px;
@ -73,6 +74,7 @@
padding: 5px 20px;
color: @rightside-color;
overflow: auto;
padding-bottom: 200px;
// Following rules are only in settings
.cp-sidebarlayout-element {
@ -96,7 +98,7 @@
}
}
margin-bottom: 20px;
.buttons_main();
.buttons_main();
}
[type="text"], [type="password"], button {
vertical-align: middle;
@ -107,6 +109,7 @@
.cp-sidebarlayout-input-block {
display: inline-flex;
width: @sidebar_button-width;
max-width: 100%;
input {
flex: 1;
//border-radius: 0.25em 0 0 0.25em;
@ -118,6 +121,7 @@
//border: 1px solid #adadad;
border-left: 0px;
height: @variables_input-height;
margin: 0 !important;
}
}
&>div {
@ -162,6 +166,21 @@
}
*/
}
@media screen and (max-width: @browser_media-medium-screen) {
flex-flow: column;
overflow: auto;
#cp-sidebarlayout-leftside {
width: 100%;
.cp-sidebarlayout-categories {
.cp-sidebarlayout-category {
margin: 0;
}
}
}
#cp-sidebarlayout-rightside {
overflow: unset;
}
}
}
}

6
www/settings/app-settings.less
View File

@ -121,8 +121,13 @@
border: 1px solid black;
}
.cp-settings-language-selector {
#cp-language-selector {
display: inline;
}
button.btn {
width: @sidebar_button-width;
max-width: 100%;
margin: 0 !important;
background-color: @colortheme_sidebar-button-alt-bg;
border-color: #adadad;
color: black;
@ -149,6 +154,7 @@
.cp-settings-info-block {
[type="text"] {
width: @sidebar_button-width;
max-width: 100%;
}
}