CivicIdeas Discussion Show

The singlediscussion represents a group of topics that have been given context via a description and header image.

by Pete Fecteau

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://buttonpresser.com/CivicIdeas_BS/js/goog_trans.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"><a href="#">Ideas</a></li>
                    <li class="nav-projects"><a href="#">Projects</a></li>
                    <li class="nav-discussions active"><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://twitter.github.com/bootstrap/assets/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/header-discussion.css');

section.discussion {padding:20px 0;}
section.discussion .body {clear:left;}
section.topic {
    float:left;
    width:100%;
    padding:15px 0;
    border-bottom: 1px solid #DEDFE0;
    padding-bottom: 20px;
}
section.topic .meta {
    float:right;
    display:none;
    cursor:default;
    .btn {margin-top:-26px;}
}
section.topic .byline {padding:0 80px 0 30px;cursor:default;}
.pagination {margin-top:20px;}

JavaScript

$('section').hover(function(){$(this).find('.meta').show();},function (){$(this).find('.meta').hide();});