Skip to content

Commit 8a4ed12

Browse files
libdevellibdevel
committed
menu tweaks
1 parent ca1454d commit 8a4ed12

25 files changed

+1677
-346
lines changed

‎b5subtheme.libraries.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,8 @@ global-styling:
33
theme:
44
css/style.css: {}
55
css/custom.css: {}
6+
js:
7+
js/primo.js: {}
8+
dependencies:
9+
- core/drupal
10+
- core/jquery

‎components/barrio_main/barrio_main.component.yml‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# This is so your IDE knows about the syntax for fixes and autocomplete.
2+
$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
3+
4+
# The human readable name.
5+
name: Navigation
6+
7+
# Status can be: "experimental", "stable", "deprecated", "obsolete".
8+
status: stable
9+
10+
# Schema for the props. We support www.json-schema.org. Learn more about the
11+
# syntax there.
12+
props:
13+
type: object
14+
properties:
15+
items:
16+
type: array
17+
title: Links
18+
item:
19+
type: Drupal\Core\Menu\MenuLinkInterface
20+
title: Link

‎components/barrio_main/barrio_main.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/*
2+
* DO NOT EDIT THIS FILE.
3+
* See the following change record for more information,
4+
* https://www.drupal.org/node/3084859
5+
* @preserve
6+
*/
7+
.teaser {
8+
position: relative; /* Anchor after pseudo-element. */
9+
padding-block-end: var(--sp1-5);
10+
}
11+
.teaser::after {
12+
position: absolute;
13+
inset-block-end: 0;
14+
width: var(--sp3);
15+
height: 0;
16+
content: "";
17+
/* Intentionally not using CSS logical properties. */
18+
border-top: solid 2px var(--color--gray-95);
19+
}
20+
@media (min-width: 62.5rem) {
21+
.teaser {
22+
padding-block-end: var(--sp3);
23+
}
24+
}
25+
.teaser__content {
26+
display: grid;
27+
grid-auto-rows: max-content;
28+
gap: var(--sp);
29+
}
30+
.teaser__content .field:not(:last-child) {
31+
margin-block-end: 0;
32+
}
33+
@media (min-width: 62.5rem) {
34+
.teaser__content {
35+
gap: var(--sp2);
36+
}
37+
}
38+
.teaser__image {
39+
flex-shrink: 0;
40+
margin: 0;
41+
}
42+
.teaser__image:empty {
43+
display: none;
44+
}
45+
.teaser__image:empty + .teaser__title {
46+
flex-basis: auto;
47+
}
48+
.teaser__image a {
49+
display: block;
50+
}
51+
.teaser__image img {
52+
width: var(--sp3-5);
53+
height: var(--sp3-5);
54+
object-fit: cover;
55+
border-radius: 50%;
56+
}
57+
@media (min-width: 62.5rem) {
58+
.teaser__image img {
59+
width: var(--grid-col-width);
60+
height: var(--grid-col-width);
61+
}
62+
}
63+
@media (min-width: 62.5rem) {
64+
.teaser__image {
65+
position: absolute;
66+
inset-block-start: 0;
67+
inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
68+
margin: 0;
69+
}
70+
}
71+
.teaser__meta {
72+
margin-block-end: var(--sp);
73+
}
74+
.teaser__title {
75+
margin-block: 0;
76+
flex-basis: calc(100% - var(--sp4-5));
77+
color: var(--color-text-neutral-loud);
78+
font-size: 1.5rem;
79+
line-height: var(--line-height-base);
80+
}
81+
@media (min-width: 62.5rem) {
82+
.teaser__title {
83+
flex-basis: auto;
84+
font-size: var(--sp2);
85+
line-height: var(--sp3);
86+
}
87+
}
88+
.teaser__top {
89+
display: flex;
90+
flex-wrap: nowrap;
91+
align-items: center;
92+
margin: 0;
93+
gap: var(--sp1);
94+
margin-block-end: var(--sp1);
95+
}
96+
@media (min-width: 62.5rem) {
97+
.teaser__top {
98+
position: relative; /* Anchor the image */
99+
}
100+
}

