Add dark mode [db]

pull/26/head
cpsdqs 6 years ago
parent fabc3ad24e
commit 9fd6890667
Signed by untrusted user: cpsdqs
GPG Key ID: 3F59586BB7448DD1
  1. 1
      app/Http/Controllers/AccountController.php
  2. 3
      app/Models/User.php
  3. 4
      app/helpers.php
  4. 1
      database/migrations/2014_10_12_000000_create_users_table.php
  5. 2
      public/images/logo-dark.svg
  6. 3
      public/mix-manifest.json
  7. 30
      resources/assets/sass/app-dark.scss
  8. 4
      resources/assets/sass/bootstrap-customizations/_card.scss
  9. 2
      resources/assets/sass/bootstrap-customizations/_footer.scss
  10. 2
      resources/assets/sass/bootstrap-customizations/_navbar.scss
  11. 57
      resources/assets/sass/bootstrap-customizations/_variables.scss
  12. 2
      resources/views/auth/login.blade.php
  13. 2
      resources/views/auth/register.blade.php
  14. 2
      resources/views/layouts/app.blade.php
  15. 4
      resources/views/layouts/main-nav.blade.php
  16. 5
      resources/views/profile/edit-account.blade.php
  17. 3
      webpack.mix.js

@ -38,6 +38,7 @@ class AccountController extends Controller
Rule::unique('users')->ignoreModel($user),
],
'new_password' => ['nullable', 'confirmed', VALI_PASSWORD],
'dark_mode' => 'nullable',
]);
if ($input->email != $user->email) {

@ -33,6 +33,7 @@ use MightyPork\Utils\Str;
* @property string $email - unique, for login and social auth chaining
* @property string $password - hashed pw
* @property bool $confirmed - user e-mail is confirmed
* @property bool $dark_mode - user prefers dark mode
* @property-read Proposal[]|Collection $proposals
* @property-read Table[]|Collection $tables
* @property-read OAuthIdentity[]|Collection $socialIdentities
@ -62,7 +63,7 @@ class User extends BaseModel implements
* @var array
*/
protected $fillable = [
'name', 'title', 'email', 'password', 'bio', 'website', 'confirmed'
'name', 'title', 'email', 'password', 'bio', 'website', 'confirmed', 'dark_mode'
];
/**

@ -32,6 +32,10 @@ function faker() {
return $fac = Faker\Factory::create();
}
function dark_mode() {
return user() !== NULL && user()->dark_mode;
}
/**
* Recursively expand validation rules
*

@ -23,6 +23,7 @@ class CreateUsersTable extends Migration
$table->string('email')->unique(); // would have to be nullable if we supported login via providers that don't give us e-mail
$table->string('password')->nullable(); // null if registered via provider and not set a pw yet
$table->boolean('confirmed')->default(false); // set to 1 after e-mail is verified
$table->boolean('dark_mode')->default(false);
$table->rememberToken();
});
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.1 KiB

@ -1,4 +1,5 @@
{
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"
"/css/app.css": "/css/app.css",
"/css/app-dark.css": "/css/app-dark.css"
}

@ -0,0 +1,30 @@
// Variables
$theme: dark;
@import "bootstrap";
html {
overflow-y: scroll;
}
@import "helpers";
@import "fa-utils";
@import "block-collapse";
@import "form-help";
@import "bootstrap-customizations/paginate";
@import "bootstrap-customizations/card";
@import "bootstrap-customizations/tooltip";
@import "bootstrap-customizations/navbar";
@import "bootstrap-customizations/footer";
@import "bootstrap-customizations/link";
@import "bootstrap-customizations/border";
@import "bootstrap-customizations/button";
@import "bootstrap-customizations/responsive";
@import "bootstrap-customizations/typography";
.bio-table {
td {
padding-top: dist(2);
}
}

@ -39,3 +39,7 @@
min-width: 1.5rem;
text-align:center;
}
.card .auth-footer {
background-color: $body-bg;
}

@ -2,5 +2,5 @@
.page-footer {
font-size: 95%;
background: $body-bg;
border-top: 2px dotted $gray-200;
border-top: 2px dotted $footer-separator-color;
}

@ -1,6 +1,6 @@
// layout tweaks
.page-navbar {
background: white;
background: $navbar-bg;
border-bottom: 1px solid $primary;
box-shadow: 0 -3px 8px rgba(black, 1);

@ -25,3 +25,60 @@ $tooltip-arrow-color: $tooltip-bg;
$pagination-padding-y-sm: dist(1);
$pagination-padding-x-sm: dist(3);
$navbar-bg: white;
$footer-separator-color: $gray-200;
$theme: light !default;
@if $theme == dark {
// dark mode overrides
$body-bg: $gray-900;
$body-color: $gray-100;
$text-muted: $gray-500;
$link-color: lighten($primary, 15%);
$link-hover-color: lighten($primary, 20%);
$card-bg: $gray-800;
$list-group-bg: $gray-800;
$list-group-hover-bg: $gray-700;
$list-group-disabled-color: $gray-400;
$list-group-action-color: $gray-200;
$list-group-action-hover-color: $gray-200;
$list-group-action-active-bg: $gray-600;
$list-group-action-active-color: $gray-100;
$tooltip-color: rgba($white, 0.9);
$navbar-bg: lighten($gray-900, 2%);
$footer-separator-color: $gray-800;
$close-color: $white;
$input-bg: $gray-700;
$input-color: $gray-200;
$input-disabled-bg: $gray-900;
$input-border-color: $gray-600;
$input-focus-bg: $input-bg;
$input-focus-color: $input-color;
$input-group-addon-bg: $gray-800;
$input-group-addon-color: $input-color;
$input-group-addon-border-color: $input-border-color;
$custom-select-color: $input-color;
$custom-select-bg: $input-bg;
$custom-select-disabled-bg: $input-disabled-bg;
$custom-select-indicator-color: $gray-300;
$custom-select-border-color: $input-border-color;
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23");
$dropdown-bg: $gray-700;
$dropdown-link-color: $gray-300;
$dropdown-link-hover-color: lighten($gray-300, 5%);
$dropdown-link-hover-bg: $gray-800;
$dropdown-link-disabled-color: $gray-500;
$dropdown-header-color: $gray-400;
$border-color: $gray-600;
}

@ -31,7 +31,7 @@
</form>
</div>
<div class="card-footer bg-white">
<div class="card-footer auth-footer">
<div class="form-group row mb-0">
<span class="col-md-4 col-form-label text-md-right text-muted">…or authenticate with</span>

@ -37,7 +37,7 @@
</form>
</div>
<div class="card-footer bg-white text-muted">
<div class="card-footer auth-footer text-muted">
You can also register by logging in with
<a href="{{route('oauth-google-authorize')}}">Google</a>,
<a href="{{route('oauth-github-authorize')}}">GitHub</a>,

@ -14,7 +14,7 @@
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ dark_mode() ? asset('css/app-dark.css') : asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('fonts/fa-dtbl-1.css') }}" rel="stylesheet">
</head>
<body>

@ -1,9 +1,9 @@
{{-- Global navbar --}}
<nav class="navbar navbar-expand-md navbar-light page-navbar">
<nav class="navbar navbar-expand-md navbar-{{ dark_mode() ? 'dark' : 'light' }} page-navbar">
<div class="container">
<a class="navbar-brand" href="{{ route('dash') }}" aria-label="Go to Dashboard">
<img src="/images/logo.svg" aria-hidden=true alt="LOGO" height="32px" style="margin: -10px 0" class="mr-2">{{--
<img src="/images/logo{{ dark_mode() ? '-dark' : '' }}.svg" aria-hidden=true alt="LOGO" height="32px" style="margin: -10px 0" class="mr-2">{{--
--}}datatable.directory
</a>

@ -16,6 +16,11 @@
<a href="'.e(route('profile.edit')).'">profile settings</a> page.
', 'text-muted', false) !!}
</div>
<div class="col-md-10 mt-3">
{!! Widget::header(2, 'General') !!}
{!! Widget::checkbox('dark_mode', 'Use Dark Mode')->value($user->dark_mode) !!}
</div>
<div class="col-md-10 mt-3">
{!! Widget::header(2, 'Identifiers') !!}

3
webpack.mix.js vendored

@ -29,4 +29,5 @@ mix.webpackConfig({
});
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/app-dark.scss', 'public/css');

Loading…
Cancel
Save