Skip to content

Refonte visuelle des pages des societés membres #2376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vgreb wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Refonte visuelle des pages des societés membres #2376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions templates/components/MainMenu.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,19 @@
{% block account %}{% endblock %}
</div>
</div>
{% if this.entries.sub|length > 0 %}
{# Une page sans feuille CMS peut fournir son propre sous-menu via le bloc `sub`. #}
{% set custom_sub %}{% block sub %}{% endblock %}{% endset %}

{% if custom_sub|trim is not empty or this.entries.sub|length > 0 %}
<div class="bg-white border-b-2 border-neutre-300">
<div class="container mx-auto flex flex-col sm:flex-row gap-2">
{% for entry in this.entries.sub %}
<div class="px-4 pt-3">
<a href="{{ entry.feuille.lien }}" class="block pb-2 text-gray-800 border-b-3 hover:border-neutre-400 uppercase text-sm {{ entry.is_active ? 'border-black' : 'border-transparent' }}">{{ entry.feuille.nom }}</a>
</div>
{% endfor %}
{% if custom_sub|trim is not empty %}
{{ custom_sub }}
{% else %}
{% for entry in this.entries.sub %}
<twig:MainMenu:SubItem href="{{ entry.feuille.lien }}" :variant="entry.is_active ? 'active' : null">{{ entry.feuille.nom }}</twig:MainMenu:SubItem>
{% endfor %}
{% endif %}
</div>
</div>
{% endif %}
Expand Down
15 changes: 15 additions & 0 deletions templates/components/MainMenu/SubItem.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{# @prop variant 'default'|'active' Le type d'entrée #}
{# @block content Label de l'entrée #}
{%- props variant = 'default' -%}
{%- set style = html_cva(
base: "block pb-2 text-gray-800 border-b-3 hover:border-neutre-400 uppercase text-sm",
variants: {
variant: {
default: 'border-transparent',
active: 'border-black',
},
},
) -%}
<div class="px-4 pt-3">
<a class="{{ style.apply({variant}, attributes.render('class'))|tailwind_merge }}" {{ attributes }}>{%- block content %}{% endblock -%}</a>
</div>
4 changes: 4 additions & 0 deletions templates/layouts/site.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
{% endif %}
{% endset %}

{# Sous-menu fourni par la page, pour celles qui n'ont pas de feuille CMS associée. #}
{% set submenu_content %}{% block submenu %}{% endblock %}{% endset %}

<header>
<main class="bg-afup-300">
<div class="container mx-auto py-5 px-5 sm:px-0 flex items-center">
Expand Down Expand Up @@ -44,6 +47,7 @@

<twig:MainMenu currentFeuilleId="{{ menu_current_feuille_id }}">
<twig:block name="account">{{ account_buttons }}</twig:block>
<twig:block name="sub">{{ submenu_content }}</twig:block>
</twig:MainMenu>
</header>

Expand Down
9 changes: 0 additions & 9 deletions templates/site/_members_menu.html.twig
View file
Open in desktop

This file was deleted.

160 changes: 79 additions & 81 deletions templates/site/company_public_profile.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
{% extends 'admin/association/membership/_base.html.twig' %}
{% extends 'layouts/site.html.twig' %}

{% block submenu %}
{% include 'site/_members_menu.html.twig' with {
current: "compagnies"
} only %}
{# `matches` : la fiche d'une entreprise garde cet onglet actif. #}
{% include 'site/partials/_submenu.html.twig' with { items: [
{ label: 'Entreprises', route: 'company_public_profile_list',
matches: ['company_public_profile_list', 'company_public_profile'] },
] } only %}
{% endblock %}

{% block page_title %}{{ company_member.companyName }}{% endblock %}

{% block title %}{{ company_member.companyName }} est adhérente à l'AFUP{% endblock %}

{% block body_css %}migrated-page{% endblock %}

{% set logo_url = path('company_public_profile_logo', {id : company_member.id, slug: company_member.slug }) %}

{% block metas %}
Expand All @@ -23,87 +21,87 @@
<meta name="twitter:image" content="{{ app.request.getSchemeAndHttpHost() }}{{ logo_url }}" />
{% endblock %}

{% block page_content %}
{% block content %}

<h2>L'entreprise</h2>
<div class="container">
<div class="col-md-4">
<img src="{{ logo_url }}" alt="" />
</div>
<div class="col-md-8">
{{ company_member.description|nl2br }}
</div>
</div>
{# Reprend la hiérarchie du legacy : la page de recrutement prime, puis le contact, puis le site. #}
{% set cta = company_member.careersPageUrl ? 'careers' : (company_member.contactPageUrl ? 'contact' : 'website') %}

<div class="container" style="margin-top: 30px;">
<div class="col-md-8">
<div class="txtcenter">
{% if company_member.websiteUrl %}
<a class="button-inverted {% if not company_member.careersPageUrl and not company_member.contactPageUrl %}button--call-to-action{% endif %}"
href="{{ company_member.websiteUrl }}"
target="_blank"
rel="noopener noreferrer"
>Site web</a>
{% endif %}

{% if company_member.careersPageUrl %}
<a class="button-inverted button--call-to-action"
href="{{ company_member.careersPageUrl }}"
target="_blank"
rel="noopener noreferrer"
>Page de recrutement</a>
{% endif %}

{% if company_member.contactPageUrl %}
<a class="button-inverted {% if not company_member.careersPageUrl %}button--call-to-action{% endif %}"
href="{{ company_member.contactPageUrl }}"
target="_blank"
rel="noopener noreferrer"
>Page de contact</a>
{% endif %}
</div>
<div class="container mx-auto flex flex-col px-4 py-6 gap-6 sm:px-28 sm:py-10 sm:gap-10">

<h2>Présente dans les antennes</h2>
<div class="container">
{% for antenne in antennes %}
<div class="col-md-3 col-sm-12 member-badge">
<img src="{{ antenne.logoUrl }}" alt="" /><br />
{{ antenne.label }}
</div>
{% else %}
<div class="col-md-12">
{{ company_member.companyName }} n'a pas renseigné d'antenne à proximité.
</div>
{% endfor %}
<div class="flex flex-col sm:flex-row items-center gap-6">
<div class="size-32 shrink-0 flex items-center justify-center p-4 border-2 border-neutre-300 rounded-2xl">
<img src="{{ logo_url }}" alt="" class="max-h-full max-w-full object-contain" />
</div>
<h1 class="font-titre text-afup-800 text-2xl sm:text-4xl text-center sm:text-left">{{ company_member.companyName }}</h1>
</div>


{% if badges|length > 0 %}
<h2>Badges</h2>

<div class="container">
{% for badge in badges %}
<div class="col-md-3 col-sm-12 member-badge">
<img src="/images/badges/{{ badge }}.png" alt="Badge {{badge }}">
<section class="flex flex-col gap-4">
<twig:SectionTitle>L'entreprise</twig:SectionTitle>
<p class="text-neutre-700">{{ company_member.description|nl2br }}</p>

{% if company_member.websiteUrl or company_member.careersPageUrl or company_member.contactPageUrl or company_member.cleanedTwitterHandle %}
<div class="flex flex-col sm:flex-row flex-wrap gap-3">
{% if company_member.websiteUrl %}
<twig:Button as="a" variant="{{ cta == 'website' ? 'primary' : 'secondary' }}"
href="{{ company_member.websiteUrl }}"
target="_blank" rel="noopener noreferrer">Site web</twig:Button>
{% endif %}

{% if company_member.careersPageUrl %}
<twig:Button as="a" variant="{{ cta == 'careers' ? 'primary' : 'secondary' }}"
href="{{ company_member.careersPageUrl }}"
target="_blank" rel="noopener noreferrer">Page de recrutement</twig:Button>
{% endif %}

{% if company_member.contactPageUrl %}
<twig:Button as="a" variant="{{ cta == 'contact' ? 'primary' : 'secondary' }}"
href="{{ company_member.contactPageUrl }}"
target="_blank" rel="noopener noreferrer">Page de contact</twig:Button>
{% endif %}

{% if company_member.cleanedTwitterHandle %}
<twig:Button as="a" variant="secondary"
class="flex gap-2"
href="https://twitter.com/{{ company_member.cleanedTwitterHandle }}"
target="_blank" rel="noopener noreferrer">
<twig:ux:icon name="fa:twitter" class="size-5" />
@{{ company_member.cleanedTwitterHandle }}
</twig:Button>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}

</div>
{% if company_member.cleanedTwitterHandle %}
<div class="col-md-4">
<a class="twitter-timeline button-inverted button--call-to-action"
data-lang="fr"
data-chrome="noheader,nofooter,noborders"
data-height="800"
data-dnt="true"
data-theme="light"
href="https://twitter.com/{{ company_member.cleanedTwitterHandle }}"
><i class="fa fa-twitter"></i> Voir @{{ company_member.cleanedTwitterHandle }}</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</section>

<section class="flex flex-col gap-4">
<twig:SectionTitle>Présente dans les antennes</twig:SectionTitle>
{% if antennes is not empty %}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-8">
{% for antenne in antennes %}
<twig:Card class="flex items-center gap-4">
<div class="bg-neutre-200 rounded-2xl size-12 shrink-0 flex items-center justify-center">
<img src="{{ antenne.logoUrl }}" alt="" class="w-full h-full object-contain p-1.5" />
</div>
{# min-w-0 : sans lui un nom long refuse de se compresser et déborde de la carte. #}
<h3 class="font-titre font-bold text-afup-800 grow min-w-0">{{ antenne.label }}</h3>
</twig:Card>
{% endfor %}
</div>
{% else %}
<p class="text-neutre-700">{{ company_member.companyName }} n'a pas renseigné d'antenne à proximité.</p>
{% endif %}
</section>

{% if badges|length > 0 %}
<section class="flex flex-col gap-4">
<twig:SectionTitle>Badges</twig:SectionTitle>
<div class="flex flex-wrap gap-4">
{% for badge in badges %}
<img src="/images/badges/{{ badge }}.png" alt="Badge {{ badge }}" class="size-24 object-contain" />
{% endfor %}
</div>
</section>
{% endif %}

</div>

{% endblock %}
74 changes: 30 additions & 44 deletions templates/site/company_public_profile_list.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,40 @@
{% extends 'admin/association/membership/_base.html.twig' %}
{% extends 'layouts/site.html.twig' %}

{% block submenu %}
{% include 'site/_members_menu.html.twig' with {
current: "compagnies"
} only %}
{# `matches` : la fiche d'une entreprise garde cet onglet actif. #}
{% include 'site/partials/_submenu.html.twig' with { items: [
{ label: 'Entreprises', route: 'company_public_profile_list',
matches: ['company_public_profile_list', 'company_public_profile'] },
] } only %}
{% endblock %}

{% block title %}Les entreprises adhérentes à l'AFUP{% endblock %}

{% block page_title %}Entreprises adhérentes{% endblock %}

{% block page_content %}

<blockquote>
Ces entreprises soutiennent l'association et la communauté PHP française en étant adhérentes à l'AFUP.
</blockquote>

<table class="company-list">
<tbody>

{% for group in company_member_list|batch(3, false) %}
<tr>
{% for company_member in group %}
<td>
{% if company_member %}
<a href="{{ path('company_public_profile', { id: company_member.id, slug: company_member.slug}) }}"
title="Profil de l'entreprise {{ company_member.companyName }}">
{% set logo_url = path('company_public_profile_logo', {id : company_member.id, slug: company_member.slug }) %}
<img src="{{ logo_url }}" alt="" />
</a>
{% endif %}
</td>
{% endfor %}
</tr>

<tr>
{% for company_member in group %}
<td>
{% if company_member %}
<a href="{{ path('company_public_profile', { id: company_member.id, slug: company_member.slug}) }}"
title="Profile de l'entreprise {{ company_member.companyName }}">
{{ company_member.companyName }}
</a>
{% endif %}
</td>
{% endfor %}
</tr>
{% block content %}

<div class="container mx-auto flex flex-col px-4 py-6 gap-6 sm:px-28 sm:py-10 sm:gap-10">

<div class="flex flex-col gap-5">
<h1 class="font-titre text-afup-800 text-2xl sm:text-4xl">Entreprises adhérentes</h1>
<p class="text-neutre-700">
Ces entreprises soutiennent l'association et la communauté PHP française en étant adhérentes à l'AFUP.
</p>
</div>

<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-8">
{% for company_member in company_member_list %}
{# Un seul lien par entreprise : le legacy en posait deux (logo puis nom) vers la même cible. #}
<a href="{{ path('company_public_profile', { id: company_member.id, slug: company_member.slug }) }}"
class="group">
<twig:Card class="flex flex-col items-center gap-4 h-full group-hover:border-afup-300">
<img src="{{ path('company_public_profile_logo', { id: company_member.id, slug: company_member.slug }) }}"
alt="" class="h-20 w-full object-contain" />
<span class="text-center text-afup-800 font-semibold">{{ company_member.companyName }}</span>
</twig:Card>
</a>
{% endfor %}
</div>

</tbody>
</table>
</div>

{% endblock %}
15 changes: 15 additions & 0 deletions templates/site/partials/_submenu.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{#
Rendu générique d'un sous-menu de la barre secondaire, à placer dans le bloc `submenu`.
Remplace `site/secondary_menu.html.twig` pour les pages passées à la nouvelle charte.

items : liste de { label, route, params (optionnel), matches (optionnel) }
`matches` liste les routes qui allument l'onglet ; par défaut, sa propre route.
À renseigner quand plusieurs pages partagent le même onglet (une liste et sa fiche).
#}
{% set current_route = app.request.attributes.get('_route') %}

{% for item in items %}
<twig:MainMenu:SubItem
href="{{ path(item.route, item.params|default({})) }}"
:variant="current_route in item.matches|default([item.route]) ? 'active' : null">{{ item.label }}</twig:MainMenu:SubItem>
{% endfor %}
Loading