From 38b0d407481f3be5e132e395d466c94a78156ab4 Mon Sep 17 00:00:00 2001
From: Damien Regad <dregad@mantisbt.org>
Date: Sat, 7 Jan 2017 00:05:17 +0100
Subject: [PATCH] Timeline date range and prev/next buttons in title bar

The original layout with the yellow background for the timeline date
range did not look good.

The new layout is similar to the other My View boxes', with the date
range as well as the Prev/Next buttons moved to the widget's title bar;
this also saves screen real estate.

Unlike other boxes' 'View Issues' button, the Prev/Next buttons are not
hidden on xs width.

This also removes 2 seemingly unnecessary divs, previously under widget
body.

Fixes #22031
---
 core/timeline_inc.php | 57 ++++++++++++++++++++++++++++-----------------------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/core/timeline_inc.php b/core/timeline_inc.php
index 46e18b3..107fd24 100644
--- a/core/timeline_inc.php
+++ b/core/timeline_inc.php
@@ -37,41 +37,46 @@ $t_block_icon = $t_collapse_block ? 'fa-chevron-down' : 'fa-chevron-up';
 	<div class="widget-header widget-header-small">
 		<h4 class="widget-title lighter">
 			<i class="ace-icon fa fa-clock-o"></i>
-			<?php echo lang_get( 'timeline_title' ) ?>
+			<?php
+				echo lang_get( 'timeline_title' );
+
+				# Display date range
+				$t_short_date_format = config_get( 'short_date_format' );
+				echo '<span class="badge"> '
+					. date( $t_short_date_format, $t_start_time )
+					. ' .. '
+					. date( $t_short_date_format, $t_end_time )
+					. ' </span>';
+			?>
 		</h4>
 		<div class="widget-toolbar">
 			<a data-action="collapse" href="#">
 				<i class="1 ace-icon fa <?php echo $t_block_icon ?> bigger-125"></i>
 			</a>
 		</div>
-	</div>
-
-	<div class="widget-body">
-		<div class="widget-toolbox">
-			<div class="btn-toolbar">
+		<div class="widget-toolbar no-border">
+			<div class="widget-menu">
 				<?php
-				$t_short_date_format = config_get( 'short_date_format' );
-				echo '&#160;&#160;';
-				echo '<span class="label label-yellow"> ' . date( $t_short_date_format, $t_start_time ) . ' </span>';
-				echo  ' .. ';
-				echo '<span class="label label-yellow"> ' . date( $t_short_date_format, $t_end_time ) . ' </span>';
-				echo '&#160;&#160;';
-
-				echo '<div class="btn-group">';
-				echo ' <a class="btn btn-primary btn-xs btn-white btn-round" href="my_view_page.php?days=' .
-					( $f_days + 7 ) . '">' . lang_get( 'prev' ) . '</a>';
+					# Display Prev/Next buttons
+					print_small_button(
+						'my_view_page.php?days=' . ( $f_days + 7 ),
+						lang_get( 'prev' )
+					);
 
-				$t_next_days = ( $f_days - 7 ) > 0 ? $f_days - 7 : 0;
-
-				if( $t_next_days != $f_days ) {
-					echo ' <a class="btn btn-primary btn-xs btn-white btn-round" href="my_view_page.php?days=' .
-						$t_next_days . '">' . lang_get( 'next' ) . '</a>';
-				}
-
-			echo '</div></div></div><div class="widget-main no-padding"><div class="profile-feed">';
-
-	echo '</div></div>';
+					$t_next_days = max( $f_days - 7, 0 );
+					if( $t_next_days != $f_days ) {
+						print_small_button(
+							'my_view_page.php?days=' . $t_next_days,
+							lang_get( 'next' )
+						);
+					}
+				?>
+			</div>
+		</div>
+	</div>
 
+	<div class="widget-body">
+<?php
 	if( !$f_all && count( $t_events ) > MAX_EVENTS ) {
 		$t_events = array_slice( $t_events, 0, MAX_EVENTS );
 		timeline_print_events( $t_events );
-- 
1.9.1