styling crud with bootstrap and fork-awesome
This commit is contained in:
parent
a0ecf6de88
commit
6792bdb079
|
|
@ -1,2 +1,3 @@
|
|||
twig:
|
||||
default_path: '%kernel.project_dir%/templates'
|
||||
form_themes: ['bootstrap_4_layout.html.twig']
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) }}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue