[extensions-web/feature/full-width] control buttons: alight to left inside aligned to right container

[Yuri Konotopov <ykonotopov src gnome org>]

commit 330574f04ff5be5c027217787b89d77bdf194068
Author: Yuri Konotopov <ykonotopov gnome org>
Date:   Sat Jan 21 12:34:55 2017 +0400

    control buttons: alight to left inside aligned to right container

 .../extensions/templates/extensions/detail.html    |   14 ++++++++------
 sweettooth/static/css/sweettooth.css               |   17 +++++++++++++----
 .../js/templates/extensions/info_contents.mustache |   16 +++++++++-------
 sweettooth/static/js/templates/templatedata.js     |    2 +-
 4 files changed, 31 insertions(+), 18 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/detail.html 
b/sweettooth/extensions/templates/extensions/detail.html
index c1cde38..b3a9a88 100644
--- a/sweettooth/extensions/templates/extensions/detail.html
+++ b/sweettooth/extensions/templates/extensions/detail.html
@@ -6,12 +6,6 @@
          data-epk="{{ extension.pk }}"
          data-uuid="{{ extension.uuid }}"
          data-svm="{{ shell_version_map }}">
-      <div class="switch"></div>
-      <div class="extra-buttons">
-        <div class="upgrade-button"></div>
-        <div class="configure-button"></div>
-      </div>
-
       <div class="extension-header">
         {% block icon %}
         <img src="{{ extension.icon.url }}" class="icon">
@@ -21,6 +15,14 @@
         <span class="author">by <a href="{% url 'auth-profile' user=extension.creator.username %}">{{ 
extension.creator }}</a></span>
       </div>
 
+      <div class="controls">
+        <div class="switch"></div>
+        <div class="extra-buttons">
+          <div class="upgrade-button"></div>
+          <div class="configure-button"></div>
+        </div>
+      </div>
+
       <div style="clear: both;"></div>
 
       <div class="extension-details">
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 9a919a9..a463fe9 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -341,6 +341,10 @@ li.extension:last-child {
     font-size: 1.3em;
 }
 
+.extension .extension-header {
+    float: left;
+}
+
 .extension .extension-header .extension-name {
     margin-left: 0;
 }
