holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile theme W.I.P.:

Browse Source 
- Fix mail listview
- Add some styling for plus button and fix nm header's buttons
This commit is contained in:
Hadi Nategh 2015-12-17 12:44:14 +00:00
parent d9f3abf6de
commit 328738ab29
5 changed files with 132 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
mail/templates/default/app.css
View File

@ -831,39 +831,7 @@ blockquote blockquote blockquote blockquote blockquote blockquote{
/* MOBILE and tablets (Portrait & Landscape) View --------------*/ /* MOBILE and tablets (Portrait & Landscape) View --------------*/
@media only screen and (max-device-width:1024px) { @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) ----------- */ /* tablets and smartphones (portrait) ----------- */
@media only screen @media only screen

84
mail/templates/pixelegg/app.css
View File

@ -823,45 +823,6 @@ blockquote blockquote blockquote blockquote blockquote blockquote {
} }
} }
/* MOBILE and tablets (Portrait & Landscape) View --------------*/ /* 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) ----------- */ /* tablets and smartphones (portrait) ----------- */
/* Smartphones (landscape) ----------- */ /* Smartphones (landscape) ----------- */
/* Mobile (landscape) Tablet----------- */ /* Mobile (landscape) Tablet----------- */
@ -2628,3 +2589,48 @@ div.mailComposeHeaderSection > table {
-o-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out;
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;
}
}

49
mail/templates/pixelegg/app.less
View File

@ -1736,4 +1736,53 @@ div.mailComposeHeaderSection > table {
-moz-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out;
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;
}
}
}
} }

33
pixelegg/css/mobile.css
View File

@ -7507,6 +7507,18 @@ span.egw_tutorial_title {
left: 0 !important; left: 0 !important;
top: 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 { body .et2_nextmatch .nextmatch_header_row {
background-color: background-color-egw-dark; background-color: background-color-egw-dark;
} }
@ -7560,7 +7572,7 @@ span.egw_tutorial_title {
} }
body .et2_nextmatch .search { body .et2_nextmatch .search {
background: #0c5da5; background: #0c5da5;
border: 1px solid silver; margin-top: 0;
margin-left: 60px; margin-left: 60px;
} }
body .et2_nextmatch .search button { body .et2_nextmatch .search button {
@ -7600,7 +7612,7 @@ span.egw_tutorial_title {
} }
body .et2_nextmatch .search button.nm_toggle_header:after { body .et2_nextmatch .search button.nm_toggle_header:after {
font-size: xx-large; font-size: xx-large;
content: "\2630"; content: "\21E9";
} }
body .et2_nextmatch .search button.nm_action_header { body .et2_nextmatch .search button.nm_action_header {
background-position: center; background-position: center;
@ -7621,7 +7633,7 @@ span.egw_tutorial_title {
font-size: xx-large; font-size: xx-large;
content: "\205D"; content: "\205D";
} }
body .et2_nextmatch .search button.nm_add_button { body .et2_nextmatch .search button.nm_fvorites_button {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right: 5px; margin-right: 5px;
@ -7632,24 +7644,17 @@ span.egw_tutorial_title {
height: 50px; height: 50px;
display: block; display: block;
float: right; 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; outline: none;
} }
body .et2_nextmatch .search button.nm_add_button:after { body .et2_nextmatch .search button.nm_fvorites_button:after {
font-size: xx-large; font-size: xx-large;
content: "+"; content: "\2606";
display: inline-block;
vertical-align: middle;
line-height: 10px;
color: #0c5da5;
font-weight: bold; font-weight: bold;
} }
body .et2_nextmatch .search button.nm_toggle_header_on:after { body .et2_nextmatch .search button.nm_toggle_header_on:after {
content: "\2715"; content: "\21E7";
} }
body .et2_nextmatch .search input { body .et2_nextmatch .search input {
width: 20%; width: 20%;

31
pixelegg/css/mobile.less
View File

@ -1037,6 +1037,18 @@
left:0 !important; left:0 !important;
top: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 { .et2_nextmatch {
.nextmatch_header_row .nextmatch_header_row
{ {
@ -1101,7 +1113,7 @@
} }
.search { .search {
background: @mobile-nm-search-bg; background: @mobile-nm-search-bg;
border: 1px solid silver; margin-top: 0;
margin-left: 60px; margin-left: 60px;
button { button {
height: @mobile-elem-height; height: @mobile-elem-height;
@ -1138,7 +1150,7 @@
} }
&:after{ &:after{
font-size:xx-large; font-size:xx-large;
content:"\2630"; content:"\21E9";
} }
} }
@ -1161,7 +1173,7 @@
content:"\205D"; content:"\205D";
} }
} }
button.nm_add_button { button.nm_fvorites_button {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right:5px; margin-right:5px;
@ -1172,25 +1184,18 @@
height:50px; height:50px;
display:block; display:block;
float:right; float:right;
background: white;
border: 10px solid @mobile-nm-search-bg;
border-radius: 50px;
&:focus{ &:focus{
outline:none; outline:none;
} }
&:after{ &:after{
font-size:xx-large; font-size: xx-large;
content:"+"; content: "\2606";
display: inline-block;
vertical-align: middle;
line-height: 10px;
color:@mobile-nm-search-bg;
font-weight: bold; font-weight: bold;
} }
} }
button.nm_toggle_header_on { button.nm_toggle_header_on {
&:after { &:after {
content:"\2715"; content:"\21E7";
} }
} }
input { input {