Started on dashboard styling and implementation
This commit is contained in:
Elliot Hesp
@@ -2,4 +2,8 @@ $(function() {
|
|||||||
|
|
||||||
$('.tabs').tabs({active: 2});
|
$('.tabs').tabs({active: 2});
|
||||||
|
|
||||||
|
$('#sidebar-toggle').click(function() {
|
||||||
|
$('.sidebar').toggleClass('active');
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
@@ -1,3 +1,7 @@
|
|||||||
body {
|
html, body {
|
||||||
background: #f5f5f5;
|
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')
|
@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',
|
'js/**/*.js',
|
||||||
], './app/assets/')
|
], './app/assets/')
|
||||||
.version(['public/css/all.css', 'public/js/all.js'], 'public')
|
.version(['public/css/all.css', 'public/js/all.js'], 'public')
|
||||||
.publish('bootstrap/dist/fonts', 'public/build/fonts')
|
.copy('app/assets/bower_components/bootstrap/dist/fonts/', 'public/build/fonts')
|
||||||
.publish('fontawesome/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});
|
$('.tabs').tabs({active: 2});
|
||||||
|
|
||||||
|
$('#sidebar-toggle').click(function() {
|
||||||
|
$('.sidebar').toggleClass('active');
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
/**
|
/**
|
||||||
* jQuery Tab Plugin
|
* jQuery Tab Plugin
|
||||||
@@ -53,6 +53,10 @@ $(function() {
|
|||||||
|
|
||||||
$('.tabs').tabs({active: 2});
|
$('.tabs').tabs({active: 2});
|
||||||
|
|
||||||
|
$('#sidebar-toggle').click(function() {
|
||||||
|
$('.sidebar').toggleClass('active');
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
/**
|
/**
|
||||||
* jQuery Tab Plugin
|
* jQuery Tab Plugin
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
{
|
{
|
||||||
"css/all.css": "css/all-abb1045f.css",
|
"css/all.css": "css/all-299a9f17.css",
|
||||||
"js/all.js": "js/all-b354cb2f.js"
|
"js/all.js": "js/all-5ba35707.js"
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user