Mobile theme W.I.P.:

- Implement template and styling for timesheet's listview
This commit is contained in:
Hadi Nategh 2015-12-07 18:41:19 +00:00
parent 983ec4fad6
commit 163e1fdcc2
3 changed files with 138 additions and 1 deletions

View File

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE overlay PUBLIC "-//Stylite AG//eTemplate 2//EN" "http://www.egroupware.org/etemplate2.dtd">
<!-- $Id$ -->
<overlay>
<template id="timesheet.index.dates" template="" lang="" group="0" version="1.2.001" >
<hbox>
<description value="Start"/>
<date id="startdate"/>
<description value="End"/>
<date statustext="Leave it empty for a full week" id="enddate"/>
</hbox>
</template>
<template id="timesheet.index.add" template="" lang="" group="0" version="1.7.001">
<buttononly label="Add" id="add" onclick="egw.open('timesheet');"/>
</template>
<template id="timesheet.index.rows" template="" lang="" group="0" version="1.9.001">
<grid width="100%">
<columns>
<column width="110"/>
<column width="90%" />
<column width="60"/>
</columns>
<rows>
<row class="th">
</row>
<row class="$row_cont[cat_id] $row_cont[class] timesheetRow">
<vbox>
<date-time id="${row}[ts_start]" readonly="true" options=",8"/>
<menulist class="$cont[ownerClass]">
<menupopup type="select-account" id="${row}[ts_owner]" readonly="true"/>
</menulist>
<menulist class="noWrap">
<menupopup type="select-cat" id="${row}[cat_id]" readonly="true"/>
</menulist>
</vbox>
<vbox>
<description id="${row}[ts_title]" no_lang="1" class="ts_title $row_cont[titleClass]"/>
<description id="${row}[ts_description]" class="ts_description" no_lang="1"/>
<link id="${row}[ts_link]" no_lang="1"/>
</vbox>
<vbox class="timesheet3Col">
<date-duration id="${row}[ts_duration]" readonly="true" options=",h,,,1" align="right"/>
<textbox type="float" id="${row}[ts_quantity]" no_lang="1" readonly="true" precision="3"/>
<textbox type="float" id="${row}[ts_total]" no_lang="1" readonly="true" precision="2"/>
<menulist>
<menupopup id="${row}[ts_status]" readonly="true"/>
</menulist>
</vbox>
</row>
</rows>
</grid>
</template>
<template id="timesheet.index" template="" lang="" group="0" version="1.9.001">
<nextmatch id="nm" options="timesheet.index.rows" header_left="timesheet.index.dates"/>
</template>
</overlay>

View File

@ -183,3 +183,40 @@ tr.dialogOperators td,
#timesheet-edit_pm_id input {
width: 99% !important;
}
/* tablets and smartphones */
@media only screen and (max-device-width: 1024px) {
#timesheet-index table.egwGridView_outer tbody label[id^='timesheet-index'][id$='ts_start]'] > time {
font-weight: bold;
float: left;
}
#timesheet-index table.egwGridView_outer tbody ul[id^='timesheet-index'][id$='ts_owner]'] > li {
overflow: hidden;
width: 90px;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 8pt;
}
#timesheet-index table.egwGridView_outer tbody tr.timesheetRow td {
position: relative;
}
#timesheet-index table.egwGridView_outer tbody span[id^='timesheet-index'][id$='cat_id]'] {
position: absolute;
bottom: 5px;
font-size: 8pt;
}
#timesheet-index table.egwGridView_outer tbody span[id^='timesheet-index'][id$='ts_description]'] {
height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#timesheet-index table.egwGridView_outer tbody div.timesheet3Col {
font-size: 8pt;
}
#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;
}
}

View File

@ -14,6 +14,7 @@
@import (reference) "../../../pixelegg/less/definitions.less";
@import (reference) "../../../pixelegg/less/def_mobile.less";
@import (less) "../default/app.css";
// iframe
@ -151,3 +152,45 @@ span.timesheet_titleDetails {font-weight: bold;}
{
}
//
/* tablets and smartphones */
@media only screen and (max-device-width:1024px) {
#timesheet-index {
table.egwGridView_outer tbody {
label[id^='timesheet-index'][id$='ts_start]'] > time{
font-weight: bold;
float: left;
}
ul[id^='timesheet-index'][id$='ts_owner]'] > li {
overflow: hidden;
width: 90px;
white-space: nowrap;
text-overflow: ellipsis;
.mob-fontsize-s;
}
tr.timesheetRow td {
position: relative;
}
span[id^='timesheet-index'][id$='cat_id]'] {
position: absolute;
bottom: 5px;
.mob-fontsize-s;
}
span[id^='timesheet-index'][id$='ts_description]'] {
height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.timesheet3Col {
.mob-fontsize-s;
}
span[id^='timesheet-index'][id$='ts_duration]'] {
font-weight: bold;
}
label[id^='timesheet-index'][id$='ts_link]'] > span.et2_link {
font-weight: normal;
}
}
}
}