From cbf80fb744d618ced1410c45778c2a0b52f3d4b1 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Sat, 23 Sep 2017 12:40:41 +0200 Subject: [PATCH] Rework layout/navigation - list/sidebar footer buttons with text also on mobile - fix UI with screen width = 768px --- skins/elastic/styles/layout.less | 22 --- skins/elastic/styles/widgets/dialogs.less | 18 ++- skins/elastic/styles/widgets/lists.less | 5 + skins/elastic/styles/widgets/toolbar.less | 138 +++++++++++-------- skins/elastic/templates/compose.html | 14 +- skins/elastic/templates/includes/layout.html | 2 + skins/elastic/ui.js | 11 +- 7 files changed, 112 insertions(+), 98 deletions(-) diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less index 62127d14e..238678d0b 100644 --- a/skins/elastic/styles/layout.less +++ b/skins/elastic/styles/layout.less @@ -190,23 +190,6 @@ html.iframe body { } @media screen and (max-width: @screen-width-medium) { - body > #layout > div > .header, - body > #layout > div > .footer { - line-height: @layout-touch-header-height; - height: @layout-touch-header-height; - } - - body > #layout > div:not(.content) > .header { - font-size: @layout-touch-header-font-size; - - a.button:before { - font-size: 1.75rem; - height: @layout-touch-header-height; - margin: 0; - width: 1.4em; - } - } - body > #layout > div.menu { width: @layout-menu-width/2; } @@ -218,16 +201,11 @@ html.iframe body { display: none; } - body > #layout > div > .footer { - font-size: @layout-touch-header-font-size; - } - body > #layout > div.sidebar, body > #layout > div.list { max-width: none; } - body > #layout > div > .footer, body > #layout > div > .header { a.button:before { font-size: 1.75rem; diff --git a/skins/elastic/styles/widgets/dialogs.less b/skins/elastic/styles/widgets/dialogs.less index 4afaa158a..56d7d7391 100644 --- a/skins/elastic/styles/widgets/dialogs.less +++ b/skins/elastic/styles/widgets/dialogs.less @@ -32,7 +32,6 @@ .popover { box-shadow: 3px 3px 5px @color-popover-shadow; - overflow: hidden; padding: 0; & > h3 { @@ -41,12 +40,21 @@ } } +#rcmKSearchpane { + width: auto; + max-width: none; + overflow: hidden; + + li { + padding-right: .5rem; + } +} + html.layout-small, html.layout-phone { .popover { margin: 0 !important; padding: 0; - left: initial !important; right: 0; bottom: 0; width: 276px; @@ -89,6 +97,10 @@ html.layout-phone { } } + .popover:not(#rcmKSearchpane) { + left: initial !important; + } + .popover-overlay { z-index: 1000; opacity: .5; @@ -101,8 +113,8 @@ html.layout-phone { #rcmKSearchpane { bottom: auto; - box-shadow: none; border: 1px solid @color-input-border; + box-shadow: none; } } diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less index 7a2e1c10e..c76a3f620 100644 --- a/skins/elastic/styles/widgets/lists.less +++ b/skins/elastic/styles/widgets/lists.less @@ -244,6 +244,11 @@ html.touch { color: @color-toolbarmenu-hover; background-color: @color-toolbarmenu-hover-background; } + + td { + overflow: hidden; + text-overflow: ellipsis; + } } ul.treelist li { diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less index ad15694b0..8964ec95b 100644 --- a/skins/elastic/styles/widgets/toolbar.less +++ b/skins/elastic/styles/widgets/toolbar.less @@ -12,6 +12,9 @@ /*** Toolbar widget ***/ .toolbar { + margin: 0; + font-size: 1rem; + &.listing a, a { text-decoration: none; @@ -20,14 +23,28 @@ } a.button { - padding: 0 .3em; display: inline-block; border: 0 !important; + height: @layout-header-height; + min-width: 3.5rem; + max-width: 6rem; + padding: .45rem; + text-align: center; + text-overflow: ellipsis; + overflow-x: hidden; + line-height: 1.5; + + &:hover, + &:focus { + outline: 0; + } &:before { &:extend(.font-icon-class); display: inline; float: none; + margin: 0; + line-height: 1.75; } &.reply:before { @@ -156,6 +173,11 @@ } } + &:not(.popupmenu) span.inner { + font-size: 90%; + font-weight: normal; + } + .dropbutton { a.button.dropdown { font-size: 75%; @@ -188,13 +210,10 @@ min-width: 1rem !important; height: @layout-pagenav-height !important; color: @color-list-pagenav; + overflow: hidden; &:before { line-height: 1 !important; - - @media screen and (max-width: (@screen-width-small)) { - line-height: 2 !important; - } } } @@ -216,6 +235,19 @@ display: inline; text-align: center; } + + span.inner { + display: none; + } + } + + &.footer { + a.button:before { + height: 1.75rem; + float: none; + display: block; + width: auto; + } } } @@ -264,8 +296,17 @@ } .popupmenu.toolbar.listing { - a.button:before { - display: inline-block; + a.button { + max-width: 100%; + text-align: left; + line-height: @layout-touch-menu-record-height; + height: @layout-touch-menu-record-height; + + &:before { + display: inline-block; + line-height: inherit; + margin-right: .5rem; + } } .dropbutton { @@ -445,18 +486,27 @@ a.addressbook:before { content: @fa-var-user; } + a.recipient:before { + content: @fa-var-envelope-o; + } } -#layout > .sidebar, -#layout > .list { +#layout > .sidebar > .header, +#layout > .list > .header { span.inner { display: none; } } -.toolbar.content-frame-navigation { - span { - flex-grow: 1; +#layout > .content > * > .toolbar { + text-align: center; +} + +html.touch { + .toolbarmenu.listing td, + .toolbarmenu.listing li, + #layout > :not(.content) > .header a.button { + font-size: 1.2rem; } } @@ -466,36 +516,13 @@ } .toolbar { - margin: 0; - font-size: 1rem; - a.button { - height: @layout-header-height; - min-width: 3.5rem; - max-width: 6rem; - padding: .45rem; - text-align: center; - text-overflow: ellipsis; - overflow-x: hidden; - line-height: 1.5; - - &:before { - margin: 0; - line-height: 1.75; - } - &:not(.disabled):focus, &:not(.disabled):hover { background-color: @color-toolbar-button-background-hover; - outline: 0; } } - a span.inner { - font-size: 90%; - font-weight: normal; - } - &.listing li { display: inline-block; border: 0; @@ -532,42 +559,31 @@ } } - .footer.toolbar { - a.button:before { - height: 1.75rem; - float: none; - display: block; - width: auto; - } - } - - #layout .footer span.inner { - display: inline !important; - } - .toolbar.content-frame-navigation { display: none !important; } - - #layout > .content > .header > .toolbar { - text-align: center; - } } @media screen and (max-width: @screen-width-small) { - .toolbar { - a.button { - padding: 0 .5em; + body > #layout > div > .toolbar.footer { + justify-content: space-around; + + & > * { + flex-grow: 1; } - a.button.texticon { - &:before { - display: none; - } + .listselectors { + display: flex; + justify-content: space-around; + flex-wrap: nowrap; - span.inner { - display: inline !important; + & > * { + flex-grow: 1; } } + + a.button { + max-width: initial + } } } diff --git a/skins/elastic/templates/compose.html b/skins/elastic/templates/compose.html index ce12256b2..8a0976e41 100644 --- a/skins/elastic/templates/compose.html +++ b/skins/elastic/templates/compose.html @@ -20,11 +20,11 @@ @@ -224,10 +224,10 @@

diff --git a/skins/elastic/templates/includes/layout.html b/skins/elastic/templates/includes/layout.html index c50b9e46d..3c56ce08c 100644 --- a/skins/elastic/templates/includes/layout.html +++ b/skins/elastic/templates/includes/layout.html @@ -3,6 +3,8 @@ + + diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index 3727f179e..ee2d259a8 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -658,12 +658,13 @@ function rcube_elastic_ui() } // TODO: Add "message X of Y" text between buttons? - if (!env.frame_nav) { env.frame_nav = $('
') - .append($('