mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 04:25:11 -05:00
Merge branch 'main' into 'main'
feat: arg expansions working, lez go ma nigga See merge request BRBWaffles/website!2
This commit is contained in:
Nick Hiebert
commit
a220b0d9c1
6 changed files with 167 additions and 104 deletions
|
|
@ -14,6 +14,7 @@
|
|||
"elm/json": "1.1.3",
|
||||
"elm/url": "1.0.0",
|
||||
"elm-community/list-extra": "8.7.0",
|
||||
"elm-community/maybe-extra": "5.3.0",
|
||||
"mdgriffith/elm-ui": "1.1.8"
|
||||
},
|
||||
"indirect": {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import Html.Attributes exposing (form, id)
|
|||
import Layouts
|
||||
import List.Extra exposing (..)
|
||||
import Maybe exposing (withDefault)
|
||||
import Maybe.Extra exposing (isNothing)
|
||||
import Page exposing (Page)
|
||||
import Route exposing (Route)
|
||||
import Shared
|
||||
|
|
@ -35,47 +36,57 @@ import View exposing (View)
|
|||
-- )
|
||||
|
||||
|
||||
argumentMaker : (Int -> msg) -> List Int -> Argument -> Int -> Element msg
|
||||
argumentMaker onClickMsg argHeights argument indexExpand =
|
||||
let
|
||||
isArgumentExpanded : Int
|
||||
isArgumentExpanded =
|
||||
withDefault 0 <| getAt indexExpand argHeights
|
||||
in
|
||||
type alias ArgMakerInput msg =
|
||||
{ arg : Argument
|
||||
, index : Int
|
||||
, isExpanded : Bool
|
||||
, maybeHeight : Maybe Int
|
||||
, titleClickMsg : msg
|
||||
}
|
||||
|
||||
|
||||
argumentMaker : ArgMakerInput msg -> Element msg
|
||||
argumentMaker argMakerInput =
|
||||
column
|
||||
[ B.color colourTheme.cardBackground
|
||||
, rounded 10
|
||||
, E.width <| px 700
|
||||
, E.htmlAttribute (id <| "arg" ++ String.fromInt indexExpand)
|
||||
]
|
||||
[ titleMaker onClickMsg indexExpand argument.argumentTitle isArgumentExpanded
|
||||
, column
|
||||
([ E.width <| px 600, centerX, transitionStyle, spacing 10 ]
|
||||
-- ++ (if not isArgumentExpanded then
|
||||
-- [ transitionStyle
|
||||
-- -- , height <| px 0
|
||||
-- , roundEach { topLeft = 0, topRight = 0, bottomRight = 10, bottomLeft = 10 }
|
||||
-- , clip
|
||||
-- ]
|
||||
-- else
|
||||
-- [ transitionStyle
|
||||
-- , height <| px 300
|
||||
-- , clip
|
||||
-- ]
|
||||
-- )
|
||||
(if isNothing argMakerInput.maybeHeight then
|
||||
[ E.htmlAttribute (id <| "arg" ++ String.fromInt argMakerInput.index) ]
|
||||
|
||||
else
|
||||
[]
|
||||
)
|
||||
[ propositionMaker argument isArgumentExpanded
|
||||
, reductioMaker argument isArgumentExpanded
|
||||
, summaryMaker argument isArgumentExpanded
|
||||
, strengthMaker argument isArgumentExpanded
|
||||
, tableMaker argument isArgumentExpanded
|
||||
, proofTreeMaker argument isArgumentExpanded
|
||||
[ titleMaker argMakerInput
|
||||
, column
|
||||
(case argMakerInput.maybeHeight of
|
||||
Just h ->
|
||||
[ B.color colourTheme.cardBackground
|
||||
, clip
|
||||
, transitionStyle
|
||||
, height <|
|
||||
px <|
|
||||
if argMakerInput.isExpanded then
|
||||
h
|
||||
|
||||
else
|
||||
0
|
||||
]
|
||||
|
||||
Nothing ->
|
||||
[ transparent True ]
|
||||
)
|
||||
<|
|
||||
List.map (\x -> x argMakerInput)
|
||||
[ propositionMaker
|
||||
, reductioMaker
|
||||
, summaryMaker
|
||||
, strengthMaker
|
||||
, tableMaker
|
||||
, proofTreeMaker
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
titleMaker : (Int -> msg) -> Int -> String -> Int -> Element msg
|
||||
titleMaker onClickMsg indexExpand title argHeight =
|
||||
titleMaker : ArgMakerInput msg -> Element msg
|
||||
titleMaker argMakerInput =
|
||||
paragraph
|
||||
(paragraphBoldFormat
|
||||
++ [ F.size 20
|
||||
|
|
@ -93,21 +104,21 @@ titleMaker onClickMsg indexExpand title argHeight =
|
|||
, F.color colourTheme.nonHighlightedText
|
||||
, D.color colourTheme.highlightTextHover
|
||||
]
|
||||
, V.onClick <| onClickMsg indexExpand
|
||||
, V.onClick <| argMakerInput.titleClickMsg
|
||||
]
|
||||
++ (if argHeight == 30 then
|
||||
[ rounded 10 ]
|
||||
++ (case argMakerInput.maybeHeight of
|
||||
Nothing ->
|
||||
[ transparent True ]
|
||||
|
||||
else
|
||||
Just _ ->
|
||||
[ roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 } ]
|
||||
)
|
||||
)
|
||||
[ text title
|
||||
]
|
||||
[ text argMakerInput.arg.argumentTitle ]
|
||||
|
||||
|
||||
propositionMaker : Argument -> Int -> Element msg
|
||||
propositionMaker argument argHeight =
|
||||
propositionMaker : ArgMakerInput msg -> Element msg
|
||||
propositionMaker argMakerInput =
|
||||
row
|
||||
[ paddingEach { top = 10, right = 0, bottom = 0, left = 0 }
|
||||
]
|
||||
|
|
@ -124,7 +135,7 @@ propositionMaker argument argHeight =
|
|||
, column
|
||||
[ E.width fill, E.alignLeft ]
|
||||
[ paragraph (paragraphBoldFormat ++ [ F.size 18 ])
|
||||
[ text argument.propositionTitle
|
||||
[ text argMakerInput.arg.propositionTitle
|
||||
|> el
|
||||
[ F.color colourTheme.nonHighlightedText
|
||||
, F.regular
|
||||
|
|
@ -135,9 +146,9 @@ propositionMaker argument argHeight =
|
|||
]
|
||||
|
||||
|
||||
reductioMaker : Argument -> Int -> Element msg
|
||||
reductioMaker argument argHeight =
|
||||
case argument.propositionReductio of
|
||||
reductioMaker : ArgMakerInput msg -> Element msg
|
||||
reductioMaker argMakerInput =
|
||||
case argMakerInput.arg.propositionReductio of
|
||||
"" ->
|
||||
none
|
||||
|
||||
|
|
@ -156,8 +167,8 @@ reductioMaker argument argHeight =
|
|||
]
|
||||
|
||||
|
||||
summaryMaker : Argument -> Int -> Element msg
|
||||
summaryMaker argument argHeight =
|
||||
summaryMaker : ArgMakerInput msg -> Element msg
|
||||
summaryMaker argMakerInput =
|
||||
row []
|
||||
[ column
|
||||
[ E.alignTop, E.alignLeft ]
|
||||
|
|
@ -173,7 +184,7 @@ summaryMaker argument argHeight =
|
|||
, spacing 3
|
||||
]
|
||||
)
|
||||
[ text argument.propositionSummary
|
||||
[ text argMakerInput.arg.propositionSummary
|
||||
|> el
|
||||
[ F.color colourTheme.nonHighlightedText
|
||||
, F.regular
|
||||
|
|
@ -184,8 +195,8 @@ summaryMaker argument argHeight =
|
|||
]
|
||||
|
||||
|
||||
strengthMaker : Argument -> Int -> Element msg
|
||||
strengthMaker argument argHeight =
|
||||
strengthMaker : ArgMakerInput msg -> Element msg
|
||||
strengthMaker argMakerInput =
|
||||
let
|
||||
barMaker : Int -> Element msg
|
||||
barMaker num =
|
||||
|
|
@ -254,12 +265,12 @@ strengthMaker argument argHeight =
|
|||
]
|
||||
, column
|
||||
[ E.width fill, E.alignLeft, centerY ]
|
||||
[ barMaker argument.argumentCertainty ]
|
||||
[ barMaker argMakerInput.arg.argumentCertainty ]
|
||||
]
|
||||
|
||||
|
||||
tableMaker : Argument -> Int -> Element msg
|
||||
tableMaker argument argHeight =
|
||||
tableMaker : ArgMakerInput msg -> Element msg
|
||||
tableMaker argMakerInput =
|
||||
let
|
||||
formalizationMaker : List (Element msg)
|
||||
formalizationMaker =
|
||||
|
|
@ -300,7 +311,7 @@ tableMaker argument argHeight =
|
|||
]
|
||||
)
|
||||
)
|
||||
argument.argumentFormalization
|
||||
argMakerInput.arg.argumentFormalization
|
||||
in
|
||||
column [ centerX, E.width <| px 600 ]
|
||||
[ wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill ])
|
||||
|
|
@ -311,7 +322,7 @@ tableMaker argument argHeight =
|
|||
, D.color colourTheme.nonHighlightedDarkText
|
||||
, clip
|
||||
]
|
||||
{ data = argument.definitionTable
|
||||
{ data = argMakerInput.arg.definitionTable
|
||||
, columns =
|
||||
[ { header =
|
||||
el
|
||||
|
|
@ -368,8 +379,8 @@ tableMaker argument argHeight =
|
|||
]
|
||||
|
||||
|
||||
proofTreeMaker : Argument -> Int -> Element msg
|
||||
proofTreeMaker argument argHeight =
|
||||
proofTreeMaker : ArgMakerInput msg -> Element msg
|
||||
proofTreeMaker argMakerInput =
|
||||
row [ paddingEach { top = 10, right = 0, bottom = 10, left = 0 }, centerX, E.width fill ]
|
||||
[ column [ E.alignRight ]
|
||||
[ newTabLink
|
||||
|
|
@ -391,7 +402,7 @@ proofTreeMaker argument argHeight =
|
|||
]
|
||||
]
|
||||
)
|
||||
{ url = argument.proofLink
|
||||
{ url = argMakerInput.arg.proofLink
|
||||
, label = text "Proof Tree"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ import Html.Attributes as H exposing (style, title, wrap)
|
|||
import Layouts
|
||||
import List.Extra as L exposing (..)
|
||||
import Page exposing (Page)
|
||||
import Ports
|
||||
import Ports exposing (gotArgHeight)
|
||||
import Route exposing (Route)
|
||||
import Shared
|
||||
import View exposing (View)
|
||||
|
|
@ -91,12 +91,21 @@ toLayout model =
|
|||
|
||||
|
||||
type alias Model =
|
||||
{ argHeights : List Int }
|
||||
{ argExpansions : List Bool
|
||||
, argHeights : List Int
|
||||
}
|
||||
|
||||
|
||||
init : () -> ( Model, Effect Msg )
|
||||
init () =
|
||||
( { argHeights = List.repeat (List.length argumentList) 30 }
|
||||
let
|
||||
numArgs : Int
|
||||
numArgs =
|
||||
List.length argumentList
|
||||
in
|
||||
( { argExpansions = List.repeat numArgs False
|
||||
, argHeights = List.repeat numArgs 0
|
||||
}
|
||||
, Effect.none
|
||||
)
|
||||
|
||||
|
|
@ -106,30 +115,36 @@ init () =
|
|||
|
||||
|
||||
type Msg
|
||||
= ToggleExpandArg Int
|
||||
= GotArgHeight (List Int)
|
||||
| ToggleExpandArg Int
|
||||
|
||||
|
||||
update : Msg -> Model -> ( Model, Effect Msg )
|
||||
update msg model =
|
||||
Debug.log (Debug.toString model.argHeights) <|
|
||||
case msg of
|
||||
GotArgHeight argHeights ->
|
||||
( { model | argHeights = argHeights }, Effect.none )
|
||||
|
||||
ToggleExpandArg index ->
|
||||
( case getAt index model.argHeights of
|
||||
( case getAt index model.argExpansions of
|
||||
Nothing ->
|
||||
model
|
||||
|
||||
Just elHeight ->
|
||||
{ model | argHeights = setAt index elHeight model.argHeights }
|
||||
, Effect.sendCmd <| Ports.getArgHeight ()
|
||||
Just isExpanded ->
|
||||
{ model
|
||||
| argExpansions =
|
||||
setAt index
|
||||
(not isExpanded)
|
||||
model.argExpansions
|
||||
}
|
||||
, Effect.sendCmd <| Ports.getArgHeight <| List.length model.argHeights
|
||||
)
|
||||
|
||||
|
||||
|
||||
-- SUBSCRIPTIONS
|
||||
|
||||
|
||||
subscriptions : Model -> Sub Msg
|
||||
subscriptions model =
|
||||
Sub.none
|
||||
gotArgHeight GotArgHeight
|
||||
|
||||
|
||||
|
||||
|
|
@ -156,14 +171,39 @@ debateContainer shared model =
|
|||
|
||||
debateList : Model -> Element Msg
|
||||
debateList model =
|
||||
let
|
||||
argColumn : Bool -> Element Msg
|
||||
argColumn isHidden =
|
||||
column
|
||||
pageList
|
||||
-- (explain Debug.todo ::
|
||||
[ padding 30
|
||||
, spacing 10
|
||||
]
|
||||
<|
|
||||
List.map2 (argumentMaker ToggleExpandArg model.argHeights)
|
||||
List.map argumentMaker <|
|
||||
List.map4
|
||||
(\w x y z ->
|
||||
{ arg = w
|
||||
, index = x
|
||||
, isExpanded = y
|
||||
, maybeHeight =
|
||||
if isHidden then
|
||||
Nothing
|
||||
|
||||
else
|
||||
z
|
||||
, titleClickMsg = ToggleExpandArg x
|
||||
}
|
||||
)
|
||||
argumentList
|
||||
(List.range 0 <| List.length model.argHeights)
|
||||
model.argExpansions
|
||||
(List.map Just model.argHeights)
|
||||
in
|
||||
el
|
||||
[ behindContent <| argColumn True ]
|
||||
<|
|
||||
List.range 0 <|
|
||||
List.length model.argHeights
|
||||
argColumn False
|
||||
|
||||
|
||||
argumentList : List Argument
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
port module Ports exposing (getArgHeight)
|
||||
port module Ports exposing (getArgHeight, gotArgHeight)
|
||||
|
||||
|
||||
port getArgHeight : () -> Cmd msg
|
||||
port getArgHeight : Int -> Cmd msg
|
||||
|
||||
|
||||
port gotArgHeight : (() -> msg) -> Sub msg
|
||||
port gotArgHeight : (List Int -> msg) -> Sub msg
|
||||
|
|
|
|||
|
|
@ -15,16 +15,20 @@ export const flags = ({ env }) => {
|
|||
// to your Elm application, or subscribe to incoming
|
||||
// messages from Elm
|
||||
export const onReady = ({ app, env }) => {
|
||||
app.ports.getArgHeight.subscribe(() => {
|
||||
app.ports.getArgHeight.subscribe((numArgs) => {
|
||||
const heights = [];
|
||||
|
||||
setTimeout(() => {
|
||||
const element = document.getElementById('arg1');
|
||||
for (let i = 0; i < numArgs; i++) {
|
||||
const element = document.getElementById(`arg${i}`);
|
||||
|
||||
if (element) {
|
||||
const height = element.offsetHeight;
|
||||
console.log(`Height of the element: ${height}px`);
|
||||
heights.push(element.offsetHeight);
|
||||
} else {
|
||||
console.error('Element not found.');
|
||||
console.error(`Element with ID 'arg${i}' not found.`);
|
||||
heights.push(null); // Add null or any placeholder for missing elements
|
||||
}
|
||||
}, 0)
|
||||
})}
|
||||
}
|
||||
|
||||
app.ports.gotArgHeight.send(heights);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,6 +21,13 @@
|
|||
elm-review
|
||||
elm-test
|
||||
;
|
||||
|
||||
inherit
|
||||
(pkgs.nodePackages)
|
||||
"@commitlint/config-conventional"
|
||||
npm
|
||||
typescript-language-server
|
||||
;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue