ElkArte Community

This is part of a WIP overhaul for the Elkarte profile page on the Xydre theme, but I wanted to share my code in case anyone else wants to implement a progress bar like this:


Here's the snippet, database code and HTML (The HTML isn't pretty - it's quite fragmented at this point in the function):

/* TODO: Move this to addon */
	$db = database();

	$request = $db->query('', '
		SELECT mg.group_name, mg.min_posts
		FROM {db_prefix}membergroups AS mg
		WHERE mg.min_posts = (
			SELECT MAX(mg.min_posts)
                	FROM {db_prefix}membergroups AS mg
			WHERE mg.min_posts < {raw:min_posts})
		OR mg.min_posts = (
			SELECT MIN(mg.min_posts)
                	FROM {db_prefix}membergroups AS mg
			WHERE mg.min_posts > {raw:min_posts})
		ORDER BY mg.min_posts ASC',
		array(
			'min_posts' => $context['member']['posts'],
		)
	);

	$min_row = $db->fetch_assoc($request);
	$max_row = $db->fetch_assoc($request);

	/*print_r($min_row);
	print_r($max_row);*/

	$percentage_progress = $context['member']['posts'] / ($max_row['min_posts'] - $min_row['min_posts']) * 100;
				
	echo '
			</div>
		</div>
		<div class="row">
			<div class="large-12 columns">
				<div class="panel">
					<div class="clearfix">
						<div class="left text-left">', $min_row['group_name'], '<br />', $min_row['min_posts'], '</div>
						<div class="right text-right">', $max_row['group_name'], '<br />', $max_row['min_posts'], '</div>
					</div>
					<div class="progress">
						<div class="meter" style="width: ', $percentage_progress, '%"></div>
					</div>
				</div>
			</div>';

Very, very nice! :D

idk if this is added but when you hover over the progress bar, it should say the amount of post you currently have. :D

Plus show the needed posts for the next level.  ;)