[extensions-web/wip/tomtryf/redesign] extension: fixed alignment issues

[Yuri Konotopov <ykonotopov src gnome org>]

commit dcab253ed127cae1d4e9a10b288545d8414876b0
Author: Yuri Konotopov <ykonotopov gnome org>
Date:   Sun Mar 5 10:43:06 2017 +0400

    extension: fixed alignment issues

 .../extensions/templates/extensions/detail.html    |   12 ++++++++----
 sweettooth/static/css/sweettooth.css               |   16 +++++++++-------
 2 files changed, 17 insertions(+), 11 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/detail.html 
b/sweettooth/extensions/templates/extensions/detail.html
index b8b5cab..eb55ee9 100644
--- a/sweettooth/extensions/templates/extensions/detail.html
+++ b/sweettooth/extensions/templates/extensions/detail.html
@@ -6,16 +6,17 @@
          data-epk="{{ extension.pk }}"
          data-uuid="{{ extension.uuid }}"
          data-svm="{{ shell_version_map }}">
-      <div class="extension-header">
+      <div class="extension-header col-xs-12 col-sm-8 col-md-8 col-lg-8">
+        {% spaceless %}
         {% block icon %}
         <img src="{{ extension.icon.url }}" class="icon">
         {% endblock icon %}
-
         <h3 class="extension-name" id="extension_name">{{ extension.name }}</h3>
+        {% endspaceless %}
         <span class="author">by <a href="{% url 'auth-profile' user=extension.creator.username %}">{{ 
extension.creator }}</a></span>
       </div>
 
-      <div class="controls">
+      <div class="controls col-xs-12 col-sm-4 col-md-4 col-lg-4">
         <div class="switch"></div>
         <div class="extra-buttons">
           <div class="upgrade-button"></div>
@@ -32,12 +33,15 @@
                   <a href="{{ extension.screenshot.url }}"><img src="{{ extension.screenshot.url }}" /></a>
               </div>
               {% endblock screenshot %}
+
+            <div class="col-sm-1 col-md-1 col-lg-1">
+            </div>
           {% else %}
               {% block no-screenshot %}
               {% endblock no-screenshot %}
           {% endif %}
 
-        <div class="col-xs-12 col-sm-7 col-md-8 col-lg-9">
+        <div class="col-xs-12 col-sm-6 col-md-7 col-lg-8">
             <p class="description" id="extension_description">{{ extension.description }}</p>
 
             <dl>
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index f7e6773..794f474 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -302,8 +302,14 @@ li.extension:last-child, #local_extensions div.extension:last-child {
     box-sizing: content-box;
 }
 
+.extension.single-page .extension-details {
+    /* 32px icon + 4px icon margin */
+    padding-left: 36px;
+}
+
 .extension.single-page .description {
-    padding-left: 17px;
+    padding-left: 0;
+    margin-left: 0;
 }
 
 .extension.single-page .controls {
@@ -380,10 +386,6 @@ li.extension:last-child, #local_extensions div.extension:last-child {
     border-color: #d92400;
 }
 
-.extension-details dl {
-    padding-left: 36px;
-}
-
 /* Extension switch */
 
 .extension ._gnome-switch {
@@ -419,9 +421,9 @@ li.extension:last-child, #local_extensions div.extension:last-child {
 
 .extension .screenshot {
     background: #ffffff;
-    padding: 0.5em 0;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
     font-weight: bold;
-    padding-left: 40px;
 }
 
 .extension .screenshot img {