forked from extern/egroupware
Show longer or shorter day of week labels based on screen width
This commit is contained in:
parent
3afbecfbe6
commit
501c8318eb
@ -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
|
||||
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) :
|
||||
jQuery.datepicker.formatDate('DD dd',formatDate);
|
||||
this.title.text(date_string);
|
||||
|
||||
this.title.html('<span class="long_date">'+jQuery.datepicker.formatDate('DD',formatDate)+
|
||||
'</span><span class="short_date">'+jQuery.datepicker.formatDate('D',formatDate)+'</span>'+
|
||||
jQuery.datepicker.formatDate('d',formatDate));
|
||||
}
|
||||
this.title
|
||||
.attr("data-date", new_date);
|
||||
|
@ -399,6 +399,15 @@ Hide subsequent headers in week view with non-consolidated owners
|
||||
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 */
|
||||
.calendar_calDayColHeader .hiddenEventBefore, .calendar_calDayCol .hiddenEventAfter {
|
||||
width: 80%;
|
||||
|
@ -141,7 +141,7 @@ form[id^="tracker-"] .dialogHeadbar {
|
||||
* @package calendar
|
||||
* @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 {
|
||||
#calendar-view.et2_container,
|
||||
@ -537,6 +537,14 @@ Hide subsequent headers in week view with non-consolidated owners
|
||||
white-space: nowrap;
|
||||
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 */
|
||||
.calendar_calDayColHeader .hiddenEventBefore,
|
||||
.calendar_calDayCol .hiddenEventAfter {
|
||||
@ -1263,6 +1271,12 @@ Hide subsequent headers in week view with non-consolidated owners
|
||||
height: 100%;
|
||||
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 */
|
||||
.calendar_cal_year_legend_weekend {
|
||||
background-color: #CCCCCC;
|
||||
@ -2781,3 +2795,17 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
@ -95,4 +95,23 @@
|
||||
vertical-align: top;
|
||||
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;
|
||||
}
|
||||
}
|
@ -11,7 +11,7 @@
|
||||
* @package calendar
|
||||
* @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 {
|
||||
#calendar-view.et2_container,
|
||||
@ -407,6 +407,14 @@ Hide subsequent headers in week view with non-consolidated owners
|
||||
white-space: nowrap;
|
||||
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 */
|
||||
.calendar_calDayColHeader .hiddenEventBefore,
|
||||
.calendar_calDayCol .hiddenEventAfter {
|
||||
|
Loading…
Reference in New Issue
Block a user