la-baule: add custom link list cell "En 1 clic" (#56081)

This commit is contained in:
Thomas Jund 2021-08-10 14:46:18 +02:00
parent 32fc5e98c5
commit 28402da17b
4 changed files with 105 additions and 1 deletions

View File

@ -156,6 +156,10 @@ div#nav {
.page-header, .gru-content {
padding-top: $columns-gutter;
div.cell {
margin-bottom: 10px;
}
}
// Page header
@ -203,10 +207,76 @@ div#nav {
//
// CELLS
//
.en-1-clic {
& > div {
background-color: $cyan;
color: white;
padding: 1rem;
display: flex;
flex-wrap: wrap;
@media ($max-mobile-viewport) {
font-size: $fz-small;
}
&::before {
content: "";
background: url(img/en1clic.svg) top left no-repeat;
background-size: contain;
width: 5em;
margin-right: 1.5em;
}
}
& &--header {
width: 13em;
line-height: 1.1;
margin-bottom: 1rem;
}
& &--title,
& &--subtitle {
color: inherit;
margin: 0;
}
& &--title {
font-size: $fz-h3;
margin-left: -1.5rem;
}
& &--subtitle {
font-size: $fz-h4;
}
& &--list {
list-style-type: none;
margin: 0;
padding: 0;
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
& &--link {
display: flex;
text-align: center;
align-items: center;
color: inherit;
border: 1px solid currentColor;
width: 9em;
height: 9em;
padding: 1em;
margin: 0.5em;
border-radius: 50%;
font-weight: bold;
hyphens: auto;
&:hover {
background-color: $blue;
text-decoration: none;
}
}
}
.right-icon {
// $image-width: #{$title-font-size + 1.4};
$image-width: 3.15rem;
@debug($image-width);
.gru-content &.cell {
// Picture position
&.has-asset-picture {

View File

@ -10,6 +10,15 @@
"COMBO_ASSET_SLOTS.update": {
"header:logo": { "label": "Têtière : logo" },
"emails:logo": {"label": "Emails : logo"}
},
"COMBO_CELL_TEMPLATES.update" : {
"data_linklistcell" : {
"en-un-clic" : {
"extra-css-classes" : "en-1-clic",
"label" : "En 1 clic",
"template" : "combo/cells/en-1-clic/link-list-cell.html"
}
}
}
}
}

View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="306" height="512" version="1.1" viewBox="0 0 306 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g transform="translate(-103.1)" fill="#fff">
<path class="st0" d="m287 181.9c28-17.3 46.8-48.3 46.8-83.6 0-54.2-44.1-98.3-98.3-98.3s-98.3 44.1-98.3 98.3c0 36.3 19.8 68 49.1 85.1v-40.2c-10.8-11.8-17.4-27.6-17.4-44.9 0-36.8 29.8-66.6 66.6-66.6s66.6 29.8 66.6 66.6c0 16-5.6 30.6-15 42.1v41.5z"/>
<path class="st0" d="m390 235.8-122-23.1v-115.1c0-17-13.8-30.9-30.9-30.9h-1.1c-17 0-30.9 13.8-30.9 30.9v239.3l-52.3-36.1c-5.2-3.6-11.3-5.5-17.5-5.5-2.3 0-4.6 0.3-6.8 0.8-8.4 1.9-15.7 7.2-19.9 14.7l-1.1 2c-6.8 11.9-5 26.9 4.6 36.8l67 69.4c2.6 2.7 5.5 5.2 8.6 7.4l38.3 27.1c2.2 1.6 3.6 4.2 3.6 6.9v51.6h146.3v-61.1l26.6-33.1c4-5 6.2-11.3 6.2-17.7v-141.7c0-11-7.9-20.5-18.7-22.6"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 903 B

View File

@ -0,0 +1,15 @@
{% block cell-content %}
{% spaceless %}
<div class="en-1-clic--header">
<h2 class="en-1-clic--title">En 1 clic</h2>
{% if title %}<h3 class="en-1-clic--subtitle">{{ title }}</h3>{% endif %}
</div>
<ul class="en-1-clic--list">
{% for link in links %}
<li>
<a class="en-1-clic--link" href="{{ link.url }}" title="{{ link.title }}">{{ link.title|truncatechars:50 }}</a>
</li>
{% endfor %}
</ul>
{% endspaceless %}
{% endblock %}