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
This commit is contained in:
Nathan Gray 2016-04-26 22:58:35 +00:00
parent 42ac5b8a08
commit b3f4b60ccf
4 changed files with 210 additions and 120 deletions

View File

@ -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;}
#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;
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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;