Mobile theme W.I.P:

- Fix fontsize for infolog, timesheet, resources and addressbook
- Migrate mobile specific css classes into mobile theme for resources
This commit is contained in:
Hadi Nategh 2016-03-04 13:27:07 +00:00
parent 0bc507ca7e
commit 34c2ed32b9
11 changed files with 127 additions and 72 deletions

View File

@ -172,13 +172,13 @@ select#addressbook-index_col_filter\[tid\] {
margin-right: 5px;
}
div#addressbook_view_sidebox #addressbook-view_n_fn {
font-size: 14.3px;
font-size: 14px;
font-weight: bold;
padding: 2px 0 2px 0;
width: 85%;
}
div#addressbook_view_sidebox #addressbook-view_org_name {
font-size: 14.3px;
font-size: 14px;
padding: 2px 0 2px 0;
width: 85%;
}

View File

@ -13,7 +13,7 @@
/* tablets and smartphones */
@media all {
#filemanager-index_nm table.egwGridView_outer tbody span[id^='filemanager-index'][id$='size]'] {
font-size: 9pt;
font-size: 10pt;
text-align: right;
}
#filemanager-index_nm table.egwGridView_outer tbody label[id^='filemanager-index'][id$='name]'] {
@ -22,8 +22,15 @@
max-width: 100%;
}
#filemanager-index_nm table.egwGridView_outer tbody label[id^='filemanager-index'][id$='name]'] span {
font-size: 12pt;
white-space: nowrap;
}
#filemanager-index_nm table.egwGridView_outer tbody span[id^='filemanager-index'][id$='comment]'] {
font-size: 10pt;
}
#filemanager-index_nm table.egwGridView_outer tbody label[id^='filemanager-index'][id$='mtime]'] time {
font-size: 10pt;
}
#filemanager-index_nm #filemanager-index_buttons {
position: relative;
display: inline-block;

View File

@ -18,7 +18,7 @@
#filemanager-index_nm {
table.egwGridView_outer tbody {
span[id^='filemanager-index'][id$='size]']{
.mob-fontsize-s;
.mob-fontsize-n;
text-align: right;
}
label[id^='filemanager-index'][id$='name]'] {
@ -26,8 +26,17 @@
text-overflow: ellipsis;
max-width: 100%;
span{
.mob-fontsize-l;
white-space: nowrap;
}
}
span[id^='filemanager-index'][id$='comment]']
{
.mob-fontsize-n;
}
label[id^='filemanager-index'][id$='mtime]'] {
time{
.mob-fontsize-n;
}
}
}

View File

@ -16,7 +16,7 @@
}
div.infoDescRow {
height: 32px;
font-size: 9pt;
font-size: 10pt;
max-width: 99%;
overflow: hidden;
text-overflow: ellipsis;
@ -25,21 +25,21 @@
}
div.infoLinksRow,
div.infoLinksRow ul[id^='infolog-index_'][id$='filelinks]'] {
font-size: 9pt;
font-size: 10pt;
max-width: 99%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap !important;
}
label[id^='infolog-index_'][id$='info_enddate]'] {
font-size: 8pt;
font-size: 10pt;
}
label[id^='infolog-index_'][id$='info_enddate]'] time {
float: none;
font-weight: normal;
}
label[id^='infolog-index_'][id$='info_startdate]'] {
font-size: 8pt;
font-size: 10pt;
}
label[id^='infolog-index_'][id$='info_startdate]'] time {
float: none;
@ -50,7 +50,7 @@
max-height: 15px;
}
ul[id^='infolog-index_'][id$='info_responsible]'] li {
font-size: 9pt;
font-size: 10pt;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
@ -62,13 +62,14 @@
}
.infoSubRow span[id^='infolog-index_'][id$='info_subject]'] {
white-space: nowrap;
font-size: 12pt;
}
label[id^='infolog-index_'][id$='info_link]'] {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
font-size: 9pt;
font-size: 10pt;
font-weight: normal;
}
infolog_rowHasSubs span.arrow,

