set front
This commit is contained in:
56
templates/group/create.html.twig
Normal file
56
templates/group/create.html.twig
Normal file
@@ -0,0 +1,56 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Nouveau groupe | {{ parent() }}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<section class="p-5">
|
||||
<h1 class="font-semibold text-center text-3xl"></h1>
|
||||
{{ form_start(form) }}
|
||||
<div class="grid gap-6 mb-6 md:grid-cols-2 py-8">
|
||||
<div class="relative">
|
||||
{{ form_row(form.groupName, {
|
||||
'attr': {
|
||||
'class': 'block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-light-primary dark:text-dark-primary bg-light-secondary/50 dark:bg-dark-secondary border-0 border-b-2 border-light-primary/75 dark:border-dark-primary/75 appearance-none dark:border-dark-primary focus:outline-none focus:ring-0 focus:border-light-primary dark:focus:border-dark-primary peer',
|
||||
'id': 'groupeName',
|
||||
'placeholder': ''
|
||||
}
|
||||
}) }}
|
||||
{{ form_label(form.groupName, 'Nom du groupe', {
|
||||
'label_attr': {
|
||||
'class': 'absolute text-sm text-light-primary dark:text-dark-primary duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-light-primary dark:peer-focus:text-dark-primary peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto'
|
||||
}
|
||||
}) }}
|
||||
</div>
|
||||
<div class="relative">
|
||||
{{ form_widget(form.Guests, {
|
||||
'attr': {
|
||||
'class': 'block rousnded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-light-primary dark:text-dark-primary bg-light-secondary/50 dark:bg-dark-secondary border-0 border-b-2 border-light-primary/75 dark:border-dark-primary/75 appearance-none dark:border-dark-primary focus:outline-none focus:ring-0 focus:border-light-primary dark:focus:border-dark-primary peer',
|
||||
'id': 'guests',
|
||||
'placeholder': ''
|
||||
}
|
||||
}) }}
|
||||
{{ form_label(form.Guests, 'Participants', {
|
||||
'label_attr': {
|
||||
'class': 'absolute text-sm text-light-primary dark:text-dark-primary duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-light-primary dark:peer-focus:text-dark-primary peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto'
|
||||
}
|
||||
}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid w-full grid-cols-2 justify-end space-x-4 md:flex">
|
||||
<div class="flex w-full justify-center">
|
||||
<button type="submit"
|
||||
class="px-4 py-2 mx-4 text-white dark:text-light-font dark:hover:text-dark-primary uppercase bg-light-primary dark:bg-dark-primary border-2 border-transparent rounded-lg text-md hover:bg-light-secondary dark:hover:bg-dark-secondary">
|
||||
Valider
|
||||
</button>
|
||||
<button class="px-4 py-2 mx-4 text-light-primary dark:text-dark-primary dark:hover:text-dark-primary hover:text-light-font uppercase bg-transparent rounded-lg hover:bg-light-secondary dark:hover:bg-dark-secondary cursor-pointer"
|
||||
onclick="window.history.back()">
|
||||
Retour
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ form_end(form) }}
|
||||
|
||||
</section>
|
||||
{% endblock %}
|
||||
92
templates/group/index.html.twig
Normal file
92
templates/group/index.html.twig
Normal file
@@ -0,0 +1,92 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Mes groupes | {{ parent() }}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<section class="p-5">
|
||||
<h1 class="text-3xl font-bold text-light-primary dark:text-light-font text-center p-3 mb-5">Mes groupes</h1>
|
||||
{% if groups %}
|
||||
<div id="accordion-collapse" data-accordion="collapse">
|
||||
{% for group in groups %}
|
||||
<h2 id="accordion-collapse-heading-{{ loop.index }}">
|
||||
<button type="button"
|
||||
class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 bg-light-card dark:bg-dark-card gap-3"
|
||||
data-accordion-target="#accordion-collapse-body-{{ loop.index }}" aria-expanded="false"
|
||||
aria-controls="accordion-collapse-body-{{ loop.index }}">
|
||||
<span>{{ group.groupName }} ({{ group.guests|length + 1 }} membres)</span>
|
||||
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5 5 1 1 5"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="accordion-collapse-body-{{ loop.index }}" class="hidden"
|
||||
aria-labelledby="accordion-collapse-heading-{{ loop.index }}">
|
||||
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 bg-light-card dark:bg-dark-card">
|
||||
<p class="font-semibold text-xl text-light-primary dark:text-light-font">Participants :</p>
|
||||
{% if group.guests %}
|
||||
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<li class="py-2 sm:py-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="w-8 h-8 rounded-full"
|
||||
src="{{ group.createdBy.getProfilePicture() ? asset('uploads/' ~ group.createdBy.getProfilePicture()) | imagine_filter('profile_navbar') : asset('profilDefault.png') | imagine_filter('profile_navbar') }}"
|
||||
alt="Photo de {{ group.createdBy }}">
|
||||
</div>
|
||||
<div class="flex-1 grow">
|
||||
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
|
||||
@{{ group.createdBy.pseudo }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 truncate dark:text-gray-400">
|
||||
{{ group.createdBy.site.name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% for guest in group.guests %}
|
||||
<li class="py-2 sm:py-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="w-8 h-8 rounded-full"
|
||||
src="{{ guest.getProfilePicture() ? asset('uploads/' ~ guest.getProfilePicture()) | imagine_filter('profile_navbar') : asset('profilDefault.png') | imagine_filter('profile_navbar') }}"
|
||||
alt="Photo de {{ guest.pseudo }}">
|
||||
</div>
|
||||
<div class="flex-1 grow">
|
||||
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
|
||||
@{{ guest.pseudo }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 truncate dark:text-gray-400">
|
||||
{{ guest.site.name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p class="text-center text-light-primary dark:text-dark-primary">Aucun participant pour
|
||||
le
|
||||
moment</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{# <div class="flex justify-center mt-5">#}
|
||||
{# <a href="#"#}
|
||||
{# class="bg-light-secondary dark:bg-dark-secondary hover:bg-gray-200 text-light-primary dark:text-dark-primary font-bold py-2 px-6 rounded-xl transition duration-200">Créer#}
|
||||
{# un groupe</a>#}
|
||||
{# </div>#}
|
||||
{% else %}
|
||||
<p class="text-center text-light-primary dark:text-dark-primary">Vous n'avez pas encore rejoint de
|
||||
groupe</p>
|
||||
{# <a href="{{ path('group_create') }}" class="flex justify-center mt-5">#}
|
||||
{# <button class="bg-light-secondary dark:bg-dark-secondary hover:bg-gray-200 text-light-primary dark:text-dark-primary font-bold py-2 px-6 rounded-xl transition duration-200">#}
|
||||
{# Créer un groupe#}
|
||||
{# </button>#}
|
||||
{# </a>#}
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user