diff --git a/client/src/elm/ManyDecks/Pages/Decks/Edit/CallEditor.elm b/client/src/elm/ManyDecks/Pages/Decks/Edit/CallEditor.elm index e47a3d3..a6d9194 100644 --- a/client/src/elm/ManyDecks/Pages/Decks/Edit/CallEditor.elm +++ b/client/src/elm/ManyDecks/Pages/Decks/Edit/CallEditor.elm @@ -434,16 +434,30 @@ viewLine wrap model line = clusterAtoms : List ( a, Atom ) -> List ( ( a, Atom ), List ( a, Atom ) ) clusterAtoms line = let + ifBroken c = + if c == ' ' then + False + + else + True + isCluster ( _, a ) ( _, b ) = case a of Letter c _ -> case b of Letter _ _ -> - if c == ' ' then - False + ifBroken c - else - True + Slot _ _ -> + ifBroken c + + _ -> + False + + Slot _ _ -> + case b of + Letter c _ -> + ifBroken c _ -> False @@ -461,7 +475,18 @@ viewClusters v ( single, rest ) = v single _ -> - Html.span [] (single :: rest |> List.map v) + let + content = + single :: rest + + attrs = + if content |> List.any ((\( _, a ) -> a) >> isSlot) then + [ HtmlA.class "affixed-slot" ] + + else + [] + in + Html.span attrs (content |> List.map v) viewAtom : (Msg -> msg) -> Model -> ( Int, Atom ) -> Html msg diff --git a/client/src/scss/cards/_card.scss b/client/src/scss/cards/_card.scss index 47d1ec2..57f51dc 100644 --- a/client/src/scss/cards/_card.scss +++ b/client/src/scss/cards/_card.scss @@ -65,7 +65,6 @@ display: inline flex; flex-grow: 1; flex-basis: 3em; - max-width: 14em; &.filled { display: contents; @@ -74,6 +73,7 @@ &.empty { flex-grow: 1; + min-height: 1.15em; border-bottom: 0.075em solid var(--fg); margin-bottom: 0.2em; // line-height - font-size } diff --git a/client/src/scss/decks/_edit.scss b/client/src/scss/decks/_edit.scss index 8b736f2..9e7ff2e 100644 --- a/client/src/scss/decks/_edit.scss +++ b/client/src/scss/decks/_edit.scss @@ -133,11 +133,25 @@ background-color: #4285f4; } + .slot.empty { + flex-grow: 10 !important; + } + + .affixed-slot { + display: inline flex; + flex-wrap: wrap; + flex-grow: 1; + + .slot.empty { + min-width: 3em; + } + } + .spacer { display: block; flex-basis: 0; flex-grow: 1; - height: 1.2em; + height: 1.15em; } #call-input-ghost {