Author: nathangray
New Revision: 55614
URL: http://svn.stylite.de/viewvc/egroupware?rev=55614&view=rev
Log:
Show longer or shorter day of week labels based on screen width
Modified:
trunk/calendar/js/et2_widget_daycol.js
trunk/calendar/templates/default/app.css
trunk/calendar/templates/mobile/app.css
trunk/calendar/templates/mobile/app.less
trunk/calendar/templates/pixelegg/app.css
— trunk/calendar/js/et2_widget_daycol.js (original)
+++ trunk/calendar/js/et2_widget_daycol.js Mon Apr 4 19:55:49 2016
@@ -234,10 +234,10 @@
{
// 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);
— trunk/calendar/templates/default/app.css (original)
+++ trunk/calendar/templates/default/app.css Mon Apr 4 19:55:49 2016
@@ -399,6 +399,15 @@
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%;
— trunk/calendar/templates/mobile/app.css (original)
+++ trunk/calendar/templates/mobile/app.css Mon Apr 4 19:55:49 2016
@@ -141,7 +141,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,
@@ -537,6 +537,14 @@
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 {
@@ -1262,6 +1270,12 @@
.calendar_calEventHeaderSmall {
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 {
@@ -2781,3 +2795,17 @@
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;
- }
+}
— trunk/calendar/templates/mobile/app.less (original)
+++ trunk/calendar/templates/mobile/app.less Mon Apr 4 19:55:49 2016
@@ -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;
- }
}
— trunk/calendar/templates/pixelegg/app.css (original)
+++ trunk/calendar/templates/pixelegg/app.css Mon Apr 4 19:55:49 2016
@@ -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 @@
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 {
eGroupWare-cvs mailing list
eGroupWare-cvs@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/egroupware-cvs