View File

@ -21,7 +21,7 @@
}
div.infoDescRow {
height:32px;
.mob-fontsize-s;
.mob-fontsize-n;
max-width: 99%;
overflow: hidden;
text-overflow: ellipsis;
@ -29,14 +29,14 @@
padding-top: 8px;
}
div.infoLinksRow, div.infoLinksRow ul[id^='infolog-index_'][id$='filelinks]'] {
.mob-fontsize-s;
.mob-fontsize-n;
max-width: 99%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap !important;
}
label[id^='infolog-index_'][id$='info_enddate]'] {
.mob-fontsize-xs;
.mob-fontsize-n;
time {
float: none;
@ -44,7 +44,7 @@
}
}
label[id^='infolog-index_'][id$='info_startdate]']{
.mob-fontsize-xs;
.mob-fontsize-n;
time {
float: none;
}
@ -54,7 +54,7 @@
white-space:nowrap;
max-height: 15px;
li{
.mob-fontsize-s;
.mob-fontsize-n;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
@ -69,6 +69,7 @@
.infoSubRow {
span[id^='infolog-index_'][id$='info_subject]'] {
white-space: nowrap;
.mob-fontsize-l;
}
}
label[id^='infolog-index_'][id$='info_link]']
@ -77,7 +78,7 @@
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
.mob-fontsize-s;
.mob-fontsize-n;
font-weight: normal;
}
infolog_rowHasSubs span.arrow,

View File

@ -0,0 +1,34 @@
/**
*
* Resources - Mobile
*
* Please do NOT change app.css directly, instead change app.less and compile it!
* Pixleegg Template app.css
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Hadi Nategh <hn@stylite.de>
* @package resources
* @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $
*/
/* tablets and smartphones */
@media all {
#resources-show table.egwGridView_outer tbody img[id^="resources-show_"][id$="picture_thumb]"] {
border: 1px solid silver;
border-radius: 50%;
}
#resources-show table.egwGridView_outer tbody div.resourcesCol2 {
font-size: 10pt;
}
#resources-show table.egwGridView_outer tbody span[id^="resources-show_"][id$="name]"] {
font-weight: bold;
font-size: 12pt;
}
#resources-show table.egwGridView_outer tbody span[id^="resources-show_"][id$="name]"],
#resources-show table.egwGridView_outer tbody span[id^="resources-show_"][id$="short_description]"],
#resources-show table.egwGridView_outer tbody span[id^="resources-show_"][id$="accessory_of_label]"],
#resources-show table.egwGridView_outer tbody span[id^="resources-show_"][id$="accessories]"] {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}

View File

@ -0,0 +1,41 @@
/**
*
* Resources - Mobile
*
* Please do NOT change app.css directly, instead change app.less and compile it!
* Pixleegg Template app.css
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Hadi Nategh <hn@stylite.de>
* @package resources
* @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $
*/
@import (reference) "../../../pixelegg/less/def_buttons.less";
@import (reference) "../../../pixelegg/less/def_mobile.less";
/* tablets and smartphones */
@media all {
#resources-show {
table.egwGridView_outer tbody {
img[id^="resources-show_"][id$="picture_thumb]"]{
border: 1px solid silver;
border-radius: 50%;
}
div.resourcesCol2 {
.mob-fontsize-n;
}
span[id^="resources-show_"][id$="name]"]{
font-weight: bold;
.mob-fontsize-l;
}
span[id^="resources-show_"][id$="name]"],
span[id^="resources-show_"][id$="short_description]"],
span[id^="resources-show_"][id$="accessory_of_label]"],
span[id^="resources-show_"][id$="accessories]"]{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
}

View File

@ -75,24 +75,3 @@ div.resources_pictureFile div.progress {
#resources-edit .et2_container {
width: 848px;
}
/* tablets and smartphones */
@media only screen and (max-device-width: 1024px) {
#resources-show table.egwGridView_outer tbody img[id^="resources-show_"][id$="picture_thumb]"] {
border: 1px solid silver;
border-radius: 50%;
}
#resources-show table.egwGridView_outer tbody div.resourcesCol2 {
font-size: 8pt;
}
#resources-show table.egwGridView_outer tbody span[id^="resources-show_"][id$="name]"] {
font-weight: bold;
}
#resources-show table.egwGridView_outer tbody span[id^="resources-show_"][id$="name]"],
#resources-show table.egwGridView_outer tbody span[id^="resources-show_"][id$="short_description]"],
#resources-show table.egwGridView_outer tbody span[id^="resources-show_"][id$="accessory_of_label]"],
#resources-show table.egwGridView_outer tbody span[id^="resources-show_"][id$="accessories]"] {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}

