Calendar: modify template to pull month and year out of the <table>.

If users have custom CSS for Calendar, they may need to modify it. Also, although the tundra CSS was specifying a border between the days and the years, it wasn't appearing for some reason (before this change). Thererfore, I removed that line of CSS so there's no border after this change either. Fixes #16210.
dojo · May 2, 2015 · 1ab7cde · 1ab7cde
1 parent 5f7b1cf
commit 1ab7cde
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 46 deletions.
diff --git a/templates/Calendar.html b/templates/Calendar.html
@@ -1,35 +1,30 @@
-<table cellspacing="0" cellpadding="0" class="dijitCalendarContainer" role="grid" aria-labelledby="${id}_mddb ${id}_year" data-dojo-attach-point="gridNode">
-	<thead>
-		<tr class="dijitReset dijitCalendarMonthContainer" valign="top">
-			<th class='dijitReset dijitCalendarArrow' data-dojo-attach-point="decrementMonth" scope="col">
-				<span class="dijitInline dijitCalendarIncrementControl dijitCalendarDecrease" role="presentation"></span>
-				<span data-dojo-attach-point="decreaseArrowNode" class="dijitA11ySideArrow">-</span>
-			</th>
-			<th class='dijitReset' colspan="5" scope="col">
-				<div data-dojo-attach-point="monthNode">
-				</div>
-			</th>
-			<th class='dijitReset dijitCalendarArrow' scope="col" data-dojo-attach-point="incrementMonth">
-				<span class="dijitInline dijitCalendarIncrementControl dijitCalendarIncrease" role="presentation"></span>
-				<span data-dojo-attach-point="increaseArrowNode" class="dijitA11ySideArrow">+</span>
-			</th>
-		</tr>
-		<tr role="row">
-			${!dayCellsHtml}
-		</tr>
-	</thead>
-	<tbody data-dojo-attach-point="dateRowsNode" data-dojo-attach-event="ondijitclick: _onDayClick" class="dijitReset dijitCalendarBodyContainer">
-			${!dateRowsHtml}
-	</tbody>
-	<tfoot class="dijitReset dijitCalendarYearContainer">
-		<tr>
-			<td class='dijitReset' valign="top" colspan="7" role="presentation">
-				<div class="dijitCalendarYearLabel">
-					<span data-dojo-attach-point="previousYearLabelNode" class="dijitInline dijitCalendarPreviousYear" role="button"></span>
-					<span data-dojo-attach-point="currentYearLabelNode" class="dijitInline dijitCalendarSelectedYear" role="button" id="${id}_year"></span>
-					<span data-dojo-attach-point="nextYearLabelNode" class="dijitInline dijitCalendarNextYear" role="button"></span>
-				</div>
-			</td>
-		</tr>
-	</tfoot>
-</table>
+<div class="dijitCalendarContainer dijitInline" role="presentation">
+	<div class="dijitReset dijitCalendarMonthContainer" role="presentation">
+		<div class='dijitReset dijitCalendarArrow dijitCalendarDecrementArrow' data-dojo-attach-point="decrementMonth">
+			<img src="${_blankGif}" alt="" class="dijitCalendarIncrementControl dijitCalendarDecrease" role="presentation"/>
+			<span data-dojo-attach-point="decreaseArrowNode" class="dijitA11ySideArrow">-</span>
+		</div>
+		<div class='dijitReset dijitCalendarArrow dijitCalendarIncrementArrow' data-dojo-attach-point="incrementMonth">
+			<img src="${_blankGif}" alt="" class="dijitCalendarIncrementControl dijitCalendarIncrease" role="presentation"/>
+			<span data-dojo-attach-point="increaseArrowNode" class="dijitA11ySideArrow">+</span>
+		</div>
+		<div data-dojo-attach-point="monthNode" class="dijitInline"></div>
+	</div>
+	<table cellspacing="0" cellpadding="0" class="dijitCalendarContainer" role="grid" data-dojo-attach-point="gridNode" aria-labelledby="${id}_mddb ${id}_year">
+		<thead>
+			<tr role="row">
+				${!dayCellsHtml}
+			</tr>
+		</thead>
+		<tbody data-dojo-attach-point="dateRowsNode" data-dojo-attach-event="ondijitclick: _onDayClick" class="dijitReset dijitCalendarBodyContainer">
+				${!dateRowsHtml}
+		</tbody>
+	</table>
+	<div class="dijitReset dijitCalendarYearContainer" role="presentation">
+		<div class="dijitCalendarYearLabel">
+			<span data-dojo-attach-point="previousYearLabelNode" class="dijitInline dijitCalendarPreviousYear" role="button"></span>
+			<span data-dojo-attach-point="currentYearLabelNode" class="dijitInline dijitCalendarSelectedYear" role="button" id="${id}_year"></span>
+			<span data-dojo-attach-point="nextYearLabelNode" class="dijitInline dijitCalendarNextYear" role="button"></span>
+		</div>
+	</div>
+</div>
diff --git a/themes/claro/Calendar.css b/themes/claro/Calendar.css
@@ -33,7 +33,6 @@
  */
 .claro .dijitCalendar {
   border: solid 1px #b5bcc7;
-  border-collapse: separate;
   -moz-border-radius: 4px;
   border-radius: 4px;
   background-color: #cfe5fa;
@@ -62,6 +61,9 @@
   background-color: #abd6ff;
   border: solid 1px #759dc0;
 }
