From bf69f3f6b6c3f35582d17c2b6c344c5986f5b480 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Mon, 6 Jul 2015 13:52:11 +0200
Subject: [PATCH] SONAR-6661 improve the layout

---
 .../_update-center-plugin-actions.hbs         |   2 +-
 .../templates/update-center-plugin.hbs        | 200 +++++++++---------
 .../templates/update-center-system-update.hbs | 102 ++++-----
 server/sonar-web/src/main/less/init/misc.less |   5 +
 4 files changed, 161 insertions(+), 148 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/update-center/templates/_update-center-plugin-actions.hbs b/server/sonar-web/src/main/js/apps/update-center/templates/_update-center-plugin-actions.hbs
index 63bf15f5453..5b67a9d6e48 100644
--- a/server/sonar-web/src/main/js/apps/update-center/templates/_update-center-plugin-actions.hbs
+++ b/server/sonar-web/src/main/js/apps/update-center/templates/_update-center-plugin-actions.hbs
@@ -17,7 +17,7 @@
         <input class="js-terms" type="checkbox" name="plugin-terms" id="plugin-terms-{{key}}">
         <label for="plugin-terms-{{key}}">
           I accept the
-          <a class="js-plugin-terms" href="{{termsAndConditionsUrl}}" target="_blank">Terms and Conditions</a>
+          <a class="js-plugin-terms nowrap" href="{{termsAndConditionsUrl}}" target="_blank">Terms and Conditions</a>
         </label>
       </p>
       <button class="js-install" disabled>Install</button>