View File

@ -66,30 +66,3 @@ div.resources_pictureFile div.progress{
}
margin: 0.5em;
}
/* tablets and smartphones */
@media only screen and (max-device-width:1024px) {
#resources-show {
table.egwGridView_outer tbody {
img[id^="resources-show_"][id$="picture_thumb]"]{
border: 1px solid silver;
border-radius: 50%;
}
div.resourcesCol2 {
.mob-fontsize-s;
}
span[id^="resources-show_"][id$="name]"]{
font-weight: bold;
}
span[id^="resources-show_"][id$="name]"],
span[id^="resources-show_"][id$="short_description]"],
span[id^="resources-show_"][id$="accessory_of_label]"],
span[id^="resources-show_"][id$="accessories]"]{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
}

View File

@ -21,7 +21,7 @@
width: 90px;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 9pt;
font-size: 10pt;
}
#timesheet-index table.egwGridView_outer tbody tr.timesheetRow td {
position: relative;
@ -29,22 +29,27 @@
#timesheet-index table.egwGridView_outer tbody span[id^='timesheet-index'][id$='cat_id]'] {
position: absolute;
bottom: 5px;
font-size: 9pt;
font-size: 10pt;
}
#timesheet-index table.egwGridView_outer tbody span[id^='timesheet-index'][id$='ts_description]'] {
height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 10pt;
}
#timesheet-index table.egwGridView_outer tbody span[id^='timesheet-index'][id$='ts_title]'] {
font-size: 12pt;
}
#timesheet-index table.egwGridView_outer tbody div.timesheet3Col {
font-size: 9pt;
font-size: 10pt;
}
#timesheet-index table.egwGridView_outer tbody span[id^='timesheet-index'][id$='ts_duration]'] {
font-weight: bold;
}
#timesheet-index table.egwGridView_outer tbody label[id^='timesheet-index'][id$='ts_link]'] > span.et2_link {
font-weight: normal;
font-size: 10pt;
}
#timesheet-edit_pl_id {
width: 69%;

View File

@ -27,7 +27,7 @@
width: 90px;
white-space: nowrap;
text-overflow: ellipsis;
.mob-fontsize-s;
.mob-fontsize-n;
}
tr.timesheetRow td {
position: relative;
@ -35,22 +35,27 @@
span[id^='timesheet-index'][id$='cat_id]'] {
position: absolute;
bottom: 5px;
.mob-fontsize-s;
.mob-fontsize-n;
}
span[id^='timesheet-index'][id$='ts_description]'] {
height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.mob-fontsize-n;
}
span[id^='timesheet-index'][id$='ts_title]'] {
.mob-fontsize-l;
}
div.timesheet3Col {
.mob-fontsize-s;
.mob-fontsize-n;
}
span[id^='timesheet-index'][id$='ts_duration]'] {
font-weight: bold;
}
label[id^='timesheet-index'][id$='ts_link]'] > span.et2_link {
font-weight: normal;
.mob-fontsize-n;
}
}
}