CivicIdeas Ideas Show

with voting and commenting functionality

by Pete Fecteau

HTML

<script src="https://buttonpresser.com/CivicIdeas_BS/js/bootstrap.min.js"></script>
<script src="https://buttonpresser.com/CivicIdeas_BS/js/faux-feed.js"></script>
<div class="standard-nav alone navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <div class="nav-collapse" id="main-menu">
                <ul class="nav" id="main-menu-left">
                    <li class="nav-home"><a href="#">Home</a></li>
                    <li class="nav-ideas active"><a href="#">Ideas</a></li>
                    <li class="nav-projects"><a href="#">Projects</a></li>
                    <li class="nav-discussions"><a href="#">Discussions</a></li>
                    <li class="nav-forums"><a href="#">Forums</a></li>
                    <li class="nav-meetings"><a href="#">Meetings</a></li>
                    <li class="nav-surveys"><a href="#">Surveys</a></li>
                </ul>
                <ul class="nav pull-right" id="main-menu-right">
                    <li class="language"><a href="#">Language</a></li>
                    <li>
                        <form class="navbar-search pull-left" action="">
                            <input type="text" class="search-query span2" placeholder="Search"/>
                        </form>
                    </li>
                    <li class="dropdown">
                    <a href="/users/sign_in" id="navbar-login">Login or Register</a>
                    <ul class="dropdown-menu" id="swatch-menu">
                        <li><a href="../default">Log Out</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Edit Profile</a></li>
                        <li><a href="#">My Ideas</a></li>
                        <li><a href="#">My Connections</a></li>
                        <li><a href="#">My Apps</a></li>
                    </ul>
                    </li>
                </ul>
            </div>
        </div>
   ...

SCSS

@import url('https://buttonpresser.com/CivicIdeas_BS/css/bootstrap.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/bootstrap-custom.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-nav.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-hdr.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-sidebar.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-footer.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-comments.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-forum.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-idea.css');
section.idea { padding-bottom: 20px; }
section.idea .body { clear: left; }
.hdr.hdr-idea.on::before { margin-right: 60px; }

JavaScript

$(".hdr.off").live("click", function() {
    var voteBtn = $(this).parent().find('.meta').find('.btn.vote');
    var voteCount = parseInt($(this).data('vote'), 10);
    var newVoteCount = voteCount + 1;	
    $(this).attr('data-vote', newVoteCount);
    $(this).addClass('on');
    $(this).removeClass('off');
    
    $(voteBtn).html('Voted');
    $(voteBtn).addClass('voted');
    $(voteBtn).removeClass('vote');
});
$(".hdr.on").live("click", function() {
    var voteBtn = $(this).parent().find('.meta').find('.btn.voted');
    var voteCount = parseInt($(this).data('vote'), 10);
    var newVoteCount = voteCount - 1;	
    $(this).attr('data-vote', newVoteCount);
    $(this).addClass('off');
    $(this).removeClass('on');
    
    $(voteBtn).html('Vote');
    $(voteBtn).addClass('vote');
    $(voteBtn).removeClass('voted');
});
$(".btn.vote").live("click", function() {
    var hdr = $(this).parent().parent().find('.hdr');
    var followBtn = $(this).parent().find('.btn.follow');
    var voteCount = parseInt(hdr.data('vote'), 10);
    var newVoteCount = voteCount + 1;
    
    $(this).html('Voted');
    $(this).addClass('voted');
    $(this).removeClass('vote');
    
    $(hdr).attr('data-vote', newVoteCount);
    $(hdr).addClass('on');
    $(hdr).removeClass('off');
});
$(".btn.voted").live("click", function() {
    var hdr = $(this).parent().parent().find('.hdr');
    var followBtn = $(this).parent().find('.btn.follow');
    var voteCount = parseInt(hdr.data('vote'), 10);
    var newVoteCount = voteCount - 1;
    
    $(this).html('Vote');
    $(this).addClass('vote');
    $(this).removeClass('voted');
    
    $(hdr).attr('data-vote', newVoteCount);
    $(hdr).addClass('off');
    $(hdr).removeClass('on');
});
$(".btn.follow").live("click", function() {  
    $(this).html('Followed');
    $(this).addClass('followed');
    $(this).removeClass('follow');
});
$(".btn.followed").live("click", function() {  
    $(this).html('Follow');
    $(this).addClass('follow');
   ...