[extensions-web/wip/tomtryf/redesign] review: added bootstrap and extension classes

[Yuri Konotopov <ykonotopov src gnome org>]

commit 431dd09279d686fbd05e448276105684ba3e7de8
Author: Yuri Konotopov <ykonotopov gnome org>
Date:   Sun Mar 5 10:45:05 2017 +0400

    review: added bootstrap and extension classes

 sweettooth/review/templates/review/review.html |   80 +++++++++++++----------
 sweettooth/static/css/review.css               |    2 +-
 sweettooth/static/css/sweettooth.css           |    1 -
 3 files changed, 46 insertions(+), 37 deletions(-)
---
diff --git a/sweettooth/review/templates/review/review.html b/sweettooth/review/templates/review/review.html
index 1549e18..cce314a 100644
--- a/sweettooth/review/templates/review/review.html
+++ b/sweettooth/review/templates/review/review.html
@@ -4,30 +4,43 @@
 {% block title %}Review "{{ extension.name }}" - {{ block.super }}{% endblock %}
 
 {% block body %}
-<h2 class="expandy_header expanded"> Details Page Preview </h2>
+<h2 class="expandy_header expanded col-xs-12 col-sm-12 col-md-12 col-lg-12">Details Page Preview</h2>
 <div id="preview">
-  <div class="extension">
-    <h3 class="extension-name">
-      <a href="{{ extension.get_absolute_url }}">
-        <img src="{{ extension.icon.url }}" class="icon"> {{ extension.name }}
-      </a>
-    </h3>
-
-    <span class="author">by <a href="{% url 'auth-profile' user=extension.creator %}">{{ extension.creator 
}}</a></span>
-
-    <div>
-      {% if extension.screenshot %}
-      <a href="{{ extension.screenshot.url }}" class="screenshot"><img src="{{ extension.screenshot.url 
}}"></a>
-      {% endif %}
-
-      <p class="description">{{ extension.description }}</p>
-
-      <dl>
-        {% if extension.url %}
-        <dt>Extension Homepage</dt>
-        <dd><a href="{{ extension.url }}" id="extension_url">{{ extension.url }}</a></dd>
+  <div class="extension single-page">
+    <div class="extension-header col-xs-12 col-sm-12 col-md-12 col-lg-12">
+        {% spaceless %}
+            <h3 class="extension-name">
+                <a href="{{ extension.get_absolute_url }}">
+                    <img src="{{ extension.icon.url }}" class="icon">{{ extension.name }}
+                </a>
+            </h3>
+
+            <span class="author"> by <a
+                    href="{% url 'auth-profile' user=extension.creator %}">{{ extension.creator }}</a></span>
+        {% endspaceless %}
+    </div>
+
+    <div class="extension-details">
+        {% if extension.screenshot %}
+            <div class="screenshot col-xs-12 col-sm-5 col-md-4 col-lg-3">
+                <a href="{{ extension.screenshot.url }}" class="screenshot"><img
+                        src="{{ extension.screenshot.url }}"></a>
+            </div>
+
+            <div class="col-sm-1 col-md-1 col-lg-1">
+            </div>
         {% endif %}
-      </dl>
+
+        <div class="col-xs-12 col-sm-6 col-md-7 col-lg-8">
+            <p class="description">{{ extension.description }}</p>
+
+            <dl>
+                {% if extension.url %}
+                    <dt>Extension Homepage</dt>
+                    <dd><a href="{{ extension.url }}" id="extension_url">{{ extension.url }}</a></dd>
+                {% endif %}
+            </dl>
+        </div>
     </div>
 
     <hr>
@@ -38,17 +51,14 @@
 </div>
 
 {% if has_old_version %}
-<h2 class="expandy_header expanded"> Diff Against Previous Version </h2>
-<div id="diff" data-pk="{{ version.pk }}">
+<h2 class="expandy_header expanded col-xs-12 col-sm-12 col-md-12 col-lg-12">Diff Against Previous 
Version</h2>
+<div id="diff" data-pk="{{ version.pk }}" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
 </div>
 {% endif %}
 
-{% if has_old_version %}
-<h2 class="expandy_header"> Files </h2>
-{% else %}
-<h2 class="expandy_header expanded"> Files </h2>
-{% endif %}
-<div>
+<h2 class="expandy_header{% if not has_old_version %} expanded{% endif %} col-xs-12 col-sm-12 col-md-12 
col-lg-12">Files</h2>
+
+<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
   <div id="files" data-pk="{{ version.pk }}">
   </div>
   <p>Note: Binary files aren't shown on the web site. To see all
@@ -56,7 +66,7 @@
       the extension zipfile</a>.</p>
 </div>
 
-<h2 class="expandy_header expanded"> All Versions </h2>
+<h2 class="expandy_header expanded col-xs-12 col-sm-12 col-md-12 col-lg-12">All Versions</h2>
 <div id="all_versions">
   <table>
     <thead>
@@ -85,8 +95,8 @@
 </div>
 
 {% if previous_reviews %}
-<h2 class="expandy_header expanded"> Previous Reviews on this Version </h2>
-<div id="previous_reviews">
+<h2 class="expandy_header expanded col-xs-12 col-sm-12 col-md-12 col-lg-12">Previous Reviews on this 
Version</h2>
+<div id="previous_reviews" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
   {% for review in previous_reviews %}
   <div class="review">
     <a class="review-author" href="{% url 'auth-profile' user=review.reviewer.username %}">{{ 
review.reviewer }}</a>
@@ -108,9 +118,9 @@
 {% endif %}
 
 {% if can_review %}
-<h2 class="expanded"> Review </h2>
+<h2 class="expanded col-xs-12 col-sm-12 col-md-12 col-lg-12">Review</h2>
 
-<div id="review">
+<div id="review" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
   <form id="review_form" action="{% url 'review-submit' pk=version.pk %}" method="POST">
     {% csrf_token %}
     <textarea id="comments" name="comments"></textarea>
diff --git a/sweettooth/static/css/review.css b/sweettooth/static/css/review.css
index 4956cda..331ae58 100644
--- a/sweettooth/static/css/review.css
+++ b/sweettooth/static/css/review.css
@@ -1,7 +1,7 @@
 
 @import url("pygments.css");
 
-#container, .container_12, .maxwidth {
+#container, .maxwidth {
     width: auto !important;
     margin: 0 1em;
 }
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 794f474..dd015fd 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -234,7 +234,6 @@ li.extension:last-child, #local_extensions div.extension:last-child {
 .extension {
     padding: 0;
     margin-top: 10px;
-    position: relative;
 }
 
 .extension.out-of-date > * {