mobile: app.css app.less

nathangray 2016-04-06 16:50:09 UTC #1

Author: nathangray
New Revision: 55654

URL: http://svn.stylite.de/viewvc/egroupware?rev=55654&view=rev
Log:
Add some more CSS cases for checking how many days are shown so we show the largest label possible for the available screen width

Modified:
trunk/calendar/templates/mobile/app.css
trunk/calendar/templates/mobile/app.less

Modified: trunk/calendar/templates/mobile/app.css
URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/templates/mobile/app.css?rev=55654&r1=55653&r2=55654&view=diff

— trunk/calendar/templates/mobile/app.css (original)
+++ trunk/calendar/templates/mobile/app.css Wed Apr 6 18:50:09 2016
@@ -141,7 +141,7 @@

@package calendar
@version $Id$
/
-/ $Id: app.css 55613 2016-04-04 16:38:23Z nathangray $ /
+/ $Id: app.css 55614 2016-04-04 17:55:49Z nathangray $ /
/Media print classes/
@media print {
#calendar-view.et2_container,
@@ -714,7 +714,8 @@
#calendar-view_view tbody.ui-sortable .calendar_calGridHeader {
cursor: ns-resize;
}
-#calendar-view_view tbody.ui-sortable-disabled .calendar_calGridHeader {
+#calendar-view_view tbody.ui-sortable-disabled .calendar_calGridHeader,
+#calendar-view_view tbody.ui-sortable-disabled .calendar_calGridHeader label {
cursor: pointer;
}
/ contains (multiple) events’s
@@ -2795,11 +2796,33 @@
width: 100%;
}
}
-@media all and (max-width: 1024px) {
+/* 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 > div[data-date] .short_date {

.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;
}
}
@@ -2808,4 +2831,18 @@
.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=55654&r1=55653&r2=55654&view=diff

— trunk/calendar/templates/mobile/app.less (original)
+++ trunk/calendar/templates/mobile/app.less Wed Apr 6 18:50:09 2016
@@ -96,13 +96,41 @@
width: 100%;
}
}
-@media all and (max-width: 1024px) {

// styles assigned when width is smaller than 1024px

+/* 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;
}

.calendar_calDayColHeader > div[data-date] .short_date

// 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;
}
@@ -114,4 +142,22 @@
{
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;
```
}
}

eGroupWare-cvs mailing list
eGroupWare-cvs@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/egroupware-cvs