Contrib.social

Improved readability of draggable tables (CSS change)

Open on Drupal.org →
Created on 2 June 2023, over 1 year ago

Problem/Motivation

Draggable tables take up excessive vertical space (and unevenly so), making it hard to edit, for example, large taxonomy trees. Much screen real estate is wasted for no apparent reason.

Steps to reproduce

Try and reorganize a large taxonomy tree structure. Everyone should be familiar with the experience already.

Proposed resolution

The following CSS change in core/themes/claro/css/components/tabledrag.css condenses vertical table spacing such that even very large tables take up less vertical space per row, making them more easily grasped and re-organized with drag and drop.

table.draggable-table td {
  height: 1.1em;
  padding-top: 0;
  padding-bottom: 0;
}
table.draggable-table tr div.indentation {
  height: 1.0em;
}

Remaining tasks

Please review and add above CSS to the Claro theme. I am not familiar enough with the workflow here, but still wanted to share this improvement with the community.

🌱 Plan
Status

Postponed: needs info

Version

10.1 ✨

Component
Claro  →

Last updated 1 day ago

Created by

AndersTwo

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Comments & Activities

  • Issue created by @AndersTwo
  • Comment over 1 year ago →
    AndersTwo
  • Status changed to Postponed: needs info over 1 year ago
  • Comment over 1 year ago →
    🇫🇮Finland lauriii Finland

    Thank you @AndersTwo for the proposal! Do you have a screenshot of the proposed change from your site? I tried to make the change but I'm not sure I made it correctly because I didn't see any changes.

    If you want to work on a MR for this issue, feel free to reach out to me in Drupal Slack → . I'd be happy to help you get started! 😊

  • Comment over 1 year ago →
    AndersTwo

    Before:

    After:

    A hefty issue at least with Safari and Chrome, if I remember correctly. Almost unusable. Firefox seems to be more tolerant.

    Appending the proposed snippet to the CSS file fixes this.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024