From 58eb45a560adc1f9a559794315c03003d16a1af0 Mon Sep 17 00:00:00 2001 From: Kris Date: Tue, 15 May 2018 20:18:21 -0400 Subject: [PATCH] Improving version section of dashboard --- .../admin/templates/dashboard-problems.hbs | 9 +- .../admin/templates/dashboard_next.hbs | 6 +- .../admin/templates/version-checks.hbs | 120 ++++++++-------- .../stylesheets/common/admin/admin_base.scss | 134 ++++++++++++++---- .../common/admin/dashboard_next.scss | 2 +- 5 files changed, 179 insertions(+), 92 deletions(-) diff --git a/app/assets/javascripts/admin/templates/dashboard-problems.hbs b/app/assets/javascripts/admin/templates/dashboard-problems.hbs index 3c43f979c1d..94f878bc9e9 100644 --- a/app/assets/javascripts/admin/templates/dashboard-problems.hbs +++ b/app/assets/javascripts/admin/templates/dashboard-problems.hbs @@ -1,16 +1,17 @@ {{#if foundProblems}}
-
{{d-icon "exclamation-triangle"}}
{{#conditional-loading-spinner condition=loadingProblems}} -

- {{i18n 'admin.dashboard.problems_found'}} +

+

+ {{d-icon "exclamation-triangle"}} + {{i18n 'admin.dashboard.problems_found'}}

    {{#each problems as |problem|}}
  • {{{problem}}}
    • {{/each}}
-

+

{{i18n 'admin.dashboard.last_checked'}}: {{problemsTimestamp}} {{d-button action="refreshProblems" class="btn-small" icon="refresh" label="admin.dashboard.refresh_problems"}} diff --git a/app/assets/javascripts/admin/templates/dashboard_next.hbs b/app/assets/javascripts/admin/templates/dashboard_next.hbs index f1624b33e22..977a94d1796 100644 --- a/app/assets/javascripts/admin/templates/dashboard_next.hbs +++ b/app/assets/javascripts/admin/templates/dashboard_next.hbs @@ -2,12 +2,10 @@

{{#if showVersionChecks}} -
+
{{partial 'admin/templates/version-checks'}} -
-
{{partial 'admin/templates/dashboard-problems'}} -
+
{{/if}}
diff --git a/app/assets/javascripts/admin/templates/version-checks.hbs b/app/assets/javascripts/admin/templates/version-checks.hbs index a8724b7e5a5..26750a06443 100644 --- a/app/assets/javascripts/admin/templates/version-checks.hbs +++ b/app/assets/javascripts/admin/templates/version-checks.hbs @@ -1,73 +1,75 @@ -
- - {{custom-html name="upgrade-header" versionCheck=versionCheck tagName="thead"}} -
+

{{i18n 'admin.dashboard.version'}}

+
- - - - - - - - - - - +
+

{{i18n 'admin.dashboard.installed_version'}}

+

{{dash-if-empty versionCheck.installed_describe}}

+
{{#if versionCheck.noCheckPerformed}} - - - +
+

{{i18n 'admin.dashboard.latest_version'}}

+

—

+
+
+
+ {{d-icon "frown-o"}} +
+
+ {{i18n 'admin.dashboard.no_check_performed'}} +
+
{{else}} {{#if versionCheck.stale_data}} - - - - {{else}} - - - + + + {{else}} +
{{dash-if-empty versionCheck.latest_version}}
+
+
+ {{#if versionCheck.upToDate }} + {{d-icon "smile-o"}} + {{else}} + + {{#if versionCheck.behindByOneVersion}} + {{d-icon "meh-o"}} + {{else}} + {{d-icon "frown-o"}} + {{/if}} + + {{/if}} +
+
+ {{#if versionCheck.upToDate }} + {{i18n 'admin.dashboard.up_to_date'}} + {{else}} + {{i18n 'admin.dashboard.critical_available'}} + {{i18n 'admin.dashboard.updates_available'}} + {{i18n 'admin.dashboard.please_upgrade'}} + {{/if}} +
+
+ {{/if}} {{/if}} - -
 {{i18n 'admin.dashboard.installed_version'}}{{i18n 'admin.dashboard.latest_version'}}
{{i18n 'admin.dashboard.version'}}{{dash-if-empty versionCheck.installed_describe}}— - {{d-icon "frown-o"}} - - {{i18n 'admin.dashboard.no_check_performed'}} - {{#if versionCheck.version_check_pending}}{{dash-if-empty versionCheck.installed_version}}{{/if}} - {{#if versionCheck.version_check_pending}} - {{d-icon "smile-o"}} - {{else}} - {{d-icon "frown-o"}} - {{/if}} - - +
{{#if versionCheck.version_check_pending}}{{dash-if-empty versionCheck.installed_version}}{{/if}}
+
+
{{#if versionCheck.version_check_pending}} - {{i18n 'admin.dashboard.version_check_pending'}} + {{d-icon "smile-o"}} {{else}} - {{i18n 'admin.dashboard.stale_data'}} + {{d-icon "frown-o"}} {{/if}} - -
{{dash-if-empty versionCheck.latest_version}} - {{#if versionCheck.upToDate }} - {{d-icon "smile-o"}} - {{else}} - - {{#if versionCheck.behindByOneVersion}} - {{d-icon "meh-o"}} + +
+ + {{#if versionCheck.version_check_pending}} + {{i18n 'admin.dashboard.version_check_pending'}} {{else}} - {{d-icon "frown-o"}} + {{i18n 'admin.dashboard.stale_data'}} {{/if}} - {{/if}} -
- {{#if versionCheck.upToDate }} - {{i18n 'admin.dashboard.up_to_date'}} - {{else}} - {{i18n 'admin.dashboard.critical_available'}} - {{i18n 'admin.dashboard.updates_available'}} - {{i18n 'admin.dashboard.please_upgrade'}} - {{/if}} -
+ + {{custom-html name="upgrade-header" versionCheck=versionCheck tagName="div" classNames="upgrade-header"}} +
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index d3ee8fb0f85..7f8a219c9ab 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/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 { - text-align: left !important; + h2 { + 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-weight: bold; + font-size: $font-up-2; 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 { - width: 20px; + .version-status { + 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; - margin-bottom: 20px; + display: flex; + margin-bottom: 30px; .look-here { - float: left; - margin: 20px 10px 0 10px; + margin: 10px 20px; .fa { font-size: $font-up-5; - vertical-align: middle; - color: $primary + color: $danger } } + @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; - width: 80%; - margin-left: 1%; + display: flex; + 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; + } + } } } diff --git a/app/assets/stylesheets/common/admin/dashboard_next.scss b/app/assets/stylesheets/common/admin/dashboard_next.scss index cea2fc24435..7a6ad48bdb2 100644 --- a/app/assets/stylesheets/common/admin/dashboard_next.scss +++ b/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; }