From bf78bb16ddafb037d4e449e979538260c5f8e0f1 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 12 Apr 2018 18:37:37 +0200 Subject: [PATCH] fixes: U4-11209 Update layout for developer dashboards to fit new styles --- .../src/less/components/card.less | 27 ++ .../src/less/healthcheck.less | 24 +- .../src/less/tables.less | 1 + .../developer/developerdashboardvideos.html | 27 +- .../developer/examinemanagement.html | 436 +++++++++--------- .../dashboard/developer/healthcheck.html | 105 +++-- .../dashboard/developer/publishedstatus.html | 16 +- .../settings/settingsdashboardintro.html | 28 +- 8 files changed, 361 insertions(+), 303 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/card.less b/src/Umbraco.Web.UI.Client/src/less/components/card.less index bceef1767b..60aec5c036 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/card.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/card.less @@ -185,3 +185,30 @@ border: none !important; background: none !important; } + +.umb-training-videos { + display: grid; + grid-gap: 10px; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); +} + +.umb-training-video { + background: @white; + box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16); + border-radius: @baseBorderRadius; + transition: box-shadow 0.1s ease-in-out, border 0.1s ease-in-out; + box-sizing: border-box; + padding: 20px; +} + +.umb-training-video:hover { + box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16); + text-decoration: none; +} + +.umb-training-video__label { + font-weight: bold; + margin-top: 20px; + display: block; + text-align: center; +} diff --git a/src/Umbraco.Web.UI.Client/src/less/healthcheck.less b/src/Umbraco.Web.UI.Client/src/less/healthcheck.less index 9a8c55d08b..7a96c906e3 100644 --- a/src/Umbraco.Web.UI.Client/src/less/healthcheck.less +++ b/src/Umbraco.Web.UI.Client/src/less/healthcheck.less @@ -24,17 +24,18 @@ display: flex; flex-wrap: wrap; flex-direction: column; - background: @gray-10; + background: @white; border-radius: 3px; - padding: 15px 10px; + padding: 20px; box-sizing: border-box; text-align: center; - border: 1px solid @gray-8; + box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16); height: 100%; + box-sizing: border-box; } .umb-healthcheck-group:hover { - border: 1px solid @turquoise; + box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16); cursor: pointer; } @@ -60,7 +61,7 @@ .umb-healthcheck-message { position: relative; - background: @white; + background: @gray-10; border-radius: 50px; display: inline-flex; align-items: center; @@ -125,6 +126,12 @@ margin-bottom: 40px; } +.umb-healthcheck-group__details-group { + background: @white; + box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16); + border-radius: @baseBorderRadius; +} + .umb-healthcheck-group__details-group-title { background-color: @purple-l1; padding: 10px 20px; @@ -141,9 +148,9 @@ } .umb-healthcheck-group__details-checks { - border: 1px solid @gray-8; border-top: none; border-radius: 0 0 3px 3px; + background: @white; } .umb-healthcheck-group__details-check { @@ -152,14 +159,13 @@ .umb-healthcheck-group__details-check-title { padding: 15px 20px; - background-color: @gray-10; } .umb-healthcheck-group__details-check-name { font-size: 15px; color: @black; font-weight: bold; - margin-bottom: 5px; + margin-bottom: 3px; } .umb-healthcheck-group__details-check-description { @@ -171,7 +177,7 @@ .umb-healthcheck-group__details-status { padding: 15px 0; display: flex; - border-bottom: 2px solid @gray-10; + border-top: 2px solid @gray-10; } .umb-healthcheck-group__details-status-overlay { diff --git a/src/Umbraco.Web.UI.Client/src/less/tables.less b/src/Umbraco.Web.UI.Client/src/less/tables.less index abf3af40f6..7317d93d4a 100644 --- a/src/Umbraco.Web.UI.Client/src/less/tables.less +++ b/src/Umbraco.Web.UI.Client/src/less/tables.less @@ -82,6 +82,7 @@ table { border-collapse: separate; // Done so we can round those corners! *border-collapse: collapse; // IE7 can't round corners anyway border-left: 0; + box-shadow: none; .border-radius(@baseBorderRadius); th, td { diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/developerdashboardvideos.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/developerdashboardvideos.html index 0ad779cf3e..9c31ece7a0 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/developerdashboardvideos.html +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/developerdashboardvideos.html @@ -1,18 +1,15 @@ -

Hours of Umbraco training videos are only a click away

-

Want to master Umbraco? Spend a couple of minutes learning some best practices by watching one of these videos about using Umbraco, then visit umbraco.tv for even more Umbraco videos.

+

Hours of Umbraco training videos are only a click away

+

Want to master Umbraco? Spend a couple of minutes learning some best practices by watching one of these videos about using Umbraco, then visit umbraco.tv for even more Umbraco videos.

-
+
+ +
+ + {{video.title}} + {{video.title}} + +
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/examinemanagement.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/examinemanagement.html index 645b783c65..021d2b45d9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/examinemanagement.html +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/examinemanagement.html @@ -9,260 +9,270 @@
-
-
Indexers
-
+
-
-
-
-
Manage Examine's indexes
-
Allows you to view the details of each index and provides some tools for managing the indexes
-
+
+
Indexers
+
-
- -
- +
+
+
+
Manage Examine's indexes
+
Allows you to view the details of each index and provides some tools for managing the indexes
-
-
-
- {{indexer.name}} -
- - {{indexer.name}} - -
- The index cannot be read and will need to be rebuilt -
+
+ +
+
-
-
- +
+
+
+ {{indexer.name}} +
+ + {{indexer.name}} + +
+ The index cannot be read and will need to be rebuilt +
-
-
-
    -
  • - Index info & tools +
    +
    + + +
    +
    -
    -
    -
    +
    +
      +
    • + Index info & tools -
      - -
      - -
      - The process is taking longer than expected, check the umbraco log to see if there have been any errors during this operation +
      +
      +
      + +
      + +
      + +
      + The process is taking longer than expected, check the umbraco log to see if there have been any errors during this operation +
      + + + + + + + + + + +
       
      Documents in index{{indexer.documentCount}}
      Fields in index{{indexer.fieldCount}}
      - - - - - + +
    • + Node types +
      •  
      Documents in index{{indexer.documentCount}}
      + + + + + + + + + + + - - - -
      Include node types{{indexer.indexCriteria.IncludeNodeTypes | json}}
      Exclude node types{{indexer.indexCriteria.ExcludeNodeTypes | json}}
      Parent node id{{indexer.indexCriteria.ParentNodeId}}
      Fields in index{{indexer.fieldCount}}
      -
      -
      • -
    • - Node types - - - - - - - - - - - - - -
      Include node types{{indexer.indexCriteria.IncludeNodeTypes | json}}
      Exclude node types{{indexer.indexCriteria.ExcludeNodeTypes | json}}
      Parent node id{{indexer.indexCriteria.ParentNodeId}}
      -
      • -
    • - System fields - - - - - - - + +
    • + System fields +
      •  
      NameEnable sortingType
      + + + + + + + + + + + + + + + +
       
      NameEnable sortingType
      {{field.Name}}{{field.EnableSorting}}{{field.Type}}
      +
      • +
    • + User fields + + + + + + + + + + + + + + + + +
       
      NameEnable sortingType
      {{field.Name}}{{field.EnableSorting}}{{field.Type}}
      +
      • +
    • + Provider properties + + + + + - - - - - - - - -
       
      {{key}}{{val}}
      {{field.Name}}{{field.EnableSorting}}{{field.Type}}
      -
      • -
    • - User fields - - - - - - - - - - - - - - - - -
       
      NameEnable sortingType
      {{field.Name}}{{field.EnableSorting}}{{field.Type}}
      -
      • -
    • - Provider properties - - - - - - -
       
      {{key}}{{val}}
      -
      • -
    + +
    • +
+
-
-
-
- +
+
+ +
+

-
-
Searchers
-
+
-
-
-
-
Search indexes
-
Allows you to search the indexes and view the searcher properties
-
+
+
Searchers
+
-
- -
- +
+
+
+
Search indexes
+
Allows you to search the indexes and view the searcher properties
- -
-
- - {{searcher.name}} - + +
+ +
+
-
-
    -
  • +
    +
    + + {{searcher.name}} + +
    + +
    +
      +
    • - Search tools + Search tools -
      - Hide search results +
      + Hide search results -
      +
      -
      + -
      -
      - - +
      +
      + + +
      +
      + + +
      + + + + +
      + +
      +
      +
      + + + + + + + + + + + + + + + + +
      ScoreIdValues
      {{result.Score}}{{result.Id}} + + {{key}}: + {{val}} + +
      -
      - - -
      - - - - -
      - -
      -
      -
      - - - - - - - - - - - - - - - - -
      ScoreIdValues
      {{result.Score}}{{result.Id}} - - {{key}}: - {{val}} - -
      -
      -
      • -
    • - Provider properties - - - - - - -
       
      {{key}}{{val}}
      -
      • -
    +
    • +
  • + Provider properties + + + + + + +
     
    {{key}}{{val}}
    +
    • +
+
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/healthcheck.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/healthcheck.html index 3d913012d7..23bace18c4 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/healthcheck.html +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/healthcheck.html @@ -4,7 +4,12 @@

Health Check

- + +
@@ -65,67 +70,75 @@
-
-
{{ vm.selectedGroup.name }}
- -
+
-
+
+
{{ vm.selectedGroup.name }}
+ + +
-
+
-
-
{{ check.name }}
-
{{ check.description }}
-
+
-
- -
- - - - +
+
{{ check.name }}
+
{{ check.description }}
-
+
-
-
-
+
+ + + +
-
-
- +
-
-
- -
- - - - - -
+
+
+
+ +
+
+ + +
+
+ +
+ + + + + +
+
+
+
-
+
+
+ +
-
-
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/publishedstatus.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/publishedstatus.html index 29d136d107..09a02bc67e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/publishedstatus.html +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/developer/publishedstatus.html @@ -1,9 +1,11 @@ 
-

Published Status

- -
- Loading... -
- -
+

Published Status

+ + +
+ Loading... +
+
+ +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/settingsdashboardintro.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/settingsdashboardintro.html index d59d10d393..dd3f83ca7d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/settingsdashboardintro.html +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/settingsdashboardintro.html @@ -1,14 +1,16 @@ -

Start here

-

This section contains the building blocks for your Umbraco site

-

Follow the below links to find out more about working with the items in the Settings section:

+

Start here

+ + +

This section contains the building blocks for your Umbraco site. Follow the below links to find out more about working with the items in the Settings section:

+
Find out more:
+ + + -

Find out more:

- -