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

Add some more CSS cases for checking how many days are shown so we show the largest label possible for the available screen width

Browse Source
This commit is contained in:
Nathan Gray 2016-04-06 16:50:09 +00:00
parent aca15a2a97
commit daff3584b0
2 changed files with 90 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
calendar/templates/mobile/app.css
View File

@ -141,7 +141,7 @@ form[id^="tracker-"] .dialogHeadbar {
* @package calendar * @package calendar
* @version $Id$ * @version $Id$
*/ */
/* $Id: app.css 55613 2016-04-04 16:38:23Z nathangray $ */ /* $Id: app.css 55614 2016-04-04 17:55:49Z nathangray $ */
/*Media print classes*/ /*Media print classes*/
@media print { @media print {
#calendar-view.et2_container, #calendar-view.et2_container,
@ -714,7 +714,8 @@ Hide subsequent headers in week view with non-consolidated owners
#calendar-view_view tbody.ui-sortable .calendar_calGridHeader { #calendar-view_view tbody.ui-sortable .calendar_calGridHeader {
cursor: ns-resize; cursor: ns-resize;
} }
#calendar-view_view tbody.ui-sortable-disabled .calendar_calGridHeader { #calendar-view_view tbody.ui-sortable-disabled .calendar_calGridHeader,
#calendar-view_view tbody.ui-sortable-disabled .calendar_calGridHeader label {
cursor: pointer; cursor: pointer;
} }
/* contains (multiple) events's /* contains (multiple) events's
@ -2795,11 +2796,33 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
width: 100%; width: 100%;
} }
} }
@media all and (max-width: 1024px) { /* Use media queries and day counts to toggle full days & abbreviations in day labels
Width breakpoints in media queries chosen somewhat arbitrarily, looking at 'Wednesday'
to see if it still fits.
*/
@media all and (max-width: 1000px) and (min-width: 481px) {
.calendar_calDayColHeader > div[data-date] .long_date { .calendar_calDayColHeader > div[data-date] .long_date {
display: none; display: inline;
} }
.calendar_calDayColHeader > div[data-date] .short_date { .calendar_calDayColHeader > div[data-date] .short_date {
display: none;
}
.calendar_calDayColHeader:first-child:nth-last-child(7) > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(7) ~ .calendar_calDayColHeader > div[data-date] .short_date {
display: inline;
}
.calendar_calDayColHeader:first-child:nth-last-child(7) > div[data-date] .long_date,
.calendar_calDayColHeader:first-child:nth-last-child(7) ~ .calendar_calDayColHeader > div[data-date] .long_date {
display: none;
}
}
@media all and (max-width: 580px) {
.calendar_calDayColHeader:first-child:nth-last-child(5) > div[data-date] .long_date,
.calendar_calDayColHeader:first-child:nth-last-child(5) ~ .calendar_calDayColHeader > div[data-date] .long_date {
display: none;
}
.calendar_calDayColHeader:first-child:nth-last-child(5) > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(5) ~ .calendar_calDayColHeader > div[data-date] .short_date {
display: inline; display: inline;
} }
} }
@ -2808,4 +2831,18 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
.calendar_calDayColHeader > div[data-date] .short_date { .calendar_calDayColHeader > div[data-date] .short_date {
display: none; display: none;
} }
.calendar_calDayColHeader:first-child:nth-last-child(3) > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(3) ~ .calendar_calDayColHeader > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(4) > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(4) ~ .calendar_calDayColHeader > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(5) > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(5) ~ .calendar_calDayColHeader > div[data-date] .short_date {
display: inline;
}
.calendar_calDayColHeader:first-child:nth-last-child(1) > div[data-date] .long_date,
.calendar_calDayColHeader:first-child:nth-last-child(1) ~ .calendar_calDayColHeader > div[data-date] .long_date,
.calendar_calDayColHeader:first-child:nth-last-child(2) > div[data-date] .long_date,
.calendar_calDayColHeader:first-child:nth-last-child(2) ~ .calendar_calDayColHeader > div[data-date] .long_date {
display: inline;
}
} }

52
calendar/templates/mobile/app.less
View File

@ -96,13 +96,41 @@
width: 100%; width: 100%;
} }
} }
@media all and (max-width: 1024px) {
// styles assigned when width is smaller than 1024px /* Use media queries and day counts to toggle full days & abbreviations in day labels
Width breakpoints in media queries chosen somewhat arbitrarily, looking at 'Wednesday'
to see if it still fits.
*/
@media all and (max-width: 1000px) and (min-width: 481px) {
// styles assigned when width is smaller than 1000px
.calendar_calDayColHeader > div[data-date] .long_date .calendar_calDayColHeader > div[data-date] .long_date
{
display: inline;
}
.calendar_calDayColHeader > div[data-date] .short_date
{ {
display: none; display: none;
} }
.calendar_calDayColHeader > div[data-date] .short_date // 7 day needs short day labels
.calendar_calDayColHeader:first-child:nth-last-child(7) > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(7) ~ .calendar_calDayColHeader > div[data-date] .short_date,
{
display: inline;
}
.calendar_calDayColHeader:first-child:nth-last-child(7) > div[data-date] .long_date,
.calendar_calDayColHeader:first-child:nth-last-child(7) ~ .calendar_calDayColHeader > div[data-date] .long_date,
{
display: none;
}
}
@media all and (max-width: 580px) {
.calendar_calDayColHeader:first-child:nth-last-child(5) > div[data-date] .long_date,
.calendar_calDayColHeader:first-child:nth-last-child(5) ~ .calendar_calDayColHeader > div[data-date] .long_date,
{
display:none;
}
.calendar_calDayColHeader:first-child:nth-last-child(5) > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(5) ~ .calendar_calDayColHeader > div[data-date] .short_date,
{ {
display: inline; display: inline;
} }
@ -114,4 +142,22 @@
{ {
display: none; display: none;
} }
// 5 day and less fits short day labels
.calendar_calDayColHeader:first-child:nth-last-child(3) > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(3) ~ .calendar_calDayColHeader > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(4) > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(4) ~ .calendar_calDayColHeader > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(5) > div[data-date] .short_date,
.calendar_calDayColHeader:first-child:nth-last-child(5) ~ .calendar_calDayColHeader > div[data-date] .short_date,
{
display: inline;
}
// 2 day view and less has enough room for full label
.calendar_calDayColHeader:first-child:nth-last-child(1) > div[data-date] .long_date,
.calendar_calDayColHeader:first-child:nth-last-child(1) ~ .calendar_calDayColHeader > div[data-date] .long_date,
.calendar_calDayColHeader:first-child:nth-last-child(2) > div[data-date] .long_date,
.calendar_calDayColHeader:first-child:nth-last-child(2) ~ .calendar_calDayColHeader > div[data-date] .long_date,
{
display:inline;
}
} }