start responsive boot

2020-07-14 22:24:51 +02:00
parent b6b1dafd78
commit ee476d177c
13 changed files with 122 additions and 67 deletions
@@ -1,3 +1,3 @@
-main a,main h2{color:#1d378eff}main #txt_present,main .blue{color:#1d378eff}main #block-views-block-slide-programme-block-1 .thumbnails a{color:#000}#block-popsu-colloque-local-tasks ul{display:flex;margin-top:2rem;margin-bottom:0;padding:0}#block-popsu-colloque-local-tasks ul li{margin:.5rem}#toolbar-administration{position:fixed;z-index:1000}body,html{font-size:16px;line-height:1.2}li,ol,ul{list-style:none}h1,h2,h3,h4{margin:0;padding:0}header{height:130px;padding:0 1rem}header div{height:inherit}#block-popsu-colloque-branding{position:relative;z-index:999;width:100%;padding:1rem 0 0 0}#block-popsu-colloque-branding>div>a{position:relative;display:inline-block;height:8rem;max-height:150px}#block-popsu-colloque-branding>div>a img{width:auto;height:100%;-o-object-fit:contain;object-fit:contain}#block-mainnavigation{display:flex;width:auto;padding-bottom:1rem;border-left:1px solid red;align-items:flex-end}#block-mainnavigation ul{flex-wrap:nowrap}#block-mainnavigation ul li{padding:0 1rem;border-right:1px solid #000}#block-mainnavigation ul li a{white-space:nowrap}.site_setting_entity img{width:50%;height:auto}.__img-hero img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#txt_present>div{margin:2rem auto}/*! Flickity v2.2.1
+main a,main h2{color:#1d378eff}main #txt_present,main .blue{color:#1d378eff}main #block-views-block-slide-programme-block-1 .thumbnails a{color:#000}#block-popsu-colloque-local-tasks ul{display:flex;margin-top:2rem;margin-bottom:0;padding:0}#block-popsu-colloque-local-tasks ul li{margin:.5rem}#toolbar-administration{position:fixed;z-index:1000}*{box-sizing:border-box}body,html{font-size:16px;line-height:1.2}li,ol,ul{list-style:none}h1,h2,h3,h4{margin:0;padding:0}header{height:130px;padding:0 1rem}header div{height:inherit}#block-popsu-colloque-branding{position:relative;z-index:999;width:100%;padding:1rem 0 0 0}#block-popsu-colloque-branding>div>a{position:relative;display:inline-block;height:8rem;max-height:150px}#block-popsu-colloque-branding>div>a img{width:auto;height:100%;-o-object-fit:contain;object-fit:contain}#block-mainnavigation{display:flex;width:auto;padding-bottom:1rem;border-left:1px solid red;align-items:flex-end}#block-mainnavigation ul{flex-wrap:nowrap}#block-mainnavigation ul li{padding:0 1rem;border-right:1px solid #000}#block-mainnavigation ul li a{white-space:nowrap}.site_setting_entity img{width:50%;height:auto}.__img-hero{height:400px}.__img-hero img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#txt_present>div{margin:2rem auto}/*! Flickity v2.2.1
 https://flickity.metafizzy.co
---------------------------------------------- */.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{position:relative;overflow:hidden;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;color:#333;border:none;background:rgba(255,255,255,.75)}.flickity-button:hover{cursor:pointer;background:#fff}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{cursor:auto;pointer-events:none;opacity:.3}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;transform:translateY(-50%);border-radius:50%}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{right:10px;left:auto}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;top:20%;left:20%;width:60%;height:60%}.flickity-page-dots{line-height:1;position:absolute;bottom:-25px;width:100%;margin:0;padding:0;list-style:none;text-align:center}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;cursor:pointer;opacity:.25;border-radius:50%;background:#333}.flickity-page-dots .dot.is-selected{opacity:1}#block-views-block-dernieres-publications-block-1 .views section:first-child,#block-views-block-slide-programme-block-1 .views section:first-child{display:flex;width:100%;justify-content:space-between;align-items:baseline}.flickity-button{background:0 0}.flickity-button:hover{background:0 0}.flickity-button-icon{fill:#000}.flickity-button:disabled{display:none}.side_notes img,article img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.side_notes{position:relative}.side_notes>*{position:absolute;width:300px}.side_notes .d-flex{flex-direction:column}.__slide .thumbnails{width:calc(100% / 5);max-width:300px;height:auto;margin:1rem .5rem;transition:.3s transform ease,.3s box-shadow ease;transform:scale(1);background:#fff;box-shadow:none}.__slide .thumbnails:hover{transition:.3s all ease;transform:scale(1.05);box-shadow:0 0 13px 0 #1d378eff}.__slide .thumbnails>.__wrap{padding:1rem}.__slide .thumbnails .__media{margin-right:1rem}.__slide .thumbnails .__media figcaption{height:100%}.__slide .thumbnails .__media figcaption img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.__slide .thumbnails .d-flex{padding:1rem}.thumbnails figcaption{height:100px}.thumbnails figcaption img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
+---------------------------------------------- */.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{position:relative;overflow:hidden;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;color:#333;border:none;background:rgba(255,255,255,.75)}.flickity-button:hover{cursor:pointer;background:#fff}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{cursor:auto;pointer-events:none;opacity:.3}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;transform:translateY(-50%);border-radius:50%}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{right:10px;left:auto}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;top:20%;left:20%;width:60%;height:60%}.flickity-page-dots{line-height:1;position:absolute;bottom:-25px;width:100%;margin:0;padding:0;list-style:none;text-align:center}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;cursor:pointer;opacity:.25;border-radius:50%;background:#333}.flickity-page-dots .dot.is-selected{opacity:1}#block-views-block-dernieres-publications-block-1 .views section:first-child,#block-views-block-slide-programme-block-1 .views section:first-child{display:flex;width:100%;justify-content:space-between;align-items:baseline}.flickity-button{background:0 0}.flickity-button:hover{background:0 0}.flickity-button-icon{fill:#000}.flickity-button:disabled{display:none}.side_notes img,article img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.side_notes{position:relative}.side_notes>*{position:absolute;width:300px}.side_notes .d-flex{flex-direction:column}.thumbnails{width:calc(100% / 4);min-width:250px;height:auto;margin:1rem 0;transition:.3s transform ease,.3s box-shadow ease;transform:scale(1);background:#fff;box-shadow:none}.thumbnails a{display:block;height:100%}.thumbnails:hover{transition:.3s all ease;transform:scale(1.05);box-shadow:0 0 13px 0 #1d378eff}.thumbnails>.__wrap{padding:1rem}.thumbnails .__media{margin-right:1rem}.thumbnails .__media figcaption{height:100%}.thumbnails .__media figcaption img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnails .d-flex{padding:1rem}.thumbnails figcaption{height:100px}.thumbnails figcaption img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
@@ -1,5 +1,5 @@
 .__img-hero{
-  // height: 400px;
+  height: 400px;
  // width: 100vw;
  // position: relative;
  // left: 50%;
@@ -7,38 +7,41 @@
 * @see https://www.drupal.org/project/drupal/issues/2349711
 */

- .__slide{
-   .thumbnails{
-     margin: 1rem 0.5rem;
-     max-width: 300px;
-     height: auto;
-     width: calc(100% / 5 );
-     background: white;
-     transform: scale(1);
-     box-shadow: none;
-     transition: 0.3s transform ease, 0.3s box-shadow ease;
-     &:hover{
-       transform: scale(1.05);
-       transition: 0.3s all ease;
-       box-shadow: 0px 0px 13px 0px $color2;
-     }
-      & > .__wrap{
-         padding: 1rem;
-     }
-     .__media{
-       margin-right: 1rem;
-       figcaption{
+ .thumbnails{
+   margin: 1rem 0rem;
+   // max-width: 300px;
+   min-width: 250px;
+   height: auto;
+   width: calc(100% / 4 );
+   background: white;
+   transform: scale(1);
+   box-shadow: none;
+   transition: 0.3s transform ease, 0.3s box-shadow ease;
+   a{
+     display: block;
+     height: 100%;
+   }
+   &:hover{
+     transform: scale(1.05);
+     transition: 0.3s all ease;
+     box-shadow: 0px 0px 13px 0px $color2;
+   }
+    & > .__wrap{
+       padding: 1rem;
+   }
+   .__media{
+     margin-right: 1rem;
+     figcaption{
+       height: 100%;
+       img{
+         width: 100%;
         height: 100%;
-         img{
-           width: 100%;
-           height: 100%;
-           object-fit: cover;
-         }
+         object-fit: cover;
       }
     }
-     .d-flex{
-       padding: 1rem;
-     }
+   }
+   .d-flex{
+     padding: 1rem;
   }
 }

@@ -12,6 +12,11 @@

@import "components/admin/edit.scss";
@import "components/admin/toolbar.scss";
+
+*{
+ box-sizing: border-box;
+}
+
 body,html{
  font-size: 16px;
  line-height: 1.2;
@@ -56,6 +56,7 @@ function slide() {
  $slide.each(function() {
    $(this).flickity({
      cellAlign: 'left',
+      pageDots: false
    })
  });
 }
@@ -38,13 +38,6 @@
 * @ingroup themeable
 */
 #}
-{%
-  set title_classes = [
-    label_display == 'visually_hidden' ? 'visually-hidden',
-  ]
-%}
-
-
-    {% for item in items %}
-      {{ item.content }}
-    {% endfor %}
+{% for item in items %}
+  {{ item.content }}
+{% endfor %}
@@ -0,0 +1,43 @@
+{#
+/**
+ * @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
+ */
+#}
+{% for item in items %}
+  {{ item.content }}
+{% endfor %}
@@ -74,20 +74,21 @@
 #}
 <article{{ attributes }}>

-  <div class="__hero">
+  <div class="__img-hero">
    {{content.field_image}}
  </div>

-  <div class="__wrapper d-flex">
-    <div class="__wrap_side">
+  <div class="__wrapper row">
+    <div class="__title col-12">
+      <h2>{{label}}</h2>
+    </div>
+
+    <div class="__wrap_side col-sm-12 col-md-2">
      {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
    </div>

-    <div class="__wrap_content">
+    <div class="__wrap_content col-sm-12 col-md-8">
      <div class="__head">
-        <div class="__title">
-          <h2>{{label}}</h2>
-        </div>
        <div class="d-flex">
          {{ content.field_date_du_programme }}
          {{ content.field_heure_du_moment }}
@@ -79,7 +79,7 @@


 <article{{ attributes }} id="txt_present">
-  <div class="col-8">
+  <div class="col-12 px-0 col-sm-10 col-md-8">

    <div class="__title-present">
      {{ content.field_titre_txt_present }}
@@ -72,15 +72,18 @@
 * @ingroup themeable
 */
 #}
+<div class="__img-hero">
+{{content.field_image}}
+</div>
 <article{{ attributes }} id="presentation">
-  <div class="__hero">
-    {{content.field_image}}
-  </div>
-  <div class="__wrapper d-flex">
-    <div class="__wrap_side">
+  <div class="__wrapper row">
+    <div class="__title col-12">
+      <h2>{{label}}</h2>
+    </div>
+    <div class="__wrap_side col-sm-12 col-md-2">
      {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
    </div>
-    <div class="__wrap_content">
+    <div class="__wrap_content col-sm-12 col-md-8">
      {{content.body}}
      {{content.field_les_notes}}
    </div>
@@ -62,7 +62,7 @@
  <main role="main" class="d-flex container">
    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

-    <div class="layout-content col-12">
+    <div class="layout-content">
      {{ page.content }}
    </div>{# /.layout-content #}

@@ -20,14 +20,14 @@
 {% if title %}
  <h3>{{ title }}</h3>
 {% endif %}
-<div class="__slide">
+<div class="row flex-wrap">
  {% for row in rows %}
    {%
      set row_classes = [
        default_row_class ? 'views-row',
      ]
    %}
-    <article class="thumbnails">
+    <article class="thumbnails col-lg-3 col-sm-6 col-12 m-2">
      {{- row.content -}}
    </article>
  {% endfor %}