Skip to content

[FIX] #46107 UI: update MainControls\Footer section one size. #10372

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

Merged
thibsy merged 2 commits into from
Aug 5, 2026
Merged

[FIX] #46107 UI: update MainControls\Footer section one size. #10372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
faffdfb
[FIX] #46107 UI: update `MainControls\Footer` section sizes (#10372)
thibsy Aug 5, 2026
e09272d
[FIX] Style: recompile delos stylesheet
thibsy Aug 5, 2026
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
31 changes: 25 additions & 6 deletions components/ILIAS/UI/src/Implementation/Component/MainControls/Renderer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ class Renderer extends AbstractComponentRenderer
public const BLOCK_MAINBAR_TOOLS = 'tool_trigger_item';
public const BLOCK_METABAR_ENTRIES = 'meta_element';

protected const FOOTER_SECTION_SIZE_MEDIUM = 'md';
protected const FOOTER_SECTION_SIZE_SMALL = 'sm';

private array $trigger_signals = [];

/**
Expand Down Expand Up @@ -440,7 +443,12 @@ protected function renderFooter(I\Footer $component, RendererInterface $default_
$template->setCurrentBlock('with_additional_item');
$template->setVariable('ITEM_CONTENT', $this->permanentLink((string) $permanent_url, $default_renderer));
$template->parseCurrentBlock();
$this->parseFooterSection($template, 'permanent-link', $this->txt('footer_permanent_link'));
$this->parseFooterSection(
$template,
'permanent-link',
$this->txt('footer_permanent_link'),
self::FOOTER_SECTION_SIZE_MEDIUM,
);
}

// maybe render section 2 (link groups):
Expand All @@ -457,6 +465,7 @@ protected function renderFooter(I\Footer $component, RendererInterface $default_
'link-groups',
$this->txt('footer_link_groups'),
$link_groups,
self::FOOTER_SECTION_SIZE_SMALL,
);
}

Expand All @@ -470,6 +479,7 @@ protected function renderFooter(I\Footer $component, RendererInterface $default_
'links',
$this->txt('footer_links'),
$links,
self::FOOTER_SECTION_SIZE_SMALL,
);
}

Expand All @@ -493,7 +503,8 @@ protected function renderFooter(I\Footer $component, RendererInterface $default_
$default_renderer,
'icons',
$this->txt('footer_icons'),
$icons
$icons,
self::FOOTER_SECTION_SIZE_SMALL,
);
}

Expand All @@ -507,6 +518,7 @@ protected function renderFooter(I\Footer $component, RendererInterface $default_
'texts',
$this->txt('footer_texts'),
$texts,
self::FOOTER_SECTION_SIZE_MEDIUM,
);
}

Expand All @@ -517,13 +529,15 @@ protected function renderFooter(I\Footer $component, RendererInterface $default_

/**
* @param array<array{0: string|Component\Component|Component\Component[], 1: string|null}> $section_items (use as [$content, $title] = <entry>)
* @param string $section_size (self::FOOTER_SECTION_SIZE_MEDIUM|self::FOOTER_SECTION_SIZE_SMALL)
*/
protected function parseAdditionalFooterSectionItems(
Template $template,
RendererInterface $default_renderer,
string $section_type,
string $section_label,
array $section_items = [],
array $section_items,
string $section_size,
): void {
foreach ($section_items as [$content, $title]) {
$template->setCurrentBlock('with_additional_item');
Expand All @@ -539,36 +553,41 @@ protected function parseAdditionalFooterSectionItems(
$template->parseCurrentBlock();
}

$this->parseFooterSection($template, $section_type, $section_label);
$this->parseFooterSection($template, $section_type, $section_label, $section_size);
}

/**
* @param array<Component\Symbol\Icon\Icon|Component\Button\Shy> $section_icons
* @param string $section_size (self::FOOTER_SECTION_SIZE_MEDIUM|self::FOOTER_SECTION_SIZE_SMALL)
*/
protected function parseAdditionalFooterSectionIcons(
Template $template,
RendererInterface $default_renderer,
string $section_type,
string $section_label,
array $section_icons = [],
array $section_icons,
string $section_size,
): void {
foreach ($section_icons as $icon) {
$template->setCurrentBlock('with_additional_icon');
$template->setVariable('ICON', $default_renderer->render($icon));
$template->parseCurrentBlock();
}

$this->parseFooterSection($template, $section_type, $section_label);
$this->parseFooterSection($template, $section_type, $section_label, $section_size);
}

/** @param string $section_size (self::FOOTER_SECTION_SIZE_MEDIUM|self::FOOTER_SECTION_SIZE_SMALL) */
protected function parseFooterSection(
Template $template,
string $section_type,
string $section_label,
string $section_size,
): void {
$template->setCurrentBlock('with_additional_section');
$template->setVariable('SECTION_TYPE', $section_type);
$template->setVariable('SECTION_LABEL', $section_label);
$template->setVariable('SECTION_SIZE', $section_size);
$template->parseCurrentBlock();
}

Expand Down
2 changes: 1 addition & 1 deletion components/ILIAS/UI/src/templates/default/MainControls/tpl.footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<footer class="c-maincontrols c-maincontrols__footer">
<!-- BEGIN with_additional_section -->
<section class="c-maincontrols__footer-grid" data-section="{SECTION_TYPE}" aria-label="{SECTION_LABEL}" tabindex="0">
<section class="c-maincontrols__footer-grid c-maincontrols__footer-grid--{SECTION_SIZE}" data-section="{SECTION_TYPE}" aria-label="{SECTION_LABEL}" tabindex="0">
<!-- BEGIN with_additional_item -->
<div class="c-maincontrols__footer-grid__item text-left">
<!-- BEGIN with_title -->
Expand Down
12 changes: 6 additions & 6 deletions components/ILIAS/UI/tests/Component/MainControls/FooterTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ public function testRenderWithPermanentUrl(): void

$expected_html = <<<EOT
<footer class="c-maincontrols c-maincontrols__footer">
<section class="c-maincontrols__footer-grid" data-section="permanent-link" aria-label="footer_permanent_link" tabindex="0">
<section class="c-maincontrols__footer-grid c-maincontrols__footer-grid--md" data-section="permanent-link" aria-label="footer_permanent_link" tabindex="0">
<div class="c-maincontrols__footer-grid__item text-left">
<div class="c-tooltip__container c-tooltip--top" aria-live="polite">
$this->button_html
Expand Down Expand Up @@ -147,7 +147,7 @@ public function testRenderWithAdditionalLinkGroup(): void

$expected_html = <<<EOT
<footer class="c-maincontrols c-maincontrols__footer">
<section class="c-maincontrols__footer-grid" data-section="link-groups" aria-label="footer_link_groups" tabindex="0">
<section class="c-maincontrols__footer-grid c-maincontrols__footer-grid--sm" data-section="link-groups" aria-label="footer_link_groups" tabindex="0">
<div class="c-maincontrols__footer-grid__item text-left">
<strong>$link_group_title</strong>$this->unordered_html
</div>
Expand All @@ -171,7 +171,7 @@ public function testRenderWithAdditionalLink(): void

$expected_html = <<<EOT
<footer class="c-maincontrols c-maincontrols__footer">
<section class="c-maincontrols__footer-grid" data-section="links" aria-label="footer_links" tabindex="0">
<section class="c-maincontrols__footer-grid c-maincontrols__footer-grid--sm" data-section="links" aria-label="footer_links" tabindex="0">
<div class="c-maincontrols__footer-grid__item text-left">$this->link_html</div>
</section>
</footer>
Expand All @@ -193,7 +193,7 @@ public function testRenderWithAdditionalIcon(): void

$expected_html = <<<EOT
<footer class="c-maincontrols c-maincontrols__footer">
<section class="c-maincontrols__footer-grid" data-section="icons" aria-label="footer_icons" tabindex="0">
<section class="c-maincontrols__footer-grid c-maincontrols__footer-grid--sm" data-section="icons" aria-label="footer_icons" tabindex="0">
<div class="c-maincontrols__footer-grid__item l-bar__group">
<span class="l-bar__element">$this->icon_html</span>
</div>
Expand All @@ -219,7 +219,7 @@ public function testRenderWithAdditionalText(): void

$expected_html = <<<EOT
<footer class="c-maincontrols c-maincontrols__footer">
<section class="c-maincontrols__footer-grid" data-section="texts" aria-label="footer_texts" tabindex="0">
<section class="c-maincontrols__footer-grid c-maincontrols__footer-grid--md" data-section="texts" aria-label="footer_texts" tabindex="0">
<div class="c-maincontrols__footer-grid__item text-left">$text</div>
</section>
</footer>
Expand Down Expand Up @@ -254,7 +254,7 @@ public function testRenderWithModalsAndTrigger(): void

$expected_html = <<<EOT
<footer class="c-maincontrols c-maincontrols__footer">
<section class="c-maincontrols__footer-grid" data-section="links" aria-label="footer_links" tabindex="0">
<section class="c-maincontrols__footer-grid c-maincontrols__footer-grid--sm" data-section="links" aria-label="footer_links" tabindex="0">
<div class="c-maincontrols__footer-grid__item text-left">$this->shy_html</div>
</section>
</footer>$modal_html
Expand Down
5 changes: 3 additions & 2 deletions templates/default/070-components/UI-framework/MainControls/_ui-component_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,15 @@

@include brk.on-screen-size(large) {
font-size: $il-font-size-small;
&-grid {
&-grid--sm {
grid-template-columns: repeat(4, 1fr);
}
}

@include brk.on-screen-size(small) {
font-size: $il-font-size-base;
&-grid {
&-grid--sm,
&-grid--md {
grid-template-columns: repeat(1, 1fr);
}
& ul li {
Expand Down
Loading
Loading