kevin/Popsu-coloque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

start responsive boot

Browse Source
This commit is contained in:
kevin
2020-07-14 22:24:51 +02:00
parent b6b1dafd78
commit ee476d177c
13 changed files with 122 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/popsu_colloque/css-compiled/index.css
+14 -8
View File
File diff suppressed because one or more lines are too long
web/themes/custom/popsu_colloque/css-compiled/index.min.css
Vendored
+2 -2
View File
@@ -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 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}
web/themes/custom/popsu_colloque/css/components/hero.scss
+1 -1
View File
@@ -1,5 +1,5 @@
.__img-hero{ .__img-hero{
// height: 400px; height: 400px;
// width: 100vw; // width: 100vw;
// position: relative; // position: relative;
// left: 50%; // left: 50%;
web/themes/custom/popsu_colloque/css/components/thumbnails.scss
+32 -29
View File
@@ -7,38 +7,41 @@
* @see https://www.drupal.org/project/drupal/issues/2349711 * @see https://www.drupal.org/project/drupal/issues/2349711
*/ */
.__slide{ .thumbnails{
.thumbnails{ margin: 1rem 0rem;
margin: 1rem 0.5rem; // max-width: 300px;
max-width: 300px; min-width: 250px;
height: auto; height: auto;
width: calc(100% / 5 ); width: calc(100% / 4 );
background: white; background: white;
transform: scale(1); transform: scale(1);
box-shadow: none; box-shadow: none;
transition: 0.3s transform ease, 0.3s box-shadow ease; transition: 0.3s transform ease, 0.3s box-shadow ease;
&:hover{ a{
transform: scale(1.05); display: block;
transition: 0.3s all ease; height: 100%;
box-shadow: 0px 0px 13px 0px $color2; }
} &:hover{
& > .__wrap{ transform: scale(1.05);
padding: 1rem; transition: 0.3s all ease;
} box-shadow: 0px 0px 13px 0px $color2;
.__media{ }
margin-right: 1rem; & > .__wrap{
figcaption{ padding: 1rem;
}
.__media{
margin-right: 1rem;
figcaption{
height: 100%;
img{
width: 100%;
height: 100%; height: 100%;
img{ object-fit: cover;
width: 100%;
height: 100%;
object-fit: cover;
}
} }
} }
.d-flex{ }
padding: 1rem; .d-flex{
} padding: 1rem;
} }
} }
web/themes/custom/popsu_colloque/css/index.scss
+5
View File
@@ -12,6 +12,11 @@
@import "components/admin/edit.scss"; @import "components/admin/edit.scss";
@import "components/admin/toolbar.scss"; @import "components/admin/toolbar.scss";
*{
box-sizing: border-box;
}
body,html{ body,html{
font-size: 16px; font-size: 16px;
line-height: 1.2; line-height: 1.2;
web/themes/custom/popsu_colloque/js/script.js
+1
View File
@@ -56,6 +56,7 @@ function slide() {
$slide.each(function() { $slide.each(function() {
$(this).flickity({ $(this).flickity({
cellAlign: 'left', cellAlign: 'left',
pageDots: false
}) })
}); });
} }
web/themes/custom/popsu_colloque/template/fields/field--field-image-hero.html.twig
+3 -10
View File
@@ -38,13 +38,6 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
{% {% for item in items %}
set title_classes = [ {{ item.content }}
label_display == 'visually_hidden' ? 'visually-hidden', {% endfor %}
]
%}
{% for item in items %}
{{ item.content }}
{% endfor %}
web/themes/custom/popsu_colloque/template/fields/field--field-image.html.twig
+43
View File
@@ -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 %}
web/themes/custom/popsu_colloque/template/node/node--moments.html.twig
+8 -7
View File
@@ -74,20 +74,21 @@
#} #}
<article{{ attributes }}> <article{{ attributes }}>
<div class="__hero"> <div class="__img-hero">
{{content.field_image}} {{content.field_image}}
</div> </div>
<div class="__wrapper d-flex"> <div class="__wrapper row">
<div class="__wrap_side"> <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' %} {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
</div> </div>
<div class="__wrap_content"> <div class="__wrap_content col-sm-12 col-md-8">
<div class="__head"> <div class="__head">
<div class="__title">
<h2>{{label}}</h2>
</div>
<div class="d-flex"> <div class="d-flex">
{{ content.field_date_du_programme }} {{ content.field_date_du_programme }}
{{ content.field_heure_du_moment }} {{ content.field_heure_du_moment }}
web/themes/custom/popsu_colloque/template/node/node--page-d-accueil.html.twig
+1 -1
View File
@@ -79,7 +79,7 @@
<article{{ attributes }} id="txt_present"> <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"> <div class="__title-present">
{{ content.field_titre_txt_present }} {{ content.field_titre_txt_present }}
web/themes/custom/popsu_colloque/template/node/node--presentation.html.twig
+9 -6
View File
@@ -72,15 +72,18 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<div class="__img-hero">
{{content.field_image}}
</div>
<article{{ attributes }} id="presentation"> <article{{ attributes }} id="presentation">
<div class="__hero"> <div class="__wrapper row">
{{content.field_image}} <div class="__title col-12">
</div> <h2>{{label}}</h2>
<div class="__wrapper d-flex"> </div>
<div class="__wrap_side"> <div class="__wrap_side col-sm-12 col-md-2">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %} {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
</div> </div>
<div class="__wrap_content"> <div class="__wrap_content col-sm-12 col-md-8">
{{content.body}} {{content.body}}
{{content.field_les_notes}} {{content.field_les_notes}}
</div> </div>
web/themes/custom/popsu_colloque/template/page--node.html.twig
+1 -1
View File
@@ -62,7 +62,7 @@
<main role="main" class="d-flex container"> <main role="main" class="d-flex container">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #} <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 }} {{ page.content }}
</div>{# /.layout-content #} </div>{# /.layout-content #}
web/themes/custom/popsu_colloque/template/views/lists/views-view-unformatted--dernieres_publications.html.twig
+2 -2
View File
@@ -20,14 +20,14 @@
{% if title %} {% if title %}
<h3>{{ title }}</h3> <h3>{{ title }}</h3>
{% endif %} {% endif %}
<div class="__slide"> <div class="row flex-wrap">
{% for row in rows %} {% for row in rows %}
{% {%
set row_classes = [ set row_classes = [
default_row_class ? 'views-row', default_row_class ? 'views-row',
] ]
%} %}
<article class="thumbnails"> <article class="thumbnails col-lg-3 col-sm-6 col-12 m-2">
{{- row.content -}} {{- row.content -}}
</article> </article>
{% endfor %} {% endfor %}