Allow flexbox in site and work skins

Description

Steps to reproduce

  1. Log in

  2. Choose an adventure:

    1. Hi, username! > My Dashboard > Skins > Create Site Skin

    2. Hi, username! > My Dashboard > Skins > My Work Skins > Create Work Skin

  3. Try to make a skin involving flexbox

What happens

Most of the properties are not allowed. They are removed and you get an error message.

On the bright side, the display property already allows the values flex and inline-flex.

What needs to happen

The following list of properties and values should be allowed.

  • align-content property with values flex-start, flex-end, center, space-between, space-around, stretch

  • align-items property with values stretch, flex-start, flex-end, center, baseline

  • align-self property with values stretch, flex-start, flex-end, center, baseline (same as align-items values)

  • flex property with space-separated list of 1 flex-grow value, 1 flex-shrink value, and 1 flex-basis value (only flex-grow is required)

  • flex-basis property with numerical values with a unit or percentage or auto, fill, max-content, min-content, fit-content, content

  • flex-direction property with values row, row-reverse, column, column-reverse

  • flex-flow property with space-separated list of 1 flex-direction value and 1 flex-wrap value, e.g. flex-flow: row wrap

  • flex-grow property with unit-less whole number (i.e. no negatives) values, e.g. flex-grow: 4

  • flex-shrink property with unit-less whole number values, e.g. flex-shrink: 1

  • flex-wrap property with values nowrap, wrap, wrap-reverse

  • justify-content property with values flex-start, flex-end, center, space-between, space-around, space-evenly

  • order property with unit-less integer values, e.g. order: -2

Note that there's no need to actually check that the user is putting flex-direction: row instead of flex-direction: 7 or flex-direction: banana, though – we don't do that with most values unless we want to specifically forbid something (e.g. a certain type of positioning in work skins). We're not making sure users are writing working CSS; we're just sanitizing things to make sure they're not pulling a little Bobby Tables on us.

Testing

Put the following into a skin and make sure that after saving, the output matches the input and you don't get any error messages. Note that this won't actually do anything useful; it's just to make sure all the values are accepted.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 div.a { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: flex-start; order: 3; flex-grow: 10; flex-shrink: 5; flex-basis: auto; align-self: stretch; } div.b { display: inline-flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; align-content: flex-end; order: -1; flex-basis: fill; align-self: flex-start; } div.c { flex-direction: column; flex-wrap: wrap-reverse; justify-content: center; align-items: flex-end; align-content: center; flex-basis: max-content; align-self: flex-end; } div.d { flex-direction: column-reverse; justify-content: space-between; align-items: center; align-content: space-between; flex-basis: min-content; align-self: center; } div.e { justify-content: space-around; align-items: baseline; align-content: space-around; flex-basis: fit-content; align-self: baseline; } div.f { justify-content: space-evenly; align-content: stretch; flex-basis: content; } div.g { flex-basis: 10%; } div.h { flex-basis: 500px; } div.i { flex-basis: 5.75rem; } div.j { flex: 1; } div.k { flex: 2 1; } div.l { flex: 3 1 max-content; } div.m { flex: 5 4 30%; } div.n { flex: 2 1 15em; } div.o { flex: 5 15%; } div.p { flex: 13 fit-content; }

You’ll also need to check the skins help file – the ? by the CSS field – and make sure the new properties are all listed.

Environment

None

Status

Assignee

Sarken

Reporter

Sarken

Roadmap

Skins

Priority

Medium

Affects versions

0.9.250

Fix versions

None

Components

BackEnd

Difficulty

Medium

Required Access Level

None

Milestone

Internal 0.9
Configure