modifications for materialize

This commit is contained in:
TLRZ Seyfferth 2017-09-13 19:02:20 +02:00
parent 6590bb27f7
commit 813a3a21be
17 changed files with 29857 additions and 12617 deletions

18063
public/css/app.css vendored

File diff suppressed because one or more lines are too long

20295
public/js/app.js vendored

File diff suppressed because one or more lines are too long

3627
public/js/bootstrap.js vendored

File diff suppressed because it is too large Load Diff

View File

@ -3,5 +3,6 @@
"/css/app.css": "/css/app.css",
"/js/jquery.min.js": "/js/jquery.min.js",
"/js/bootstrap.js": "/js/bootstrap.js",
"/mix.js": "/mix.js"
"/mix.js": "/mix.js",
"/css/materialize.css": "/css/materialize.css"
}

View File

@ -27,17 +27,6 @@ $(".confirm-logout").click(function() {
});
});
$('#confirmDeletionModal').on('show.bs.modal', function (event) {
event.stopPropagation();
var button = $(event.relatedTarget) // Button that triggered the modal
var data = button.data() // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('#identifier').text(data.identifier);
modal.find('#confirmDeletionButton').data('url',data.url);
});
$("#confirmDeletionButton").click(function() {
var data = $(this).data();
$.ajax({
@ -51,3 +40,12 @@ $("#confirmDeletionButton").click(function() {
}
});
});
$('.modal').modal({
ready: function(modal,trigger){
var data = trigger.data();
modal.find('#identifier').text(data.identifier);
modal.find('#confirmDeletionButton').data('url', data.url);
}
});

View File

@ -1,37 +1,14 @@
//Fixed SideNav
// Body
$body-bg: #f5f8fa;
header,main,footer{
padding-left: 300px;
}
main{
padding-top: 5px;
}
// Borders
$laravel-border-color: darken($body-bg, 10%);
$list-group-border: $laravel-border-color;
$navbar-default-border: $laravel-border-color;
$panel-default-border: $laravel-border-color;
$panel-inner-border: $laravel-border-color;
// Brands
$brand-primary: #3097D1;
$brand-info: #8eb4cb;
$brand-success: #2ab27b;
$brand-warning: #cbb956;
$brand-danger: #bf5329;
// Typography
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
$font-family-sans-serif: "Raleway", sans-serif;
$line-height-base: 1.6;
$text-color: #636b6f;
// Navbar
$navbar-default-bg: #fff;
// Buttons
$btn-default-color: $text-color;
// Inputs
$input-border: lighten($text-color, 40%);
$input-border-focus: lighten($brand-primary, 25%);
$input-color-placeholder: lighten($text-color, 30%);
// Panels
$panel-default-heading-bg: #fff;
@media only screen and (max-width: 992px){
header,main,footer{
padding-left: 0;
}
}

View File

@ -1,9 +1,5 @@
// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
@import "variables";
// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/materialize-css/sass/materialize.scss";

View File

@ -30,7 +30,6 @@
</table>
@endsection
@section('modals')
@push('modals')
@include('shared.modals.confirmDeletion', [])
@endsection
@endpush

View File

@ -5,64 +5,29 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="/css/app.css" rel="stylesheet" type="text/css" media="screen/projection">
<script src="https://use.fontawesome.com/c7dd014e97.js"></script>
<link href="/css/app.css" rel="stylesheet" type="text/css" media="screen,projection">
<title>@yield('title') - Gastro</title>
</head>
<body>
@section('navbar')
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="{{ route('home') }}">Dienstplanung</a>
<header>
@include('shared.navbar')
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
@if(Auth::check())
<li class="nav-item">
<a class="nav-link" href="{{ route('veranstaltung.index') }}">Veranstaltungen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('benutzer.index') }}">Benutzer</a>
</li>
@endif
</ul>
<ul class="navbar-nav ml-md-auto">
@if(Auth::check())
<li class="nav-item">
<a class="nav-link" href="{{ route('benutzer.profile') }}">Profil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#confirmLogoutModal" data-toggle="modal">Abmelden</a>
</li>
@else
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">Registrieren</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">Anmelden</a>
</li>
@endif
</ul>
</div>
</div>
</nav>
@show
@section('modals')
@show
@stack('modals')
@include('shared.modals.confirmLogout', [])
<div class="container" id="content">
</header>
<main id="content" class="container">
@yield('content')
</div>
@if(isset($fabActions) && count($fabActions) > 0)
@include('shared.fab')
@endif
</main>
@section('footer')
@show
<script type="text/javascript" src="/js/app.js"></script>
@yield('scripts')
@stack('scripts')
</body>
</html>

