From 501c8318eb2fa9070e94c74c673924173046e8fd Mon Sep 17 00:00:00 2001 From: Nathan Gray Date: Mon, 4 Apr 2016 17:55:49 +0000 Subject: [PATCH] Show longer or shorter day of week labels based on screen width --- calendar/js/et2_widget_daycol.js | 8 ++++---- calendar/templates/default/app.css | 9 +++++++++ calendar/templates/mobile/app.css | 30 ++++++++++++++++++++++++++++- calendar/templates/mobile/app.less | 19 ++++++++++++++++++ calendar/templates/pixelegg/app.css | 10 +++++++++- 5 files changed, 70 insertions(+), 6 deletions(-) diff --git a/calendar/js/et2_widget_daycol.js b/calendar/js/et2_widget_daycol.js index 80682e5d5b..9147343d59 100644 --- a/calendar/js/et2_widget_daycol.js +++ b/calendar/js/et2_widget_daycol.js @@ -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(''+jQuery.datepicker.formatDate('DD',formatDate)+ + ''+jQuery.datepicker.formatDate('D',formatDate)+''+ + jQuery.datepicker.formatDate('d',formatDate)); } this.title .attr("data-date", new_date); diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index 9512ee9bca..e4637f7c65 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -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%; diff --git a/calendar/templates/mobile/app.css b/calendar/templates/mobile/app.css index 83ee6d669c..536c121cac 100644 --- a/calendar/templates/mobile/app.css +++ b/calendar/templates/mobile/app.css @@ -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; + } +} diff --git a/calendar/templates/mobile/app.less b/calendar/templates/mobile/app.less index 06db35c792..6491cf38f7 100644 --- a/calendar/templates/mobile/app.less +++ b/calendar/templates/mobile/app.less @@ -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; + } } \ No newline at end of file diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index c943b27e3b..412fc720aa 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -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 {