styling crud with bootstrap and fork-awesome

This commit is contained in:
Tchama 2021-02-18 23:05:41 +01:00
parent a0ecf6de88
commit 6792bdb079
8 changed files with 72 additions and 30 deletions

View File

@ -1,2 +1,3 @@
twig:
default_path: '%kernel.project_dir%/templates'
form_themes: ['bootstrap_4_layout.html.twig']

View File

@ -3,13 +3,25 @@
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fork Awesome icons CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
<!-- Bootstrap CDN (+ jQuery) -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
{% endblock %}
</head>
<body>

View File

@ -1,5 +1,5 @@
<form method="post" action="{{ path('beer_delete', {'id': beer.id}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ beer.id) }}">
<button class="btn">Delete</button>
<button class="btn btn-{{ btn_color|default('danger')}}"><i class="fa fa-trash fa-fw"></i> {{'Delete'}}</button>
</form>

View File

@ -1,4 +1,4 @@
{{ form_start(form) }}
{{ form_widget(form) }}
<button class="btn">{{ button_label|default('Save') }}</button>
<button class="btn btn-{{ btn_color|default('primary')}}">{{ button_label|default('Save') }}</button>
{{ form_end(form) }}

View File

@ -1,13 +1,19 @@
{% extends 'base.html.twig' %}
{% block title %}Edit Beer{% endblock %}
{% block title %}{{'Edit Beer'}}{% endblock %}
{% block body %}
<h1>Edit Beer</h1>
<div class="container">
{{ include('beer/_form.html.twig', {'button_label': 'Update'}) }}
<h1 class="display-1">{{'Edit Beer'}}</h1>
<a href="{{ path('beer_index') }}">back to list</a>
{{ include('beer/_form.html.twig', {'button_label': 'Update', 'btn_color': 'warning'}) }}
<a href="{{ path('beer_index') }}" class="btn btn-secondary" role="button">
<i class="fa fa-arrow-left fa-fw"></i> {{'back to list'}}
</a>
{{ include('beer/_delete_form.html.twig') }}
</div>
{% endblock %}

View File

@ -1,37 +1,47 @@
{% extends 'base.html.twig' %}
{% block title %}Beer index{% endblock %}
{% block title %}{{'Beer index'}}{% endblock %}
{% block body %}
<h1>Beer index</h1>
{# responsive, fixed-width container class #}
<div class="container">
<h1 class="display-1">{{'Beer index'}}</h1>
<table class="table">
<thead>
<thead class="thead-light">
<tr>
<th>Id</th>
<th>Name</th>
<th>Alcool</th>
<th>actions</th>
<th scope="col">{{'Id'}}</th>
<th scope="col">{{'Name'}}</th>
<th scope="col">{{'Alcool'}}</th>
<th scope="col">{{'actions'}}</th>
</tr>
</thead>
<tbody>
{% for beer in beers %}
<tr>
<td>{{ beer.id }}</td>
<th scope="row">{{ beer.id }}</th>
<td>{{ beer.name }}</td>
<td>{{ beer.alcool }}</td>
<td>
<a href="{{ path('beer_show', {'id': beer.id}) }}">show</a>
<a href="{{ path('beer_edit', {'id': beer.id}) }}">edit</a>
<a href="{{ path('beer_show', {'id': beer.id}) }}" class="btn btn-secondary" role="button">
<i class="fa fa-eye fa-fw"></i> {{'show'}}
</a>
<a href="{{ path('beer_edit', {'id': beer.id}) }}" class="btn btn-warning" role="button">
<i class="fa fa-pencil fa-fw"></i> {{'edit'}}
</a>
</td>
</tr>
{% else %}
<tr>
<td colspan="4">no records found</td>
<td colspan="4">{{'no records found'}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<a href="{{ path('beer_new') }}">Create new</a>
<a href="{{ path('beer_new') }}" class="btn btn-primary" role="button">
<i class="fa fa-plus fa-fw"></i> {{'Create new'}}
</a>
</div>
{% endblock %}

View File

@ -1,11 +1,17 @@
{% extends 'base.html.twig' %}
{% block title %}New Beer{% endblock %}
{% block title %}{{'New Beer'}}{% endblock %}
{% block body %}
<h1>Create new Beer</h1>
<div class="container">
<h1 class="display-1">{{'Create new Beer'}}</h1>
{{ include('beer/_form.html.twig') }}
<a href="{{ path('beer_index') }}">back to list</a>
<a href="{{ path('beer_index') }}" class="btn btn-secondary" role="button">
<i class="fa fa-arrow-left fa-fw"></i> {{'back to list'}}
</a>
</div>
{% endblock %}

View File

@ -1,30 +1,37 @@
{% extends 'base.html.twig' %}
{% block title %}Beer{% endblock %}
{% block title %}{{'Beer'}}{% endblock %}
{% block body %}
<h1>Beer</h1>
<div class="container">
<h1 class="display-1">{{'Beer'}}</h1>
<table class="table">
<tbody>
<tr>
<th>Id</th>
<th scope="row">{{'Id'}}</th>
<td>{{ beer.id }}</td>
</tr>
<tr>
<th>Name</th>
<th scope="row">{{'Name'}}</th>
<td>{{ beer.name }}</td>
</tr>
<tr>
<th>Alcool</th>
<th scope="row">{{'Alcool'}}</th>
<td>{{ beer.alcool }}</td>
</tr>
</tbody>
</table>
<a href="{{ path('beer_index') }}">back to list</a>
<a href="{{ path('beer_index') }}" class="btn btn-secondary" role="button">
<i class="fa fa-arrow-left fa-fw"></i> {{'back to list'}}
</a>
<a href="{{ path('beer_edit', {'id': beer.id}) }}">edit</a>
<a href="{{ path('beer_edit', {'id': beer.id}) }}" class="btn btn-warning" role="button">
<i class="fa fa-pencil fa-fw"></i> {{'edit'}}
</a>
{{ include('beer/_delete_form.html.twig') }}
</div>
{% endblock %}