[extensions-web/multiversion: 3/7] Move expandy-header into the common CSS file so we can use it elsewhere

[Jasper St. Pierre <jstpierre src gnome org>]

commit 25db9c7f353db5a6b1f8ebf129397e28eb3ad63b
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Thu Nov 24 00:23:20 2011 -0500

    Move expandy-header into the common CSS file so we can use it elsewhere

 sweettooth/review/templates/review/review.html |   10 +++---
 sweettooth/static/css/review.css               |   46 ------------------------
 sweettooth/static/css/sweettooth.css           |   46 ++++++++++++++++++++++++
 sweettooth/static/js/main.js                   |    4 ++
 sweettooth/static/js/review-main.js            |    3 --
 5 files changed, 55 insertions(+), 54 deletions(-)
---
diff --git a/sweettooth/review/templates/review/review.html b/sweettooth/review/templates/review/review.html
index c19d197..f5e915c 100644
--- a/sweettooth/review/templates/review/review.html
+++ b/sweettooth/review/templates/review/review.html
@@ -4,7 +4,7 @@
 {% block title %}Review "{{ version.extension.name }}" - {{ block.super }}{% endblock %}
 
 {% block body %}
-<h2 class="expanded"> Details Page Preview </h2>
+<h2 class="expandy_header expanded"> Details Page Preview </h2>
 <div id="preview">
   <div class="extension">
     <img src="{{ extension.icon.url }}" class="icon">
@@ -27,7 +27,7 @@
   </div>
 </div>
 
-<h2 class="expanded"> Files </h2>
+<h2 class="expandy_header expanded"> Files </h2>
 <div>
   <div id="files" data-pk="{{ version.pk }}">
   </div>
@@ -37,12 +37,12 @@
 </div>
 
 {% if previous_versions %}
-<h2 class="expanded"> Diff Against Previous Version </h2>
+<h2 class="expandy_header expanded"> Diff Against Previous Version </h2>
 <div id="diff" data-pk="{{ version.pk }}">
 </div>
 {% endif %}
 
-<h2 class="expanded"> Previous Versions </h2>
+<h2 class="expandy_header expanded"> Previous Versions </h2>
 <div id="previous_versions">
   {% if previous_versions %}
   <table>
@@ -67,7 +67,7 @@
 </div>
 
 {% if previous_reviews %}
-<h2 class="expanded"> Previous Reviews on this Version </h2>
+<h2 class="expandy_header expanded"> Previous Reviews on this Version </h2>
 <div id="previous_reviews">
   {% for review in previous_reviews %}
   <div class="review">
diff --git a/sweettooth/static/css/review.css b/sweettooth/static/css/review.css
index fe65ac3..458e866 100644
--- a/sweettooth/static/css/review.css
+++ b/sweettooth/static/css/review.css
@@ -117,52 +117,6 @@ span.changed {
     border-right: 1px solid #ccc;
 }
 
-h2 {
-    cursor: pointer;
-    background-color: #336C84;
-    color: white;
-    line-height: 1.5em;
-    padding-left: 0.5em;
-    margin-bottom: 0;
-    margin-top: 10px;
-    clear: both;
-}
-
-h2:hover {
-    background-color: #447D95;
-}
-
-h2:before {
-    content: "";
-    display: block;
-    float: left;
-    border-color: transparent;
-    border-left-color: white;
-    border-style: solid;
-    border-width: .4em;
-    margin-top: .4em;
-    width: 0;
-
-    -webkit-transition: -webkit-transform 0.4s ease-in-out;
-    -webkit-transform-origin: 25% 50%;
-
-    -moz-transition: -moz-transform 0.4s ease-in-out;
-    -moz-transform-origin: 25% 50%;
-
-    -o-transition: -o-transform 0.4s ease-in-out;
-    -o-transform-origin: 25% 50%;
-
-    transition: transform 0.4s ease-in-out;
-    transform-origin: 25% 50%;
-}
-
-h2.expanded:before {
-    -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
-    transform: rotate(90deg);
-}
-
 #comments {
     resize: vertical;
     width: 100%;
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 85ca718..59795c3 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -617,3 +617,49 @@ input[type=submit], button {
     display: block;
     margin: 10px auto 0;
 }
+
+.expandy_header {
+    cursor: pointer;
+    background-color: #336C84;
+    color: white;
+    line-height: 1.5em;
+    padding-left: 0.5em;
+    margin-bottom: 0;
+    margin-top: 10px;
+    clear: both;
+}
+
+.expandy_header:hover {
+    background-color: #447D95;
+}
+
+.expandy_header:before {
+    content: "";
+    display: block;
+    float: left;
+    border-color: transparent;
+    border-left-color: white;
+    border-style: solid;
+    border-width: .4em;
+    margin-top: .4em;
+    width: 0;
+
+    -webkit-transition: -webkit-transform 0.4s ease-in-out;
+    -webkit-transform-origin: 25% 50%;
+
+    -moz-transition: -moz-transform 0.4s ease-in-out;
+    -moz-transform-origin: 25% 50%;
+
+    -o-transition: -o-transform 0.4s ease-in-out;
+    -o-transform-origin: 25% 50%;
+
+    transition: transform 0.4s ease-in-out;
+    transform-origin: 25% 50%;
+}
+
+.expandy_header.expanded:before {
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index 06328b1..d6ce266 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -97,6 +97,10 @@ require(['jquery', 'messages', 'extensions',
         });
         $('form .rating').rating();
 
+        $('.expandy_header').click(function() {
+            $(this).toggleClass('expanded').next().slideToggle();
+        }).not('.expanded').next().hide();
+
         if (window._SW)
             try {
                 window._SW();
diff --git a/sweettooth/static/js/review-main.js b/sweettooth/static/js/review-main.js
index 77c4454..98583ac 100644
--- a/sweettooth/static/js/review-main.js
+++ b/sweettooth/static/js/review-main.js
@@ -4,8 +4,5 @@ require(['jquery', 'main', 'review'], function($) {
     $(document).ready(function() {
         $("#files").reviewify(false);
         $("#diff").reviewify(true);
-        $("h2").click(function() {
-            $(this).toggleClass("expanded").next().slideToggle();
-        }).not(".expanded").next().hide();
     });
 });