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

Show longer or shorter day of week labels based on screen width

Browse Source
This commit is contained in:
Nathan Gray 2016-04-04 17:55:49 +00:00
parent 3afbecfbe6
commit 501c8318eb
5 changed files with 70 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
calendar/js/et2_widget_daycol.js
View File

@ -234,10 +234,10 @@ var et2_calendar_daycol = (function(){ "use strict"; return et2_valueWidget.exte
{ {
// Add timezone offset back in, or formatDate will lose those hours // Add timezone offset back in, or formatDate will lose those hours
var formatDate = new Date(this.date.valueOf() + this.date.getTimezoneOffset() * 60 * 1000); var formatDate = new Date(this.date.valueOf() + this.date.getTimezoneOffset() * 60 * 1000);
var date_string = this._parent._children.length === 1 ?
app.calendar.date.long_date(formatDate,false, false, true) : this.title.html('<span class="long_date">'+jQuery.datepicker.formatDate('DD',formatDate)+
jQuery.datepicker.formatDate('DD dd',formatDate); '</span><span class="short_date">'+jQuery.datepicker.formatDate('D',formatDate)+'</span>'+
this.title.text(date_string); jQuery.datepicker.formatDate('d',formatDate));
} }
this.title this.title
.attr("data-date", new_date); .attr("data-date", new_date);

9
calendar/templates/default/app.css
View File

@ -399,6 +399,15 @@ Hide subsequent headers in week view with non-consolidated owners
overflow: hidden; overflow: hidden;
} }
/* Seperate long and short day names */
.calendar_calDayColHeader > div[data-date] .short_date,
.calendar_calDayColHeader > div[data-date] .long_date {
padding-right: 1ex;
}
.calendar_calDayColHeader > div[data-date] .short_date {
display: none;
}
/* Indicators for offscreen events */ /* Indicators for offscreen events */
.calendar_calDayColHeader .hiddenEventBefore, .calendar_calDayCol .hiddenEventAfter { .calendar_calDayColHeader .hiddenEventBefore, .calendar_calDayCol .hiddenEventAfter {
width: 80%; width: 80%;

30
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 55589 2016-03-31 22:58:04Z nathangray $ */ /* $Id: app.css 55613 2016-04-04 16:38:23Z nathangray $ */
/*Media print classes*/ /*Media print classes*/
@media print { @media print {
#calendar-view.et2_container, #calendar-view.et2_container,
@ -537,6 +537,14 @@ Hide subsequent headers in week view with non-consolidated owners
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
/* Seperate long and short day names */
.calendar_calDayColHeader > div[data-date] .short_date,
.calendar_calDayColHeader > div[data-date] .long_date {
padding-right: 1ex;
}
.calendar_calDayColHeader > div[data-date] .short_date {
display: none;
}
/* Indicators for offscreen events */ /* Indicators for offscreen events */
.calendar_calDayColHeader .hiddenEventBefore, .calendar_calDayColHeader .hiddenEventBefore,
.calendar_calDayCol .hiddenEventAfter { .calendar_calDayCol .hiddenEventAfter {
@ -1263,6 +1271,12 @@ Hide subsequent headers in week view with non-consolidated owners
height: 100%; height: 100%;
padding-top: 2px; padding-top: 2px;
} }
.calendar_plannerWidget .calendar_calEventSmall[data-full_day='true'] .calendar_calTimespan {
display: none;
}
.calendar_plannerWidget .calendar_calEventSmall .calendar_calEventTitle {
display: inline;
}
/* Special colors for the year view */ /* Special colors for the year view */
.calendar_cal_year_legend_weekend { .calendar_cal_year_legend_weekend {
background-color: #CCCCCC; background-color: #CCCCCC;
@ -2781,3 +2795,17 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
width: 100%; width: 100%;
} }
} }
@media all and (max-width: 1024px) {
.calendar_calDayColHeader > div[data-date] .long_date {
display: none;
}
.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;
}
}

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

@ -95,4 +95,23 @@
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
} }
}
@media all and (max-width: 1024px) {
// styles assigned when width is smaller than 1024px
.calendar_calDayColHeader > div[data-date] .long_date
{
display: none;
}
.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;
}
} }

10
calendar/templates/pixelegg/app.css
View File

@ -11,7 +11,7 @@
* @package calendar * @package calendar
* @version $Id$ * @version $Id$
*/ */
/* $Id: app.css 55589 2016-03-31 22:58:04Z nathangray $ */ /* $Id: app.css 55613 2016-04-04 16:38:23Z nathangray $ */
/*Media print classes*/ /*Media print classes*/
@media print { @media print {
#calendar-view.et2_container, #calendar-view.et2_container,
@ -407,6 +407,14 @@ Hide subsequent headers in week view with non-consolidated owners
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
/* Seperate long and short day names */
.calendar_calDayColHeader > div[data-date] .short_date,
.calendar_calDayColHeader > div[data-date] .long_date {
padding-right: 1ex;
}
.calendar_calDayColHeader > div[data-date] .short_date {
display: none;
}
/* Indicators for offscreen events */ /* Indicators for offscreen events */
.calendar_calDayColHeader .hiddenEventBefore, .calendar_calDayColHeader .hiddenEventBefore,
.calendar_calDayCol .hiddenEventAfter { .calendar_calDayCol .hiddenEventAfter {