Merge pull request #104 from cfpb/move-featured-challenge

Move featured challenge banner into main content column

Author: Scott Cranfill

idea/static/idea/css/idea.css

@@ -16,7 +16,7 @@
     [class*="span"] {
         border: 0px solid rgba(0,0,0,0);
         margin-left: 2.85715%;
-        margin-right: -3px; // Necessary to get rid of inline whitespace
+        margin-right: -3px; /* Necessary to get rid of inline whitespace */
         padding: 0;
         display: inline-block;
         vertical-align: top;
@@ -91,7 +91,7 @@ textarea.populated {
 
 /* Header */
 .project-header .row {
-    padding: 0 0 1.5em 0;
+    margin-bottom: 1.5em;
 }
 .project-header .row p {
     margin: 0;
@@ -365,19 +365,17 @@ ul.section-nav li.active a {
 }
 
 /* Sidebar */
-.sidebar {
-    //margin-top: 1em;
-}
+
 .sidebar ul {
-    list-style: none;
-    padding-left: 0;
+    list-style-type: square;
+    padding-left: 1.5em;
 }
 .ic-add-tags,
 .sidebar-nav {
     margin-bottom: 2.5em;
 }
-.sidebar .challenge-banner {
-    margin-bottom: 1.25em;
+.challenge-banner {
+    margin: 1.25em 0;
     background-color: #DBEDD4;
     padding: 1.25em;
 }
@@ -389,7 +387,7 @@ ul.section-nav li.active a {
 #date-range {
     margin-top: 20px;
 }
-.sidebar .challenge-banner #challenge-link {
+.challenge-banner #challenge-link {
     margin-top: 1.5em;
     margin-bottom: 0;
 }
@@ -437,7 +435,11 @@ ul.section-nav li.active a {
 }
 .tags .tag {
     display: block;
-    margin: 0 0.5em 0.75em 1em;
+    margin: 0 0.5em 0.75em -0.5em;
+}
+.tags .tag:before {
+    position: relative;
+    left: -0.75em;
 }
 .tags .tag a {
     font-family: "Avenir Next Demi", Arial, sans-serif;
@@ -612,7 +614,7 @@ input.btn-voted:hover {
     background-color: #919395;
     color: #fff;
     cursor: default;
-} 
+}
 
 input.btn-voted:active, input.btn-voted:focus {
     background-color: #75787b;
@@ -799,21 +801,6 @@ input.btn:visited {
     visibility: hidden;
 }
 
-.challenge-info h3 {
-    text-transform: uppercase;
-    font-family: "Avenir Next Demi", Arial, sans-serif;
-    font-size: 16px;
-    letter-spacing: 1px;
-}
-
-.challenge-info h2 {
-    font-weight: normal;
-}
-.challenge-info .challenge-banner {
-    margin-top: 0.5em;
-    background-color: #DBEDD4;
-    padding: 1em;
-}
 .challenge-info {
     border-bottom: 1px solid #000;
     padding: 0;
@@ -830,7 +817,7 @@ section.main-content hr {
     padding: 0;
 }
 
-.idea-votes .btn-vote, 
+.idea-votes .btn-vote,
 .idea-votes .btn-voted,
 .idea-votes .btn-voted:hover,
 .idea-votes .btn-voted:active,
@@ -880,7 +867,7 @@ section.main-content hr {
     display: inline;
 }
 
-// Pagination
+/* Pagination */
 
 .pagination {
     border: solid #75787b;

idea/templates/idea/banner_detail.html

@@ -21,11 +21,11 @@ <h2 class="section">
                 <div class="row challenge-info span9">
                     <div class="challenge-banner">
                         {% if is_current_banner %}
-                            <h3>Current Challenge:</h3>
+                            <h5>Current Challenge:</h5>
                         {% elif banner.is_private == True %}
-                            <h3>Private Room</h3>
+                            <h5>Private Room</h5>
                         {% else %}
-                            <h3>Expired Challenge:</h3>
+                            <h5>Expired Challenge:</h5>
                         {% endif %}
                         <h2>{{banner.title}}</h2>
                     </div>
@@ -139,7 +139,7 @@ <h3>Browse by Tag:</h3>
                                 <span class="tag_remove">{{tag.count}}</span>
                             </li>
                             {% endfor %}
-                        </ul>   
+                        </ul>
                     </aside>
                 </div><!-- /span_side -->
             </div><!-- /row -->

idea/templates/idea/list.html

@@ -14,6 +14,16 @@ <h2 class="section">
                             </div>
                             <p class="info">{{ about_text|safe }}</p>
                         </div><!-- /row -->
+
+                        {% if banner %}
+                        <div class="challenge-banner">
+                            <h5>Current Challenge:</h5>
+                            <h3 class="challenge-description">{{banner.title}}</h3>
+                            <div id="challenge-link">
+                                <a href="{% url 'idea:challenge_detail' banner.id %}" class="chevron-right">View Challenge Ideas</a>
+                            </div>
+                        </div><!-- /challenge-banner -->
+                        {% endif %}
                     </header><!-- /project-header -->
                     <div class="visuallyhidden">
                         <h2>Main Navigation for IdeaBox</h2>
@@ -101,13 +111,6 @@ <h2>Main Navigation for IdeaBox</h2>
                     <div class="project-add-idea">
                         <a href="{% url 'idea:add_idea' %}" class="btn-huge">Submit an Idea</a>
                     </div><!-- /project-add-idea -->
-                    {% if banner %}
-                    <div class="challenge-banner">
-                        <h5>Current Challenge:</h5>
-                        <h3 class="challenge-description">{{banner.title}}</h3>
-                        <div id="challenge-link"><a href="{% url 'idea:challenge_detail' banner.id %}" class="chevron-right">View Challenge Ideas</a></div>
-                    </div><!-- /challenge-banner -->
-                    {% endif %}
 		    <aside class="banners">
 		        <h3>Browse by Challenge:</h3>
 			<ul>
@@ -130,7 +133,7 @@ <h3>Browse by Tag:</h3>
                                 <span class="tag_remove">{{tag.count}}</span>
                             </li>
                             {% endfor %}
-                        </ul>   
+                        </ul>
                     </aside>
                 </div><!-- /span_side -->
             </div><!-- /row -->