@@ -366,8 +370,13 @@ li.extension:last-child {
 
 /* Upgrade, Configure, Uninstall buttons */
 
-.extension .extra-buttons {
+.extension .controls {
     float: right;
+    width: 180px;
+}
+
+.extension .extra-buttons {
+    float: left;
     margin-top: 4px;
 }
 
@@ -380,7 +389,7 @@ li.extension:last-child {
 .extension.configurable .configure-button,
 .extension.upgradable .upgrade-button,
 .extension.installed .uninstall-button {
-    float: right;
+    float: left;
 
     display: block;
     height: 24px;
@@ -435,8 +444,8 @@ li.extension:last-child {
 
 .extension ._gnome-switch {
     margin-top: 4px;
-    margin-right: 32px;
-    float: right;
+    margin-right: 0.5em;
+    float: left;
 }
 
 ._gnome-switch.customized .error {
diff --git a/sweettooth/static/js/templates/extensions/info_contents.mustache 
b/sweettooth/static/js/templates/extensions/info_contents.mustache
index 2babfb4..44497b6 100644
--- a/sweettooth/static/js/templates/extensions/info_contents.mustache
+++ b/sweettooth/static/js/templates/extensions/info_contents.mustache
@@ -9,13 +9,15 @@
 {{#creator}}
   <span class="author">by <a href="{{creator_url}}">{{creator}}</a></span>
 {{/creator}}
-<div class="switch"></div>
-<div class="extra-buttons">
-  <div class="upgrade-button" title="Upgrade this extension"></div>
-  <div class="configure-button" title="Configure this extension"></div>
-{{^system}}
-  <div class="uninstall-button" title="Uninstall this extension"></div>
-{{/system}}
+<div class="controls">
+  <div class="switch"></div>
+  <div class="extra-buttons">
+    <div class="upgrade-button" title="Upgrade this extension"></div>
+    <div class="configure-button" title="Configure this extension"></div>
+  {{^system}}
+    <div class="uninstall-button" title="Uninstall this extension"></div>
+  {{/system}}
+  </div>
 </div>
 <div style="clear: both"></div>
 {{#system}}
diff --git a/sweettooth/static/js/templates/templatedata.js b/sweettooth/static/js/templates/templatedata.js
index 5880671..b596ca1 100644
--- a/sweettooth/static/js/templates/templatedata.js
+++ b/sweettooth/static/js/templates/templatedata.js
@@ -6,7 +6,7 @@ define({
   "extensions/comments_list": "{{#comments}}\n  {{>extensions/comment}}\n  
<hr>\n{{/comments}}\n{{^show_all}}\n<p class=\"show-all\">Show more 
reviews</p>\n{{/show_all}}\n\n{{^comments}}\n  <p>There are no comments. Be the first!</p>\n{{/comments}}",
   "extensions/error_report_template": "What's wrong?\n\n\n\nWhat have you tried?\n\n\n\nAutomatically 
detected errors:\n\n{{#errors}}\n  {{.}}\n\n================\n{{/errors}}\n{{^errors}}\nGNOME Shell 
Extensions did not detect any errors with this extension.\n{{/errors}}\n\nVersion information:\n\n    Shell 
version: {{sv}}\n    Extension version: {{#ev}}{{ev}}{{/ev}}{{^ev}}Unknown{{/ev}}",
   "extensions/info": "<div class=\"extension\" data-uuid=\"{{uuid}}\">\n  
{{>extensions/info_contents}}\n</div>",
-  "extensions/info_contents": "<h3 class=\"extension-name\">\n  {{#link}}\n    <a href=\"{{link}}\" 
class=\"title-link\"><img src=\"{{icon}}\" class=\"icon\">{{name}}</a>\n  {{/link}}\n  {{^link}}\n    <img 
src=\"/static/images/plugin-unknown.png\" class=\"icon\">{{name}}\n  {{/link}}\n</h3>\n{{#creator}}\n  <span 
class=\"author\">by <a href=\"{{creator_url}}\">{{creator}}</a></span>\n{{/creator}}\n<div 
class=\"switch\"></div>\n<div class=\"extra-buttons\">\n  <div class=\"upgrade-button\" title=\"Upgrade this 
extension\"></div>\n  <div class=\"configure-button\" title=\"Configure this 
extension\"></div>\n{{^system}}\n  <div class=\"uninstall-button\" title=\"Uninstall this 
extension\"></div>\n{{/system}}\n</div>\n<div style=\"clear: both\"></div>\n{{#system}}\n  <div 
class='system-extension' title='System extension should be uninstalled using package manager. See 
\u00abAbout\u00bb page for more details.'>System extension</div>\n{{/system}}\n<p 
class=\"description\">{{first_
 line_of_description}}</p>",
+  "extensions/info_contents": "<h3 class=\"extension-name\">\n  {{#link}}\n    <a href=\"{{link}}\" 
class=\"title-link\"><img src=\"{{icon}}\" class=\"icon\">{{name}}</a>\n  {{/link}}\n  {{^link}}\n    <img 
src=\"/static/images/plugin-unknown.png\" class=\"icon\">{{name}}\n  {{/link}}\n</h3>\n{{#creator}}\n  <span 
class=\"author\">by <a href=\"{{creator_url}}\">{{creator}}</a></span>\n{{/creator}}\n<div 
class=\"controls\">\n  <div class=\"switch\"></div>\n  <div class=\"extra-buttons\">\n    <div 
class=\"upgrade-button\" title=\"Upgrade this extension\"></div>\n    <div class=\"configure-button\" 
title=\"Configure this extension\"></div>\n  {{^system}}\n    <div class=\"uninstall-button\" 
title=\"Uninstall this extension\"></div>\n  {{/system}}\n  </div>\n</div>\n<div style=\"clear: 
both\"></div>\n{{#system}}\n  <div class='system-extension' title='System extension should be uninstalled 
using package manager. See \u00abAbout\u00bb page for more details.'>System extension</di
 v>\n{{/system}}\n<p class=\"description\">{{first_line_of_description}}</p>",
   "extensions/info_list": "<ul class=\"extensions\">\n{{#extensions}}\n  <li class=\"extension\" 
data-svm=\"{{shell_version_map}}\">\n    {{>extensions/info_contents}}\n  </li>\n{{/extensions}}\n</ul>",
   "extensions/uninstall": "You uninstalled <b>{{name}}</b>.",
   "messages/cannot_list_errors": "GNOME Shell Extensions cannot automatically detect any errors.",