add svg + responsive

2020-07-16 19:31:05 +02:00
parent 08b0754135
commit d6f8d684e4
59 changed files with 878 additions and 47 deletions
@@ -0,0 +1,6 @@
+<div class="head">
+  <h2>{{ header }}</h2>
+  <div class="more_link">
+    <a class="blue" href="{{more['#url']}}">{{ more['#title'] }}<span>+</span></a>
+  </div>
+</div>
@@ -1,6 +1,22 @@
-<div class="__rs">
-  <div class="__mail"><a href="#">E-Mail</a></div>
-  <div class="__facebook"><a href="#">Facebook</a></div>
-  <div class="__twitter"><a href="#">Twitter</a></div>
-  <div class="__linkedin"><a href="#">Linkedin</a></div>
+<div class="__rs d-flex justify-content-end d-md-block">
+  <div class="__mail">
+    <a href="#">
+      <img src="/themes/custom/popsu_colloque/images/mail.svg" alt="Mail">
+    </a>
+  </div>
+  <div class="__facebook">
+    <a href="#">
+      <img src="/themes/custom/popsu_colloque/images/facebook.svg" alt="facebook">
+    </a>
+  </div>
+  <div class="__twitter">
+    <a href="#">
+      <img src="/themes/custom/popsu_colloque/images/twitter.svg" alt="twitter">
+    </a>
+  </div>
+  <div class="__linkedin">
+    <a href="#">
+      <img src="/themes/custom/popsu_colloque/images/linkedin.svg" alt="linkedin">
+    </a>
+  </div>
 </div>
@@ -0,0 +1,52 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+<h4>{{ label }}</h4>
+<div class="d-lg-flex d-block">
+  {% for item in items %}
+    {{ item.content }}
+  {% endfor %}
+</div>
@@ -45,5 +45,5 @@
 %}

 {% for item in items %}
-  <figcaption class="__img">{{ item.content }}</figcaption>
+  <div class="__img">{{ item.content }}</div>
 {% endfor %}
@@ -45,5 +45,5 @@
 %}

 {% for item in items %}
-  <figcaption class="__img">{{ item.content }}</figcaption>
+  <div class="__img">{{ item.content }}</div>
 {% endfor %}
@@ -79,16 +79,16 @@
  </div>

  <div class="__wrapper row">
-    <div class="__title col-12">
+    <div class="__title col-12 mt-3">
      <h2>{{label}}</h2>
    </div>

-    <div class="__wrap_side col-sm-12 col-md-2">
+    <div class="__wrap_side col-sm-12 col-md-1 px-0 mt-3">
      {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
    </div>

-    <div class="__wrap_content col-sm-12 col-md-8">
-      <div class="__head">
+    <div class="__wrap_content col-sm-12 col-md-11 px-0 my-3">
+      <div class="__head mb-2">
        <div class="d-flex">
          {{ content.field_date_du_programme }}
          {{ content.field_heure_du_moment }}
@@ -90,7 +90,7 @@
    <div class="__body-present">
      {{ content.body }}
    </div>
-    <div class="btn btn_plus">
+    <div class="btn more_link">
      {{ content.field_lien_boutton }}
    </div>

@@ -75,15 +75,15 @@
 <article{{ attributes }}>
  <div{{ content_attributes }}>
    <a href="{{ url }}">
-      <div class="d-flex">
+      <figure class="d-flex">
        <div class="__media">
          {{content.field_ajouter_un_media}}
        </div>
-        <div class="__info">
+        <figcaption class="__info">
          {{ label|raw }}
          {{content.field_complement_d_info|raw}}
-        </div>
-      </div>
+        </figcaption>
+      </figure>
    </a>
  </div>
 </article>
@@ -41,11 +41,8 @@
  {{ title_suffix }}

  {% if header %}
-    <section>
-      <h2>{{ header }}</h2>
-      <div class="more_link">
-        <a class="blue" href="{{more['#url']}}">{{ more['#title'] }}<span>+</span></a>
-      </div>
+    <section class="wrap_head">
+      {% include 'themes/custom/popsu_colloque/template/components/header_slide.html.twig' %}
    </section>
  {% endif %}

@@ -41,11 +41,8 @@
  {{ title_suffix }}

  {% if header %}
-    <section>
-      <h2>{{ header }}</h2>
-      <div class="more_link">
-        <a class="blue" href="{{more['#url']}}">{{ more['#title'] }}<span>+</span></a>
-      </div>
+    <section class="wrap_head">
+      {% include 'themes/custom/popsu_colloque/template/components/header_slide.html.twig' with { croix : true } %}
    </section>
  {% endif %}