Navigation: Make the time elements a wee bit more beautiful

Automattic · Sep 13, 2012 · a4c4683 · a4c4683
1 parent 2605856
commit a4c4683
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/templates/css/flux.css b/templates/css/flux.css
@@ -15,15 +15,19 @@
 #flux-navigation #flux-time-selectors {
 	position: absolute;
 	top: 0;
+	background-color: rgba(255, 255, 255, 0.6);
+	padding-top: 10px;
+	padding-bottom: 10px;
 }
 
 #flux-navigation #flux-time-selectors .flux-year-selector {
 	float:left;
-	width:85px
+	margin-left: 15px;
 }
 
 #flux-navigation #flux-time-selectors .flux-month-selector {
-	margin-left:80px;
+	margin-left:70px;
+	width: 50px;
 }
 
 #flux-navigation #flux-time-selectors ul {
@@ -35,9 +39,25 @@
 #flux-navigation #flux-time-selectors .flux-year-selector ul li,
 #flux-navigation #flux-time-selectors .flux-month-selector ul li {
 	list-style-type: none;
+	text-align: right;
+	color: rgba(85, 85, 85, .5);
+}
+
+#flux-navigation #flux-time-selectors .flux-year-selector ul li a,
+#flux-navigation #flux-time-selectors .flux-month-selector ul li a {
+	color: #555;
+}
+
+#flux-navigation #flux-time-selectors .flux-year-selector ul li span,
+#flux-navigation #flux-time-selectors .flux-month-selector ul li span {
+	color: rgba(85, 85, 85, 0);
 }
 
 #flux-navigation #flux-time-selectors .flux-year-selector ul li a.flux-year-active,
 #flux-navigation #flux-time-selectors .flux-month-selector ul li a.flux-month-active {
-	font-weight: bold;
+}
+
+#flux-navigation #flux-time-selectors .flux-year-selector ul li a.flux-year-active span,
+#flux-navigation #flux-time-selectors .flux-month-selector ul li a.flux-month-active span {
+	color: rgba(85, 85, 85, 1);
 }
diff --git a/templates/navigation.php b/templates/navigation.php
@@ -12,6 +12,11 @@
 	$year_months[$year] = wp_filter_object_list( $history, array( 'year' => $year ), 'and', 'month' );
 }
 
+$all_months = array();
+for( $i = 12; $i >= 1; $i-- ) {
+	$all_months[] = $i;
+}
+
 ?>
 
 <div id="flux-time-selectors">
@@ -26,7 +31,7 @@
 			if ( $active_year )
 				$classes[] = 'flux-year-active';
 			$classes = apply_filters( 'flux_year_selector_classes', $classes );
-			$year_link = '<a class="' . implode( ' ', $classes ) . '" href="' . get_year_link( $year ) . '">' . $year . '</a>';
+			$year_link = '<a class="' . implode( ' ', $classes ) . '" href="' . get_year_link( $year ) . '">' . $year . ' <span>&bull;</span></a>';
 			echo '<li>' . $year_link . '</li>';
 		} ?>
 
@@ -36,15 +41,18 @@
 <?php foreach( $year_months as $year => $months ): ?>
 <div class="flux-month-selector" id="<?php echo 'flux-month-selector-' . $year; ?>"<?php if ( $current_year != $year ) echo ' style="display:none"'; ?>>
 	<ul>
-		<?php foreach( $months as $month ) {
+		<?php foreach( $all_months as $month ) {
 			$active_month = ( $month == $current_month ) ? true : false;
 			$classes = array(
 					'flux-month',
 					'flux-month-' . $month,
 				);
 			if ( $active_month )
 				$classes[] = 'flux-month-active';
-			$month_link = '<a class="' . implode( ' ', $classes ) . '" href="' . get_month_link( $current_year, $month ) . '">' . $month . '</a>';
+			if ( in_array( $month, $months ) )
+				$month_link = '<a class="' . implode( ' ', $classes ) . '" href="' . get_month_link( $current_year, $month ) . '">' . $month . ' <span>&bull;</span></a>';
+			else
+				$month_link = $month . ' <span>&bull;</span>';
 			echo '<li>' . $month_link . '</li>';
 		} ?>
 	</ul>