Author: nathangray
Date: Wed Apr 27 00:58:35 2016
New Revision: 55869
URL: http://svn.stylite.de/viewvc/egroupware?rev=55869&view=rev
Log:
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
Modified:
trunk/calendar/templates/default/app.css
trunk/calendar/templates/mobile/app.css
trunk/calendar/templates/mobile/app.less
trunk/calendar/templates/pixelegg/app.css
Modified: trunk/calendar/templates/default/app.css
URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/templates/default/app.css?rev=55869&r1=55868&r2=55869&view=diff
==============================================================================
--- trunk/calendar/templates/default/app.css (original)
+++ trunk/calendar/templates/default/app.css Wed Apr 27 00:58:35 2016
@@ -2,9 +2,15 @@
/*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
{
@@ -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 @@
.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 @@
#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;
+ }
+}
Modified: trunk/calendar/templates/mobile/app.css
URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/templates/mobile/app.css?rev=55869&r1=55868&r2=55869&view=diff
==============================================================================
--- trunk/calendar/templates/mobile/app.css (original)
+++ trunk/calendar/templates/mobile/app.css Wed Apr 27 00:58:35 2016
@@ -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 @@
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 @@
.calendar_calDayTodosHeader {
text-align: center;
}
+.calendar_calDayTodosTable tr {
+ page-break-inside: avoid;
+}
.calendar_calDayTodosTable tr td span:first-child {
white-space: nowrap;
}
@@ -1340,6 +1356,56 @@
#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) {
+ .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"] {
@@ -2571,6 +2637,8 @@
#calendar_merge {
margin: 9px 0 0 0;
}
+/* ########################################################################################
+/* * Calendar END */
/* tablets and smartphones */
@media all {
#calendar-toolbar {
@@ -2660,53 +2728,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) {
- .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;
- }
-}
Modified: trunk/calendar/templates/mobile/app.less
URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/templates/mobile/app.less?rev=55869&r1=55868&r2=55869&view=diff
==============================================================================
--- trunk/calendar/templates/mobile/app.less (original)
+++ trunk/calendar/templates/mobile/app.less Wed Apr 27 00:58:35 2016
@@ -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;
- }
-}
Modified: trunk/calendar/templates/pixelegg/app.css
URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/templates/pixelegg/app.css?rev=55869&r1=55868&r2=55869&view=diff
==============================================================================
--- trunk/calendar/templates/pixelegg/app.css (original)
+++ trunk/calendar/templates/pixelegg/app.css Wed Apr 27 00:58:35 2016
@@ -11,15 +11,20 @@
* @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 @@
.calendar_calDayTodosHeader {
text-align: center;
}
+.calendar_calDayTodosTable tr {
+ page-break-inside: avoid;
+}
.calendar_calDayTodosTable tr td span:first-child {
white-space: nowrap;
}
@@ -1333,6 +1343,56 @@
#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) {
+ .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"] {
------------------------------------------------------------------------------
Find and fix application performance issues faster with Applications Manager
Applications Manager provides deep performance insights into multiple tiers of
your business applications. It resolves application problems quickly and
reduces your MTTR. Get your free trial!
https://ad.doubleclick.net/ddm/clk/302982198;130105516;z
lmpx.com only provides a reader for public news (NNTP) servers. It is not
affiliated with the servers or forums shown here and is not responsible for
the content of articles, which is written by their respective authors.