diff --git a/pkg/api/dtos/index.go b/pkg/api/dtos/index.go
index 77004899fc3..bd3ac76eec8 100644
--- a/pkg/api/dtos/index.go
+++ b/pkg/api/dtos/index.go
@@ -14,6 +14,7 @@ type IndexViewData struct {
NewGrafanaVersionExists bool
NewGrafanaVersion string
AppName string
+ AppNameBodyClass string
}
type PluginCss struct {
diff --git a/pkg/api/index.go b/pkg/api/index.go
index e61620f9586..fe7c9e79a17 100644
--- a/pkg/api/index.go
+++ b/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 ""
+ }
+}
diff --git a/pkg/setting/setting.go b/pkg/setting/setting.go
index 077822a37a4..3750e95e6a4 100644
--- a/pkg/setting/setting.go
+++ b/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")
diff --git a/public/app/partials/login.html b/public/app/partials/login.html
index 260de80e389..a2bc8173766 100644
--- a/public/app/partials/login.html
+++ b/public/app/partials/login.html
@@ -2,7 +2,7 @@

-
+
diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss
index 3c30f5a5798..9bc99c30d1d 100644
--- a/public/sass/components/_footer.scss
+++ b/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;
}
}
diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss
index 8e5c8f33e37..4baff47b2a8 100644
--- a/public/sass/pages/_login.scss
+++ b/public/sass/pages/_login.scss
@@ -1,7 +1,7 @@
$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;
}
diff --git a/public/views/index.template.html b/public/views/index.template.html
index 0717908c84c..1f6e511784d 100644
--- a/public/views/index.template.html
+++ b/public/views/index.template.html
@@ -23,7 +23,7 @@
-
+