Contrib.social

Make the sidebar resizable

Open on Drupal.org →
Created on 15 May 2024, about 1 month ago
Updated 27 June 2024, about 4 hours ago

Problem/Motivation

In some situations the sidebar on entity edit forms is too narrow, e.g. it doesn't permit to see the full url alias for longer path aliases. It would help if the sidebar would be resizable, so that users can adjust it to their needs.

Proposed resolution

I have recently created Gin Resizable Sidebar → to address this issue. Let's try to bring this functionality into Gin itself.

Remaining tasks

Before starting, we need to define some specs for this:

  1. What should be the behaviour on touch devices?
  2. Should the resize behaviour also be added when Gin is used as a base theme?
  3. Should there be limits for the max and min-size of the sidebar? In Gin Resizable Sidebar I have currently set the min width to 250px and the max width to 80% of the window width.
  4. Should we try to integrate the resizing with the sidebar toggle? If so, how exactly should that work?
  5. ...

Other todos:

  1. Cross browser testing
  2. RTL and LTR testing
  3. Cross device testing
  4. Functional javascript tests for this?
  5. ...

User interface changes

This adds a resizable control for the sidebar, which, on desktops, is visible when hovering over the border between the sidebar and the main main content.

API changes

None (?)

Data model changes

None

✨ Feature request
Status

Fixed

Version

3.0

Component

User interface

Created by

🇩🇪Germany berliner

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

Merge Requests

Comments & Activities

  • Issue created by @berliner
  • First commit to issue fork.
  • Merge request !441Resolve #3447257 "Make the sidebar resizable" → (Merged) created by saschaeggi
  • Merge request !442Make sidebar resizable → (Merged) created by saschaeggi
  • Status changed to Needs review 4 days ago
  • Comment 4 days ago →
    🇨🇭Switzerland saschaeggi Zurich
  • Comment 4 days ago →
    🇨🇭Switzerland saschaeggi Zurich
  • Comment 4 days ago →
    🇺🇸United States smustgrave

    Just want to ask if expected behavior

    So I'm on the branch for 4.0.x version
    Go to a random Article and drag the sidebar around
    If I'm quick about it I can make the center column, very briefly, be behind the sidebar.

  • Comment 4 days ago →
    🇨🇭Switzerland saschaeggi Zurich

    So I'm on the branch for 4.0.x version
    Go to a random Article and drag the sidebar around
    If I'm quick about it I can make the center column, very briefly, be behind the sidebar.

    I don't really understand what you are referring to. Maybe you can share a video/screenshot.

  • Comment 4 days ago →
    🇬🇧United Kingdom Hebl

    Hey @saschaeggi,

    This looks good to me. I've attached a video showing the feature working nicely.

    Tested on:

    • Chrome: Version 126.0.6478.115
    • MacOS 14.3.1

    Also tested editing an article on an iPhone SE, and whilst this feature isn't active on mobile - can't see any bugs that have been introduced.

    Thanks for the work on this.

  • Comment 3 days ago →
    🇮🇳India siddharthjain_7998

    @saschaeggi Changes looks good to me. I have tested it on Chrome, Safari and Firefox browser, it works fine. Attaching screenshot for reference as well.

    Also I have one suggestion can we use the min-width to be the one which shows up when page is opened by default which is around 360px?

  • Comment 1 day ago →
    🇨🇭Switzerland saschaeggi Zurich

    @siddharthjain

    Also I have one suggestion can we use the min-width to be the one which shows up when page is opened by default which is around 360px?

    That's a good suggestion, I've pushed a change so we ignore the size for smaller viewports 👍

    Needs a final review 👀

  • Comment about 17 hours ago →
    🇬🇧United Kingdom Hebl

    Hey @saschaeggi,

    Just checked the latest commit and can confirm the sidebar starts at 360px when first loading a page.

    I am able to drag it smaller than 360px though if wanted so if it's supposed to be a min-width of 360px this might need some more work. Perhaps I'm misunderstanding the change though.

    Screenshot attached showing it being resized down to 239px wide.

    Thanks

  • Comment about 17 hours ago →
    🇨🇭Switzerland saschaeggi Zurich

    @Hebl you can resize down to

    240px

    that is to be expected 👍

    We just show a unified min-size on smaller viewports (e.g. mobile phones) to avoid issues with bigger sizings.

  • Status changed to RTBC about 17 hours ago
  • Comment about 17 hours ago →
    🇬🇧United Kingdom Hebl

    Ah great, thanks @saschaeggi.

    Checked mobile and looks good there too. Happy to approve this.

  • Comment about 16 hours ago →
    🇮🇳India siddharthjain_7998

    @saschaeggi

    Changes looks good now, now the min-width is around 240px, thanks!

  • Comment about 6 hours ago →
    System Message
  • Comment about 4 hours ago →
    🇨🇭Switzerland saschaeggi Zurich

    Thanks y'all 👏

  • Status changed to Fixed about 4 hours ago
  • Comment about 4 hours ago →
    🇨🇭Switzerland saschaeggi Zurich
contrib.social Blog FAQ Discussions
Production build 0.69.0 2024