Merge branch 'dark-mode' of cpsdqs/dtbl-laravel into master

pull/27/head
Ondřej Hruška 6 years ago committed by Gitea
commit 89ca44fa14
  1. 4
      app/helpers.php
  2. 2
      public/images/logo-dark.svg
  3. 3
      public/mix-manifest.json
  4. 36
      resources/assets/js/app.js
  5. 30
      resources/assets/sass/app-dark.scss
  6. 4
      resources/assets/sass/bootstrap-customizations/_card.scss
  7. 2
      resources/assets/sass/bootstrap-customizations/_footer.scss
  8. 22
      resources/assets/sass/bootstrap-customizations/_navbar.scss
  9. 57
      resources/assets/sass/bootstrap-customizations/_variables.scss
  10. 2
      resources/views/auth/login.blade.php
  11. 2
      resources/views/auth/register.blade.php
  12. 7
      resources/views/layouts/app.blade.php
  13. 13
      resources/views/layouts/main-nav.blade.php
  14. 13
      resources/views/layouts/nav-buttons.blade.php
  15. 1
      resources/views/profile/edit-account.blade.php
  16. 9
      routes/web.php
  17. 3
      webpack.mix.js

@ -32,6 +32,10 @@ function faker() {
return $fac = Faker\Factory::create(); return $fac = Faker\Factory::create();
} }
function dark_mode() {
return isset($_COOKIE["dark_mode"]);
}
/** /**
* Recursively expand validation rules * Recursively expand validation rules
* *

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", "/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"
} }

@ -65,6 +65,42 @@ $(document).on('input keypress paste keyup', 'input[data-autoalias]', function (
} }
}) })
$(function () {
// theme switcher without reloading
let themeStyle = $('#theme-style');
const lightURL = themeStyle.data('light-url');
const darkURL = themeStyle.data('dark-url');
const navbar = $('.page-navbar');
const logo = $('#navbar-logo');
window.toggleDarkMode = function () {
let newStyle = document.createElement('link');
newStyle.rel = 'stylesheet';
if (themeStyle.attr('href') === lightURL) {
newStyle.href = darkURL;
navbar.removeClass('navbar-light');
navbar.addClass('navbar-dark');
logo.attr('src', logo.data('src-dark'));
document.cookie = "dark_mode=1";
} else {
newStyle.href = lightURL;
navbar.removeClass('navbar-dark');
navbar.addClass('navbar-light');
logo.attr('src', logo.data('src-light'));
document.cookie = "dark_mode=0;expires=" + new Date().toUTCString();
}
// remove old css after new css has loaded to prevent FOUC
let oldThemeStyle = themeStyle;
themeStyle = $(newStyle);
themeStyle.on('load', () => oldThemeStyle.remove());
$(document.head).append(themeStyle);
};
});
window.Vue = require('vue'); window.Vue = require('vue');
Vue.component('column-editor', require('./components/ColumnEditor.vue')); Vue.component('column-editor', require('./components/ColumnEditor.vue'));

@ -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; min-width: 1.5rem;
text-align:center; text-align:center;
} }
.card .auth-footer {
background-color: $body-bg;
}

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

@ -1,6 +1,6 @@
// layout tweaks // layout tweaks
.page-navbar { .page-navbar {
background: white; background: $navbar-bg;
border-bottom: 1px solid $primary; border-bottom: 1px solid $primary;
box-shadow: 0 -3px 8px rgba(black, 1); box-shadow: 0 -3px 8px rgba(black, 1);
@ -17,3 +17,23 @@
.dropdown-menu { .dropdown-menu {
box-shadow: 0 3px 4px 0 rgba(black, .1); box-shadow: 0 3px 4px 0 rgba(black, .1);
} }
.dropdown-menu .dropdown-item.nav-link {
cursor: pointer;
}
@if $theme == 'dark' {
.dropdown-menu .dark-mode-switch-on {
display: block;
}
.dropdown-menu .dark-mode-switch-off {
display: none;
}
} @else {
.dropdown-menu .dark-mode-switch-on {
display: none;
}
.dropdown-menu .dark-mode-switch-off {
display: block;
}
}

@ -25,3 +25,60 @@ $tooltip-arrow-color: $tooltip-bg;
$pagination-padding-y-sm: dist(1); $pagination-padding-y-sm: dist(1);
$pagination-padding-x-sm: dist(3); $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> </form>
</div> </div>
<div class="card-footer bg-white"> <div class="card-footer auth-footer">
<div class="form-group row mb-0"> <div class="form-group row mb-0">
<span class="col-md-4 col-form-label text-md-right text-muted">…or authenticate with</span> <span class="col-md-4 col-form-label text-md-right text-muted">…or authenticate with</span>

@ -37,7 +37,7 @@
</form> </form>
</div> </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 You can also register by logging in with
<a href="{{route('oauth-google-authorize')}}">Google</a>, <a href="{{route('oauth-google-authorize')}}">Google</a>,
<a href="{{route('oauth-github-authorize')}}">GitHub</a>, <a href="{{route('oauth-github-authorize')}}">GitHub</a>,

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

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

@ -15,6 +15,19 @@ $aclass = $dropdown ? 'dropdown-item' : 'nav-link';
<i class="fa-key-modern fa-pr"></i>{{ __('Settings') }} <i class="fa-key-modern fa-pr"></i>{{ __('Settings') }}
</a> </a>
{!! $li !!}
<form method="POST" action="{{ route('toggle-dark-mode') }}" aria-hidden="true">
@csrf
<button id="toggle-dark-mode-btn" class="{{ $aclass }}" type="submit" onclick="event.preventDefault(); toggleDarkMode();">
<div class="dark-mode-switch-on">
<i class="fa-sun-o fa-pr"></i>{{ __('Light Mode') }}
</div>
<div class="dark-mode-switch-off">
<i class="fa-moon-o fa-pr"></i>{{ __('Dark Mode') }}
</div>
</button>
</form>
{!! $li !!} {!! $li !!}
<a class="{{ $aclass }}" href="{{ route('logout') }}" <a class="{{ $aclass }}" href="{{ route('logout') }}"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> onclick="event.preventDefault(); document.getElementById('logout-form').submit();">

@ -17,6 +17,7 @@
', 'text-muted', false) !!} ', 'text-muted', false) !!}
</div> </div>
<div class="col-md-10 mt-3"> <div class="col-md-10 mt-3">
{!! Widget::header(2, 'Identifiers') !!} {!! Widget::header(2, 'Identifiers') !!}

@ -69,3 +69,12 @@ Route::group(['middleware' => 'auth'], function () {
Route::get('forget-social-login/{id}', 'AccountController@forgetSocialLogin')->name('forget-identity'); Route::get('forget-social-login/{id}', 'AccountController@forgetSocialLogin')->name('forget-identity');
}); });
}); });
Route::post('toggle-dark-mode', function () {
if (dark_mode()) {
setcookie('dark_mode', '0', time() - 1);
} else {
setcookie('dark_mode', '1');
}
return redirect()->back();
})->name('toggle-dark-mode');

3
webpack.mix.js vendored

@ -29,4 +29,5 @@ mix.webpackConfig({
}); });
mix.js('resources/assets/js/app.js', 'public/js') 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