MyBB Community Forums

Full Version: TimeLine & Card View reputation page.
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
What you will end up with.

[Image: iandrew.org-i_Andrew.org-_Reputation_Reportfortest.png]

Open Templates > Your theme > Reputation Templates > reputation
Copy & paste this.

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->reputation_report}</title>
{$headerinclude}
<script type="text/javascript">
<!--
var delete_reputation_confirm = "{$lang->delete_reputation_confirm}";
// -->
</script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
</head>
<body>
{$header}
{$add_reputation}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder tfixed clear">
<tr>
<td class="thead"><strong>{$lang->reputation_report}</strong></td>
</tr>
<tr>
<td class="tcat"><strong>{$lang->summary}</strong></td>
</tr>
<tr>
<td class="trow1">

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<span class="largetext"><strong>{$username}</strong></span><br />
<span class="smalltext">
({$usertitle})<br />
<br />
<strong>{$lang->total_reputation}:</strong> <span class="repbox {$total_class}">{$rep_total}</span><br /><br />
<strong>{$lang->reputation_members} {$rep_members}</strong><br />
<strong>{$lang->reputation_posts} {$rep_posts}</strong>
</span> 
</td>
<td align="right">

<img style="margin-top: 1em; margin-right: 1em;position: relative;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); height: 100px; width: 100px;" src="{$mybb->user['avatar']}" alt="{$mybb->user['username']}'s avatar" title="{$mybb->user['username']}'s avatar" />

</td>
</tr>
</table> <br />

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder trow2">
<tr>
<td>&nbsp;</td>
<td><span class="smalltext reputation_positive">{$lang->positive_count}</span></td>
<td><span class="smalltext reputation_neutral">{$lang->neutral_count}</span></td>
<td><span class="smalltext reputation_negative">{$lang->negative_count}</span></td>
</tr>
<tr>
<td><span class="smalltext">{$lang->last_week}</span></td>
<td><span class="smalltext">{$f_positive_week}</span></td>
<td><span class="smalltext">{$f_neutral_week}</span></td>
<td><span class="smalltext">{$f_negative_week}</span></td>
</tr>
<tr>
<td><span class="smalltext">{$lang->last_month}</span></td>
<td><span class="smalltext">{$f_positive_month}</span></td>
<td><span class="smalltext">{$f_neutral_month}</span></td>
<td><span class="smalltext">{$f_negative_month}</span></td>
</tr>
<tr>
<td><span class="smalltext">{$lang->last_6months}</span></td>
<td><span class="smalltext">{$f_positive_6months}</span></td>
<td><span class="smalltext">{$f_neutral_6months}</span></td>
<td><span class="smalltext">{$f_negative_6months}</span></td>
</tr>
<tr>
<td><span class="smalltext">{$lang->all_time}</span></td>
<td><span class="smalltext">{$f_positive_count}</span></td>
<td><span class="smalltext">{$f_neutral_count}</span></td>
<td><span class="smalltext">{$f_negative_count}</span></td>
</tr>
</table> <br />


<div>{$reputation_votes} </div>

    </td>
</tr>
</table>
{$multipage}
{$footer}
</body>
</html>


Open Templates > Your theme > Reputation Templates > reputation_vote
Copy & paste this.

<div class="container">
 <div class="row">
</div>
    <div class="qa-message-list" id="wallmessages">
    <div class="message-item" id="m16">
<div class="message-inner">
<div class="qa-message-content">

<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0">
<tr>
<td valign="middle" width="1">
<img style="position: relative;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); height: 50px; width: 50px;" src="{$mybb->user['avatar']}" alt="{$mybb->user['username']}'s avatar" title="{$mybb->user['username']}'s avatar" />
</td>
<td valign="middle">
<div style="padding:10px;" class="trow1 {$status_class}" id="rid{$reputation_vote['rid']}">
{$report_link}{$delete_link}
{$reputation_vote['username']} <span class="smalltext">{$reputation_vote['user_reputation']} - {$last_updated}<br />{$postrep_given}</span>
<br /><strong class="{$vote_type_class}">{$vote_type} {$vote_reputation}:</strong> {$reputation_vote['comments']}
</div>
</td>
</tr>
</table> 
</div>
</div></div>


