1

@arikfr suggested having grid markings in the background hinting at the drag / resize locations in the editable area.

Features:

  1. Adapts to viewport width.
  2. Appears only in edit mode (excluding one column mode).
  3. Placeholder colors the boxes.
  4. Pure css :stuck_out_tongue:

Try it out here https://deploy-preview-3656–redash-preview.netlify.com

com-video-to-gif
com-video-to-gif800×604 3.63 MB

2 Likes
2

Cool :slight_smile:

  1. Don’t you prefer to implement this after migrating the grid code? I realize this is all CSS, but maybe the markup will change?
  2. I think we need to fill the screen with the grid marking (currently it shows only where there are widgets).
3

Don’t you prefer to implement this after migrating the grid code?

It would change for sure but that won’t be a problem. I always prefer to land as soon as possible, but in this case I just wanted feedback on how this feels, how it looks and if it’s better than the current version.

I think we need to fill the screen with the grid marking

Yeah I already fiddled with a solution to that. It’s not that straightforward. I’ll update and ask for feedback.

4

There is one prominent ux flaw to this method I noticed.
It’s expected that all grid markings are viable (to land on) but that’s not true.

e.g in the case below it’s not possible to place the widget on the two bottom rows.
The grid markings give the wrong impression.

03
031336×914 50.9 KB

The problem could be avoided by giving a visual indication that these grid spots are non-interactable (for instance, grayed out) but I can’t think up a technically feasible way to do this.

8

@ranbena May I suggest using a grid instead of filled blocks? UX-wise, filled blocks are used to show the destination, while grids are used to show the alignment guideline.

Something like this maybe:

redash_dashboard_grid_ui_suggestion
redash_dashboard_grid_ui_suggestion1616×1097 64.5 KB

9

@faderud does it not have significance, that the lines do not exactly indicate the boundaries in which the widgets align to?

Also, wdyt of this?

10

@ranbena the human eye shouldn’t be bothered by that, from my experience. It’s clear where the dragged window is expected to land, and that the gaps are there to keep proper spacing.

As for your other question, the solution could be pretty simple: you just don’t show the placeholder marking when dragging over that area. That’s why the placeholder is there for, to indicate where the window can and cannot land.

11

@faderud done. It looks nice :slight_smile:
Updated the demo here.

Lmk what you think.

12

Nice!
A few more adjustments that I can suggest to make it blend better with the system colors::
Grid color: #B3BABF
Placeholder color: #E0E6EB with 0.4 alpha

There are more improvements can be done with animations, but for now this will do the job.

13

Updated. Looking awesome. 10x @faderud :star_struck:

2 Likes
14

You’re more than welcome

15

Landed https://github.com/getredash/redash/pull/3656