Improving version section of dashboard

app/assets/javascripts/admin/templates/dashboard-problems.hbs

@@ -1,16 +1,17 @@
 {{#if foundProblems}}
   <div class="dashboard-stats detected-problems">
-    <div class="look-here">{{d-icon "exclamation-triangle"}}</div>
     <div class="problem-messages">
       {{#conditional-loading-spinner condition=loadingProblems}}
-        <p>
+        <div>
-          {{i18n 'admin.dashboard.problems_found'}}
+          <h3>
+            <span class="look-here">{{d-icon "exclamation-triangle"}}</span>
+            {{i18n 'admin.dashboard.problems_found'}}</h3>
           <ul class="{{if loadingProblems 'invisible'}}">
             {{#each problems as |problem|}}
               <li>{{{problem}}}</li>
             {{/each}}
           </ul>
-        </p>
+        </div>
         <p class="actions">
           <small>{{i18n 'admin.dashboard.last_checked'}}: {{problemsTimestamp}}</small>
           {{d-button action="refreshProblems" class="btn-small" icon="refresh" label="admin.dashboard.refresh_problems"}}

app/assets/javascripts/admin/templates/dashboard_next.hbs

@@ -2,12 +2,10 @@
 
 <div class="section-top">
   {{#if showVersionChecks}}
-    <div class="dashboard-left">
+  <div class="version-checks">
       {{partial 'admin/templates/version-checks'}}
-    </div>
-    <div class="dashboard-right">
       {{partial 'admin/templates/dashboard-problems'}}
-    </div>
+  </div>
   {{/if}}
   <div class='clearfix'></div>
 </div>

app/assets/javascripts/admin/templates/version-checks.hbs

@@ -1,73 +1,75 @@
-<div class="dashboard-stats version-check {{if versionCheck.critical_updates 'critical' 'normal'}}">
+      <h2>{{i18n 'admin.dashboard.version'}}</h2>
-  <table class="table table-condensed table-hover">
+      <div class="dashboard-stats version-check {{if versionCheck.critical_updates 'critical' 'normal'}}">
-    {{custom-html name="upgrade-header" versionCheck=versionCheck tagName="thead"}}
-  </table>
 
-  <table class="table table-condensed table-hover">
+      <div class="version-number">
-    <thead>
+        <h4>{{i18n 'admin.dashboard.installed_version'}}</h4>
-      <tr>
+        <h3><a href={{versionCheck.gitLink}} target="_blank">{{dash-if-empty versionCheck.installed_describe}}</a></h3>
-        <th>&nbsp;</th>
+      </div>
-        <th>{{i18n 'admin.dashboard.installed_version'}}</th>
-        <th colspan="3">{{i18n 'admin.dashboard.latest_version'}}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <td class="title">{{i18n 'admin.dashboard.version'}}</td>
-      <td class="version-number"><a href={{versionCheck.gitLink}} target="_blank">{{dash-if-empty versionCheck.installed_describe}}</a></td>
 
       {{#if versionCheck.noCheckPerformed}}
-        <td class="version-number">&mdash;</td>
+        <div class="version-number"> 
-        <td class="face">
+          <h4>{{i18n 'admin.dashboard.latest_version'}}</h4>  
-          <span class="icon critical-updates-available">{{d-icon "frown-o"}}</span>
+          <h3>&mdash;</h3>
-        </td>
+        </div>
-        <td class="version-notes">
+        <div class="version-status">
-          <span class="normal-note">{{i18n 'admin.dashboard.no_check_performed'}}</span>
+          <div class="face">
-        </td>
+            <span class="icon critical-updates-available">{{d-icon "frown-o"}}</span>
+          </div>
+          <div class="version-notes">
+            <span class="normal-note">{{i18n 'admin.dashboard.no_check_performed'}}</span>
+          </div>
+        </div>
       {{else}}
         {{#if versionCheck.stale_data}}
-          <td class="version-number">{{#if versionCheck.version_check_pending}}{{dash-if-empty versionCheck.installed_version}}{{/if}}</td>
+          <div class="version-number">{{#if versionCheck.version_check_pending}}{{dash-if-empty versionCheck.installed_version}}{{/if}}</div>
-          <td class="face">
+          <div class="version-status">
-            {{#if versionCheck.version_check_pending}}
+            <div class="face">
-              <span class='icon up-to-date'>{{d-icon "smile-o"}}</span>
-            {{else}}
-              <span class="icon critical-updates-available">{{d-icon "frown-o"}}</span>
-            {{/if}}
-          </td>
-          <td class="version-notes">
-            <span class="normal-note">
               {{#if versionCheck.version_check_pending}}
-                {{i18n 'admin.dashboard.version_check_pending'}}
+                <span class='icon up-to-date'>{{d-icon "smile-o"}}</span>
               {{else}}
-                {{i18n 'admin.dashboard.stale_data'}}
+                <span class="icon critical-updates-available">{{d-icon "frown-o"}}</span>
               {{/if}}
-            </span>
+            </div>
-          </td>
+            <div class="version-notes">
-        {{else}}
+              <span class="normal-note">
-          <td class="version-number">{{dash-if-empty versionCheck.latest_version}}</td>
+                {{#if versionCheck.version_check_pending}}
-          <td class="face">
+                  {{i18n 'admin.dashboard.version_check_pending'}}
-            {{#if versionCheck.upToDate }}
-            <span class='icon up-to-date'>{{d-icon "smile-o"}}</span>
-            {{else}}
-              <span class="icon {{if versionCheck.critical_updates 'critical-updates-available' 'updates-available'}}">
-                {{#if versionCheck.behindByOneVersion}}
-                  {{d-icon "meh-o"}}
                 {{else}}
-                  {{d-icon "frown-o"}}
+                  {{i18n 'admin.dashboard.stale_data'}}
                 {{/if}}
               </span>
-            {{/if}}
+            </div>
-          </td>
+          </div>
-          <td class="version-notes">
+        {{else}}
-            {{#if versionCheck.upToDate }}
+          <div class="version-number">{{dash-if-empty versionCheck.latest_version}}</div>
-              {{i18n 'admin.dashboard.up_to_date'}}
+          <div class="version-status">
-            {{else}}
+            <div class="face">
-              <span class="critical-note">{{i18n 'admin.dashboard.critical_available'}}</span>
+              {{#if versionCheck.upToDate }}
-              <span class="normal-note">{{i18n 'admin.dashboard.updates_available'}}</span>
+              <span class='icon up-to-date'>{{d-icon "smile-o"}}</span>
-              {{i18n 'admin.dashboard.please_upgrade'}}
+              {{else}}
-            {{/if}}
+                <span class="icon {{if versionCheck.critical_updates 'critical-updates-available' 'updates-available'}}">
-          </td>
+                  {{#if versionCheck.behindByOneVersion}}
+                    {{d-icon "meh-o"}}
+                  {{else}}
+                    {{d-icon "frown-o"}}
+                  {{/if}}
+                </span>
+              {{/if}}
+            </div>
+            <div class="version-notes">
+              {{#if versionCheck.upToDate }}
+                {{i18n 'admin.dashboard.up_to_date'}}
+              {{else}}
+                <span class="critical-note">{{i18n 'admin.dashboard.critical_available'}}</span>
+                <span class="normal-note">{{i18n 'admin.dashboard.updates_available'}}</span>
+                {{i18n 'admin.dashboard.please_upgrade'}}
+              {{/if}}
+            </div>
+          </div>
+
         {{/if}}
       {{/if}}
-    </tbody>
+
-  </table>
+      {{custom-html name="upgrade-header" versionCheck=versionCheck tagName="div" classNames="upgrade-header"}}
+
 </div>

app/assets/stylesheets/common/admin/admin_base.scss

@@ -854,25 +854,81 @@ section.details {
   }
 }
 
-.version-check {
+.version-checks {
+  margin-bottom: 15px;
+  display: flex;
+  flex-wrap: wrap; 
 
-  th {
+  h2 {
-    text-align: left !important;
+    flex: 1 1 100%;
+    border-bottom: 1px solid $primary-low;
+    padding-bottom: .5em;
+  }
+}
+
+.version-check {
+  display: flex;
+  flex: 1 1 50%;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  align-self: flex-start;
+  justify-content: space-between;
+  padding: 20px 0 10px 0;
+
+  .upgrade-header {
+    flex: 1 1 100%;
+    margin: 1em 0 1em 0;
+    @media screen and (max-width: 650px) {
+       margin: 0;
+    }      
+    tr {
+      border: none;
+    }
+    th {
+      background: transparent;
+      text-align: left;
+      padding: 0;
+    }
+  }
+
+  h2 {
+    flex: 1 1 100%;
   }
 
   .version-number {
-    font-size: $font-up-3;
+    font-size: $font-up-2;
-    font-weight: bold;
     line-height: $line-height-medium;
+    font-weight: bold;
+    margin: 0 5% 1em 0;
+    flex: 1 1 auto; 
+    min-width: 100px;
+    h3 {
+      flex: 1 0 auto;
+      white-space: nowrap;
+    }
+    h4 {
+      font-size: $font-down-2; 
+      margin-bottom: 0;
+    }
   }
 
-  .face {
+  .version-status {
-    width: 20px;
+    display: flex;
+    align-items: center;
+    margin: 0 0 1em 0;
+    flex: 1 1 50%;
+    min-width: 250px;
+    max-width: 300px;  
+    padding-right: 20px; 
+    @include small-width {
+      max-width: unset;
+    }
+    .face {
+      margin: 0 .75em 0 0;
+      font-size: $font-up-3;
+    }
   }
 
-  .version-notes .fa {
-    vertical-align: bottom;
-  }
 
   &.critical .version-notes .normal-note {
     display: none;
@@ -921,13 +977,27 @@ table.api-keys {
 }
 
 .dashboard-stats {
+  box-sizing: border-box;
   margin-bottom: 30px;
-  margin-right: 40px;
+  flex: 1 1 50%;
+  box-sizing: border-box;
+  &.version-check {
+    margin: 0;
+  }
+  &.detected-problems {
+    border-left: 1px solid $primary-low;
+    margin: 20px 0 0 0;
+    padding-left: 20px;
+  }
   h4 {
     font-weight: normal;
     margin-bottom: 8px;
   }
 
+  @media screen and (max-width: 650px) {
+    flex: 1 1 100%;
+  }
+
   table {
     width: 100%;
 
@@ -993,40 +1063,56 @@ table.api-keys {
   }
 
   &.detected-problems {
-    background: $primary-low;
+    display: flex;    
-    margin-bottom: 20px;
+    margin-bottom: 30px;
 
     .look-here {
-      float: left;
+      margin: 10px 20px;
-      margin: 20px 10px 0 10px;
 
       .fa {
         font-size: $font-up-5;
-        vertical-align: middle;
+        color: $danger
-        color: $primary
       }
     }
+    @media screen and (max-width: 650px) {
+        border-left: none;
+        border-top: 1px solid $primary-low;
+        padding: 20px 0 0 0;
+        .look-here {
+          margin-left: 0;
+        }
+    }
+    h3 {
+      display: flex;
+    }
+
 
     .problem-messages {
-      float: left;
+      display: flex;
-      width: 80%;
+
-      margin-left: 1%;
       a {
         text-decoration: underline;
       }
-      .actions {
+
-        text-align: right;
-      }
       .btn {
         background: $primary-low;
       }
       ul {
         margin-left: 0;
-        padding-left: 20px;
+        padding-left: 90px;
+        @media screen and (max-width:650px) {
+          padding-left: 20px;
+        }
       li {
         margin-bottom: 10px;
         }
       }
+      p.actions {
+        padding-left: 75px;
+        @media screen and (max-width:650px) {
+          padding-left: 0;
+        }
+      }
   }
 }
 

app/assets/stylesheets/common/admin/dashboard_next.scss

@@ -52,7 +52,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      border-bottom: 1px solid $primary-low-mid;
+      border-bottom: 1px solid $primary-low;
       margin-bottom: .5em;
       padding-bottom: .5em;
     }