web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve the toolbar UI for smaller screens

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

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

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