Started on dashboard styling and implementation
This commit is contained in:
Elliot Hesp
@@ -2,4 +2,8 @@ $(function() {
|
||||
|
||||
$('.tabs').tabs({active: 2});
|
||||
|
||||
$('#sidebar-toggle').click(function() {
|
||||
$('.sidebar').toggleClass('active');
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,3 +1,7 @@
|
||||
body {
|
||||
background: #f5f5f5;
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@import "partials/base";
|
||||
@import "partials/header";
|
||||
@import "partials/sidebar";
|
||||
30
app/assets/sass/partials/_base.scss
Normal file
30
app/assets/sass/partials/_base.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
$base-background-color: #f5f5f5;
|
||||
|
||||
$base-font-family: "Helvetica Neue", Helvetica, "Open Sans", sans-serif;
|
||||
$base-font-weight: lighter;
|
||||
$base-letter-spacing: 1px;
|
||||
|
||||
$base-link-color: #ffffff;
|
||||
$base-link-hover-color: #e9e9e9;
|
||||
|
||||
$header-background-color: #263238;
|
||||
$header-border-color: 1px solid #182024;
|
||||
|
||||
$sidebar-background-color: #37474f;
|
||||
$sidebar-border-color: 1px solid rgba(255, 255, 255, .1);
|
||||
$sidebar-text-color: #d7dadc;
|
||||
$sidebar-text-active-color: #ffffff;
|
||||
|
||||
$screen-xs-max: "(max-width: 549px)";
|
||||
$screen-sm-min: "(min-width: 550px)";
|
||||
$screen-sm-max: "(max-width: 991px)";
|
||||
$screen-md-min: "(min-width: 992px)";
|
||||
$screen-md-max: "(max-width: 1199px)";
|
||||
$screen-lg-min: "(min-width: 1200px)";
|
||||
|
||||
body {
|
||||
font-family: $base-font-family;
|
||||
font-weight: $base-font-weight;
|
||||
letter-spacing: $base-letter-spacing;
|
||||
background: $base-background-color;
|
||||
}
|
||||
45
app/assets/sass/partials/_header.scss
Normal file
45
app/assets/sass/partials/_header.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
body.dashboard {
|
||||
.navbar {
|
||||
z-index: 999;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
border-bottom: $header-border-color;
|
||||
background: $header-background-color;
|
||||
margin: 0;
|
||||
a, a:active, a:visited {
|
||||
color: $base-link-color;
|
||||
&:hover {
|
||||
color: $base-link-hover-color;
|
||||
}
|
||||
}
|
||||
.navbar-toggle {
|
||||
margin-top: 15px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
&.collapsed span {
|
||||
background-color: $base-link-color;
|
||||
}
|
||||
}
|
||||
.navbar-collapse {
|
||||
background: $header-background-color;
|
||||
}
|
||||
a.navbar-brand {
|
||||
padding: 34px 21px;
|
||||
line-height: 0px;
|
||||
font-size: 20px;
|
||||
@media #{$screen-sm-max} {
|
||||
span {
|
||||
padding-right: 10px;
|
||||
&:before {
|
||||
font-family: FontAwesome;
|
||||
content: "\f060";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav li a {
|
||||
height: 68px;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
66
app/assets/sass/partials/_sidebar.scss
Normal file
66
app/assets/sass/partials/_sidebar.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
body.dashboard {
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
background: $sidebar-background-color;
|
||||
margin-top: -69px;
|
||||
padding-top: 69px;
|
||||
transition: margin .2s;
|
||||
@media #{$screen-sm-max} {
|
||||
width: 30%;
|
||||
margin-left: -30%;
|
||||
}
|
||||
@media #{$screen-xs-max} {
|
||||
width: 75%;
|
||||
margin-left: -75%;
|
||||
}
|
||||
&.active {
|
||||
margin-left: 0;
|
||||
}
|
||||
.profile {
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
.avatar {
|
||||
width: 70px;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
.profile {
|
||||
color: $sidebar-text-color;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
&:last-child {
|
||||
border-bottom: $sidebar-border-color;
|
||||
}
|
||||
&.active {
|
||||
background: $header-background-color;
|
||||
a {
|
||||
color: $sidebar-text-active-color;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
border-top: $sidebar-border-color;
|
||||
color: $sidebar-text-color;
|
||||
i {
|
||||
padding-right: 10px;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@extends('layout.master')
|
||||
@extends('layout.dashboard')
|
||||
|
||||
@section('content')
|
||||
|
||||
|
||||
57
app/views/layout/dashboard.blade.php
Normal file
57
app/views/layout/dashboard.blade.php
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="author" content="http://james-brooks.uk">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
|
||||
<title>{{ isset($pageTitle) ? $pageTitle : Setting::get('app_name') }} | Cachet</title>
|
||||
|
||||
<link rel="stylesheet" href="{{ elixir('css/all.css') }}">
|
||||
<script src="{{ elixir('js/all.js') }}"></script>
|
||||
</head>
|
||||
<body class="dashboard">
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#"><span id="sidebar-toggle"></span> Cachet</a>
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="menu">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="#"><i class="fa fa-exclamation-circle"></i> Status Page</a></li>
|
||||
<li><a href="#"><i class="fa fa-sign-out"></i> Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="sidebar active">
|
||||
<div class="profile">
|
||||
<div class="avatar pull-left">
|
||||
<a href="#">
|
||||
<img src="https://www.gravatar.com/avatar/215db0deb447d97a916ea780771b8c64?size=200" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="profile pull-left">
|
||||
<div class="username">{{Auth::user()->username }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
|
||||
<li><a href="#"><i class="fa fa-list-ul"></i> Components</a></li>
|
||||
<li class="active"><a href="#"><i class="fa fa-exclamation-triangle"></i> Incidents</a></li>
|
||||
<li><a href="#"><i class="fa fa-area-chart"></i> Metrics</a></li>
|
||||
<li><a href="#"><i class="fa fa-exclamation-circle"></i> Status Page</a></li>
|
||||
<li><a href="#"><i class="fa fa-cogs"></i> Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -16,6 +16,6 @@ elixir(function(mix) {
|
||||
'js/**/*.js',
|
||||
], './app/assets/')
|
||||
.version(['public/css/all.css', 'public/js/all.js'], 'public')
|
||||
.publish('bootstrap/dist/fonts', 'public/build/fonts')
|
||||
.publish('fontawesome/fonts', 'public/build/fonts');
|
||||
.copy('app/assets/bower_components/bootstrap/dist/fonts/', 'public/build/fonts')
|
||||
.copy('app/assets/bower_components/fontawesome/fonts/', 'public/build/fonts');
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -53,6 +53,10 @@ $(function() {
|
||||
|
||||
$('.tabs').tabs({active: 2});
|
||||
|
||||
$('#sidebar-toggle').click(function() {
|
||||
$('.sidebar').toggleClass('active');
|
||||
});
|
||||
|
||||
});
|
||||
/**
|
||||
* jQuery Tab Plugin
|
||||
@@ -53,6 +53,10 @@ $(function() {
|
||||
|
||||
$('.tabs').tabs({active: 2});
|
||||
|
||||
$('#sidebar-toggle').click(function() {
|
||||
$('.sidebar').toggleClass('active');
|
||||
});
|
||||
|
||||
});
|
||||
/**
|
||||
* jQuery Tab Plugin
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"css/all.css": "css/all-abb1045f.css",
|
||||
"js/all.js": "js/all-b354cb2f.js"
|
||||
"css/all.css": "css/all-299a9f17.css",
|
||||
"js/all.js": "js/all-5ba35707.js"
|
||||
}
|
||||
Reference in New Issue
Block a user