diff --git a/server/sonar-web/src/main/js/apps/update-center/templates/update-center-plugin.hbs b/server/sonar-web/src/main/js/apps/update-center/templates/update-center-plugin.hbs
index b5660450755..eff32440761 100644
--- a/server/sonar-web/src/main/js/apps/update-center/templates/update-center-plugin.hbs
+++ b/server/sonar-web/src/main/js/apps/update-center/templates/update-center-plugin.hbs
@@ -1,106 +1,110 @@
-<div class="display-inline-block text-top width-20">
-  <div>
-    <strong class="js-plugin-name">{{name}}</strong>
-    {{#if category}}
-      <span class="js-plugin-category badge spacer-left">{{category}}</span>
-    {{/if}}
-  </div>
-  <div class="js-plugin-description little-spacer-top">{{{description}}}</div>
-</div>
+<table class="width-100">
+  <tr>
+    <td class="text-top width-20 big-spacer-right">
+      <div>
+        <strong class="js-plugin-name">{{name}}</strong>
+        {{#if category}}
+          <span class="js-plugin-category badge spacer-left">{{category}}</span>
+        {{/if}}
+      </div>
+      <div class="js-plugin-description little-spacer-top">{{{description}}}</div>
+    </td>
 
-<div class="display-inline-block text-top width-40 big-spacer-left">
-  <div class="pull-left spacer-right">
-    <strong>Versions</strong>
-  </div>
-  <ul class="overflow-hidden bordered-left">
-    {{#if version}}
-      <li class="spacer-left little-spacer-bottom">
-        <strong class="js-plugin-installed-version">{{version}}</strong>&nbsp;installed
-      </li>
-    {{/if}}
-    {{#notEmpty updates}}
-      <li class="spacer-left little-spacer-bottom spacer-top">
-        <strong>Updates:</strong>
-      </li>
-      {{#each updates}}
-        <li class="spacer-left little-spacer-bottom">
-          <div class="pull-left spacer-right">
-            {{#notEq status 'COMPATIBLE'}}
-              <span class="js-update-version badge badge-warning" data-toggle="tooltip"
-                    title="{{t 'update_center.status' status}}">{{release.version}}</span>
-            {{else}}
-              <span class="js-update-version badge badge-success">{{release.version}}</span>
-            {{/notEq}}
-          </div>
-          <div class="overflow-hidden">
-            {{{release.description}}}
-            <button class="button-link js-changelog issue-rule icon-ellipsis-h" data-idx="{{@index}}"></button>
-          </div>
-        </li>
-      {{/each}}
-    {{/notEmpty}}
-    {{#if release}}
-      <li class="spacer-left little-spacer-bottom">
-        <div class="pull-left spacer-right">
-          <span class="badge badge-success">{{release.version}}</span>
-        </div>
-        <div class="overflow-hidden">
-          {{{release.description}}}
-          <button class="button-link js-changelog issue-rule icon-ellipsis-h" data-idx="{{@index}}"></button>
-          {{#notEmpty update.requires}}
-            <p class="little-spacer-top">
-              <strong>Installing this plugin will also install</strong>: {{#each update.requires}} {{name}}{{/each}}
-            </p>
-          {{/notEmpty}}
-        </div>
-      </li>
-    {{/if}}
-  </ul>
-</div>
+    <td class="text-top big-spacer-right">
+      <div class="pull-left spacer-right">
+        <strong>Versions</strong>
+      </div>
+      <ul class="overflow-hidden bordered-left">
+        {{#if version}}
+          <li class="spacer-left little-spacer-bottom">
+            <strong class="js-plugin-installed-version">{{version}}</strong>&nbsp;installed
+          </li>
+        {{/if}}
+        {{#notEmpty updates}}
+          <li class="spacer-left little-spacer-bottom spacer-top">
+            <strong>Updates:</strong>
+          </li>
+          {{#each updates}}
+            <li class="spacer-left little-spacer-bottom">
+              <div class="pull-left spacer-right">
+                {{#notEq status 'COMPATIBLE'}}
+                  <span class="js-update-version badge badge-warning" data-toggle="tooltip"
+                        title="{{t 'update_center.status' status}}">{{release.version}}</span>
+                {{else}}
+                  <span class="js-update-version badge badge-success">{{release.version}}</span>
+                {{/notEq}}
+              </div>
+              <div class="overflow-hidden">
+                {{{release.description}}}
+                <button class="button-link js-changelog issue-rule icon-ellipsis-h" data-idx="{{@index}}"></button>
+              </div>
+            </li>
+          {{/each}}
+        {{/notEmpty}}
+        {{#if release}}
+          <li class="spacer-left little-spacer-bottom">
+            <div class="pull-left spacer-right">
+              <span class="badge badge-success">{{release.version}}</span>
+            </div>
+            <div class="overflow-hidden">
+              {{{release.description}}}
+              <button class="button-link js-changelog issue-rule icon-ellipsis-h" data-idx="{{@index}}"></button>
+              {{#notEmpty update.requires}}
+                <p class="little-spacer-top">
+                  <strong>Installing this plugin will also install</strong>: {{#each update.requires}} {{name}}{{/each}}
+                </p>
+              {{/notEmpty}}
+            </div>
+          </li>
+        {{/if}}
+      </ul>
+    </td>
 
-<div class="display-inline-block text-top width-20 big-spacer-left">
-  <ul>
-    {{#any homepageUrl issueTrackerUrl termsAndConditionsUrl}}
-      <li class="little-spacer-bottom">
-        <ul class="list-inline">
-          {{#if homepageUrl}}
-            <li><a class="js-plugin-homepage" href="{{homepageUrl}}" target="_blank">Homepage</a></li>
-          {{/if}}
-          {{#if issueTrackerUrl}}
-            <li><a class="js-plugin-issues" href="{{issueTrackerUrl}}" target="_blank">Issue Tracker</a></li>
-          {{/if}}
-        </ul>
-      </li>
-    {{/any}}
+    <td class="text-top width-20 big-spacer-right">
+      <ul>
+        {{#any homepageUrl issueTrackerUrl termsAndConditionsUrl}}
+          <li class="little-spacer-bottom">
+            <ul class="list-inline">
+              {{#if homepageUrl}}
+                <li><a class="js-plugin-homepage" href="{{homepageUrl}}" target="_blank">Homepage</a></li>
+              {{/if}}
+              {{#if issueTrackerUrl}}
+                <li><a class="js-plugin-issues" href="{{issueTrackerUrl}}" target="_blank">Issue Tracker</a></li>
+              {{/if}}
+            </ul>
+          </li>
+        {{/any}}
 
-    {{#if license}}
-      <li class="little-spacer-bottom">Licensed under <span class="js-plugin-license">{{license}}</span></li>
-    {{/if}}
+        {{#if license}}
+          <li class="little-spacer-bottom">Licensed under <span class="js-plugin-license">{{license}}</span></li>
+        {{/if}}
 
-    {{#if organizationName}}
-      <li class="little-spacer-bottom">
-        Developed by
-        {{#if organizationUrl}}
-          <a class="js-plugin-organization" href="{{organizationUrl}}" target="_blank">{{organizationName}}</a>
-        {{else}}
-          <span class="js-plugin-organization">{{organizationName}}</span>
+        {{#if organizationName}}
+          <li class="little-spacer-bottom">
+            Developed by
+            {{#if organizationUrl}}
+              <a class="js-plugin-organization" href="{{organizationUrl}}" target="_blank">{{organizationName}}</a>
+            {{else}}
+              <span class="js-plugin-organization">{{organizationName}}</span>
+            {{/if}}
+          </li>
         {{/if}}
-      </li>
-    {{/if}}
-  </ul>
-</div>
+      </ul>
+    </td>
 
-<div class="pull-right big-spacer-left nowrap text-right">
-  {{#eq _status 'installing'}}
-    <p class="text-success">{{#if version}}Update{{else}}Install{{/if}} Pending</p>
-  {{/eq}}
+    <td class="text-top text-right width-20">
+      {{#eq _status 'installing'}}
+        <p class="text-success">{{#if version}}Update{{else}}Install{{/if}} Pending</p>
+      {{/eq}}
 
-  {{#eq _status 'uninstalling'}}
-    <p class="text-danger">Uninstall Pending</p>
-  {{/eq}}
+      {{#eq _status 'uninstalling'}}
+        <p class="text-danger">Uninstall Pending</p>
+      {{/eq}}
 
-  {{#unless _status}}
-    <i class="js-spinner spinner hidden"></i>
-    {{> '_update-center-plugin-actions'}}
-  {{/unless}}
-</div>
+      {{#unless _status}}
+        <i class="js-spinner spinner hidden"></i>
+        {{> '_update-center-plugin-actions'}}
+      {{/unless}}
+    </td>
+  </tr>
+</table>
diff --git a/server/sonar-web/src/main/js/apps/update-center/templates/update-center-system-update.hbs b/server/sonar-web/src/main/js/apps/update-center/templates/update-center-system-update.hbs
index 09d8b04ece0..0096dea967e 100644
--- a/server/sonar-web/src/main/js/apps/update-center/templates/update-center-system-update.hbs
+++ b/server/sonar-web/src/main/js/apps/update-center/templates/update-center-system-update.hbs
@@ -1,52 +1,56 @@
-<div class="display-inline-block text-top big-spacer-right">
-  <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
-    <g id="Layer1">
-        <path d="M52.0841,58.4777L48.8003,58.4777C48.8003,32.0551 26.9663,10.4603 0,10.4603L0,7.06778C28.7278,7.06778 52.1493,30.2719 52.1493,58.4777L52.084,58.4777L52.0841,58.4777Z" style="fill:rgb(75,159,213);fill-rule:nonzero;"/>
-        <path d="M54.3675,40.7974C50.4096,24.2044 36.97,10.2646 20.0072,5.45851L20.7684,2.7619C38.6228,7.95943 52.8453,22.5952 56.9554,40.2755L54.3675,40.7974L54.3675,40.7974L54.3675,40.7974Z" style="fill:rgb(75,159,213);fill-rule:nonzero;"/>
-        <path d="M58.0863,25.27C53.9978,16.332 47.1475,8.65532 38.5792,3.47949L39.6666,1.52228C48.561,6.87202 55.8898,15.0924 60,24.3784L58.0863,25.27L58.0863,25.27L58.0863,25.27L58.0863,25.27Z" style="fill:rgb(75,159,213);fill-rule:nonzero;"/>
-    </g>
-</svg>
-</div>
+<table class="width-100">
+  <tr>
+    <td class="text-top big-spacer-right">
+      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+        <g id="Layer1">
+            <path d="M52.0841,58.4777L48.8003,58.4777C48.8003,32.0551 26.9663,10.4603 0,10.4603L0,7.06778C28.7278,7.06778 52.1493,30.2719 52.1493,58.4777L52.084,58.4777L52.0841,58.4777Z" style="fill:rgb(75,159,213);fill-rule:nonzero;"/>
+            <path d="M54.3675,40.7974C50.4096,24.2044 36.97,10.2646 20.0072,5.45851L20.7684,2.7619C38.6228,7.95943 52.8453,22.5952 56.9554,40.2755L54.3675,40.7974L54.3675,40.7974L54.3675,40.7974Z" style="fill:rgb(75,159,213);fill-rule:nonzero;"/>
+            <path d="M58.0863,25.27C53.9978,16.332 47.1475,8.65532 38.5792,3.47949L39.6666,1.52228C48.561,6.87202 55.8898,15.0924 60,24.3784L58.0863,25.27L58.0863,25.27L58.0863,25.27L58.0863,25.27Z" style="fill:rgb(75,159,213);fill-rule:nonzero;"/>
+        </g>
+      </svg>
+    </td>
 
-<div class="display-inline-block text-top width-20">
-  <div>
-    <strong class="js-plugin-name">SonarQube {{version}}</strong>
-    <span class="js-plugin-category badge badge-success spacer-left">System Upgrade</span>
-  </div>
-  <div class="js-plugin-description little-spacer-top">{{{description}}}</div>
+    <td class="text-top width-20 big-spacer-right">
+      <div>
+        <strong class="js-plugin-name">SonarQube {{version}}</strong>
+        <span class="js-plugin-category badge badge-success spacer-left">System Upgrade</span>
+      </div>
+      <div class="js-plugin-description little-spacer-top">{{{description}}}</div>
 
-  <ul class="big-spacer-top">
-    {{#if changeLogUrl}}
-      <li class="little-spacer-bottom">
-        <a class="js-plugin-release-notes" href="{{changeLogUrl}}" target="_blank">Release Notes</a>
-      </li>
-    {{/if}}
-    {{#if releaseDate}}
-      <li class="little-spacer-bottom">Released: <span class="js-plugin-date">{{d releaseDate}}</span></li>
-    {{/if}}
-  </ul>
-</div>
+      <ul class="big-spacer-top">
+        {{#if changeLogUrl}}
+          <li class="little-spacer-bottom">
+            <a class="js-plugin-release-notes" href="{{changeLogUrl}}" target="_blank">Release Notes</a>
+          </li>
+        {{/if}}
+        {{#if releaseDate}}
+          <li class="little-spacer-bottom">Released: <span class="js-plugin-date">{{d releaseDate}}</span></li>
+        {{/if}}
+      </ul>
+    </td>
 
-<div class="display-inline-block text-top width-60 big-spacer-left">
-  <div class="pull-left spacer-right">
-    <strong>How to upgrade</strong>
-  </div>
-  <ul class="js-plugin-update-steps list-styled overflow-hidden bordered-left">
-    <li class="little-spacer-bottom">Stop SonarQube</li>
-    <li class="little-spacer-bottom"><a href="{{downloadUrl}}" target="_blank">Download</a> and install
-      SonarQube {{version}} after having carefully read the
-      <a href="http://redirect.sonarsource.com/doc/upgrading.html" target="_blank">upgrade guide</a>.
-    </li>
-    {{#each plugins.incompatible}}
-      <li class="little-spacer-bottom">
-        Uninstall the plugin {{name}} which is not compatible with SonarQube {{../version}}.
-      </li>
-    {{/each}}
-    {{#each plugins.requireUpdate}}
-      <li class="little-spacer-bottom">
-        Replace current version of plugin {{name}} by version {{version}}.
-      </li>
-    {{/each}}
-    <li>Start SonarQube</li>
-  </ul>
-</div>
+    <td class="text-top width-60">
+      <div class="pull-left spacer-right">
+        <strong>How to upgrade</strong>
+      </div>
+      <ul class="js-plugin-update-steps list-styled overflow-hidden bordered-left">
+        <li class="little-spacer-bottom">Stop SonarQube</li>
+        <li class="little-spacer-bottom"><a href="{{downloadUrl}}" target="_blank">Download</a> and install
+          SonarQube {{version}} after having carefully read the
+          <a href="http://redirect.sonarsource.com/doc/upgrading.html" target="_blank">upgrade guide</a>.
+        </li>
+        {{#each plugins.incompatible}}
+          <li class="little-spacer-bottom">
+            Uninstall the plugin {{name}} which is not compatible with SonarQube {{../version}}.
+          </li>
+        {{/each}}
+        {{#each plugins.requireUpdate}}
+          <li class="little-spacer-bottom">
+            Replace current version of plugin {{name}} by version {{version}}.
+          </li>
+        {{/each}}
+        <li>Start SonarQube</li>
+      </ul>
+    </td>
+  </tr>
+</table>
diff --git a/server/sonar-web/src/main/less/init/misc.less b/server/sonar-web/src/main/less/init/misc.less
index b5e41704b74..05d550772de 100644
--- a/server/sonar-web/src/main/less/init/misc.less
+++ b/server/sonar-web/src/main/less/init/misc.less
@@ -60,6 +60,11 @@ td.spacer-right  { padding-right: 8px; }
 td.spacer-bottom { padding-bottom: 8px; }
 td.spacer-top    { padding-top: 8px; }
 
+td.big-spacer-left   { padding-left: 16px; }
+td.big-spacer-right  { padding-right: 16px; }
+td.big-spacer-bottom { padding-bottom: 16px; }
+td.big-spacer-top    { padding-top: 16px; }
+
 .pull-left  { float: left !important; }
 .pull-right { float: right !important; }
 
-- 
2.39.5