kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-22 07:54:11 -05:00
Code Issues Projects Releases Packages Wiki Activity

Remove the awesome-bootstrap-checkbox plugin and replace it with a custom checkbox, and clean up a bunch of dashboard-related styles

Browse source
This commit is contained in:
Kevin MacMartin 2018-04-10 00:09:20 -04:00
parent 4e026b1dc6
commit 92c193813e
6 changed files with 168 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
bower.json
View file

@ -8,7 +8,6 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"jquery": "~3.3.1", "jquery": "~3.3.1",
"awesome-bootstrap-checkbox": "~0.3.7",
"Sortable": "~1.6.0", "Sortable": "~1.6.0",
"simplemde": "~1.11.2", "simplemde": "~1.11.2",
"SpinKit": "~1.2.5", "SpinKit": "~1.2.5",

131
resources/assets/sass/dashboard.scss vendored
View file

@ -1,7 +1,6 @@
// Libraries // Libraries
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss"; @import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import "font-awesome/scss/font-awesome.scss"; @import "font-awesome/scss/font-awesome.scss";
@import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss";
@import "pickadate/lib/themes/default"; @import "pickadate/lib/themes/default";
@import "pickadate/lib/themes/default.date"; @import "pickadate/lib/themes/default.date";
@import "simplemde/dist/simplemde.min"; @import "simplemde/dist/simplemde.min";
@ -16,6 +15,7 @@ $fa-font-path: "/fonts";
// Colours // Colours
$c-text: #111; // text $c-text: #111; // text
$c-text-light: #fff; // light text $c-text-light: #fff; // light text
$c-input-bg: #fff; // white
$c-dashboard-dark: #3e6087; $c-dashboard-dark: #3e6087;
$c-dashboard-light: #f1f1f1; $c-dashboard-light: #f1f1f1;
$c-dashboard-edit: #87823e; $c-dashboard-edit: #87823e;
@ -31,20 +31,31 @@ $c-dashboard-delete: #87483e;
body { body {
@include font-sans; @include font-sans;
min-width: 320px;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.navbar { .navbar {
border: 0;
background-color: $c-dashboard-dark; background-color: $c-dashboard-dark;
.navbar-brand { @media (max-width: $screen-xs-max) {
margin-bottom: 0px;
}
&-header {
height: $navbar-height;
}
&-brand {
overflow: hidden;
max-width: calc(100vw - 60px);
font-weight: bold; font-weight: bold;
white-space: nowrap;
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
font-size: 14px; font-size: 12px;
} }
} }
@ -53,7 +64,9 @@ body {
box-shadow: none; box-shadow: none;
.dropdown { .dropdown {
.dropdown-toggle .caret { margin-left: 4px; } .dropdown-toggle .caret {
margin-left: 4px;
}
&.open .dropdown-toggle { &.open .dropdown-toggle {
background-color: darken($c-dashboard-dark, 5%); background-color: darken($c-dashboard-dark, 5%);
@ -64,25 +77,36 @@ body {
top: calc(100% - 1px); top: calc(100% - 1px);
right: -1px; right: -1px;
background-color: $c-dashboard-dark; background-color: $c-dashboard-dark;
> li > a:hover, > li > a:focus { background-color: transparent; }
> li > a:hover, > li > a:focus {
background-color: transparent;
}
> li > a { > li > a {
&, &:hover, &:focus { color: #fff; } &, &:hover, &:focus {
color: #fff;
}
} }
} }
} }
} }
.navbar-brand, .navbar-default .navbar-nav > li > a, .navbar-nav > li > a { .navbar-brand, .navbar-default .navbar-nav > li > a, .navbar-nav > li > a {
&, &:hover, &:focus { color: $c-dashboard-light; } &, &:hover, &:focus {
color: $c-dashboard-light;
}
} }
.navbar-toggle { .navbar-toggle {
position: relative; position: absolute;
bottom: 0px; top: 6px;
left: 10px; right: 8px;
margin: 0px;
border: 0; border: 0;
&, &:hover, &:focus { background-color: transparent; }
&, &:hover, &:focus {
background-color: transparent;
}
.icon-bar { .icon-bar {
width: 27px; width: 27px;
@ -91,13 +115,15 @@ body {
transition: background-color 100ms; transition: background-color 100ms;
} }
&:hover .icon-bar { background-color: darken($c-dashboard-dark, 15%); } &:hover .icon-bar {
background-color: darken($c-dashboard-dark, 15%);
}
} }
} }
.panel-default { .panel-default {
margin-top: 20px; margin-top: 20px;
margin-bottom: 40px; margin-bottom: 20px;
.panel-body { .panel-body {
background-color: lighten($c-dashboard-light, 1%); background-color: lighten($c-dashboard-light, 1%);
@ -130,6 +156,7 @@ body {
} }
> .panel-heading { > .panel-heading {
position: relative;
border-top: 1px solid darken($c-dashboard-dark, 5%); border-top: 1px solid darken($c-dashboard-dark, 5%);
border-right: 1px solid darken($c-dashboard-dark, 5%); border-right: 1px solid darken($c-dashboard-dark, 5%);
border-left: 1px solid darken($c-dashboard-dark, 5%); border-left: 1px solid darken($c-dashboard-dark, 5%);
@ -138,11 +165,12 @@ body {
font-weight: bold; font-weight: bold;
.dashboard-heading { .dashboard-heading {
float: right; position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
.btn { .btn {
position: relative;
bottom: 3px;
min-width: 70px; min-width: 70px;
height: 26px; height: 26px;
padding-top: 1px; padding-top: 1px;
@ -162,6 +190,61 @@ body {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px fade-out($c-dashboard-dark, 0.4); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px fade-out($c-dashboard-dark, 0.4);
} }
.panel-body .form-group .checkbox {
position: relative;
display: inline-block;
min-height: 0px;
padding-top: 0px;
padding-left: 22px;
user-select: none;
span, input {
position: absolute;
top: 50%;
left: 0px;
transform: translateY(-50%);
display: block;
width: 16px;
height: 16px;
}
span {
border: 1px solid lighten($c-text, 50%);
border-radius: 4px;
background-color: $c-input-bg;
pointer-events: none;
&:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
transform: scale(0);
display: block;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1OTcuMzM5IiBoZWlnaHQ9IjQ0MS4wMzgiIHZpZXdCb3g9IjAgMCA1NjAuMDA1IDQxMy40NzMiPjxwYXRoIGQ9Ik0uNTQ2IDI0MS4xNXMzNC44NS00Mi4wNTMgNzQuMjE0LTU0LjcxYzEwLjY1OCA3Ljk5MyA3MS4wNzggMTI4LjczNSA4MS43MzYgMTI3LjQwMyAxMS45OS0xLjMzMiA5MC45NzItMTExLjM3IDI2MS43NzMtMzEzLjIzMSAwIDAgNDkuNDMgMjIuNDQgMTQwLjM3NyAyNy4xMjItMjM3LjgxIDE4Ni41MzctMzYwLjgyIDM2OC4zNzUtMzcxLjU5OCAzNzcuMTYtMzAuNjQzIDE0LjY1NS00Ni4zNSA2LjE3Ni01Ny4wMDgtLjQ4NkMxMDQuNzI3IDM4MS43NiAxLjg4IDI0Ni40OC41NDYgMjQxLjE1MXoiIGZpbGw9IiMwYTBhMGEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjMDAwIi8+PC9zdmc+Cg==");
background-position: center center;
background-size: 75% auto;
background-repeat: no-repeat;
opacity: 0;
transition: transform 150ms, opacity 150ms;
}
}
input {
margin: 0px;
padding: 0px;
opacity: 0;
cursor: pointer;
&:checked + span:after {
transform: scale(1);
opacity: 1;
}
}
}
.btn { .btn {
border-color: darken($c-dashboard-dark, 5%); border-color: darken($c-dashboard-dark, 5%);
background-color: $c-dashboard-dark; background-color: $c-dashboard-dark;
@ -169,6 +252,11 @@ body {
&:hover { background-color: darken($c-dashboard-dark, 5%); } &:hover { background-color: darken($c-dashboard-dark, 5%); }
&:focus { background-color: lighten($c-dashboard-dark, 5%); } &:focus { background-color: lighten($c-dashboard-dark, 5%); }
&.vertical-margin {
margin-top: 3px;
margin-bottom: 3px;
}
&.btn-warning { &.btn-warning {
border-color: darken($c-dashboard-edit, 10%); border-color: darken($c-dashboard-edit, 10%);
background-color: $c-dashboard-edit; background-color: $c-dashboard-edit;
@ -209,8 +297,13 @@ body {
@media (max-width: $screen-md-max) { @media (max-width: $screen-md-max) {
tr { tr {
&.heading-row { display: none; } &.heading-row {
&:not(:first-child) { border-top: 1px solid #ddd; } display: none;
}
&:not(:first-child) {
border-top: 1px solid #ddd;
}
} }
> tbody > tr { > tbody > tr {

12
resources/views/auth/login.blade.php
View file

@ -6,6 +6,7 @@
<div class="col-md-8 col-md-offset-2"> <div class="col-md-8 col-md-offset-2">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Login</div> <div class="panel-heading">Login</div>
<div class="panel-body"> <div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="{{ url('/login') }}"> <form class="form-horizontal" role="form" method="POST" action="{{ url('/login') }}">
{!! csrf_field() !!} {!! csrf_field() !!}
@ -40,20 +41,21 @@
<div class="form-group"> <div class="form-group">
<div class="col-md-6 col-md-offset-4"> <div class="col-md-6 col-md-offset-4">
<div class="checkbox"> <label class="checkbox">
<input type="checkbox" class="styled" id="remember" name="remember" /> <input type="checkbox" class="styled" id="remember" name="remember" />
<label>Remember Me</label> <span></span>
</div> Remember Me
</label>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="col-md-6 col-md-offset-4"> <div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-primary vertical-margin">
Login Login
</button> </button>
<a class="btn btn-link" href="{{ url('/password/reset') }}">Forgot Your Password?</a> <a class="btn btn-link vertical-margin" href="{{ url('/password/reset') }}">Forgot Your Password?</a>
</div> </div>
</div> </div>
</form> </form>

1
resources/views/auth/passwords/email.blade.php
View file

@ -6,6 +6,7 @@
<div class="col-md-8 col-md-offset-2"> <div class="col-md-8 col-md-offset-2">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Reset Password</div> <div class="panel-heading">Reset Password</div>
<div class="panel-body"> <div class="panel-body">
@if (session('status')) @if (session('status'))
<div class="alert alert-success"> <div class="alert alert-success">

94
resources/views/auth/passwords/reset.blade.php
View file

@ -1,70 +1,70 @@
@extends('templates.dashboard') @extends('templates.dashboard')
@section('page-content') @section('page-content')
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2"> <div class="col-md-8 col-md-offset-2">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Reset Password</div> <div class="panel-heading">Reset Password</div>
<div class="panel-body"> <div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="{{ url('/password/reset') }}"> <form class="form-horizontal" role="form" method="POST" action="{{ url('/password/reset') }}">
{!! csrf_field() !!} {!! csrf_field() !!}
<input type="hidden" name="token" value="{{ $token }}" /> <input type="hidden" name="token" value="{{ $token }}" />
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}"> <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">E-Mail Address</label> <label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6"> <div class="col-md-6">
<input type="email" class="form-control" name="email" value="{{ $email or old('email') }}" /> <input type="email" class="form-control" name="email" value="{{ $email or old('email') }}" />
@if ($errors->has('email')) @if ($errors->has('email'))
<span class="help-block"> <span class="help-block">
<strong>{{ $errors->first('email') }}</strong> <strong>{{ $errors->first('email') }}</strong>
</span> </span>
@endif @endif
</div>
</div> </div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}"> <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Password</label> <label class="col-md-4 control-label">Password</label>
<div class="col-md-6"> <div class="col-md-6">
<input type="password" class="form-control" name="password" /> <input type="password" class="form-control" name="password" />
@if ($errors->has('password')) @if ($errors->has('password'))
<span class="help-block"> <span class="help-block">
<strong>{{ $errors->first('password') }}</strong> <strong>{{ $errors->first('password') }}</strong>
</span> </span>
@endif @endif
</div>
</div> </div>
</div>
<div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}"> <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
<label class="col-md-4 control-label">Confirm Password</label> <label class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6"> <div class="col-md-6">
<input type="password" class="form-control" name="password_confirmation" /> <input type="password" class="form-control" name="password_confirmation" />
@if ($errors->has('password_confirmation')) @if ($errors->has('password_confirmation'))
<span class="help-block"> <span class="help-block">
<strong>{{ $errors->first('password_confirmation') }}</strong> <strong>{{ $errors->first('password_confirmation') }}</strong>
</span> </span>
@endif @endif
</div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<div class="col-md-6 col-md-offset-4"> <div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-primary">
Reset Password Reset Password
</button> </button>
</div>
</div> </div>
</div> </form>
</form> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
@endsection @endsection

1
resources/views/auth/register.blade.php
View file

@ -6,6 +6,7 @@
<div class="col-md-8 col-md-offset-2"> <div class="col-md-8 col-md-offset-2">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Register</div> <div class="panel-heading">Register</div>
<div class="panel-body"> <div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}"> <form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
{!! csrf_field() !!} {!! csrf_field() !!}