View File

@ -0,0 +1,6 @@
<li>
<a href="{{ $action['link'] }}"
class="btn-floating {{ $action['color'] }} waves-effect">
<i class="material-icons">{{ $action['icon'] }}</i>
</a>
</li>

View File

@ -0,0 +1,8 @@
<div class="fixed-action-btn">
<a class="btn-floating btn-large amber accent-3">
<i class="large material-icons">list</i>
</a>
<ul>
@each('shared.fab-item',$fabActions, 'action')
</ul>
</div>

View File

@ -1,20 +1,11 @@
<div class="modal fade" id="confirmDeletionModal" tabindex="-1" role="dialog" aria-labelledby="confirmLogoutLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal" id="confirmDeletionModal" tabindex="-1" role="dialog" aria-labelledby="confirmDeletionLabel" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmDeletionLabel">Löschen bestätigen</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h4 id="confirmDeletionLabel">Löschen bestätigen</h4>
<span>Möchtest du <strong id="identifier"></strong> wirklich löschen?</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
<a class="modal-action modal-close waves-effect waves-red btn-flat">Abbrechen</a>
<button type="button" class="btn btn-danger" data-token="{{ csrf_token() }}" id="confirmDeletionButton">Löschen</button>
</div>
</div>
<a class="modal-action modal-close waves-effect waves-red btn-flat" data-token="{{ csrf_token() }}" id="confirmDeletionButton">Löschen</a>
</div>
</div>

View File

@ -1,20 +1,11 @@
<div class="modal fade" id="confirmLogoutModal" tabindex="-1" role="dialog" aria-labelledby="confirmLogoutLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal" id="confirmLogoutModal" tabindex="-1" role="dialog" aria-labelledby="confirmLogoutLabel" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmLogoutLabel">Ausloggen bestätigen</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h4 id="confirmLogoutLabel">Ausloggen bestätigen</h4>
<span>Möchtest du dich wirklich ausloggen?</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
<a class="modal-action modal-close waves-effect waves-red btn-flat">Abbrechen</a>
<button type="button" class="btn btn-primary confirm-logout" data-url="{{ route('logout') }}" data-token="{{ csrf_token() }}">Ausloggen</button>
</div>
</div>
<a class="modal-action modal-close waves-effect waves-red btn-flat confirm-logout" data-url="{{ route('logout') }}" data-token="{{ csrf_token() }}">Ausloggen</a>
</div>
</div>

View File

@ -0,0 +1,55 @@
<nav class="nav-extended indigo darken-3">
<div class="nav-wrapper container">
<a class="brand-logo center" href="{{ route('home') }}">Dienstplanung</a>
<a href="#mobileMenu" data-activates="mobileMenu" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
@if(Auth::check())
<li>
<a href="#confirmLogoutModal" class="waves-effect waves-light modal-trigger" title="Abmelden"><i class="material-icons">person_outline</i></a>
</li>
@else
<li>
<a href="{{ route('register') }}">Registrieren</a>
</li>
<li>
<a href="{{ route('login') }}">Anmelden</a>
</li>
@endif
</ul>
<ul class="side-nav fixed grey lighten-2" id="mobileMenu">
@if(Auth::check())
<li class="section grey">
<div style="height:120px;"></div>
</li>
<li>
<a href="{{ route('veranstaltung.index') }}">Veranstaltungen</a>
</li>
<li>
<a href="{{ route('benutzer.index') }}">Benutzer</a>
</li>
<li class="divider"></li>
<li>
<a href="{{ route('benutzer.profile') }}">Profil</a>
</li>
<li>
<a href="#confirmLogoutModal" class="waves-effect waves-light modal-trigger">Abmelden</a>
</li>
@else
<li>
<a href="{{ route('register') }}">Registrieren</a>
</li>
<li>
<a href="{{ route('login') }}">Anmelden</a>
</li>
@endif
</ul>
</div>
<div class="nav-content container">
@section('subnav')
@endsection()
</div>
</nav>
@push("scripts")
<script>$('.button-collapse').sideNav()</script>
@endpush()

