ux: new fixes

pkg/api/index.go

@@ -84,6 +84,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 	themeUrlParam := c.Query("theme")
 	if themeUrlParam == "light" {
 		data.User.LightTheme = true
+		data.Theme = "light"
 	}
 
 	if c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR {

public/app/features/dashboard/partials/shareModal.html

@@ -62,7 +62,7 @@
 		</gf-form-switch>
 		<div class="gf-form">
 			<span class="gf-form-label width-12">Theme</span>
-			<div class="gf-form-select-wrapper width-6">
+			<div class="gf-form-select-wrapper width-10">
 				<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
 			</div>
 		</div>

public/sass/components/_dashboard_grid.scss

@@ -22,7 +22,7 @@
 }
 
 .react-grid-item {
-  // overflow: auto;
+  overflow: hidden;
 }
 
 .theme-dark {

public/sass/layout/_page.scss

@@ -125,31 +125,61 @@
   display: flex;
   padding: 0 $spacer;
   line-height: 0.5;
-  margin-left: 2em;
 }
 
+$page-breadcrumb__angle-1: 39px;
+$page-breadcrumb__angle-ul: 31px;
+$page-breadcrumb__angle-a: 30px;
+
 .page-breadcrumb__item {
   background: $page-nav-bg;
-  margin-right: .2rem;
-  transform: skewX(-35deg);
-
+  box-shadow: $page-nav-shadow;
 
   > a {
     color: $page-nav-breadcrumb-color;
     font-size: $font-size-sm;
     display: block;
-    padding: 0.6rem 1rem 0.6rem 1rem;;
+    padding: 0.6rem 1rem 0.6rem 3rem;;
     position: relative;
-    transform: skewX(35deg);
-  }
 
-  &:last-child {
-    background: $breadcrumb-hover-hl;;
+    &::after {
+      content: '';
+      position: absolute;
+      top: -53px;
+      left: 100%;
+      content: '';
+      height: 0;
+      width: 0;
+      border: $page-breadcrumb__angle-1 solid transparent;
+      border-right-width: 0;
+      border-left-width: $page-breadcrumb__angle-a;
+      z-index: 2;
+      border-left-color: $page-nav-bg;
+    }
   }
 
+  &:first-child {
+    a {
+      padding-left: 1rem;
+    }
+  }
 
-
-
+  &::after {
+    content: '';
+    position: absolute;
+    top: -53px;
+    left: 100%;
+    content: '';
+    height: 0;
+    width: 0;
+    border: $page-breadcrumb__angle-1 solid transparent;
+    border-right-width: 0;
+    border-left-width: $page-breadcrumb__angle-ul;
+    z-index: 1;
+    transform: translateX(4px);
+    border-left-color: #282020;
+    margin: 0;
+  }
 
   &:hover {
     background: $breadcrumb-hover-hl;
@@ -169,14 +199,3 @@
   }
 }
 
-.page-breadcrumb__caret {
-  opacity: 0;
-  position: absolute;
-  display: block;
-  width: 16px;
-  height: 16px;
-  right: -9px;
-  top: 5px;
-  z-index: 3;
-}
-