From 2596b4e78b1c3ae6e4dd1c270a9a996079088ca7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 11 Apr 2024 01:36:22 +0200 Subject: [PATCH] Use multiple columns to display languages options When the list of available languages becomes too large, having all of them in one column makes it harder to select them. What we're trying to do here is to have multiple columns, with each column containing between 5 and 10 options, so they can all be easily seen on the screen at the same time. For that, there are mainly three options: a flex layout, a grid layout or a multi-column layout. Since languages are ordered (more or less) alphabetically, the natural way to display them is showing the first few ones on the first column, the following ones on the second column, and so on, as opposed to displaying the first ones on the first row, the following ones on the secord row, ... AFAIK this can't be accomplished using a flex layout. I've tried to do so using a grid layout, and failed. The problem here is that we don't know how many rows we're going to have. So we're using a multi-column layout. I haven't found a way to guarantee a minimum height for the content of each column, so in the end we're using a hack with the `:has` pseudoclass. Note this pseudoclass is only supported by about 92%-94% of the browsers (including the last few versions of all major browsers); people using other browsers will still see all the options on one column, just like people using small screens do. --- app/assets/stylesheets/admin/locales/form.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/app/assets/stylesheets/admin/locales/form.scss b/app/assets/stylesheets/admin/locales/form.scss index fee54929c..7c1b36384 100644 --- a/app/assets/stylesheets/admin/locales/form.scss +++ b/app/assets/stylesheets/admin/locales/form.scss @@ -18,6 +18,19 @@ padding-top: calc(#{$line-height} / 4); } + .collection-radio-buttons, + .collection-check-boxes { + column-gap: rem-calc(map-get($grid-column-gutter, medium)); + column-width: 13rem; + max-width: max-content; + + @each $elements in 10, 15, 20, 25, 30 { + &:has(label:nth-of-type(#{$elements})) { + column-count: calc(#{$elements} / 5); + } + } + } + [type="submit"] { @include regular-button; display: block;