going on with home display
This commit is contained in:
147
web/themes/custom/materiotheme/assets/dist/main.css
vendored
147
web/themes/custom/materiotheme/assets/dist/main.css
vendored
@@ -1245,61 +1245,102 @@ header[role="banner"] {
|
||||
aside.messages {
|
||||
padding: 0; }
|
||||
|
||||
article.node--type-frontpage .node__content > section {
|
||||
padding: 1em; }
|
||||
article.node--type-frontpage .node__content > section.home-intro {
|
||||
padding: 0;
|
||||
background-color: #fff; }
|
||||
article.node--type-frontpage .node__content > section.home-database {
|
||||
background-color: #69cdcf;
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
grid-column-gap: 1em;
|
||||
color: #fff; }
|
||||
article.node--type-frontpage .node__content > section.home-database .field--name-field-a-database {
|
||||
grid-column: 1; }
|
||||
article.node--type-frontpage .node__content > section.home-database .cards-list-home {
|
||||
grid-column: 2;
|
||||
position: relative;
|
||||
max-height: 580px;
|
||||
overflow-y: hidden; }
|
||||
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul {
|
||||
width: 100%;
|
||||
article.node--type-frontpage .node__content > section.home-intro, article.node--type-frontpage .node__content > section.home-pricing {
|
||||
padding: 1.5em 0;
|
||||
background-color: #fff; }
|
||||
article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1), article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
text-align: center; }
|
||||
article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label {
|
||||
font-size: 3em; }
|
||||
article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__item {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.3; }
|
||||
|
||||
article.node--type-frontpage .node__content > section.home-database, article.node--type-frontpage .node__content > section.home-showrooms, article.node--type-frontpage .node__content > section.home-blabla {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
grid-column-gap: 2em;
|
||||
padding: 2em 1em; }
|
||||
article.node--type-frontpage .node__content > section.home-database > div:nth-child(1), article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1), article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) {
|
||||
color: #fff;
|
||||
grid-column: 1; }
|
||||
article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label {
|
||||
font-size: 3em;
|
||||
line-height: 0.9; }
|
||||
article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__item {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.3; }
|
||||
article.node--type-frontpage .node__content > section.home-database > div:nth-child(2), article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(2), article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(2) {
|
||||
grid-column: 2; }
|
||||
|
||||
article.node--type-frontpage .node__content > section.home-database {
|
||||
background-color: #69cdcf; }
|
||||
article.node--type-frontpage .node__content > section.home-database .cards-list-home {
|
||||
position: relative;
|
||||
max-height: 580px;
|
||||
overflow-y: hidden; }
|
||||
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
|
||||
grid-template-rows: 1fr;
|
||||
grid-gap: 1em;
|
||||
justify-content: start; }
|
||||
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
|
||||
grid-template-rows: 1fr;
|
||||
grid-gap: 1em; }
|
||||
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 140%; }
|
||||
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto; }
|
||||
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card .field--name-field-short-description {
|
||||
font-size: 0.756em;
|
||||
line-height: 0.9; }
|
||||
article.node--type-frontpage .node__content > section.home-showrooms {
|
||||
background-color: #50aa3c;
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
grid-column-gap: 1em; }
|
||||
article.node--type-frontpage .node__content > section.home-showrooms .field--name-field-showrooms {
|
||||
grid-column: 1; }
|
||||
article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
|
||||
grid-column: 2; }
|
||||
article.node--type-frontpage .node__content > section.home-blabla {
|
||||
background-color: #9458aa; }
|
||||
padding-top: 140%; }
|
||||
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto; }
|
||||
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card .field--name-field-short-description {
|
||||
font-size: 0.756em;
|
||||
line-height: 0.9; }
|
||||
|
||||
article.node--type-frontpage .node__content > section.home-showrooms {
|
||||
background-color: #50aa3c; }
|
||||
|
||||
article.node--type-frontpage .node__content > section.home-blabla {
|
||||
background-color: #9458aa; }
|
||||
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
|
||||
position: relative; }
|
||||
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 220px));
|
||||
grid-gap: 1em;
|
||||
justify-content: start; }
|
||||
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 140%;
|
||||
overflow: hidden; }
|
||||
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li .card {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto; }
|
||||
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li .card .field--name-title {
|
||||
font-size: 0.756em;
|
||||
line-height: 0.9; }
|
||||
|
||||
article.node--type-frontpage .node__content .field--name-field-what-is-materio:not(:nth-child(1)),
|
||||
article.node--type-frontpage .node__content .field--name-field-a-database:not(:nth-child(1)),
|
||||
|
||||
@@ -249,31 +249,62 @@ aside.messages{
|
||||
// }
|
||||
|
||||
|
||||
// front
|
||||
// __ _
|
||||
// / _|_ _ ___ _ _| |_
|
||||
// | _| '_/ _ \ ' \ _|
|
||||
// |_| |_| \___/_||_\__|
|
||||
|
||||
%part-centered-layout{
|
||||
padding:1.5em 0;
|
||||
background-color: #fff;
|
||||
>div:nth-child(1){
|
||||
width:80%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
.field__label{
|
||||
font-size: 3em;
|
||||
}
|
||||
.field__item{
|
||||
font-size: 0.9em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%part-columned-layout{
|
||||
display:grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
grid-column-gap: 2em;
|
||||
padding:2em 1em;
|
||||
>div:nth-child(1){
|
||||
color: #fff;
|
||||
grid-column: 1;
|
||||
.field__label{
|
||||
font-size: 3em;
|
||||
line-height: 0.9
|
||||
}
|
||||
.field__item{
|
||||
font-size: 0.9em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
>div:nth-child(2){
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
article.node--type-frontpage{
|
||||
.node__content{
|
||||
|
||||
&>section{
|
||||
padding:1em;
|
||||
&.home-intro{
|
||||
padding:0;
|
||||
background-color: #fff;
|
||||
@extend %part-centered-layout;
|
||||
}
|
||||
&.home-database{
|
||||
background-color: #69cdcf;
|
||||
display:grid;
|
||||
// $c: 300px;
|
||||
// grid-template-columns: $c calc(100% - #{$c});
|
||||
grid-template-columns: 300px 1fr;
|
||||
grid-column-gap: 1em;
|
||||
// grid-template-rows: min-content;
|
||||
color: #fff;
|
||||
.field--name-field-a-database{
|
||||
grid-column: 1;
|
||||
// outline: 1px solid green;
|
||||
}
|
||||
@extend %part-columned-layout;
|
||||
.field--name-field-a-database{}
|
||||
.cards-list-home{
|
||||
grid-column: 2;
|
||||
position: relative;
|
||||
// max-height: (130px*1.4)*3;
|
||||
max-height: 580px;
|
||||
@@ -282,11 +313,10 @@ article.node--type-frontpage{
|
||||
width:100%;
|
||||
margin:0; padding:0;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
|
||||
grid-template-rows: 1fr;
|
||||
grid-gap: 1em;
|
||||
// justify-content:start;
|
||||
justify-content:start;
|
||||
li{
|
||||
position: relative;
|
||||
list-style: none;
|
||||
@@ -309,22 +339,51 @@ article.node--type-frontpage{
|
||||
}
|
||||
&.home-showrooms{
|
||||
background-color: #50aa3c;
|
||||
display:grid;
|
||||
// $c: 300px;
|
||||
// grid-template-columns: $c calc(100% - #{$c});
|
||||
grid-template-columns: 300px 1fr;
|
||||
grid-column-gap: 1em;
|
||||
@extend %part-columned-layout;
|
||||
.field--name-field-showrooms{
|
||||
grid-column: 1;
|
||||
}
|
||||
.field--name-computed-showrooms-reference{
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
&.home-blabla{
|
||||
background-color: #9458aa;
|
||||
@extend %part-columned-layout;
|
||||
|
||||
.cards-list-home{
|
||||
position: relative;
|
||||
// max-height: 580px;
|
||||
// overflow-y: hidden;
|
||||
ul{
|
||||
width:100%;
|
||||
margin:0; padding:0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 220px));
|
||||
// grid-template-rows: 1fr;
|
||||
grid-gap: 1em;
|
||||
justify-content:start;
|
||||
li{
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin:0; padding:0;
|
||||
padding-top: 140%;
|
||||
overflow: hidden;
|
||||
.card{
|
||||
position:absolute;
|
||||
top:0; bottom:0;
|
||||
left:0; right:0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
.field--name-title{
|
||||
font-size: 0.756em;
|
||||
line-height: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.home-pricing{
|
||||
@extend %part-centered-layout;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
{#
|
||||
/**
|
||||
* @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',
|
||||
]
|
||||
%}
|
||||
<div class="cards-list-home">
|
||||
{% if label_hidden %}
|
||||
<ul{{ attributes }}>
|
||||
{% for item in items %}
|
||||
<li{{ item.attributes }}>{{ item.content }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<div{{ attributes }}>
|
||||
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
|
||||
{% if multiple %}
|
||||
<ul>
|
||||
{% endif %}
|
||||
{% for item in items %}
|
||||
<li{{ item.attributes }}>{{ item.content }}</li>
|
||||
{% endfor %}
|
||||
{% if multiple %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,96 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation to display a node.
|
||||
*
|
||||
* Available variables:
|
||||
* - node: The node entity with limited access to object properties and methods.
|
||||
* Only method names starting with "get", "has", or "is" and a few common
|
||||
* methods such as "id", "label", and "bundle" are available. For example:
|
||||
* - node.getCreatedTime() will return the node creation timestamp.
|
||||
* - node.hasField('field_example') returns TRUE if the node bundle includes
|
||||
* field_example. (This does not indicate the presence of a value in this
|
||||
* field.)
|
||||
* - node.isPublished() will return whether the node is published or not.
|
||||
* Calling other methods, such as node.delete(), will result in an exception.
|
||||
* See \Drupal\node\Entity\Node for a full list of public properties and
|
||||
* methods for the node object.
|
||||
* - label: (optional) The title of the node.
|
||||
* - content: All node items. Use {{ content }} to print them all,
|
||||
* or print a subset such as {{ content.field_example }}. Use
|
||||
* {{ content|without('field_example') }} to temporarily suppress the printing
|
||||
* of a given child element.
|
||||
* - author_picture: The node author user entity, rendered using the "compact"
|
||||
* view mode.
|
||||
* - metadata: Metadata for this node.
|
||||
* - date: (optional) Themed creation date field.
|
||||
* - author_name: (optional) Themed author name field.
|
||||
* - url: Direct URL of the current node.
|
||||
* - display_submitted: Whether submission information should be displayed.
|
||||
* - attributes: HTML attributes for the containing element.
|
||||
* The attributes.class element may contain one or more of the following
|
||||
* classes:
|
||||
* - node: The current template type (also known as a "theming hook").
|
||||
* - node--type-[type]: The current node type. For example, if the node is an
|
||||
* "Article" it would result in "node--type-article". Note that the machine
|
||||
* name will often be in a short form of the human readable label.
|
||||
* - node--view-mode-[view_mode]: The View Mode of the node; for example, a
|
||||
* teaser would result in: "node--view-mode-teaser", and
|
||||
* full: "node--view-mode-full".
|
||||
* The following are controlled through the node publishing options.
|
||||
* - node--promoted: Appears on nodes promoted to the front page.
|
||||
* - node--sticky: Appears on nodes ordered above other non-sticky nodes in
|
||||
* teaser listings.
|
||||
* - node--unpublished: Appears on unpublished nodes visible only to site
|
||||
* admins.
|
||||
* - title_attributes: Same as attributes, except applied to the main title
|
||||
* tag that appears in the template.
|
||||
* - content_attributes: Same as attributes, except applied to the main
|
||||
* content tag that appears in the template.
|
||||
* - author_attributes: Same as attributes, except applied to the author of
|
||||
* the node tag that appears in the template.
|
||||
* - title_prefix: Additional output populated by modules, intended to be
|
||||
* displayed in front of the main title tag that appears in the template.
|
||||
* - title_suffix: Additional output populated by modules, intended to be
|
||||
* displayed after the main title tag that appears in the template.
|
||||
* - view_mode: View mode; for example, "teaser" or "full".
|
||||
* - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
|
||||
* - page: Flag for the full page state. Will be true if view_mode is 'full'.
|
||||
* - readmore: Flag for more state. Will be true if the teaser content of the
|
||||
* node cannot hold the main body content.
|
||||
* - logged_in: Flag for authenticated user status. Will be true when the
|
||||
* current user is a logged-in member.
|
||||
* - is_admin: Flag for admin user status. Will be true when the current user
|
||||
* is an administrator.
|
||||
*
|
||||
* @see template_preprocess_node()
|
||||
*
|
||||
* @todo Remove the id attribute (or make it a class), because if that gets
|
||||
* rendered twice on a page this is invalid CSS for example: two lists
|
||||
* in different view modes.
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
{%
|
||||
set classes = [
|
||||
'node',
|
||||
'node--type-' ~ node.bundle|clean_class,
|
||||
node.isPromoted() ? 'node--promoted',
|
||||
node.isSticky() ? 'node--sticky',
|
||||
not node.isPublished() ? 'node--unpublished',
|
||||
view_mode ? view_mode|clean_class,
|
||||
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
|
||||
'card'
|
||||
]
|
||||
%}
|
||||
|
||||
<article{{ attributes.addClass(classes) }}>
|
||||
<header>
|
||||
{{ label }}
|
||||
{{ content.field_date }}
|
||||
</header>
|
||||
<section class="images">
|
||||
{{ content.field_visuel }}
|
||||
</section>
|
||||
</article>
|
||||
Reference in New Issue
Block a user