mathieu/start_sf5_project
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

styling crud with bootstrap and fork-awesome

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/config/packages/twig.yaml
View File

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

16
app/templates/base.html.twig
View File

@ -3,13 +3,25 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title> <title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %} {% block stylesheets %}
{{ encore_entry_link_tags('app') }} {{ 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 %} {% block javascripts %}
{{ encore_entry_script_tags('app') }} {{ 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 %} {% endblock %}
</head> </head>
<body> <body>

2
app/templates/beer/_delete_form.html.twig
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?');"> <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="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ beer.id) }}"> <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> </form>

2
app/templates/beer/_form.html.twig
View File

@ -1,4 +1,4 @@
{{ form_start(form) }} {{ form_start(form) }}
{{ form_widget(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) }} {{ form_end(form) }}

14
app/templates/beer/edit.html.twig
View File

@ -1,13 +1,19 @@
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %}
{% block title %}Edit Beer{% endblock %} {% block title %}{{'Edit Beer'}}{% endblock %}
{% block body %} {% 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') }} {{ include('beer/_delete_form.html.twig') }}
</div>
{% endblock %} {% endblock %}

34
app/templates/beer/index.html.twig
View File

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

12
app/templates/beer/new.html.twig
View File

@ -1,11 +1,17 @@
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %}
{% block title %}New Beer{% endblock %} {% block title %}{{'New Beer'}}{% endblock %}
{% block body %} {% block body %}
<h1>Create new Beer</h1> <div class="container">
<h1 class="display-1">{{'Create new Beer'}}</h1>
{{ include('beer/_form.html.twig') }} {{ 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 %} {% endblock %}

21
app/templates/beer/show.html.twig
View File

@ -1,30 +1,37 @@
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %}
{% block title %}Beer{% endblock %} {% block title %}{{'Beer'}}{% endblock %}
{% block body %} {% block body %}
<h1>Beer</h1> <div class="container">
<h1 class="display-1">{{'Beer'}}</h1>
<table class="table"> <table class="table">
<tbody> <tbody>
<tr> <tr>
<th>Id</th> <th scope="row">{{'Id'}}</th>
<td>{{ beer.id }}</td> <td>{{ beer.id }}</td>
</tr> </tr>
<tr> <tr>
<th>Name</th> <th scope="row">{{'Name'}}</th>
<td>{{ beer.name }}</td> <td>{{ beer.name }}</td>
</tr> </tr>
<tr> <tr>
<th>Alcool</th> <th scope="row">{{'Alcool'}}</th>
<td>{{ beer.alcool }}</td> <td>{{ beer.alcool }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </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') }} {{ include('beer/_delete_form.html.twig') }}
</div>
{% endblock %} {% endblock %}