From b3f4b60ccf2f155e5d44c0c1332c33525a5eae3c Mon Sep 17 00:00:00 2001 From: Nathan Gray Date: Tue, 26 Apr 2016 22:58:35 +0000 Subject: [PATCH] Calendar print improvements - Hide todos in single day - Better sizing, weeks should fit on 1 page in either landscape or portrait - Fix bug where all day non-blocking events pushed week too wide - Move screen size dependant day header label shortening to app.css so it can be applied for printing too --- calendar/templates/default/app.css | 81 ++++++++++++++++++- calendar/templates/mobile/app.css | 120 ++++++++++++++++------------ calendar/templates/mobile/app.less | 65 --------------- calendar/templates/pixelegg/app.css | 64 ++++++++++++++- 4 files changed, 210 insertions(+), 120 deletions(-) diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index 6771fc50a0..69661f7be0 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -2,10 +2,16 @@ /*Media print classes*/ @media print{ - #calendar-view.et2_container, #calendar-todo.et2_container, #calendar-planner.et2_container, #calendar-list.et2_container { + #calendar-view.et2_container, #calendar-planner.et2_container, #calendar-list.et2_container { position: static; height: auto !important; } + #calendar-todo.et2_container { + display: none; + } + .calendar_calDayTodos .calendar_calDayTodosTable { + position: relative; + } .calendar_plannerWidget { height: auto !important; @@ -23,8 +29,10 @@ #calendar-view_view > tbody > tr.view_row { page-break-inside: avoid; } + /* Try to keep it on the page */ .calendar_calTimeGrid { max-height: 18cm; + max-width: 90vw; } .calendar_calTimeGrid .calendar_calTimeGridScroll { overflow-y: hidden !important; @@ -960,6 +968,9 @@ Hide subsequent headers in week view with non-consolidated owners .calendar_calDayTodosHeader { text-align: center; } +.calendar_calDayTodosTable tr { + page-break-inside: avoid; +} .calendar_calDayTodosTable tr td span:first-child { white-space: nowrap; } @@ -1358,4 +1369,70 @@ input#calendar-edit_location {padding-left: 0;} #calendar-edit .dialogFooterToolbar {min-width: 800px;} -#calendar_edit_recur_data_chzn {width:99% !important;max-width:99% !important;} \ No newline at end of file +#calendar_edit_recur_data_chzn {width:99% !important;max-width:99% !important;} + + +/* 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 + { + display: inline; + } + .calendar_calDayColHeader > div[data-date] .short_date + { + display: none; + } + // 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; + } +} +@media all and (max-width: 480px) { + // styles assigned when width is smaller than 480px; + .calendar_calDayColHeader > div[data-date] .long_date, + .calendar_calDayColHeader > div[data-date] .short_date + { + 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; + } +} \ No newline at end of file diff --git a/calendar/templates/mobile/app.css b/calendar/templates/mobile/app.css index ea381e482f..6f2f933b22 100644 --- a/calendar/templates/mobile/app.css +++ b/calendar/templates/mobile/app.css @@ -23,7 +23,7 @@ * @package calendar * @version $Id$ */ -/* $Id: app.css 55784 2016-04-20 15:07:01Z nathangray $ */ +/* $Id: app.css 55840 2016-04-25 22:09:57Z nathangray $ */ /*Media print classes*/ @media print { #calendar-view.et2_container, @@ -33,6 +33,12 @@ position: static; height: auto !important; } + #calendar-todo.et2_container { + float: left; + } + .calendar_calDayTodos .calendar_calDayTodosTable { + position: relative; + } .calendar_plannerWidget { height: auto !important; } @@ -49,8 +55,10 @@ #calendar-view_view > tbody > tr.view_row { page-break-inside: avoid; } + /* Try to keep it on the page */ .calendar_calTimeGrid { max-height: 18cm; + max-width: 90vw; } .calendar_calTimeGrid .calendar_calTimeGridScroll { overflow-y: hidden !important; @@ -292,6 +300,11 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget right: 0px; position: absolute; } +.calendar_calTimeGrid .loading::before, +.calendar_plannerWidget .loading::before { + opacity: 1; + background-color: #E6E6E6; +} /* Timegrid that has hit a minimum size */ .calendar_calTimeGridFixed .calendar_calTimeGridScroll { overflow: hidden; @@ -940,6 +953,9 @@ Hide subsequent headers in week view with non-consolidated owners .calendar_calDayTodosHeader { text-align: center; } +.calendar_calDayTodosTable tr { + page-break-inside: avoid; +} .calendar_calDayTodosTable tr td span:first-child { white-space: nowrap; } @@ -1341,6 +1357,56 @@ input#calendar-edit_location { width: 99% !important; max-width: 99% !important; } +/* 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 { + display: inline; + } + .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; + } +} +@media all and (max-width: 480px) { + .calendar_calDayColHeader > div[data-date] .long_date, + .calendar_calDayColHeader > div[data-date] .short_date { + 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; + } +} /*generell*/ .egw_fw_content_browser_iframe img[src$="svg"] { background-color: #828282 !important; @@ -2571,6 +2637,8 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { #calendar_merge { margin: 9px 0 0 0; } +/* ######################################################################################## +/* * Calendar END */ /* tablets and smartphones */ @media all { #calendar-toolbar { @@ -2660,53 +2728,3 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { width: 100%; } } -/* 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 { - display: inline; - } - .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; - } -} -@media all and (max-width: 480px) { - .calendar_calDayColHeader > div[data-date] .long_date, - .calendar_calDayColHeader > div[data-date] .short_date { - 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; - } -} diff --git a/calendar/templates/mobile/app.less b/calendar/templates/mobile/app.less index 634daa4feb..ee4241e425 100644 --- a/calendar/templates/mobile/app.less +++ b/calendar/templates/mobile/app.less @@ -96,68 +96,3 @@ width: 100%; } } - -/* 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 - { - display: inline; - } - .calendar_calDayColHeader > div[data-date] .short_date - { - display: none; - } - // 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; - } -} -@media all and (max-width: 480px) { - // styles assigned when width is smaller than 480px; - .calendar_calDayColHeader > div[data-date] .long_date, - .calendar_calDayColHeader > div[data-date] .short_date - { - 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; - } -} \ No newline at end of file diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index a2ff9a1672..d8f0fef7ac 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -11,16 +11,21 @@ * @package calendar * @version $Id$ */ -/* $Id: app.css 55805 2016-04-21 20:30:48Z nathangray $ */ +/* $Id: app.css 55840 2016-04-25 22:09:57Z nathangray $ */ /*Media print classes*/ @media print { #calendar-view.et2_container, - #calendar-todo.et2_container, #calendar-planner.et2_container, #calendar-list.et2_container { position: static; height: auto !important; } + #calendar-todo.et2_container { + display: none; + } + .calendar_calDayTodos .calendar_calDayTodosTable { + position: relative; + } .calendar_plannerWidget { height: auto !important; } @@ -37,8 +42,10 @@ #calendar-view_view > tbody > tr.view_row { page-break-inside: avoid; } + /* Try to keep it on the page */ .calendar_calTimeGrid { max-height: 18cm; + max-width: 90vw; } .calendar_calTimeGrid .calendar_calTimeGridScroll { overflow-y: hidden !important; @@ -933,6 +940,9 @@ Hide subsequent headers in week view with non-consolidated owners .calendar_calDayTodosHeader { text-align: center; } +.calendar_calDayTodosTable tr { + page-break-inside: avoid; +} .calendar_calDayTodosTable tr td span:first-child { white-space: nowrap; } @@ -1334,6 +1344,56 @@ input#calendar-edit_location { width: 99% !important; max-width: 99% !important; } +/* 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 { + display: inline; + } + .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; + } +} +@media all and (max-width: 480px) { + .calendar_calDayColHeader > div[data-date] .long_date, + .calendar_calDayColHeader > div[data-date] .short_date { + 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; + } +} /*generell*/ .egw_fw_content_browser_iframe img[src$="svg"] { background-color: #828282 !important;