CSS : utilisation de Bulma

* ajout de bulma.min.css
* utilisation de Bulma sur la page des menus aléatoires
* utilisation de Bulma sur la page d'ajout d'un nouveau menu
This commit is contained in:
Olivier DOSSMANN 2021-05-01 18:54:32 +02:00
parent 2a6e355483
commit fb6762bf9f
4 changed files with 63 additions and 13 deletions

1
public/bulma.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -2,13 +2,43 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title')</title> <title>@yield('title')</title>
<link rel="stylesheet" href="/bulma.min.css">
<body> <body>
<section class="hero is-primary is-small has-text-centered">
<div class="hero-body">
<p class="title">
Keskonmange
</p>
</div>
</section>
<section class="section">
<div class="container">
@section('content') @section('content')
<p>Aucun contenu pour le moment.</p> <p>Aucun contenu pour le moment.</p>
@show @show
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
<div class="columns">
<div class="column is-half">
<p>
<a href="https://forge.o9.re/olivier/keskonmange/" target="_blank"><strong>Keskonmange</strong></a>,
fait par Olivier Dossmann.
</p>
</div>
<div class="column is-half">
<p><strong>&hearts;</strong></p>
</div>
</div>
</div>
</footer>
</body> </body>
</html> </html>

View File

@ -3,19 +3,23 @@
@section('title', 'Ajouter un menu') @section('title', 'Ajouter un menu')
@section('content') @section('content')
<h1>Ajouter un menu</h1> <h1 class="title">Nouveau menu</h1>
<form method="POST" action="{{ route('menus.store') }}"> <form method="POST" action="{{ route('menus.store') }}">
@csrf @csrf
<div class="field">
<label for="title">Titre du menu</label><br /> <label class="label">Titre du menu</label>
<input id="title" name="title" type="text" class="@error('title') is-invalid @enderror"><br /> <div class="control">
<input id="title" name="title" type="text" placeholder="ex : pizza" class="@error('title') is-invalid @enderror">
</div>
<p class="help">Ou encore : pâtes, kebab, choucroute…</p>
</div>
@error('title') @error('title')
<div class="alert alert-danger">{{ $message }}</div> <div class="alert alert-danger">{{ $message }}</div>
@enderror @enderror
<input type="submit" value="Nouveau menu"> <input class="button is-primary" type="submit" value="Nouveau menu">
</form> </form>
@endsection @endsection

View File

@ -3,17 +3,32 @@
@section('title', 'Menus') @section('title', 'Menus')
@section('content') @section('content')
<h1>Menus aléatoires</h1> <h1 class="title">Menus aléatoires</h1>
@if ($menus) @if ($menus)
<ul> <div class="columns is-multiline is-mobile">
@foreach($menus as $menu) @foreach($menus as $menu)
<li>{{ $menu->title }}</li> <div class="column is-half-mobile is-one-quarter-desktop is-one-quarter-tablet">
<div class="card">
<header class="card-header">
<p class="card-header-title">
{{ $menu->title }}
</p>
</header>
{{-- <div class="card-content">--}}
{{-- <p>Place content here.</p>--}}
{{-- </div>--}}
{{-- <footer class="card-footer">--}}
{{-- <p class="card-footer-item">My footer</p>--}}
{{-- </footer>--}}
</div>
</div>
@endforeach @endforeach
</ul> </div>
@else @else
<p>Aucun menu trouvé.</p> <p>Aucun menu trouvé.</p>
@endif @endif
<p><a href="{{ route('menus.create') }}">Ajouter un menu</a></p> <p><a class="button is-primary is-link" href="{{ route('menus.create') }}">Ajouter un menu</a></p>
@endsection @endsection