From 328738ab290522779aa56a74422d18d14e5dfcc5 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Thu, 17 Dec 2015 12:44:14 +0000 Subject: [PATCH] Mobile theme W.I.P.: - Fix mail listview - Add some styling for plus button and fix nm header's buttons --- mail/templates/default/app.css | 34 +------------ mail/templates/pixelegg/app.css | 84 +++++++++++++++++--------------- mail/templates/pixelegg/app.less | 49 +++++++++++++++++++ pixelegg/css/mobile.css | 33 +++++++------ pixelegg/css/mobile.less | 31 +++++++----- 5 files changed, 132 insertions(+), 99 deletions(-) diff --git a/mail/templates/default/app.css b/mail/templates/default/app.css index a92f37710e..e7ec40981b 100644 --- a/mail/templates/default/app.css +++ b/mail/templates/default/app.css @@ -831,39 +831,7 @@ blockquote blockquote blockquote blockquote blockquote blockquote{ /* MOBILE and tablets (Portrait & Landscape) View --------------*/ @media only screen and (max-device-width:1024px) { - div.mailDisplayContainer{ - margin-top: 30px; - margin-left:0; - height: auto; - } - - #mail-display.et2_container { - min-height: initial; - } - - table.egwGridView_grid tbody td { - padding-top: 8px; - padding-bottom: 8px; - } - table.egwGridView_grid span.et2_date_ro.et2_label { - font-size: 9px; - } - /*Make Font size readable in mobile theme*/ - #mail-compose .mailComposeHeaders span, #mail-compose .mailComposeHeadersSection span, - div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailComposeBody, div.mailPreviewHeaders > *{ - font-size: small !important; - } - .mailDisplayHeaders, .mailDisplayAttachments > * { - font-size: large !important; - } - span.status_img { - background-image: none !important; - padding-left: 3px; - float: right; - } - #mail-index div#mail-index_nm tr.mail td img, span[id^='mail-index_'][id$='attachments]'] { - float: right; - } + } /* tablets and smartphones (portrait) ----------- */ @media only screen diff --git a/mail/templates/pixelegg/app.css b/mail/templates/pixelegg/app.css index a04b8e8800..abaa0289a8 100755 --- a/mail/templates/pixelegg/app.css +++ b/mail/templates/pixelegg/app.css @@ -823,45 +823,6 @@ blockquote blockquote blockquote blockquote blockquote blockquote { } } /* MOBILE and tablets (Portrait & Landscape) View --------------*/ -@media only screen and (max-device-width: 1024px) { - div.mailDisplayContainer { - margin-top: 30px; - margin-left: 0; - height: auto; - } - #mail-display.et2_container { - min-height: initial; - } - table.egwGridView_grid tbody td { - padding-top: 8px; - padding-bottom: 8px; - } - table.egwGridView_grid span.et2_date_ro.et2_label { - font-size: 9px; - } - /*Make Font size readable in mobile theme*/ - #mail-compose .mailComposeHeaders span, - #mail-compose .mailComposeHeadersSection span, - div.mailDisplayHeaders > span:first-child, - div.mailComposeHeaders > span:first-child, - div.mailComposeBody, - div.mailPreviewHeaders > * { - font-size: small !important; - } - .mailDisplayHeaders, - .mailDisplayAttachments > * { - font-size: large !important; - } - span.status_img { - background-image: none !important; - padding-left: 3px; - float: right; - } - #mail-index div#mail-index_nm tr.mail td img, - span[id^='mail-index_'][id$='attachments]'] { - float: right; - } -} /* tablets and smartphones (portrait) ----------- */ /* Smartphones (landscape) ----------- */ /* Mobile (landscape) Tablet----------- */ @@ -2628,3 +2589,48 @@ div.mailComposeHeaderSection > table { -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } +/* tablets and smartphones */ +@media only screen and (max-device-width: 1024px) { + div.mailDisplayContainer { + margin-top: 30px; + margin-left: 0; + height: auto; + } + #mail-display.et2_container { + min-height: initial; + } + /*Make Font size readable in mobile theme*/ + #mail-compose .mailComposeHeaders span, + #mail-compose .mailComposeHeadersSection span, + div.mailDisplayHeaders > span:first-child, + div.mailComposeHeaders > span:first-child, + div.mailComposeBody, + div.mailPreviewHeaders > * { + font-size: small !important; + } + .mailDisplayHeaders, + .mailDisplayAttachments > * { + font-size: large !important; + } + #mail-index table.egwGridView_outer tbody span.et2_date_ro.et2_label { + font-size: 9px; + } + #mail-index table.egwGridView_outer tbody td { + padding-top: 8px; + padding-bottom: 8px; + } + #mail-index table.egwGridView_outer tbody td span[id^='mail-index_'][id$='attachments]'] { + float: right; + } + #mail-index table.egwGridView_outer tbody td span[id^='mail-index_'][id$='subject]'] { + font-weight: bold; + } + #mail-index table.egwGridView_outer tbody tr { + height: 55px; + } + #mail-index table.egwGridView_outer tbody span.status_img { + background-image: none !important; + padding-left: 3px; + float: right; + } +} diff --git a/mail/templates/pixelegg/app.less b/mail/templates/pixelegg/app.less index 4dd3938d44..2027fa0de6 100755 --- a/mail/templates/pixelegg/app.less +++ b/mail/templates/pixelegg/app.less @@ -1736,4 +1736,53 @@ div.mailComposeHeaderSection > table { -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; +} + +/* tablets and smartphones */ +@media only screen and (max-device-width:1024px) { + div.mailDisplayContainer{ + margin-top: 30px; + margin-left:0; + height: auto; + } + + #mail-display.et2_container { + min-height: initial; + } + + + /*Make Font size readable in mobile theme*/ + #mail-compose .mailComposeHeaders span, #mail-compose .mailComposeHeadersSection span, + div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailComposeBody, div.mailPreviewHeaders > *{ + font-size: small !important; + } + .mailDisplayHeaders, .mailDisplayAttachments > * { + font-size: large !important; + } + + #mail-index { + table.egwGridView_outer tbody { + span.et2_date_ro.et2_label { + font-size: 9px; + } + td { + padding-top: 8px; + padding-bottom: 8px; + span[id^='mail-index_'][id$='attachments]'] { + float: right; + } + span[id^='mail-index_'][id$='subject]'] { + font-weight: bold; + } + } + tr{ + height:55px; + } + span.status_img { + background-image: none !important; + padding-left: 3px; + float: right; + } + } + } } \ No newline at end of file diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 35e8e7098c..aa5ca935ae 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -7507,6 +7507,18 @@ span.egw_tutorial_title { left: 0 !important; top: 0 !important; } + body button.plus_button { + position: absolute !important; + bottom: 30px !important; + right: 30px !important; + z-index: 1000 !important; + border: 1px solid white !important; + border-radius: 50% !important; + display: inline !important; + width: 60px !important; + height: 60px !important; + background-image: none !important; + } body .et2_nextmatch .nextmatch_header_row { background-color: background-color-egw-dark; } @@ -7560,7 +7572,7 @@ span.egw_tutorial_title { } body .et2_nextmatch .search { background: #0c5da5; - border: 1px solid silver; + margin-top: 0; margin-left: 60px; } body .et2_nextmatch .search button { @@ -7600,7 +7612,7 @@ span.egw_tutorial_title { } body .et2_nextmatch .search button.nm_toggle_header:after { font-size: xx-large; - content: "\2630"; + content: "\21E9"; } body .et2_nextmatch .search button.nm_action_header { background-position: center; @@ -7621,7 +7633,7 @@ span.egw_tutorial_title { font-size: xx-large; content: "\205D"; } - body .et2_nextmatch .search button.nm_add_button { + body .et2_nextmatch .search button.nm_fvorites_button { background-position: center; background-repeat: no-repeat; margin-right: 5px; @@ -7632,24 +7644,17 @@ span.egw_tutorial_title { height: 50px; display: block; float: right; - background: white; - border: 10px solid #0c5da5; - border-radius: 50px; } - body .et2_nextmatch .search button.nm_add_button:focus { + body .et2_nextmatch .search button.nm_fvorites_button:focus { outline: none; } - body .et2_nextmatch .search button.nm_add_button:after { + body .et2_nextmatch .search button.nm_fvorites_button:after { font-size: xx-large; - content: "+"; - display: inline-block; - vertical-align: middle; - line-height: 10px; - color: #0c5da5; + content: "\2606"; font-weight: bold; } body .et2_nextmatch .search button.nm_toggle_header_on:after { - content: "\2715"; + content: "\21E7"; } body .et2_nextmatch .search input { width: 20%; diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less index bbd11951f2..676159bf99 100644 --- a/pixelegg/css/mobile.less +++ b/pixelegg/css/mobile.less @@ -1037,6 +1037,18 @@ left:0 !important; top:0 !important; } + button.plus_button { + position: absolute !important; + bottom: 30px !important; + right: 30px !important; + z-index: 1000 !important; + border: 1px solid white !important; + border-radius: 50% !important; + display: inline !important; + width: 60px !important; + height: 60px !important; + background-image: none !important; + } .et2_nextmatch { .nextmatch_header_row { @@ -1101,7 +1113,7 @@ } .search { background: @mobile-nm-search-bg; - border: 1px solid silver; + margin-top: 0; margin-left: 60px; button { height: @mobile-elem-height; @@ -1138,7 +1150,7 @@ } &:after{ font-size:xx-large; - content:"\2630"; + content:"\21E9"; } } @@ -1161,7 +1173,7 @@ content:"\205D"; } } - button.nm_add_button { + button.nm_fvorites_button { background-position: center; background-repeat: no-repeat; margin-right:5px; @@ -1172,25 +1184,18 @@ height:50px; display:block; float:right; - background: white; - border: 10px solid @mobile-nm-search-bg; - border-radius: 50px; &:focus{ outline:none; } &:after{ - font-size:xx-large; - content:"+"; - display: inline-block; - vertical-align: middle; - line-height: 10px; - color:@mobile-nm-search-bg; + font-size: xx-large; + content: "\2606"; font-weight: bold; } } button.nm_toggle_header_on { &:after { - content:"\2715"; + content:"\21E7"; } } input {