View File

@ -37,9 +37,9 @@
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label class="col-form-label" for="ort">Ort</label>
{!! Form::select('ort', App\Ort::pluck('name','id'), null,['class' => 'form-control', 'id' => 'ort', 'aria-describedby' => "ortHelp", 'placeholder' => "Wähle einen..."]) !!}
<div class="col m6 input-field">
<label for="ort">Ort</label>
{!! Form::select('ort', App\Ort::pluck('name','id'), null,[ 'id' => 'ort', 'aria-describedby' => "ortHelp"]) !!}
<small id="ortHelp" class="form-text text-muted">Ort der Veranstaltung</small>
</div>
</div>
@ -47,3 +47,11 @@
<button type="submit" class="btn btn-primary">Submit</button>
</form>
@endsection
@push('scripts')
<script>
$(document).ready(function(){
$('select').material_select();
});
</script>
@endpush

View File

@ -4,7 +4,7 @@
@section('content')
<a class="btn btn-link" href="{{ route('veranstaltung.create') }}">Veranstaltung hinzufügen</a>
<table class="table-hover table">
<table class="highlight">
<thead>
<tr>
<th class="text-center">Name</th>
@ -15,8 +15,8 @@
</tr>
</thead>
@foreach ($veranstaltungen as $v)
<tr class="clickable-row" data-href="{{ route('veranstaltung.show', [$v]) }}">
<td>{{ $v->name }}</td>
<tr >
<td class="clickable-row" data-href="{{ route('veranstaltung.show', [$v]) }}">{{ $v->name }}</td>
<td>{{ $v->beginn->format('d.m.Y') }}</td>
<td>{{ $v->beginn->format('H:i') }}</td>
<td class="text-center">
@ -28,15 +28,24 @@
</td>
<td class="row">
<a class="btn btn-link my-0 py-0" href="{{ route('veranstaltung.edit', [$v]) }}">Bearbeiten</a>
<form method="POST" action="{{ route('veranstaltung.destroy', $v) }}">
{!! method_field('delete') !!}
{!! csrf_field() !!}
<button class="btn btn-link text-danger my-0 py-0">Löschen</button>
</form>
<a class="btn-flat waves-effect wave-red red-text modal-trigger" href="#confirmDeletionModal" data-url="{{route('veranstaltung.destroy', $v)}}" data-identifier="{{$v->name}}"><i class="material-icons">delete</i></button>
</td>
</tr>
@endforeach
</table>
@endsection
@php
$fabActions = [
[
'icon' => "add",
'link' => route('veranstaltung.create'),
'color' => "red"
]
];
@endphp
@push('modals')
@include('shared.modals.confirmDeletion', [])
@endpush

11
webpack.mix.js vendored
View File

@ -12,11 +12,10 @@ const { mix } = require('laravel-mix');
*/
mix.scripts([
'node_modules/jquery/dist/jquery.min.js',
'node_modules/materialize-css/dist/js/materialize.min.js',
'node_modules/jquery/dist/jquery.js',
'node_modules/materialize-css/dist/js/materialize.js',
'resources/assets/js/site.js'
], 'public/js/app.js')
.sass('resources/assets/sass/app.scss', 'public/css')
.css(
'node_modules/materialize-css/dist/css/materialize.css'
);
.sass(
'resources/assets/sass/app.scss'
, 'public/css');