View Issue Details

IDProjectCategoryView StatusLast Update
0022131mantisbttimelinepublic2017-01-31 04:02
Reporterdregad Assigned Todregad  
PrioritynormalSeveritytweakReproducibilityalways
Status closedResolutionfixed 
Product Version2.0.0-beta.1 
Target Version2.1.0Fixed in Version2.1.0 
Summary0022131: Remove yellow background in timeline date range
Description

I never liked the yellow background style used for the timeline's date range, it is not used anywhere on the page, and does not look good.

It would be better if the timeline's style was more similar to other boxes shown on the My View page.

TagsNo tags attached.

Activities

dregad

dregad

2017-01-06 18:15

developer   ~0054967

PR https://github.com/mantisbt/mantisbt/pull/985

dregad

dregad

2017-01-24 05:41

developer   ~0055282

Original patch submitted before revising the code based on syncguru's suggestion.

f20-22131-timeline-dates-original.patch (3,418 bytes)   
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

Related Changesets

MantisBT: master 078444f4

2017-01-24 05:37:57

dregad

Details Diff
Change timeline dates background color to grey

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

Fixes 0022031
Affected Issues
0022131
mod - core/timeline_inc.php Diff File