+.claro .dijitCalendar table {
+  border-collapse: separate;
+}
 .claro .dijitCalendarMonthContainer th {
   text-align: center;
   padding-bottom: 4px;

diff --git a/themes/claro/Calendar.less b/themes/claro/Calendar.less
@@ -36,7 +36,6 @@
 
 .claro .dijitCalendar {
 	border: solid 1px @border-color;
-	border-collapse: separate;	// in case user CSS has set border-collapse: collapse for tables
 	.border-radius(4px);
 
 	// Background color and alpha-gradient
@@ -62,6 +61,9 @@
 	background-color: @hovered-background-color;
 	border:solid 1px @hovered-border-color;
 }
+.claro .dijitCalendar table {
+  border-collapse: separate;	// in case user CSS has set border-collapse: collapse for tables
+}
 .claro .dijitCalendarMonthContainer th {
 	text-align:center;
 	padding-bottom:4px;

diff --git a/themes/dijit.css b/themes/dijit.css
@@ -1170,14 +1170,25 @@ body .dijitAlignClient { position: absolute; }
 
 /* Calendar */
 
-.dijitCalendarContainer {
+.dijitCalendarContainer table {
 	width: auto;	/* in case user has specified a width for the TABLE nodes, see #10553 */
+	clear: both;    /* clear margin created for left/right month arrows; needed on IE10 for CalendarLite */
 }
 .dijitCalendarContainer th, .dijitCalendarContainer td {
 	padding: 0;
 	vertical-align: middle;
 }
 
+.dijitCalendarMonthContainer {
+	text-align: center;
+}
+.dijitCalendarDecrementArrow {
+	float: left;
+}
+.dijitCalendarIncrementArrow {
+	float: right;
+}
+
 .dijitCalendarYearLabel {
     white-space: nowrap;    /* make sure previous, current, and next year appear on same row */
 }

diff --git a/themes/dijit_rtl.css b/themes/dijit_rtl.css
@@ -56,6 +56,14 @@ div.dijitNumberTextBoxRtl {
 
 /* Calendar */
 
+.dijitCalendarRtl .dijitCalendarDecrementArrow {
+	float: right;
+}
+
+.dijitCalendarRtl .dijitCalendarIncrementArrow {
+	float: left;
+}
+
 .dijitCalendarRtl .dijitCalendarNextYear {
 	margin:0 0.55em 0 0;
 }

diff --git a/themes/nihilo/Calendar.css b/themes/nihilo/Calendar.css
@@ -27,11 +27,10 @@
 	font-size: 100%;
 	border-spacing: 0;
 	border-collapse: separate;
-	border: 1px solid #ccc;
 	margin: 0;
 }
 
-.nihilo .dijitCalendarMonthContainer th {
+.nihilo .dijitCalendarMonthContainer {
 	/* month header cell */
 	background:#d3d3d3 url("images/titleBar.png") repeat-x top;
 	padding-top:.3em;

diff --git a/themes/soria/Calendar.css b/themes/soria/Calendar.css
@@ -27,11 +27,10 @@
 	font-size: 100%;
 	border-spacing: 0;
 	border-collapse: separate;
-	border: 1px solid #b1badf;
 	margin: 0;
 }
 
-.soria .dijitCalendarMonthContainer th {
+.soria .dijitCalendarMonthContainer {
 	/* month header cell */
 	background:#bed7f0 url("images/titleBar.png") repeat-x top;
 	padding-top:.3em;

diff --git a/themes/tundra/Calendar.css b/themes/tundra/Calendar.css
@@ -27,18 +27,17 @@
 	font-size: 100%;
 	border-spacing: 0;
 	border-collapse: separate;
-	border: 1px solid #ccc;
 	margin: 0;
 }
 
-.tundra .dijitCalendarMonthContainer th {
+.tundra .dijitCalendarMonthContainer {
 	/* month header cell */
 	background:#d3d3d3 url("images/titleBar.png") repeat-x top;
 	padding-top:.3em;
 	padding-bottom:.2em;
 	text-align:center;
 }
-.dj_ie6 .tundra .dijitCalendarMonthContainer th {
+.dj_ie6 .tundra .dijitCalendarMonthContainer {
 	padding-top:.2em;
 	padding-bottom:.1em;
 }
@@ -112,7 +111,6 @@
 .tundra .dijitCalendarYearContainer {
 	/* footer of the table that contains the year display/selector */
 	background:white url("images/calendarYearLabel.png") repeat-x bottom;
-	border-top:1px solid #ccc;
 }
 
 .tundra .dijitCalendarYearLabel {