</div>
</div>


Add this in Themes > Your theme > Global.css

.message-item {
margin-bottom: 25px;
margin-left: 40px;
position: relative;
}
.message-item .message-inner {
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px;
position: relative;
}
.message-item .message-inner:before {
border-right: 10px solid #ddd;
border-style: solid;
border-width: 10px;
color: rgba(0,0,0,0);
content: "";
display: block;
height: 0;
position: absolute;
left: -20px;
top: 6px;
width: 0;
}
.message-item .message-inner:after {
border-right: 10px solid #fff;
border-style: solid;
border-width: 10px;
color: rgba(0,0,0,0);
content: "";
display: block;
height: 0;
position: absolute;
left: -18px;
top: 6px;
width: 0;
}
.message-item:before {
background: #fff;
border-radius: 2px;
bottom: -30px;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
content: "";
height: 100%;
left: -30px;
position: absolute;
width: 3px;
}
.message-item:after {
background: #fff;
border: 2px solid #ccc;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
content: "";
height: 15px;
left: -36px;
position: absolute;
top: 10px;
width: 15px;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.message-item .message-head {
border-bottom: 1px solid #eee;
margin-bottom: 8px;
padding-bottom: 8px;
}
.message-item .message-head .avatar {
margin-right: 20px;
}
.message-item .message-head .user-detail {
overflow: hidden;
}
.message-item .message-head .user-detail h5 {
font-size: 16px;
font-weight: bold;
margin: 0;
}
.message-item .message-head .post-meta {
float: left;
padding: 0 15px 0 0;
}
.message-item .message-head .post-meta >div {
color: #333;
font-weight: bold;
text-align: right;
}
.post-meta > div {
color: #777;
font-size: 12px;
line-height: 22px;
}
.message-item .message-head .post-meta >div {
color: #333;
font-weight: bold;
text-align: right;
}
.post-meta > div {
color: #777;
font-size: 12px;
line-height: 22px;
}


Note: I am not sure of the correct avatar variable so it shows the avatar of who evers reputation page it is in the top right.

Original time line code from here 
https://bootsnipp.com/snippets/featured/...gle-column
This is very nice, I think cards will make it even more better Smile
Card view reputation page.

[Image: iandrew.org-i_Andrew.org-_Reputation_Rep...test_1.png]

Open Templates > Your theme > Reputation Templates > reputation

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->reputation_report}</title>
{$headerinclude}
<script type="text/javascript">
<!--
	var delete_reputation_confirm = "{$lang->delete_reputation_confirm}";
// -->
</script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
</head>
<body>
{$header}
{$add_reputation}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder tfixed clear">
<tr>
	<td class="thead"><strong>{$lang->reputation_report}</strong></td>
</tr>
<tr>
	<td class="tcat"><strong>{$lang->summary}</strong></td>