‎components/barrio_main/barrio_main.twig‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{% import _self as menus %}
2+
3+
{#
4+
We call a macro which calls itself to render the full tree.
5+
@see http://twig.sensiolabs.org/doc/tags/macro.html
6+
#}
7+
{{ menus.menu_links(items, attributes, 0) }}
8+
9+
{% macro menu_links(items, attributes, menu_level) %}
10+
{% import _self as menus %}
11+
{% if items %}
12+
{% if menu_level == 0 %}
13+
<ul{{ attributes.addClass('nav navbar-nav')|without('id') }}>
14+
{% else %}
15+
<ul class="dropdown-menu">
16+
{% endif %}
17+
{% for item in items %}
18+
{%
19+
set classes = [
20+
menu_level ? 'dropdown-item' : 'nav-item',
21+
item.is_expanded ? 'menu-item--expanded',
22+
item.is_collapsed ? 'menu-item--collapsed',
23+
item.in_active_trail ? 'active',
24+
item.below ? 'dropdown',
25+
]
26+
%}
27+
<li{{ item.attributes.addClass(classes) }}>
28+
{%
29+
set link_classes = [
30+
not menu_level ? 'nav-link',
31+
item.in_active_trail ? 'active',
32+
item.below ? 'dropdown-toggle',
33+
item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
34+
'nav-link-' ~ item.url.toString() | clean_class,
35+
]
36+
%}
37+
{% if item.below %}
38+
{{ link(item.title, item.url, {'class': link_classes, 'data-bs-toggle': 'dropdown', 'aria-expanded': 'false', 'aria-haspopup': 'true' }) }}
39+
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
40+
{% else %}
41+
{{ link(item.title, item.url, {'class': link_classes}) }}
42+
{% endif %}
43+
</li>
44+
{% endfor %}
45+
</ul>
46+
{% endif %}
47+
{% endmacro %}

‎components/bootstrap_main/bootstrap_main.component.yml‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# This is so your IDE knows about the syntax for fixes and autocomplete.
2+
$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
3+
4+
# The human readable name.
5+
name: Navigation
6+
7+
# Status can be: "experimental", "stable", "deprecated", "obsolete".
8+
status: stable
9+
10+
# Schema for the props. We support www.json-schema.org. Learn more about the
11+
# syntax there.
12+
props:
13+
type: object
14+
properties:
15+
items:
16+
type: array
17+
title: Links
18+
item:
19+
type: Drupal\Core\Menu\MenuLinkInterface
20+
title: Link

‎components/bootstrap_main/bootstrap_main.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/*
2+
* DO NOT EDIT THIS FILE.
3+
* See the following change record for more information,
4+
* https://www.drupal.org/node/3084859
5+
* @preserve
6+
*/
7+
.teaser {
8+
position: relative; /* Anchor after pseudo-element. */
9+
padding-block-end: var(--sp1-5);
10+
}
11+
.teaser::after {
12+
position: absolute;
13+
inset-block-end: 0;
14+
width: var(--sp3);
15+
height: 0;
16+
content: "";
17+
/* Intentionally not using CSS logical properties. */
18+
border-top: solid 2px var(--color--gray-95);
19+
}
20+
@media (min-width: 62.5rem) {
21+
.teaser {
22+
padding-block-end: var(--sp3);
23+
}
24+
}
25+
.teaser__content {
26+
display: grid;
27+
grid-auto-rows: max-content;
28+
gap: var(--sp);
29+
}
30+
.teaser__content .field:not(:last-child) {
31+
margin-block-end: 0;
32+
}
33+
@media (min-width: 62.5rem) {
34+
.teaser__content {
35+
gap: var(--sp2);
36+
}
37+
}
38+
.teaser__image {
39+
flex-shrink: 0;
40+
margin: 0;
41+
}
42+
.teaser__image:empty {
43+
display: none;
44+
}
45+
.teaser__image:empty + .teaser__title {
46+
flex-basis: auto;
47+
}
48+
.teaser__image a {
49+
display: block;
50+
}
51+
.teaser__image img {
52+
width: var(--sp3-5);
53+
height: var(--sp3-5);
54+
object-fit: cover;
55+
border-radius: 50%;
56+
}
57+
@media (min-width: 62.5rem) {
58+
.teaser__image img {
59+
width: var(--grid-col-width);
60+
height: var(--grid-col-width);
61+
}
62+
}
63+
@media (min-width: 62.5rem) {
64+
.teaser__image {
65+
position: absolute;
66+
inset-block-start: 0;
67+
inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
68+
margin: 0;
69+
}
70+
}
71+
.teaser__meta {
72+
margin-block-end: var(--sp);
73+
}
74+
.teaser__title {
75+
margin-block: 0;
76+
flex-basis: calc(100% - var(--sp4-5));
77+
color: var(--color-text-neutral-loud);
78+
font-size: 1.5rem;
79+
line-height: var(--line-height-base);
80+
}
81+
@media (min-width: 62.5rem) {
82+
.teaser__title {
83+
flex-basis: auto;
84+
font-size: var(--sp2);
85+
line-height: var(--sp3);
86+
}
87+
}
88+
.teaser__top {
89+
display: flex;
90+
flex-wrap: nowrap;
91+
align-items: center;
92+
margin: 0;
93+
gap: var(--sp1);
94+
margin-block-end: var(--sp1);
95+
}
96+
@media (min-width: 62.5rem) {
97+
.teaser__top {
98+
position: relative; /* Anchor the image */
99+
}
100+
}

‎components/bootstrap_main/bootstrap_main.twig‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{#
2+
/**
3+
* @file
4+
* from bootstrap theme
5+
*/
6+
#}
7+
8+
{% import _self as menus %}
9+
10+
{#
11+
We call a macro which calls itself to render the full tree.
12+
@see http://twig.sensiolabs.org/doc/tags/macro.html
13+
#}
14+
{{ menus.menu_links(items, attributes, 0) }}
15+
16+
{% macro menu_links(items, attributes, menu_level) %}
17+
{% import _self as menus %}
18+
{% if items %}
19+
{% if menu_level == 0 %}
20+
<ul{{ attributes.addClass('nav navbar-nav justify-content-end ')|without('id') }}>
21+
{% else %}
22+
<ul class="dropdown-menu">
23+
{% endif %}
24+
{% for item in items %}
25+
{%
26+
set classes = [
27+
menu_level ? 'dropdown-item' : 'nav-item',
28+
item.is_expanded ? 'menu-item--expanded',
29+
item.is_collapsed ? 'menu-item--collapsed',
30+
item.in_active_trail ? 'active',
31+
item.below ? 'dropdown',
32+
]
33+
%}
34+
<li{{ item.attributes.addClass(classes) }}>
35+
{%
36+
set link_classes = [
37+
not menu_level ? 'nav-link',
38+
item.in_active_trail ? 'active',
39+
item.below ? 'dropdown-toggle',
40+
item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
41+
'nav-link-' ~ item.url.toString() | clean_class,
42+
]
43+
%}
44+
{% if item.below %}
45+
{{ link(item.title, item.url, {'class': link_classes, 'data-bs-toggle': 'dropdown', 'aria-expanded': 'false', 'aria-haspopup': 'true' }) }}
46+
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
47+
{% else %}
48+
{{ link(item.title, item.url, {'class': link_classes}) }}
49+
{% endif %}
50+
</li>
51+
{% endfor %}
52+
</ul>
53+
{% endif %}
54+
{% endmacro %}

‎components/header_nav/header_nav.component.yml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
2+
name: Header Navigation
3+
status: stable
4+
description: Header navigation used for the main menu.
5+
props:
6+
type: 'object'
7+
properties:
8+
menu_name:
9+
type: 'string'
10+
title: Menu Name
11+
description: Name of the menu.
12+
items:
13+
type: 'array'
14+
title: Menu Items
15+
description: Nested array of menu items.

0 commit comments

Comments
 (0)