templates/Default/macros.html.twig line 18

  1. {% macro article(o,last = false,home = false) %}
  2.     <article class="new w100 {{desktop('bottom-70')}} {{mobile('bottom-30')}}">
  3.         <div class="flex row w100 {{desktop('bottom-70')}} {{mobile('bottom-30')}}">
  4.             <div class="third {{desktop('')}} {{mobile('')}}" >
  5.                 <figure class="relative w100 hoverflow mrect {{desktop('')}} {{mobile('')}}" >
  6.                     <img src='{{asset(o.banner ? o.banner.thumbnail? o.banner.thumbnail: o.banner.file : "images/armoiries.jpg")}}' class="cover">
  7.                 </figure>
  8.                 <div class="flex row space">
  9.                     <i class="third"></i>
  10.                     <div class="w100 right bg-success top-10-in {{desktop("")}} {{mobile("")}}"><span class="top-2-in {{desktop("")}} {{mobile("")}}"></span></div>
  11.                 </div>
  12.             </div>
  13.             <div class="flex col space {{desktop('left-70 left-2-in')}} {{mobile('')}}">
  14.                 <div class="h100 {{desktop('bottom-50 bottom-2-in')}} {{mobile('bottom-20-in')}}">
  15.                     <div class="flex row middle {{desktop('bottom-25')}} {{mobile('bottom-15')}}">
  16.                         <div class="p-alt flex row middle upper {{desktop('right-30 right-5-in')}} {{mobile('right-20')}}">
  17.                             <i class="circle bg-warning {{desktop('padding-4 right-10')}}{{mobile('padding-3 right-5')}}"></i>
  18.                             <time class="warning">{{o.date ? o.date|frdate}}</time>
  19.                         </div>
  20.                         <div class="p-alt flex row middle ">
  21.                             <i class="circle bg-warning {{desktop('padding-4 right-10')}}{{mobile('padding-3 right-5')}}"></i>
  22.                             <span class="upper warning">{{o.category.name}}</span>
  23.                         </div>
  24.                     </div>
  25.                     <h3 class="success bold flex row {{desktop('h2 bottom-15 right-40-in')}} {{mobile('bottom-8')}}">
  26.                         <a href="{{url('article',{'id': o.id,'slug': o.slug})}}" class="{{desktop('lh-3x')}} {{mobile('lh-10x')}}">{{o.title}}</a>
  27.                     </h3>
  28.                     {%if o.description%}<p class="h4 success medium {{desktop('')}} {{mobile('')}}">{{o.description|raw}}</p>{%endif%}
  29.                 </div>
  30.                 <div class="flex row space w100">
  31.                     <a href="{{url('article',{'id': o.id,'slug': o.slug})}}" class='flex row middle extrabold {{desktop("")}} {{mobile("")}}'>
  32.                         <span class='p warning upper {{desktop("")}}{{mobile("")}}'>+ Lire l'article</span>
  33.                     </a>
  34.                 </div>
  35.             </div>
  36.         </div>
  37.         {%if not last %}<div class="w100 bg-success top-1-in"></div>{%endif%}
  38.     </article>
  39. {% endmacro %}
  41. {% macro video(o, alt = false) %}
  42. <article class="video relative flex col success {{desktop('third-40 vt-25')}} {{mobile('w100 vt-15')}}">
  43.     <figure class="relative shadow w100 hoverflow mrect scale-hover-img {{desktop('')}} {{mobile('')}}">
  44.         <img class="cover transition" src="{{asset(o.banner ? o.banner.thumbnail : o.youtube ? o.youtube|youtubeThumbnail : 'images/about.jpg')}}" alt="{{o.title}}">
  45.         <div class="absolute fill top left">
  46.             <a class="relative fill flex col middle center hover scale-hover mask-alt transition" href='{{path("video",{id:o.id})}}'>
  47.                 <i class="h1 fa fa-play-circle white relative {{desktop('')}}{{mobile('')}}">
  48.                 </i>
  49.             </a>
  50.         </div>
  51.     </figure>
  52.     <h3 class="p {{not alt ? 'black' : 'white'}} {{desktop('medium top-10')}} {{mobile('medium top-10')}}">{{o.title}}</h3>
  53. </article>
  54. {% endmacro %}
  56. {% macro event(o, home=true) %}
  57.     <div class="shadow bg-white black border-bottom border-solid border-success {{desktop((home ? 'w100' : 'half-25 ')~' flex row vt-20 padding-25 border-8x')}} {{mobile('w100 vt-10 padding-15 border-5x')}}">
  58.         <figure class="relative hoverflow shadow-alt {{mobile('mrect')}}" {%if isDesktop() %} style="width : 11.67vw; height: 11.09375vw; min-width : 11.67vw; min-height: 11.09375vw;"{%endif%}>
  59.             <img src='{{asset(o.banner ? o.banner.thumbnail ? o.banner.thumbnail : o.banner.file : "images/armoiries.png")}}' class="{{o.banner ? "cover" : "contain"}}">
  60.         </figure>
  61.         <div class="flex col {{desktop('left-20 left-6-in')}} {{mobile('top-10')}}">
  62.             <h4 class="p h100 success-alt {{desktop('')}} {{mobile('')}}">{{o.name}}</h4>
  63.             <div class="bottom top-10">
  64.                 <div class="">
  65.                     <span class="block p-alt">Date :</span>
  66.                     <span class="block medium p">{{o.startDate ? o.startDate|frdate}} {{o.endDate ? " au "~o.endDate|frdate}} </span>
  67.                 </div>
  68.                 {%if o.place %}
  69.                 <div class="top-10">
  70.                     <span class="block p-alt">Lieu :</span>
  71.                     <span class="block medium p">{{o.place}}</span>
  72.                 </div>
  73.                 {%endif%}
  74.             </div>
  75.         </div>
  76.     </div>
  77. {% endmacro %}
  79. {% macro ministries(o) %}
  80.     <div class="relative {{desktop('half-40 vt-40')}} {{mobile('w100 vt-20')}}">
  81.             <div class="absolute fill flex col">
  82.                 <div class="vt-40-in bg-white"></div>
  83.                 <div class="h100 bg-gradient {{desktop('radius-top-20')}} {{mobile('radius-top-15')}}"></div>
  84.             </div>
  85.             <div class="relative w100 flex col left {{desktop('hz-50-in')}} {{mobile('hz-25-in')}}">
  86.                 <figure class="relative bg-gray ministries-fig  {{desktop('padding-5')}} {{mobile('padding-5')}}" >
  87.                     <img src='{{asset(o.logo ? o.logo.thumbnail)}}' class="h100 {{desktop('')}} {{mobile('')}}">
  88.                 </figure>
  89.             </div>
  90.             <div class="relative {{desktop('top-30-in hz-50-in')}} {{mobile('top-15-in hz-25-in')}}">
  91.                 <div class="">
  92.                     <span class="block upper medium white {{desktop('p-alt')}} {{mobile('p-alt')}} ">MINISTRE :</span>
  93.                     <span class="block bold white  {{desktop('h6')}} {{mobile('p')}}">{{o.director}}</span>
  94.                 </div>
  95.                 <div class="{{desktop('flex row space')}}">
  96.                     <div class="">
  97.                         <span class="block medium upper white p-alt {{desktop('p top-30')}} {{mobile('top-15')}} ">SIGLE :</span>
  98.                         <span class="block bold white  {{desktop('h6')}} {{mobile('p')}}">{{o.abbreviation}}</span>
  99.                     </div>
  100.                     {%if o.website %}
  101.                     {% set website = o.website|split("https://") %}
  102.                     <div class="">
  103.                         <span class="block medium upper white p-alt {{desktop('top-30')}} {{mobile('top-15')}} ">SITE WEB :</span>
  104.                         <span class="block bold white  {{desktop('h6')}} {{mobile('p')}}">{{o.website}}</span>
  105.                     </div>
  106.                     {%endif%}
  107.                 </div>
  108.                 <div class="flex row bottom right" style="transform: translateY(50%);">
  109.                     <a href="{{o.website}}" title="En savoir plus" class="circle bg-gradient border  border-white {{desktop('border-7x padding-30')}} {{mobile('padding-10 border-3x')}}">
  110.                         <span class="fa fa-eye white {{desktop('h2')}} {{mobile('p')}}"></span>
  111.                     </a>
  112.                 </div>
  113.             </div>
  114.     </div>
  115. {% endmacro %}
  117. {% macro members(o) %}
  118.     <article class="relative flex row {{desktop('third-30 bottom-80')}} {{mobile('w100 bottom-30')}}">
  119.         <div class="absolute fill flex col">
  120.             <div class="hhalf bg-white"></div>
  121.             <div class="h100 bg-gradient {{desktop('radius-top-20')}} {{mobile('radius-top-15')}}"></div>
  122.         </div>
  123.         <div class="relative w100 flex col space {{desktop('hz-25-in bottom-25-in hz-5 bottom-5')}} {{mobile('padding-20')}}">
  124.             <div class="h100 {{desktop('')}} {{mobile('')}}">
  125.                 <figure class="relative hoverflow members-fig flex row {{desktop('')}} {{mobile('')}}" >
  126.                     <img src='{{asset(o.directorPicture ? o.directorPicture.thumbnail ? o.directorPicture.thumbnail : o.directorPicture.file)}}' class="h100 {{desktop('')}} {{mobile('')}}">
  127.                 </figure>
  128.                 <div class="">
  129.                     <h4 class="bold white {{desktop('top-30 bottom-20')}} {{mobile('top-15 bottom-10')}} ">{{o.director}}</h4>
  130.                     <span class="p block medium white  {{desktop('')}} {{mobile('')}}">{{o.directorTitle}}</span>
  131.                 </div>
  132.             </div>
  133.             <div class="flex {{desktop('row top-20')}} {{mobile('col top-20')}}">
  134.                 <a href="" class="bg-warning medium white {{desktop('vt-15-in hz-25-in right-25 radius-5')}} {{mobile('text-center vt-10-in hz-20-in radius-3')}}">Biographie</a>
  135.                 <div class="flex row middle {{desktop('left-20')}} {{mobile('top-10')}}">
  136.                     <a class='icon h5 flex row middle center bg-white success circle {{desktop("")}} {{mobile("")}}' href='{{o.directorFacebook}}' target="_blank" title="Compte Facebook"><i class="fab fa-facebook-f"></i></a>
  137.                     <a class='icon h5 flex row middle center bg-white success circle {{desktop("left-10")}} {{mobile("left-5")}}' href='{{o.directorTwitter}}' target="_blank" title="Compte Twitter"><i class="fab fa-twitter"></i></a>
  138.                     <a class='icon h5 flex row middle center bg-white success circle {{desktop("left-10")}} {{mobile("left-5")}}' href='{{o.directorTwitter}}' target="_blank" title="Compte LinkedIn"><i class="fab fa-linkedin"></i></a>
  139.                 </div>
  140.             </div>
  141.         </div>
  142.     </article>
  143. {% endmacro %}
  145. {% macro membersOld(o,index,length) %}
  146.     <article class="{{desktop(not index ? 'flex row center w100' : 'flex row space half')}} top-60 {{mobile('w100 bottom-40')}} transition-1s anim-scroll {{index is even ? 'anim-from-right' : 'anim-from-left'}}">
  147.         <div class="{{not index  and isDesktop() ? 'half' : 'w100'}}" {% if index is even and index and isDesktop() %} style="transform: translateY(20%);" {%endif%}>
  148.             <div class=" w100 flex row relative   {{index is even and index ? 'reverse' : 'center'}}" >
  149.                 <div class="relative {{mobile('fill')}}" {%if isDesktop() %}style="min-width: calc(100% - var(--content-margin)); width: calc(100% - var(--content-margin));" {%endif%}>
  150.                     <div class="bg-gradient relative flex col center {{desktop('radius-top-20 hz-40-in vt-40-in')}} {{mobile('flex col radius-top-15 padding-10')}}">
  151.                         <figure class="relative members-fig hoverflow flex row center {{desktop('half-40')}} {{mobile('')}}" >
  152.                             <img src='{{asset(o.picture ? o.picture.thumbnail)}}' class="contain {{desktop('')}} {{mobile('')}}">
  153.                         </figure>
  154.                         <div class="w100 text-center {{desktop('top-20')}} {{mobile('top-10')}}">
  155.                             <div class="">
  156.                                 <h4 class="bold white {{desktop('')}} {{mobile('')}} ">{{o.title? o.title~" "~o.fName~" "~o.lName : o.fName~" "~o.lName}}</h4>
  157.                                 <span class="block warning bold {{desktop('h5 top-7')}} {{mobile('')}}">{{o.startAt ? o.startAt|frmonth(o.startAt,1)|capitalize~" "~o.startAt|date('Y')}} - {{o.endAt ? o.endAt|frmonth(o.endAt,1)|capitalize~" "~o.endAt|date('Y') : 'ce jour'}}</span>
  158.                             </div>
  159.                             {% if o.startAt %}
  160.                             <div class="white {{desktop('vt-15')}} {{mobile('vt-10')}}">
  161.                                 <span class="p-alt block {{desktop('')}} {{mobile('')}}">Prise de pouvoir :</span>
  162.                                 <span class="block bold  {{desktop('h6')}} {{mobile('p')}}">{{o.startAt|frdate}}</span>
  163.                             </div>
  164.                             {%endif%}
  165.                             {% if o.profession %}
  166.                             <div class="white {{desktop('')}} {{mobile('')}}">
  167.                                 <span class="p-alt block {{desktop('')}} {{mobile('')}}">Pouvoir :</span>
  168.                                 <span class="block bold {{desktop('h6')}} {{mobile('p')}}">{{o.profession}}</span>
  169.                             </div>
  170.                             {%endif%}
  171.                         </div>
  172.                     </div>
  173.                 </div>
  174.                 {%if index and isDesktop() %}
  175.                 <div class="gwidth flex col">
  176.                     <i class="h100  {{index is odd ? 'border border-1x border-notop border-noleft' : 'border border-1x border-notop border-noleft border-noright'}}"></i>
  177.                     {% if length is even and index == (length - 1) %}
  178.                     <i class="hquarter"></i>
  179.                     {%else%}
  180.                     {#<i class="hquarter border {{index is even ? 'border border-1x border-notop border-nobottom border-noleft border-noright' : 'border-1x border-notop border-noright '}}" {% if index is odd %} style="transform: translateX(50%);" {%endif%}></i>#}
  181.                     <i class="hquarter  {{index is even ? 'border border-1x border-notop border-nobottom border-noleft border-noright' : 'noborder flex row right '}}" >
  182.                         {%if index is odd %}
  183.                         <i class="half border border-1x border-notop border-noright '}}" >
  184.                         </i>
  185.                         {%endif%}
  186.                     </i>
  187.                     {%endif%}
  188.                 </div>
  189.                 {%endif%}
  190.             </div>
  191.         </div>
  192.     </article>
  193. {% endmacro %}
  196. {% macro partner(o) %}
  197. <article class="bg-white shadow-alt {{desktop('w100 flex row space middle padding-40 bottom-60')}} {{mobile('w100 flex col reverse hz-20-in bottom-40')}}">
  198.     <div class="{{desktop('left-20 vt-30 right-80-in')}} {{mobile('vt-15')}}">
  199.         <div class="h100">
  200.             <h3 class="gradient {{desktop('h2')}} {{mobile('h4')}}">{{o.name}}</h3>
  201.             <div class="w100 top-30 {{desktop('')}} {{mobile('')}}">
  202.                 <article class="article {{desktop('h4')}} {{mobile('p')}}">{{o.description|raw}}</article>
  203.             </div>
  204.         </div>
  205.         <div class='flex row middle  {{desktop("h4 top-60")}} {{mobile("p top-15")}}'>
  206.             <a href="" target="_blank" class='bg-gradient white {{desktop("vt-20-in hz-40-in ")}}'>
  207.                 Aller sur le site
  208.                 <i class="fa fa-link white {{desktop('left-8')}} {{mobile('left-5')}}"></i>
  209.             </a>
  210.         </div>
  211.     </div>
  212.     <div class="quarter">
  213.         <figure class='w100 relative hoverflow' style="height: 12vw;">
  214.             <img src="{{asset(o.logo ? o.logo.thumbnail ? o.logo.thumbnail : o.logo.file)}}" class='contain {{desktop("")}} {{mobile("")}}' />
  215.             {#<img src="{{asset(o.logo)}}" class='contain {{desktop("")}} {{mobile("")}}' />#}
  216.         </figure>
  217.     </div>
  218. </article>
  219. {% endmacro %}
  221. {% macro structure(o, alt = false) %}
  222. <article class="bg-gray-alt {{desktop('flex row vt-25-in hz-25-in radius-20 top-40')}} {{mobile('w100 hz-20-in radius-10 bottom-40')}}">
  223.     {%if isDesktop() %}
  224.     <figure class='structure-fig relative hoverflow'>
  225.         <img src="{{asset(o.directorPicture ? o.directorPicture : 'images/armoiries.png')}}" class='contain {{desktop("radius-20")}} {{mobile("radius-10")}}' />
  226.     </figure>
  227.     {%endif%}
  228.     <div class="{{desktop('left-20 vt-30')}} {{mobile('vt-15')}}">
  229.         <h3 class="success">{{o.name}}({{o.abbreviation}})</h3>
  230.         <div class="top-30 {{desktop('gright-in')}} {{mobile('')}}">
  231.             <div class="{{desktop('')}} {{mobile('')}}">
  232.                 <span class="block success p-alt medium upper">Directeur</span>
  233.                 <span class="block success bold {{desktop('h4')}} {{mobile('p')}}">{{o.director}}</span>
  234.             </div>
  235.             {% if o.content %}
  236.             <div class="w100 top-30 {{desktop('')}} {{mobile('')}}">
  237.                 <span class="block success p-alt medium upper">Mission</span>
  238.                 <article class="article success semibold text-justify {{desktop('h4')}} {{mobile('p')}}">{{o.content|raw}}</article>
  239.             </div>
  240.             {% endif %}
  241.             {#{% if o.phone %}
  242.             <span class='flex row middle vt-15-in hz-20-in white semibold shadow radius-15 bg-white left-20'>
  243.                 <i class="fa fa-phone h5 success-alt"></i>
  244.             </span>
  245.             {% endif %}
  246.             {% if o.email %}
  247.             <span class='flex row middle vt-15-in hz-20-in white semibold shadow radius-15 bg-white left-20'>
  248.                 <i class="fa fa-envelope h5 success-alt"></i>
  249.             </span>
  250.             {% endif %}#}
  251.         </div>
  252.     </div>
  253. </article>
  254. {% endmacro %}
  256. {% macro project(o,last=false, home = false) %}
  257.     <article class="new w100 {{desktop('bottom-70')}} {{mobile('bottom-30')}}">
  258.         <div class="flex row w100 {{desktop('bottom-70')}} {{mobile('bottom-30')}}">
  259.             <div class="half {{desktop('')}} {{mobile('')}}" >
  260.                 <figure class="relative w100 hoverflow mrect {{desktop('')}} {{mobile('')}}" >
  261.                     <img src='{{asset(o.banner.thumbnail)}}' class="cover">
  262.                 </figure>
  263.             </div>
  264.             <div class=" flex col space {{desktop('left-70 left-2-in')}} {{mobile('')}}">
  265.                 <div class="h100 {{desktop('')}} {{mobile('')}}">
  266.                     <div class="{{desktop('bottom-25')}} {{mobile('bottom-15')}}">
  267.                         {#<div class="flex row middle bottom-15 {{desktop('')}} {{mobile('')}}">
  268.                             <svg class="icon min" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  269.                             <path d="M10.0001 0.333374C7.54081 0.333251 5.18088 1.30376 3.4332 3.03396C1.68552 4.76417 0.691341 7.11423 0.666748 9.57337C0.666748 15.9667 8.89175 23.0834 9.24175 23.3867C9.45307 23.5675 9.722 23.6668 10.0001 23.6668C10.2782 23.6668 10.5471 23.5675 10.7584 23.3867C11.1667 23.0834 19.3334 15.9667 19.3334 9.57337C19.3088 7.11423 18.3146 4.76417 16.567 3.03396C14.8193 1.30376 12.4593 0.333251 10.0001 0.333374ZM10.0001 13.1667C9.19248 13.1667 8.403 12.9272 7.7315 12.4785C7.06 12.0299 6.53663 11.3921 6.22757 10.646C5.91852 9.89987 5.83765 9.07884 5.99521 8.28675C6.15276 7.49467 6.54167 6.76709 7.11273 6.19602C7.68379 5.62496 8.41137 5.23606 9.20346 5.0785C9.99555 4.92094 10.8166 5.00181 11.5627 5.31087C12.3088 5.61992 12.9466 6.14329 13.3953 6.8148C13.8439 7.4863 14.0834 8.27577 14.0834 9.08337C14.0834 10.1663 13.6532 11.205 12.8874 11.9707C12.1217 12.7365 11.083 13.1667 10.0001 13.1667Z" fill="#1F4878"/>
  270.                             </svg>
  271.                             <span class="left-15 p medium upper white">{{o.place}}</span>
  272.                         </div>
  273.                         <div class="flex row middle bottom-15 {{desktop('')}} {{mobile('')}}">
  274.                             <svg class="icon min" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  275.                             <path d="M10.5 15.1667H10.4405C10.1469 15.1667 9.86525 15.05 9.65761 14.8424C9.44998 14.6348 9.33333 14.3531 9.33333 14.0595C9.33333 13.7501 9.21042 13.4533 8.99162 13.2345C8.77283 13.0157 8.47609 12.8928 8.16667 12.8928C7.85725 12.8928 7.5605 13.0157 7.34171 13.2345C7.12292 13.4533 7 13.7501 7 14.0595C7 14.972 7.36248 15.8471 8.0077 16.4923C8.65292 17.1375 9.52802 17.5 10.4405 17.5H10.5V18.6667C10.5 18.9761 10.6229 19.2728 10.8417 19.4916C11.0605 19.7104 11.3572 19.8333 11.6667 19.8333C11.9761 19.8333 12.2728 19.7104 12.4916 19.4916C12.7104 19.2728 12.8333 18.9761 12.8333 18.6667V17.5C13.7616 17.5 14.6518 17.1313 15.3082 16.4749C15.9646 15.8185 16.3333 14.9283 16.3333 14C16.3333 13.0717 15.9646 12.1815 15.3082 11.5251C14.6518 10.8687 13.7616 10.5 12.8333 10.5V8.16667H12.859C13.489 8.16667 14 8.67767 14 9.30767C14 9.61709 14.1229 9.91383 14.3417 10.1326C14.5605 10.3514 14.8572 10.4743 15.1667 10.4743C15.4761 10.4743 15.7728 10.3514 15.9916 10.1326C16.2104 9.91383 16.3333 9.61709 16.3333 9.30767C16.3333 8.38622 15.9673 7.50251 15.3157 6.85094C14.6642 6.19938 13.7805 5.83333 12.859 5.83333H12.8333V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.9761 3.5 11.6667 3.5C11.3572 3.5 11.0605 3.62292 10.8417 3.84171C10.6229 4.0605 10.5 4.35725 10.5 4.66667V5.83333C10.0404 5.83333 9.58525 5.92386 9.16061 6.09975C8.73597 6.27565 8.35013 6.53345 8.02513 6.85846C7.70012 7.18346 7.44231 7.5693 7.26642 7.99394C7.09053 8.41858 7 8.87371 7 9.33333C7 9.79296 7.09053 10.2481 7.26642 10.6727C7.44231 11.0974 7.70012 11.4832 8.02513 11.8082C8.35013 12.1332 8.73597 12.391 9.16061 12.5669C9.58525 12.7428 10.0404 12.8333 10.5 12.8333V15.1667ZM12.8333 15.1667V12.8333C13.1428 12.8333 13.4395 12.9562 13.6583 13.175C13.8771 13.3938 14 13.6906 14 14C14 14.3094 13.8771 14.6062 13.6583 14.825C13.4395 15.0437 13.1428 15.1667 12.8333 15.1667ZM10.5 8.16667V10.5C10.1906 10.5 9.89383 10.3771 9.67504 10.1583C9.45625 9.9395 9.33333 9.64275 9.33333 9.33333C9.33333 9.02391 9.45625 8.72717 9.67504 8.50838C9.89383 8.28958 10.1906 8.16667 10.5 8.16667ZM11.6667 23.3333C5.22317 23.3333 0 18.1102 0 11.6667C0 5.22317 5.22317 0 11.6667 0C18.1102 0 23.3333 5.22317 23.3333 11.6667C23.3333 18.1102 18.1102 23.3333 11.6667 23.3333Z" fill="#1F4878"/>
  276.                             </svg>
  277.                             <span class="left-15 p medium upper white">{{o.cost}}</span>
  278.                         </div>
  279.                         <div class="flex row middle bottom-15 {{desktop('')}} {{mobile('')}}">
  280.                             <svg class="icon min" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  281.                             <path d="M11.6667 0C5.23367 0 0 5.23367 0 11.6667C0 18.0997 5.23367 23.3333 11.6667 23.3333C18.0997 23.3333 23.3333 18.0997 23.3333 11.6667C23.3333 5.23367 18.0997 0 11.6667 0ZM15.5085 17.1582L10.5 12.1497V4.66667H12.8333V11.1837L17.1582 15.5085L15.5085 17.1582Z" fill="#1F4878"/>
  282.                             </svg>
  283.                             <span class="left-15 p medium upper white">{{o.runtime}}</span>
  284.                         </div>#}
  285.                         <div class="flex row middle bottom-15 {{desktop('')}} {{mobile('')}}">
  286.                             <svg class="icon min" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  287.                             <path d="M22.5047 7.31153L14.8266 15.074L8.73282 8.98028L14.1609 3.55684L13.5047 2.94325C13.1063 2.50403 12.3938 2.50403 11.9531 2.94325L7.87969 6.93653C7.48125 7.41465 6.76875 7.41465 6.32813 6.93653C5.89219 6.53809 5.89219 5.82559 6.32813 5.38496L10.3641 1.35231C11.6813 0.0343242 13.8188 0.0343242 15.1359 1.35231L15.75 1.9659L16.4531 1.26137C18.1359 -0.420457 20.8641 -0.420457 22.5047 1.26137C24.2297 2.94325 24.2297 5.6709 22.5047 7.31153ZM10.7578 19.1428C8.50782 21.3928 5.63907 22.9256 2.51719 23.549L1.34579 23.7834C0.976879 23.8584 0.595317 23.7412 0.329536 23.4365C0.0635669 23.2115 -0.0518862 22.8318 0.0218481 22.4615L0.256176 21.2896C0.880317 18.1678 2.415 15.299 4.66594 13.049L7.67344 10.0397L13.7672 16.1334L10.7578 19.1428Z" fill="#1F4878"/>
  288.                             </svg>
  290.                             <span class="left-15 p medium upper white">{{"En cours d'exécution"}}</span>
  291.                         </div>
  293.                     </div>
  294.                     <h3 class="white bold flex row {{desktop('h2 bottom-15')}} {{mobile('bottom-8')}}">
  295.                         <a class="{{desktop('lh-3x')}} {{mobile('lh-10x')}}">{{o.name}}</a>
  296.                     </h3>
  297.                 </div>
  298.                 <div class="flex row space w100">
  299.                     <a href="{{url('project',{'id': o.id,'slug': o.slug})}}" class='flex row middle extrabold {{desktop("")}} {{mobile("")}}'>
  300.                         <span class='p white upper {{desktop("")}}{{mobile("")}}'>+ Lire le projet</span>
  301.                     </a>
  302.                 </div>
  303.             </div>
  304.         </div>
  305.         {%if not last %}<div class="w100 bg-white top-1-in"></div>{%endif%}
  306.     </article>
  307. {% endmacro %}
  309. {% macro service(o, index, alt = false) %}
  310. <article class="relative service pole-mask {{desktop('quarter-10')}} {{mobile('w100 bottom-20')}} {{index==2? 'hz-10'}}">
  311.     <div class="service-fig flex row space relative">
  312.         <i class="w100"></i>
  313.         {# <span class="nopadding h100 bold warning right {{desktop('')}} {{mobile('')}}" style="opacity:.3;font-size : 12.39583vw;line-height: 71%;" >{{0~index}}</span> #}
  314.         <div class="w100 h100 absolute left top {{desktop('')}} {{mobile('mrect')}}">
  315.             <img src='{{asset(index==1 ? "images/pole1.jpg" : index==2 ? "images/pole2.jpg" : "images/pole3.jpg")}}' class="cover">
  316.         </div>
  317.     </div>
  318.    <div class="flex col space {{desktop('left-50-in right-15-in top-60-in top-6 bottom-50-in')}} {{mobile('hz-30-in top-30-in bottom-25-in')}}">
  319.         <h3 class="h100 success {{desktop('bottom-70-in bottom-8')}} {{mobile('h3')}}"><span class="{{desktop('lh-3x')}} ">{{o.title}}</span></h3>
  320.         <a href="{{url('service',{'id': o.id,'slug': o.slug})}}" class="bottom success p upper extrabold {{desktop('')}} {{mobile('')}}">+ En savoir plus</a>
  321.     </div>
  322. </article>
  324. {#<article class="relative service bg-success {{desktop('third-5')}} {{mobile('w100 bottom-20')}}">
  325.     <div class="service-fig flex row space relative">
  326.         <i class="w100"></i>
  327.         <span class="nopadding h100 success bold right {{desktop('')}} {{mobile('')}}" style="font-size : 18.59375vw;line-height: 71%; color: #183C66;" >{{0~index}}</span>
  328.         <figure class="h100 absolute left top {{desktop('')}} {{mobile('')}}">
  329.             <img src='{{asset(index==1 ? "images/pole1.jpg" : index==2 ? "images/pole2.jpg" : "images/pole3.jpg")}}' class="cover">
  330.         </figure>
  331.     </div>
  332.    <div class="flex col space {{desktop('left-50-in left-2 right-80 right-15-in top-60-in top-6 bottom-50-in')}} {{mobile('hz-30-in top-30-in bottom-25-in')}}">
  333.         <h3 class="h100 white  {{desktop('h2 lh-10x bottom-70-in bottom-8')}} {{mobile('h3')}}">{{o.title}}</h3>
  334.         <a href="{{url('service',{'id': o.id,'slug': o.slug})}}" class="bottom white p upper extrabold {{desktop('')}} {{mobile('')}}">+ En savoir plus</a>
  335.     </div>
  336. </article>#}
  337. {% endmacro %}
  339. {% macro opportunity(o, type=false, home = false) %}
  340. {% if home %}
  341. <a href="{{url('opportunity',{'id': o.id,'slug': o.slug})}}" class="relative opportunity {{desktop(home ? 'third-5' : 'half-40 bottom-60')}} {{mobile('w100 bottom-20')}}">
  342. {%else%}
  343. <article class="relative opportunity {{desktop(home ? 'third-5' : 'third-20 bottom-60')}} {{mobile('w100 bottom-20')}}">
  344. {%endif%}
  345.     <figure class="fill absolute left top {{desktop('')}} {{mobile('')}}">
  346.         <img src='{{asset("images/emp1.jpg")}}' class="cover">
  347.         <div class="relative fill job-mask"></div>
  348.     </figure>
  349.    <div class="fill relative top-25-in {{desktop(home ? 'hz-30-in top-4 bottom-80-in' : 'hz-30-in top-4 bottom-60-in')}} {{mobile('hz-20-in bottom-30-in')}}">
  350.         {%if o.closingDate %}
  351.         <div class="flex row middle">
  352.             <svg class="icon min" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  353.             <path d="M12 0.333252C5.56699 0.333252 0.333328 5.56692 0.333328 11.9999C0.333328 18.4329 5.56699 23.6666 12 23.6666C18.433 23.6666 23.6667 18.4329 23.6667 11.9999C23.6667 5.56692 18.433 0.333252 12 0.333252ZM15.8418 17.4914L10.8333 12.4829V4.99992H13.1667V11.5169L17.4915 15.8418L15.8418 17.4914Z" fill="white"/>
  354.             </svg>
  355.             <span class="white upper h6 left-10 left-3-in">{{o.closingDate|date("m/d/Y H:i") >= "now"|date("m/d/Y H:i") ? "En cours" : "Clôturé" }}</span>
  356.         </div>
  357.         {%endif%}
  358.         <div class="{{desktop(not type ? 'hz-25-in hz-2 top-70-in top-3 bottom-3' :'top-70-in top-3 bottom-3')}} {{mobile('top-30-in bottom-25-in')}}">
  359.             {%if not type%}
  360.             <div class="{{desktop('flex row middle')}} {{mobile('')}}">
  361.                 {%if o.closingDate %}
  362.                 <div class="flex row middle bottom-9 {{desktop('right-25 right-2-in')}} {{mobile('bottom-15')}}">
  363.                     <span class="iflex bg-white radius-half right-8 {{desktop('padding-10')}} {{mobile('padding-5')}}"></span>
  364.                     <span class="white upper p">{{o.openingDate|frdate}}</span>
  365.                 </div>
  366.                 {%endif%}
  367.                 <div class="flex row middle bottom-9 {{desktop('')}} {{mobile('')}}">
  368.                     <span class="iflex bg-white radius-half right-8 {{desktop('padding-10')}} {{mobile('padding-5')}}"></span>
  369.                     <span class="white upper p">{{o.structure}}</span>
  370.                 </div>
  371.             </div>
  372.             {%endif%}
  373.             <div class="flex col space">
  374.                 <h3 class="semibold white h100 {{desktop(home ? 'h3' : 'h3 ')}} {{mobile('h2')}}">{{o.title}}</h3>
  375.                 {%if not home %}
  376.                 <div class="flex row {{desktop('top-50 top-5-in')}} {{mobile('top-30')}}">
  377.                     <a href="{{url('opportunity',{'id': o.id,'slug': o.slug})}}" class="p bg-white success upper {{desktop('extrabold hz-40-in vt-30-in')}} {{mobile('bold hz-20-in vt-15-in')}}"><span class="{{desktop('hz-3-in vt-7-in')}} {{mobile('')}}">En savoir plus</span></a>
  378.                 </div>
  379.                 {%endif%}
  380.             </div>
  381.         </div>
  382.     </div>
  383. {%if home %}
  384. </a>
  385. {%else%}
  386. </article>
  387. {%endif%}
  388. {% endmacro %}
  390. {% macro opportunityAlt(o,index) %}
  391. <aside class="job relative flex space border border-warning shadow-alt  {{desktop('row w100 vt-20 ')}}{{mobile('col w100 vt-10')}}">
  392.     <header class="{{desktop('hz-30-in vt-20-in ')}}{{mobile('hz-25-in vt-10-in ')}}">
  393.         <h3 class="">{{o.title}}</h3>
  394.         <p class="p">{{o.description|nl2br}}</p>
  395.     </header>
  396.     <div class="flex bg-gray {{desktop('col third-40 hz-30-in vt-20-in ')}}{{mobile('col hz-25-in vt-10-in ')}}">
  397.         <div class="flex col h4">
  398.             <span>Type : <span class="success">{{o.type ? o.type.label}}</span></span>
  399.             <span>Clôture : <span class="error semibold">{{o.closingDate|frdatetime}}</span></span>
  400.         </div>
  401.         <div class="flex row middle top-20">
  402.             <a href="{{path('opportunity',{id:o.id,slug:o.slug})}}" class="h4 hz-20-in bg-warning white semibold upper radius-25 {{desktop('vt-10-in')}}{{mobile('top-10 vt-8-in')}}">Découvrir</a>
  403.         </div>
  404.     </div>
  405. </aside>
  406. {% endmacro %}
  408. {% macro doc(o, alt = false) %}
  409. {% set doc = o.document %}
  410. {% set t = doc.target|split(".") %}
  411. {% set ext = t[t|length-1]|upper %}
  412. {% set readLink = path("file-read",{id:doc.id}) %}
  413. {% set downloadLink = path("file-download",{id:doc.id}) %}
  415. {% set action = null %}
  416. {% if doc.mimetype|lower == 'application/pdf' %}
  417. {% set action = 'os-read' %}
  418. {% elseif 'image' in doc.mimetype|lower %}
  419. {% set action = 'os-image' %}
  420. {% elseif 'video' in doc.mimetype|lower %}
  421. {% set action = 'os-video' %}
  422. {% endif %}
  423. {% set alt = isMobile() ? false : alt %}
  425. <div class='bg-gray flex row middle w100 relative border border-2x border-warning {{desktop("vt-20 hz-30-in vt-25-in")}}{{mobile('vt-10 hz-15-in vt-10-in')}}'>
  426.     <div class="">
  427.         <figure class="relative icon big">
  428.             <img src="{{asset(o.cover ? o.cover.thumbnail : 'images/thumbnail.png')}}" class="contain">
  429.         </figure>
  430.     </div>
  431.     <div class='w100 relative left-20'>
  432.         <div class="">
  433.             <h3 class='black medium lh-1x'><a href="">{{o.title}}</a></h3>
  434.             {% if o.description %}
  435.             <p class="p-alt-2 {{desktop('h4 vt-15')}} {{mobile('h6 vt-7')}}">{{o.description|nl2br}}</p>
  436.             {% endif %}
  437.         </div>
  438.         <div class="flex row middle right-20">
  439.             <div class='p-alt-2 italic flex row middle top-5'>
  440.                 <span class=''>{{ext}}</span>
  441.                 <i class="circle padding-2 bg-black hz-10"></i>
  442.                 <span class=''>{{doc.formatSize}}</span>
  443.                 <i class="circle padding-2 bg-black hz-10"></i>
  444.                 <span class=''>{{doc.reading|number_format}} lect.</span>
  445.                 <i class="circle padding-2 bg-black hz-10"></i>
  446.                 <span>{{doc.downloads|number_format}} téléch.</span>
  447.             </div>
  448.             <div class='flex row p-alt upper semibold nowrap'>
  449.             {% if action %}
  450.                 <span data-target="{{path('file-read',{id:doc.id})}}" class='{{action}} flex row bg-success {{desktop("right-10")}} {{mobile("top-7")}}'>
  451.                     <i class="white flex row middle {{desktop('vt-10-in hz-15-in')}}{{mobile('radius-right-3')}}"><i class="fa fa-eye"></i></i>
  452.                 </span>
  453.             {% endif %}
  454.                 <a href="{{path('file-download',{id:doc.id})}}" class='flex row bg-warning {{desktop("")}} {{mobile("top-7")}}'>
  455.                     <span class='white upper {{desktop("vt-10-in hz-20-in")}}'>Télécharger</span>
  456.                     <i class="white flex row middle shadow {{desktop('vt-10-in hz-15-in')}}{{mobile('radius-right-3')}}"><i class="fa fa-download"></i></i>
  457.                 </a>
  458.             </div>
  459.         </div>
  460.     </div>
  461. </div>
  462. {% endmacro %}
  464. {% macro biblio(o) %}
  465. {% for doc in o.files %}
  467. {% set action = null %}
  468. {% if doc.mimetype|lower == 'application/pdf' %}
  469. {% set action = 'os-read' %}
  470. {% elseif 'image' in doc.mimetype|lower %}
  471. {% set action = 'os-image' %}
  472. {% elseif 'video' in doc.mimetype|lower %}
  473. {% set action = 'os-video' %}
  474. {% endif %}
  476. <div class='bg-gray flex row middle w100 relative border border-5x border-success bottom-20 hz-25-in vt-15-in {{desktop("")}} {{mobile('radius-8')}}'>
  477.     <span class="bg-white padding-15">
  478.         <i class="fa fa-file gradient fa-2x"></i>
  479.     </span>
  480.     <div class='w100 flex row space middle relative left-20'>
  481.         <div class="">
  482.             <h3 class='black medium p lh-1x'>{{doc.name ? doc.name : doc.source}}</h3>
  483.             <div class='p-alt-2 italic flex row middle top-5'>
  484.                 <span class=''>{{doc.mimetype}}</span>
  485.                 <i class="circle padding-2 bg-black hz-10"></i>
  486.                 <span class=''>{{doc.formatSize}}</span>
  487.                 <i class="circle padding-2 bg-black hz-10"></i>
  488.                 <span class=''>{{doc.reading|number_format}} lect.</span>
  489.                 <i class="circle padding-2 bg-black hz-10"></i>
  490.                 <span>{{doc.downloads|number_format}} téléch.</span>
  491.             </div>
  492.         </div>
  493.         <div class="flex col middle space left-20">
  494.             <div class='flex row p-alt upper semibold nowrap'>
  495.             {% if action %}
  496.                 <span data-target="{{path('file-read',{id:doc.id})}}" class='{{action}} flex row bg-gradient-warning {{desktop("radius-3 right-10")}} {{mobile("top-7 radius-3")}}'>
  497.                     <i class="white flex row middle {{desktop('vt-10-in hz-15-in')}}{{mobile('radius-right-3')}}"><i class="fa fa-eye"></i></i>
  498.                 </span>
  499.             {% endif %}
  500.                 <a href="{{path('file-download',{id:doc.id})}}" class='flex row bg-gradient {{desktop("radius-3")}} {{mobile("top-7 radius-3")}}'>
  501.                     <span class='white upper {{desktop("vt-10-in hz-20-in")}}'>Télécharger</span>
  502.                     <i class="white flex row middle shadow {{desktop('vt-10-in hz-15-in')}}{{mobile('radius-right-3')}}"><i class="fa fa-download"></i></i>
  503.                 </a>
  504.             </div>
  505.         </div>
  506.     </div>
  507. </div>
  508. {% endfor %}
  509. {% endmacro %}
  511. {% macro page(o) %}
  512. <div class='bg-white vt-20 vt-20-in hz-20-in border border-gray-alt border-notop border-noleft border-noright'>
  513.     <h4 class=''>{{o.title}}</h4>
  514.     <p class='bottom-10'>{{o.description}}</p>
  515.     <a href='{{path("page",{slug:o.slug})}}' class='success bold upper scale-hover transition'>En savoir +</a>
  516. </div>
  517. {% endmacro %}