Contrib.social

Extend the Gin offcanvas library override

Open on Drupal.org →
Created on 1 March 2023, almost 2 years ago
Updated 11 September 2024, 3 months ago

Problem/Motivation

As seen on several issues, D9 core offcanvas styles leak into Gin and break the design.

¿Why should you use offcanvas/layout builder on the admin theme? - Think Dashboards → module.

The proposed solution is to use gin_lb → , which works more like a general override but this might not be acceptable for some developers because of the following:

  1. The developer might not want all of gin_lb features (especially, having gin UI on the public theme could not be wanted)
  2. Other modules that rewrite the overall dialog/offcanvas UI (i.e. bootstrap_layout_builder → ) heavily conflict with gin_lb redesign.

That's why I propose that, out of the box, Gin should at the very least provide a bigger reset of the offcanvas core UI.

This won't be a proper fix but a better starting point for developers.

Steps to reproduce

Install Gin and Layout Builder, and use LB inside Gin. For example, by using the Dashboards → module or using Gin also as the public facxing theme.

The offcanvas appearance is broken due to styling coming from Core:

Proposed resolution

In my opinion, the Gin UI works pretty well without further changes so the only task here is to add more resets to the libraries-override entry.

With an almost full reset:

  core/drupal.dialog.off_canvas:
    css:
      base:
        misc/dialog/off-canvas.reset.css: false
        misc/dialog/off-canvas.base.css: false
        misc/dialog/off-canvas.css: false
        misc/dialog/off-canvas.theme.css: false
      component:
        misc/dialog/off-canvas.button.css: false
        misc/dialog/off-canvas.form.css: false
        misc/dialog/off-canvas.table.css: false
        misc/dialog/off-canvas.details.css: false
        misc/dialog/off-canvas.tabledrag.css: false
        misc/dialog/off-canvas.dropbutton.css: false
        misc/dialog/off-canvas.layout.css: false

The outcome is as follows, Gin styles are used instead, the result is usable and working:

Again, this is not a full-fledged fix as requested on Create an off-canvas style library ✨ Create an off-canvas style library Active but a minor fix to provide a better starting point. Some styles are still leaking, but the overall UI is improved.

Remaining tasks

Discuss, gather consensus, implement

✨ Feature request
Status

Closed: outdated

Version

3.0

Component

Code

Created by

🇪🇸Spain idiaz.roncero Madrid

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024