diff --git a/app/assets/js/start.js b/app/assets/js/start.js index 3bf2bea8..0dab65cc 100644 --- a/app/assets/js/start.js +++ b/app/assets/js/start.js @@ -4,4 +4,6 @@ $(function() { $('.wrapper').toggleClass('active'); }); + $('[data-toggle="tooltip"]').tooltip(); + }); diff --git a/app/assets/sass/_helpers.scss b/app/assets/sass/_helpers.scss new file mode 100644 index 00000000..089f89bf --- /dev/null +++ b/app/assets/sass/_helpers.scss @@ -0,0 +1,3 @@ +.uppercase { + text-transform: uppercase; +} diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index cae804db..58bc31a5 100644 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -6,13 +6,21 @@ html, body { height: 100%; } -@import "modules/tabs"; +@import "helpers"; +// Module overrides +@import "modules/tabs"; +@import "modules/forms"; + +// Styles for partials @import "partials/base"; @import "partials/wrapper"; @import "partials/navbar"; @import "partials/sidebar"; @import "partials/content"; +// Styles for specific page +@import "pages/login"; + // Status Page will need to override certain styles. @import "status-page"; diff --git a/app/assets/sass/modules/_bootstrap.scss b/app/assets/sass/modules/_bootstrap.scss index ef55b6c8..06759e23 100644 --- a/app/assets/sass/modules/_bootstrap.scss +++ b/app/assets/sass/modules/_bootstrap.scss @@ -1,49 +1,52 @@ +// Bootstrap variable overrides and custom variables +@import "variables"; + // Core variables and mixins -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins"; // Reset and dependencies -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/normalize"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/print"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/normalize"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/print"; // Core CSS -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/scaffolding"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/type"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/code"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/grid"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/tables"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/forms"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/buttons"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/scaffolding"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/type"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/code"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/grid"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/tables"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/forms"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/buttons"; // Components -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/component-animations"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/dropdowns"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/button-groups"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/input-groups"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/navs"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/navbar"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/breadcrumbs"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/pagination"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/pager"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/labels"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/badges"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/jumbotron"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/thumbnails"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/alerts"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/progress-bars"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/media"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/list-group"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/panels"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/responsive-embed"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/wells"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/close"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/component-animations"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/dropdowns"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/button-groups"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/input-groups"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/navs"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/navbar"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/breadcrumbs"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/pagination"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/pager"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/labels"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/badges"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/jumbotron"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/thumbnails"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/alerts"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/progress-bars"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/media"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/list-group"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/panels"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/responsive-embed"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/wells"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/close"; // Components w/ JavaScript -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/modals"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/tooltip"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/popovers"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/carousel"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/modals"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/tooltip"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/popovers"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/carousel"; // Utility classes -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/utilities"; -@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/responsive-utilities"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/utilities"; +@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/responsive-utilities"; diff --git a/app/assets/sass/modules/_forms.scss b/app/assets/sass/modules/_forms.scss new file mode 100644 index 00000000..294d32fc --- /dev/null +++ b/app/assets/sass/modules/_forms.scss @@ -0,0 +1,19 @@ +label { + font-size: 14px; +} + +.form-control { + @include box-shadow(none); +} + +input.form-control { + padding: 2px 8px; + height: 40px; +} + +.form-control:focus { + padding: 2px 8px; + border: 1px solid #999; + outline: 0; + @include box-shadow(none); +} diff --git a/app/assets/sass/modules/_variables.scss b/app/assets/sass/modules/_variables.scss new file mode 100644 index 00000000..7598630c --- /dev/null +++ b/app/assets/sass/modules/_variables.scss @@ -0,0 +1,5 @@ +$brand-success: #7ed321 !default; + +//** Tooltip background color +$tooltip-bg: #333 !default; +$tooltip-opacity: .9 !default; diff --git a/app/assets/sass/pages/_login.scss b/app/assets/sass/pages/_login.scss new file mode 100644 index 00000000..31c33d97 --- /dev/null +++ b/app/assets/sass/pages/_login.scss @@ -0,0 +1,18 @@ +.login { + padding-top: 90px; +} + +.login .logo { + display: block; + margin: 0 auto 30px; +} + +.login legend { + border: 0; + padding: 0; + width: 100%; + font-size: 24px; + font-weight: 500; + text-align: center; + margin: 0 0 30px 0; +} diff --git a/app/assets/sass/partials/_base.scss b/app/assets/sass/partials/_base.scss index 16d9e349..b9b88617 100644 --- a/app/assets/sass/partials/_base.scss +++ b/app/assets/sass/partials/_base.scss @@ -3,7 +3,6 @@ body.dashboard { font-weight: $base-font-weight; font-size: $base-font-size; letter-spacing: $base-letter-spacing; - background: $base-background-color; display: table; width: 100%; height: 100%; diff --git a/app/assets/sass/partials/_content.scss b/app/assets/sass/partials/_content.scss index 4493b77f..bfccc5ec 100644 --- a/app/assets/sass/partials/_content.scss +++ b/app/assets/sass/partials/_content.scss @@ -1,6 +1,5 @@ body.dashboard { .content { - padding-top: 69px; position: relative; display: table-cell; vertical-align: top; @@ -9,11 +8,21 @@ body.dashboard { margin: 10px 0; } .header { - background: #fff; - padding: 14px; + position: absolute; + top: 0; + left: 0; + color: #333; + background-color: #fff; + padding: 22px 14px; width: 100%; - height: 50px; + height: 70px; font-size: 1.2em; + border-bottom: 1px solid #eee; + z-index: 99; + &.fixed { + position: fixed; + padding-left: 250px; + } i { // padding-right: 10px; } @@ -28,10 +37,28 @@ body.dashboard { + .row { margin-top: 23px; } - } - h3 { - margin-top: 0; + h3 { + color: #444; + margin-top: 0; + text-transform: uppercase; + } } + .content-wrapper { + margin-top: 80px; + } + + .sub-header { + font-weight: 300; + text-transform: uppercase; + } + + .striped-list { + + .striped-list-item { + border-bottom: 1px solid #f0f0f0; + padding: 8px 0; + } + } } } diff --git a/app/assets/sass/partials/_sidebar.scss b/app/assets/sass/partials/_sidebar.scss index 59bbc00f..9d33a1eb 100644 --- a/app/assets/sass/partials/_sidebar.scss +++ b/app/assets/sass/partials/_sidebar.scss @@ -4,14 +4,13 @@ body.dashboard { vertical-align: top; width: $sidebar-normal-width; background: $sidebar-background-color; + @include box-shadow($sidebar-border-shadow); position: relative; - z-index: 100; + z-index: 999; .sidebar-inner { position: relative; - margin-top: 69px; - .profile { padding: 20px; margin-bottom: 20px; @@ -26,6 +25,10 @@ body.dashboard { color: $sidebar-text-color; } } + .quick-add-incident { + @extend text-center; + padding: 10px; + } ul { clear: both; margin: 0; @@ -33,7 +36,7 @@ body.dashboard { list-style: none; li { - font-size: 0.8em; + font-size: $sidebar-text-size; &:last-child { border-bottom: $sidebar-border-color; } @@ -49,7 +52,11 @@ body.dashboard { border-top: $sidebar-border-color; color: $sidebar-text-color; i { - padding-right: 10px; + font-size: 18px; + min-width: 17px; + text-align: center; + position: relative; + top: 1px; } &:hover { text-decoration: none; @@ -64,5 +71,25 @@ body.dashboard { } } } + .bottom-menu-sidebar { + position: fixed; + bottom: 0; + width: 230px; + z-index: 999; + ul > li { + float: left; + display: block; + width: 33.333%; + border-right: 1px solid #ddd; + border-top: 1px solid #ddd; + a { + display: block; + position: relative; + text-align: center; + padding: 6px 0; + background: #fff; + } + } + } } } diff --git a/app/assets/sass/partials/_variables.scss b/app/assets/sass/partials/_variables.scss index 67200533..a6f4bd80 100644 --- a/app/assets/sass/partials/_variables.scss +++ b/app/assets/sass/partials/_variables.scss @@ -12,11 +12,13 @@ $header-background-color: lighten(#00695C, 10%); $header-border-color: 1px solid darken($header-background-color, 10%); $sidebar-transition-speed: .2s; -$sidebar-background-color: #2c3e50; +$sidebar-background-color: #F0F3F4; $sidebar-border-color: 1px solid rgba(255, 255, 255, .1); -$sidebar-text-color: #d7dadc; -$sidebar-text-active-color: #ffffff; -$sidebar-normal-width: 250px; +$sidebar-border-shadow: inset 0px -2px 3px rgba(0,0,0,0.25); +$sidebar-text-size: 0.9em; +$sidebar-text-color: #333; +$sidebar-text-active-color: #333; +$sidebar-normal-width: 230px; $sidebar-phone-width: 75%; $sidebar-active-color: #00695C; diff --git a/app/lang/en/cachet.php b/app/lang/en/cachet.php index dd24fbdf..05222c07 100644 --- a/app/lang/en/cachet.php +++ b/app/lang/en/cachet.php @@ -26,13 +26,14 @@ return [ 'bad' => 'Some systems are experiencing issues.', ], // Other - 'powered_by' => ':app Status Page is powered by Cachet.', - 'login' => 'Login', - 'logout' => 'Logout', - 'logged_in' => 'You\'re logged in.', - 'setup' => 'Setup Cachet', - 'no_incidents' => 'No incidents reported.', - 'dashboard' => [ + 'powered_by' => ':app Status Page is powered by Cachet.', + 'login_message' => 'Welcome Back!', + 'login' => 'Login', + 'logout' => 'Logout', + 'logged_in' => 'You\'re logged in.', + 'setup' => 'Setup Cachet', + 'no_incidents' => 'No incidents reported.', + 'dashboard' => [ 'dashboard' => 'Dashboard', 'components' => 'Components', 'component-add' => 'Add Component', @@ -47,6 +48,7 @@ return [ 'toggle_navigation' => 'Toggle Navigation', 'search' => 'Search...', 'user' => 'User', + 'help' => 'Help', ], // Forms 'forms' => [ diff --git a/app/views/auth/login.blade.php b/app/views/auth/login.blade.php index b1281106..3716b4d5 100644 --- a/app/views/auth/login.blade.php +++ b/app/views/auth/login.blade.php @@ -1,12 +1,14 @@ -@extends('layout.dashboard') +@extends('layout.clean') @section('content') - @include('partials.dashboard.nav') -
-
+