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

Improve the toolbar UI for smaller screens

This commit is contained in:
yflory 2017-11-17 18:21:45 +01:00
parent fc02f97d78
commit cf26c4c286
2 changed files with 22 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
customize.dist/src/less2/include/toolbar.less
View File

@ -141,7 +141,7 @@
}
}
.addToolbarColors (@color, @bg-color) {
.addToolbarColors (@color, @bg-color, @barWidth: 600px) {
.cp-toolbar-userlist-drawer {
background-color: @bgcolor;
color: @color;
@ -187,6 +187,13 @@
background-color: @bgcolor;
}
}
.cp-toolbar-rightside {
@media screen and (max-width: @barWidth) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
}
}
.cp-toolbar-title-hoverable:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
cursor: text;
@ -231,7 +238,7 @@
&.cp-app-slide {
@bgcolor: @colortheme_slide-bg;
@color: @colortheme_slide-color;
.addToolbarColors(@color, @bgcolor);
.addToolbarColors(@color, @bgcolor, 700px);
}
&.cp-app-poll {
@bgcolor: @colortheme_poll-bg;
@ -275,33 +282,6 @@
}
/* TODO: move to the slide LESS page */
.cp-app-slide {
@media screen and (max-width: @browser_media-medium-screen) {
.cp-toolbar-leftside {
flex-flow: row wrap;
width: 175px;
height: auto;
.cp-toolbar-spinner { order: 0; }
}
.cp-toolbar-rightside {
height: 2*@toolbar_line-height;
}
}
@media screen and (max-width: 320px) {
.cp-toolbar-leftside {
flex-flow: row wrap;
width: 175px;
height: auto;
padding-top: @toolbar_line-height;
.cp-toolbar-spinner { order: 0; }
}
.cp-toolbar-rightside {
height: auto;
}
}
}
.cp-toolbar {
* {
outline-width: 0;
@ -314,6 +294,9 @@
box-sizing: border-box;
padding: 0px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
//background-color: #BBBBFF;
background-color: @colortheme_default-bg;
@ -476,8 +459,9 @@
flex-flow: row;
height: @toolbar_top-height;
position: relative;
width: 100%;
.cp-toolbar-top-filler {
height: 100%;
height: @toolbar_top-height;
display: inline-block;
order: 4;
//flex: 1;
@ -639,7 +623,7 @@
}
}
.cp-toolbar-user {
height: 100%;
height: @toolbar_top-height;
display: inline-flex;
order: 5;
line-height: @toolbar_top-height;
@ -715,9 +699,10 @@
&:empty {
height: 0;
}
float: left;
display: inline-flex;
align-items: center;
max-width: 100%;
flex: 1;
//margin-bottom: -1px;
.cp-toolbar-users {
pre {
@ -760,12 +745,6 @@
height: 0;
}
text-align: right;
/*&> button {
height: 100%;
margin: 0;
border-radius: 0;
padding: 0 10px;
}*/
.cp-toolbar-drawer-content:empty ~ .cp-toolbar-drawer-button {
display: none;
}
@ -813,6 +792,11 @@
.cp-toolbar-spinner {
line-height: @toolbar_line-height;
padding: 0 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 200px;
box-sizing: border-box;
&> span.fa {
height: 20px;
width: 20px;

4
www/pad/app-pad.less
View File

@ -26,10 +26,6 @@
height: 28px;
padding: 2px 0;
}
#cke_1_top .cp-toolbar {
padding: 0;
display: block;
}
.cke_wysiwyg_frame {
min-width: 60%;
}