Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1712: Added “Expand all steps” link on step by step #354

Merged
merged 3 commits into from
Jul 8, 2024
Merged

1712: Added “Expand all steps” link on step by step #354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e734505
1712: Added “Expand all steps” link on step by step
rimi-itk Jun 26, 2024
a01a0aa
1712: Added “Collapse all steps” link on step by step
rimi-itk Jul 5, 2024
f6f0365
1712; Fixed caching issue
rimi-itk Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]

- [PR-354](https://github.com/itk-dev/os2loop/pull/354)
1712: Added “Expand all steps” link on step by step
- [PR-353](https://github.com/itk-dev/os2loop/pull/353):
Security update
- [PR-352](https://github.com/itk-dev/os2loop/pull/352):
Expand Down
8 changes: 8 additions & 0 deletions web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,3 +113,11 @@ img {
// }
// }
// }

// Offset used for (trying to) prevent topbar from overlapping content when using URL fragment identifier.
$target-offset: 64px;

:target {
margin-top: -$target-offset;
padding-top: $target-offset;
}
7 changes: 7 additions & 0 deletions web/profiles/custom/os2loop/themes/os2loop_theme/os2loop_theme.theme
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@ use Drupal\user\Entity\User;
function os2loop_theme_preprocess(&$variables) {
$variables['logopath'] = \Drupal::service('file_url_generator')->generateString(theme_get_setting('logo.url'));
$variables['os2loop_container_class'] = theme_get_setting('container_class') ?: 'container-fluid';
// Poor man's App Global Variable
// (https://symfony.com/doc/current/templates.html#the-app-global-variable).
$variables['app'] = [
'request' => \Drupal::request(),
];
// Add the `expanded` query string parameter to the cache context.
$variables['#cache']['contexts'][] = 'url.query_args:expanded';
}

/**
Expand Down
7 changes: 6 additions & 1 deletion ...loop_theme/templates/content-entities/paragraph--os2loop-documents-step-by-step.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,15 @@
]
%}
{% block paragraph %}
<div{{ attributes.addClass(classes) }}>
{% set paragraph_id = 'paragraph-id-' ~ paragraph.id.value %}
{% set expanded = app.request.query.get('expanded') %}
<div{{ attributes.addClass(classes) }} id="{{ paragraph_id }}">
{{ content.contextual_links }}
{{ include('@os2loop_theme/content-entities/os2loop_documents_title.html.twig') }}
{{ content.os2loop_documents_description }}

<a class="btn btn-link os2loop-expand" href="{{ path('<current>', {expanded: not expanded}, {fragment: paragraph_id}) }}">{{ expanded ? 'Collapse all steps'|trans : 'Expand all steps'|trans }}</a>

<ol class="os2loop-documents-steps">
{{ content.os2loop_documents_steps }}
</ol>
Expand Down
9 changes: 6 additions & 3 deletions ...emes/os2loop_theme/templates/content-entities/paragraph--os2loop-documents-step.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,24 +51,27 @@

{% set has_title = content.os2loop_documents_step_title['#title'] is not null %}

{% set expanded = app.request.query.get('expanded') %}
{% set class_collapsed = not expanded ? 'collapsed' %}

{% block paragraph %}
{% block content %}
<li {{ attributes.addClass(classes) }}>
{# A hack to check if we're rendering content for pdf generation #}
{% if 'print/pdf' in url('<current>')['#markup'] %}
<span class="collapsed step--collapse-toggle">
<span class="{{ class_collapsed }} step--collapse-toggle">
<span class="bold">
{{ has_title ? content.os2loop_documents_step_title : content.os2loop_documents_step_text }}
</span>
</span>
{% else %}
<a class="collapsed step--collapse-toggle" type="button" data-toggle="collapse" data-target="#paragraph-id-{{ paragraph.id() }}">
<a class="{{ class_collapsed }} step--collapse-toggle" type="button" data-toggle="collapse" data-target="#paragraph-id-{{ paragraph.id() }}">
<span class="bold {{ has_title ? 'line-clamp-1' }}">
{{ has_title ? content.os2loop_documents_step_title : content.os2loop_documents_step_text }}
</span>
</a>
{% endif %}
<div class="row no-gutters collapse" id="paragraph-id-{{ paragraph.id() }}">
<div class="row no-gutters collapse {{ expanded ? 'show' }}" id="paragraph-id-{{ paragraph.id() }}">
<div class="col">
<div class="row no-gutters">
<div class="col">
Expand Down
Loading