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

Fixes node edit sidebar in 10.3 #18

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fixes node edit sidebar in 10.3 #18

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
2a2cac2
CuBoulder/express_admin#17 Fixes node edit sidebar in 10.3
timurtripp Jun 26, 2024
98ab9ec
Adds `role="button"` to sidebar toggle
timurtripp Jun 26, 2024
c4c45e6
Adds `aria-label` to sidebar toggle
timurtripp Jun 26, 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
8 changes: 2 additions & 6 deletions css/layout/node-form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
/* Enables hiding the node edit form sidebar. */

#ucb-edit-container.sidebar-closed {
.ucb-sidebar-closed .layout-form {
grid-template-columns: calc(100% - 2em) 2em;
}

#ucb-edit-container.sidebar-closed>#ucb-edit-main {
width: auto;
}

#ucb-edit-container.sidebar-closed>#ucb-edit-sidebar>#ucb-edit-sidebar-content {
.ucb-sidebar-closed #edit-advanced {
display: none;
}
2 changes: 1 addition & 1 deletion express_admin.info.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@ libraries:
- express_admin/global-styling

libraries-extend:
claro/node-form:
node/form:
- express_admin/node-form
13 changes: 6 additions & 7 deletions js/node-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
(function() {
const button = document.querySelector('#ucb-sidebar-toggle-button');
const mainDiv = document.querySelector('#ucb-edit-container');
const main = document.querySelector('main');

button.addEventListener('click', event => {
event.preventDefault();

button.addEventListener('click', () => {
// check the toggle state of the button
const status = button.dataset.status;

// if the toggle status is 'open'
if (status == 'open') {
mainDiv.classList.add("sidebar-closed");
mainDiv.classList.remove("sidebar-open");

main.classList.add('ucb-sidebar-closed');
} else {
mainDiv.classList.add("sidebar-open");
mainDiv.classList.remove("sidebar-closed");
main.classList.remove('ucb-sidebar-closed');
}

// and toggle the icon/data attribute
Expand Down
41 changes: 9 additions & 32 deletions templates/node-edit-form.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,18 @@
{#
/**
* @file
* Theme override for a node edit form.
*
* Two column template for the node add/edit form.
*
* This template will be used when a node edit form specifies 'node_edit_form'
* as its #theme callback. Otherwise, by default, node add/edit forms will be
* themed by form.html.twig.
* Contains the template for the node edit form.
*
* Available variables:
* - form: The node add/edit form.
*
* @see claro_form_node_form_alter()
*/
#}
<div id="ucb-edit-container" class="layout-node-form clearfix sidebar-open">
<div id="ucb-edit-main" class="layout-region layout-region--node-main">
<div class="layout-region__content">
{{ form|without('advanced', 'footer', 'actions') }}
</div>
</div>
<div id="ucb-edit-sidebar" class="layout-region layout-region--node-secondary">
<div class="ucb-sidebar-toggle-container">
<a id="ucb-sidebar-toggle-button" href="#" data-status="open">
<i class="fa-solid fa-2x fa-toggle-on"></i>
</a>
</div>
<div id="ucb-edit-sidebar-content" class="layout-region__content">
{{ form.advanced }}
</div>
</div>
<div class="layout-region layout-region--node-footer">
<div class="layout-region__content">
<div class="divider"></div>
{{ form.footer }}
{{ form.actions }}
</div>
{% extends '@claro/node-edit-form.html.twig' %}
{% block secondary %}
<div class="ucb-sidebar-toggle-container">
<a role="button" aria-label="Hide or show the advanced settings" id="ucb-sidebar-toggle-button" href="#" data-status="open">
<i class="fa-solid fa-2x fa-toggle-on"></i>
</a>
</div>
</div>
{{ parent() }}
{% endblock %}
Loading