Merge pull request #13922 from grafana/login-page-update

Updated login page logo & wordmark and responsive behavior

pkg/api/dtos/index.go

@@ -14,6 +14,7 @@ type IndexViewData struct {
 	NewGrafanaVersionExists bool
 	NewGrafanaVersion       string
 	AppName                 string
+	AppNameBodyClass        string
 }
 
 type PluginCss struct {

pkg/api/index.go

@@ -83,6 +83,7 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er
 		NewGrafanaVersion:       plugins.GrafanaLatestVersion,
 		NewGrafanaVersionExists: plugins.GrafanaHasUpdate,
 		AppName:                 setting.ApplicationName,
+		AppNameBodyClass:        getAppNameBodyClass(setting.ApplicationName),
 	}
 
 	if setting.DisableGravatar {
@@ -377,3 +378,14 @@ func (hs *HTTPServer) NotFoundHandler(c *m.ReqContext) {
 
 	c.HTML(404, "index", data)
 }
+
+func getAppNameBodyClass(name string) string {
+	switch name {
+	case setting.APP_NAME:
+		return "app-grafana"
+	case setting.APP_NAME_ENTERPRISE:
+		return "app-enterprise"
+	default:
+		return ""
+	}
+}

pkg/setting/setting.go

@@ -31,9 +31,11 @@ const (
 )
 
 const (
-	DEV  string = "development"
-	PROD string = "production"
-	TEST string = "test"
+	DEV                 = "development"
+	PROD                = "production"
+	TEST                = "test"
+	APP_NAME            = "Grafana"
+	APP_NAME_ENTERPRISE = "Grafana Enterprise"
 )
 
 var (
@@ -531,9 +533,9 @@ func (cfg *Cfg) Load(args *CommandLineArgs) error {
 	// Temporary keep global, to make refactor in steps
 	Raw = cfg.Raw
 
-	ApplicationName = "Grafana"
+	ApplicationName = APP_NAME
 	if IsEnterprise {
-		ApplicationName += " Enterprise"
+		ApplicationName = APP_NAME_ENTERPRISE
 	}
 
 	Env = iniFile.Section("").Key("app_mode").MustString("development")

public/app/partials/login.html

@@ -2,7 +2,7 @@
   <div class="login-content">
     <div class="login-branding">
       <img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" />
-      <i class="icon-gf icon-gf-grafana_wordmark"></i>
+      <div class="logo-wordmark" />
     </div>
     <div class="login-outer-box">
       <div class="login-inner-box" id="login-view">

public/sass/components/_footer.scss

@@ -40,15 +40,15 @@
 
 .login-page {
   .footer {
+    bottom: $spacer;
+    position: absolute;
     padding: 1rem 0 1rem 0;
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(sm) {
   .login-page {
     .footer {
-      bottom: $spacer;
-      position: absolute;
       padding: 5rem 0 1rem 0;
     }
   }

public/sass/pages/_login.scss

 $login-border: #8daac5;
 
 .login {
-  min-height: 85vh;
+  min-height: 100vh;
   background-position: center;
   background-repeat: no-repeat;
   min-width: 100%;
@@ -97,6 +97,7 @@ select:-webkit-autofill:focus {
 
 .login-content {
   max-width: 700px;
+  width: 100%;
   display: flex;
   align-items: stretch;
   flex-direction: column;
@@ -120,18 +121,29 @@ select:-webkit-autofill:focus {
     width: 70px;
     margin-bottom: 15px;
   }
+}
 
-  .icon-gf-grafana_wordmark {
-    color: darken($white, 11%);
-    position: relative;
-    font-size: 2rem;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+.app-grafana {
+  .logo-wordmark {
+    background: url('../img/grafana_typelogo.svg') top center no-repeat;
+    width: 100%;
+    height: 70px;
+  }
+}
+
+.app-enterprise {
+  .logo-wordmark {
+    background: url('../img/grafana_enterprise_typelogo.svg') top center no-repeat;
+    width: 100%;
+    height: 70px;
   }
 }
 
 .login-outer-box {
   display: flex;
   overflow-y: hidden;
+  align-items: center;
+  justify-content: center;
 }
 
 .login-inner-box {
@@ -143,6 +155,7 @@ select:-webkit-autofill:focus {
   justify-content: center;
   flex-grow: 1;
   max-width: 415px;
+  width: 100%;
   transform: tranlate(0px, 0px);
   transition: 0.25s ease;
 
@@ -324,23 +337,19 @@ select:-webkit-autofill:focus {
 }
 
 @include media-breakpoint-up(sm) {
-  .login-content {
-    flex-direction: row;
-  }
-
   .login-branding {
-    width: 35%;
-    padding: 4rem 2rem;
-    border-right: 1px solid $login-border;
+    padding: 1rem;
 
     .logo-icon {
       width: 80px;
     }
   }
+}
 
-  .login-inner-box {
-    width: 65%;
-    padding: 1rem 2rem;
+@include media-breakpoint-up(md) {
+  .login-content {
+    flex-direction: row;
+    flex: 1 0 100%;
   }
 
   .login-divider {
@@ -348,29 +357,16 @@ select:-webkit-autofill:focus {
       width: 110px;
     }
   }
-}
-
-@include media-breakpoint-up(md) {
-  .login {
-    min-height: 100vh;
-  }
-
-  .login-content {
-    flex: 1 0 100%;
-  }
 
   .login-branding {
     width: 45%;
-    padding: 2rem 4rem;
+    padding: 2rem;
     flex-grow: 1;
+    border-right: 1px solid $login-border;
 
     .logo-icon {
       width: 130px;
     }
-
-    .icon-gf-grafana_wordmark {
-      font-size: 3.2rem;
-    }
   }
 
   .login-inner-box {
@@ -386,9 +382,7 @@ select:-webkit-autofill:focus {
     padding-top: 0;
     padding-left: 10px;
   }
-}
 
-@include media-breakpoint-up(lg) {
   .login-form-input {
     min-width: 300px;
   }

public/views/index.template.html

@@ -23,7 +23,7 @@
   <meta name="msapplication-config" content="public/img/browserconfig.xml">
 </head>
 
-<body class="theme-[[ .Theme ]]">
+<body class="theme-[[ .Theme ]] [[.AppNameBodyClass]]">
 
   <style>
     .preloader {