Display calendar in vertical list layout on mobile screens (#33682).

Patch by Takashi Kato.


git-svn-id: https://svn.redmine.org/redmine/trunk@22283 e93f8b46-1217-0410-a6f0-8f06a7374b81

2 files changed, 86 insertions, 15 deletions

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 7d256832b..e63983706 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -1100,21 +1100,60 @@ vertical-align: bottom;
 }
 
 /***** Calendar *****/
-table.cal {width: 100%; margin: 0 0 6px 0; border: 1px solid #c0c0c0; border-spacing: 0; border-radius: 3px;}
-table.cal thead th {width: 14%; background-color:#EEEEEE; padding: 4px; }
-table.cal thead th.week-number {width: auto;}
-table.cal tbody tr {height: 100px;}
-table.cal td .icon {padding-top: 2px; padding-bottom: 3px;}
-table.cal td {border: 1px solid #d7d7d7; vertical-align: top; font-size: 0.9em; border-bottom: 0; border-right: 0;}
-table.cal td.week-number { background-color:#EEEEEE; padding: 4px; border:none; font-size: 1em;}
-table.cal td p.day-num {font-size: 1.1em; text-align:right;}
-table.cal td.odd p.day-num {color: #bbb;}
-table.cal td.today {background:#ffffdd;}
-table.cal td.today p.day-num {font-weight: bold;}
-table.cal td.nwday:not(.odd) {background-color:#f1f1f1;}
-table.cal .starting a.issue, p.cal.legend .starting {background: url(../images/bullet_go.png) no-repeat -1px -2px; padding-left:16px;}
-table.cal .ending a.issue, p.cal.legend .ending {background: url(../images/bullet_end.png) no-repeat -1px -2px; padding-left:16px;}
-table.cal .starting.ending a.issue, p.cal.legend .starting.ending {background: url(../images/bullet_diamond.png) no-repeat -1px -2px; padding-left:16px;}
+ul.cal {
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 2rem repeat(7, 1fr);
+  margin: 0;
+  border: 1px solid #c0c0c0;
+  border-spacing: 0;
+  border-radius: 3px;
+}
+
+.cal .calhead {
+  background-color:#eee;
+  text-align: center;
+  font-weight: bold;
+  padding: 4px
+}
+
+.cal .week-number {
+  background-color:#eee;
+  border:none;
+  font-size: 1em;
+  padding: 4px;
+  text-align: center;
+}
+
+.cal .week-number .label-week {
+  display: none;
+}
+
+.cal .calbody {
+  border: 1px solid #d7d7d7;
+  vertical-align: top;
+  font-size: 0.9em;
+  border-bottom: 0;
+  border-right: 0;
+  line-height: 1.2;
+  min-height: calc(1.2em * 6);
+  padding: 2px;
+}
+
+.cal .calbody p.day-num {font-size: 1.1em; text-align:right;}
+.cal .calbody .abbr-day {display:none}
+.cal .calbody.odd p.day-num {color: #bbb;}
+.cal .calbody.today {background:#ffd;}
+.cal .calbody.today p.day-num {font-weight: bold;}
+
+.cal .calbody .icon {padding-top: 2px; padding-bottom: 3px;}
+.cal .calbody.nwday:not(.odd) {background-color:#f1f1f1;}
+.cal .starting a.issue, p.cal.legend .starting {background: url(../images/bullet_go.png) no-repeat -1px -2px; padding-left:16px;}
+.cal .ending a.issue, p.cal.legend .ending {background: url(../images/bullet_end.png) no-repeat -1px -2px; padding-left:16px;}
+.cal .starting.ending a.issue, p.cal.legend .starting.ending {background: url(../images/bullet_diamond.png) no-repeat -1px -2px; padding-left:16px;}
+
 p.cal.legend span {display:block;}
 .controller-calendars p.buttons {margin-top: unset;}
 
diff --git a/public/stylesheets/responsive.css b/public/stylesheets/responsive.css
index d6282046d..482f73cf2 100644
--- a/public/stylesheets/responsive.css
+++ b/public/stylesheets/responsive.css
@@ -819,6 +819,38 @@
     margin-left: 0;
     width: 100%;
   }
+
+  /* Calendar */
+  ul.cal {
+    display: block
+  }
+  .cal .calhead {
+    display: none
+  }
+
+  .cal .calbody {
+    min-height: calc(1.2em * 3);
+  }
+
+  .cal .calbody .abbr-day {
+    display: inline;
+  }
+
+  .cal .week-number {
+    border: 1px solid #c0c0c0;
+    text-align: left;
+    font-weight: bold;
+    background-color: #def;
+  }
+
+  .cal .week-number .label-week {
+    display: inline;
+  }
+
+  .cal .calbody p.day-num {
+    font-size: 1.1em;
+    text-align: left;
+  }
 }
 
 @media all and (max-width: 599px) {