templates/network/profile/sections/profile_section_hero.html.twig line 1

Open in your IDE?
  1. {% import 'macros/button.macro.twig' as button %}
  3. <div class="relative"
  4.   class="{{ profile.color ?? 'bg-neutral-400' }}"
  5.   style="background-color: {{ profile.color }};"
  6.   id="profile_hero_banner">
  7.   <div class="absolute top-0 block w-full h-full">
  8.     {{ profile.banner
  9.       ? profile.banner.thumbnail('profile-banner-hero').html({
  10.         pictureAttributes: { class: 'w-full h-full max-w-full object-cover', id: 'profile-banner' },
  11.         imgAttributes: { class: 'w-full h-full max-w-full object-cover' }
  12.       })|raw }}
  13.   </div>
  14.   <div class="absolute top-0 left-0 w-full h-full opacity-75 {{
  15.     profile.color
  16.       ?? 'bg-neutral-400'
  17.     }}"
  18.     style="background-color: {{ profile.color }};"></div>
  20.   {% if profile.banner and user.id is defined and user.id == profile.id %}
  21.     <div class="absolute top-0 left-0 z-30 banner-edit-button">
  22.       <form action="{{ path('network_profile_crop_banner_frame') }}" method="POST">
  23.         <button type="submit" class="p-2 bg-neutral-100" title="{{ 'banner-edit'|trans }}">
  24.           {% include 'icons/edit.svg.twig' with { class: 'w-4 h-4 text-black' } only %}
  25.         </button>
  26.       </form>
  27.     </div>
  28.   {% endif %}
  29.   <div class="container relative z-10 pt-8 pb-5 mx-auto md:pb-12 md:pt-24 lg:pb-16 lg:pt-28">
  30.     <div class="flex flex-col w-full sm:flex-row gap-x-3 md:gap-x-7 lg:gap-x-14 gap-y-10">
  31.       <div class="relative flex w-20 h-20 col-span-9 group md:w-36 md:h-36 lg:w-56 lg:h-56 lg:col-span-2"
  32.         id="profile_hero_avatar">
  33.         {% include 'component/avatar.html.twig' with {
  34.           avatar: profile.avatar,
  35.           initials: profile.name|initials,
  36.           size: 'hero',
  37.           rounded: true,
  38.           id: 'profile-avatar'
  39.         } only %}
  41.         {% if 'ROLE_STAFF' in profile.roles %}
  42.           <div class="absolute z-30 flex items-center text-white transform -translate-y-1/2 top-full -right-3 md:gap-2 md:p-1 md:px-3 bg-primary-500">
  43.             <span class="block p-1" title="staff">
  44.               {% include 'icons/users.svg.twig' with { class: 'w-4 h-4' } %}
  45.             </span>
  46.             <span class="text-sm tracking-wide uppercase font-headline">staff</span>
  47.           </div>
  48.         {% elseif 'ROLE_CLUB_HORSE' in profile.roles %}
  49.           <div class="absolute z-30 flex items-center text-white transform -translate-y-1/2 top-full -right-3 md:gap-2 md:p-1 md:px-3 bg-primary-500">
  50.             <span class="block p-1" title="horse">
  51.               {% include 'icons/users.svg.twig' with { class: 'w-4 h-4' } %}
  52.             </span>
  53.             <span class="text-sm tracking-wide uppercase font-headline">
  54.               {{ 'profile.horse.club'|trans }}
  55.             </span>
  56.           </div>
  57.         {% elseif 'ROLE_CLUB_BUSINESS' in profile.roles %}
  58.           <div class="absolute z-30 flex items-center text-white transform -translate-y-1/2 top-full -right-3 md:gap-2 md:p-1 md:px-3 bg-primary-500">
  59.             <span class="block p-1" title="business">
  60.               {% include 'icons/users.svg.twig' with { class: 'w-4 h-4' } %}
  61.             </span>
  62.             <span class="text-sm tracking-wide uppercase font-headline">
  63.               {{ 'profile.business.club'|trans }}
  64.             </span>
  65.           </div>
  66.         {% elseif 'ROLE_CLUB_JOCKEY' in profile.roles %}
  67.           <div class="absolute z-30 flex items-center text-white transform -translate-y-1/2 top-full -right-3 md:gap-2 md:p-1 md:px-3 bg-primary-500">
  68.             <span class="block p-1" title="jockey">
  69.               {% include 'icons/users.svg.twig' with { class: 'w-4 h-4' } %}
  70.             </span>
  71.             <span class="text-sm tracking-wide uppercase font-headline">
  72.               {{ 'profile.jockey.club'|trans }}
  73.             </span>
  74.           </div>
  75.         {% endif %}
  77.         {% if profile.avatar and user and user.id is defined and user.id == profile.id %}
  78.           <div class="absolute inset-0 z-30 items-center justify-center hidden group-hover:flex">
  79.             <form action="{{ path('network_profile_crop_avatar_frame') }}" method="POST">
  80.               <button type="submit" class="p-2 bg-neutral-100" title="{{ 'avatar-edit'|trans }}">
  81.                 {% include 'icons/edit.svg.twig' with { class: 'w-4 h-4 text-black' } only %}
  82.               </button>
  83.             </form>
  84.           </div>
  85.         {% endif %}
  86.       </div>
  87.       <div class="flex-1 min-w-0">
  88.         <div class="flex flex-col h-full min-w-0 tracking-wide text-white font-headline">
  89.           <ul class="flex flex-wrap mb-2 gap-x-3 gap-y-1">
  90.             {% for subprofile in profile.profiles.items %}
  91.               {% if is_primary_profile(profile, subprofile) %}
  92.                 <li class="relative">
  93.                   <div class="relative z-30 flex items-center md:gap-2 md:p-1 md:px-3">
  94.                     {% include 'network/profile/components/subprofile_icon.html.twig' with {
  95.                       subprofile: subprofile
  96.                     } only %}
  97.                     <span class="text-sm font-medium tracking-widest text-white uppercase font-headline">
  98.                       {{ subprofile.identifier|trans }}
  99.                     </span>
  100.                   </div>
  101.                   <div class="absolute inset-0 z-10 hidden pointer-events-none bg-primary-500 md:block"></div>
  102.                 </li>
  103.               {% else %}
  104.                 <li class="relative">
  105.                   <div class="relative z-30 flex items-center md:gap-2 md:p-1 md:px-3">
  106.                     {% include 'network/profile/components/subprofile_icon.html.twig' with {
  107.                       subprofile: subprofile
  108.                     } only %}
  109.                     <span class="text-sm tracking-wide text-white uppercase font-headline">
  110.                       {{ subprofile.identifier|trans }}
  111.                     </span>
  112.                   </div>
  113.                   <div class="absolute inset-0 z-10 hidden pointer-events-none md:block"
  114.                     style="background-color: {{ profile.color }}"></div>
  115.                 </li>
  116.               {% endif %}
  117.             {% endfor %}
  118.           </ul>
  119.           {% if profile.name %}
  120.             <h1 class="text-2xl font-medium leading-tight uppercase md:font-light md:text-4xl lg:text-5xl">
  121.               {{ profile.name }}
  122.             </h1>
  123.           {% endif %}
  124.           <p class="text-xl">
  125.             @{{ profile.username }}
  126.           </p>
  127.           {% if profile.description %}
  128.             <p>
  129.               {{ profile.description|u.truncate(300, '...')|nl2br }}
  130.             </p>
  131.           {% endif %}
  132.           {% if profile.languages %}
  133.             <ul class="flex flex-wrap my-4 gap-x-4 gap-y-1">
  134.               {% for language in profile.languages %}
  135.                 {% set name = language|language_name(app.request.locale) %}
  136.                 <li class="flex items-start gap-2" title="{{ name }}">
  137.                   <img class="w-4 h-4 mt-1 rounded-full md:mt-1"
  138.                     loading="lazy"
  139.                     src="{{ language|language_flag }}"
  140.                     alt="{{ name }}" />
  141.                   <span>{{ name }}</span>
  142.                 </li>
  143.               {% endfor %}
  144.             </ul>
  145.           {% endif %}
  146.         </div>
  147.       </div>
  148.     </div>
  149.   </div>
  150. </div>