</tr>
<tr>
	<td class="trow1">

	<table width="100%" cellspacing="0" cellpadding="0" border="0">
		<tr>
			<td>
			<span class="largetext"><strong>{$username}</strong></span><br />
				<span class="smalltext">
					({$usertitle})<br />
					<br />
					<strong>{$lang->total_reputation}:</strong> <span class="repbox {$total_class}">{$rep_total}</span><br /><br />
					<strong>{$lang->reputation_members} {$rep_members}</strong><br />
					<strong>{$lang->reputation_posts} {$rep_posts}</strong>
				</span>	
			</td>
			<td align="right">
					
			<img style="margin-top: 1em; margin-right: 1em;position: relative;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); height: 100px; width: 100px;" src="{$mybb->user['avatar']}" alt="{$mybb->user['username']}'s avatar" title="{$mybb->user['username']}'s avatar" />
				
			</td>
		</tr>
	</table>		<br />
		
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder trow2">
						<tr>
							<td>&nbsp;</td>
							<td><span class="smalltext reputation_positive">{$lang->positive_count}</span></td>
							<td><span class="smalltext reputation_neutral">{$lang->neutral_count}</span></td>
							<td><span class="smalltext reputation_negative">{$lang->negative_count}</span></td>
						</tr>
						<tr>
							<td><span class="smalltext">{$lang->last_week}</span></td>
							<td><span class="smalltext">{$f_positive_week}</span></td>
							<td><span class="smalltext">{$f_neutral_week}</span></td>
							<td><span class="smalltext">{$f_negative_week}</span></td>
						</tr>
						<tr>
							<td><span class="smalltext">{$lang->last_month}</span></td>
							<td><span class="smalltext">{$f_positive_month}</span></td>
							<td><span class="smalltext">{$f_neutral_month}</span></td>
							<td><span class="smalltext">{$f_negative_month}</span></td>
						</tr>
						<tr>
							<td><span class="smalltext">{$lang->last_6months}</span></td>
							<td><span class="smalltext">{$f_positive_6months}</span></td>
							<td><span class="smalltext">{$f_neutral_6months}</span></td>
							<td><span class="smalltext">{$f_negative_6months}</span></td>
						</tr>
						<tr>
							<td><span class="smalltext">{$lang->all_time}</span></td>
							<td><span class="smalltext">{$f_positive_count}</span></td>
							<td><span class="smalltext">{$f_neutral_count}</span></td>
							<td><span class="smalltext">{$f_negative_count}</span></td>
						</tr>
					</table> <br />
		
		
<div>{$reputation_votes} </div>
		
    </td>
</tr>
</table>
{$multipage}
{$footer}
</body>
</html>


Open Templates > Your theme > Reputation Templates > reputation_vote

<div align="center" class="repcard">
	
<div class="memberlist_avatar"><img style="position: relative;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2); height: 50px; width: 50px;" src="{$mybb->user['avatar']}" alt="{$mybb->user['username']}'s avatar" title="{$mybb->user['username']}'s avatar" /></div>	
	
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0">
<tr>
<td valign="middle">
<div style="padding:10px;" class="trow1 {$status_class}" id="rid{$reputation_vote['rid']}">
{$reputation_vote['username']} <span class="smalltext">{$reputation_vote['user_reputation']} - {$last_updated}<br />{$postrep_given}</span>
<br /><strong class="{$vote_type_class}">{$vote_type} {$vote_reputation}:</strong> {$reputation_vote['comments']}
</div>
</td>
</tr>
</table> 
	
<div align="center">		
{$report_link}{$delete_link}
</div>	

</div>


Open Templates > Your theme > Reputation Templates > reputation_vote_delete

<span class="postbit_buttons">
			<a href="reputation.php?action=delete&amp;uid={$reputation_vote['rated_uid']}&amp;rid={$reputation_vote['rid']}&amp;my_post_key={$mybb->post_code}" onclick="MyBB.deleteReputation({$reputation_vote['rated_uid']}, {$reputation_vote['rid']}); return false;" class="postbit_qdelete"><span>{$lang->delete_vote}</span></a>
</span>


Open Templates > Your theme > Reputation Templates > reputation_vote_report

<span class="postbit_buttons">
			<a href="javascript:void(0)" onclick="Report.reportReputation({$reputation_vote['rid']}); return false;" class="postbit_report"><span>{$lang->report_vote}</span></a>
</span>


Open Themes > Your theme > Global.css

.repcard {
	background: #fff;
	width: 32%;
	color: #ccc;
	display: inline-table;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: .2rem;
	height: 6rem;
	float: center;
	text-align: center;
	margin: 0.3rem;
	margin: 5px;
	min-height: 200px;
}
Card View makes it so so cooler Smile
Awesome iAndrew.
This is really nice, thanks for this!