upRootNutrition/website
1
0
Fork 0
mirror of https://gitlab.com/upRootNutrition/website.git synced 2025-06-16 04:25:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into 'main'

Browse source 
feat: arg expansions working, lez go ma nigga

See merge request BRBWaffles/website!2
This commit is contained in:
Nick Hiebert 2024-11-26 03:24:06 +00:00
commit a220b0d9c1
6 changed files with 167 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/elm.json
View file

@ -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": {

133
frontend/src/Debate/Helpers.elm
View file

@ -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
(if isNothing argMakerInput.maybeHeight then
[ E.htmlAttribute (id <| "arg" ++ String.fromInt argMakerInput.index) ]
else
[]
)
[ titleMaker argMakerInput
, 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
-- ]
-- )
(case argMakerInput.maybeHeight of
Just h ->
[ B.color colourTheme.cardBackground
, clip
, transitionStyle
, height <|
px <|
if argMakerInput.isExpanded then
h
else
0
]
Nothing ->
[ transparent True ]
)
[ propositionMaker argument isArgumentExpanded
, reductioMaker argument isArgumentExpanded
, summaryMaker argument isArgumentExpanded
, strengthMaker argument isArgumentExpanded
, tableMaker argument isArgumentExpanded
, proofTreeMaker argument isArgumentExpanded
]
<|
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
[ roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 } ]
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"
}
]

88
frontend/src/Pages/Arguments.elm
View file

@ -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 =
case msg of
ToggleExpandArg index ->
( case getAt index model.argHeights of
Nothing ->
model
Debug.log (Debug.toString model.argHeights) <|
case msg of
GotArgHeight argHeights ->
( { model | argHeights = argHeights }, Effect.none )
Just elHeight ->
{ model | argHeights = setAt index elHeight model.argHeights }
, Effect.sendCmd <| Ports.getArgHeight ()
)
ToggleExpandArg index ->
( case getAt index model.argExpansions of
Nothing ->
model
-- SUBSCRIPTIONS
Just isExpanded ->
{ model
| argExpansions =
setAt index
(not isExpanded)
model.argExpansions
}
, Effect.sendCmd <| Ports.getArgHeight <| List.length model.argHeights
)
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
gotArgHeight GotArgHeight
@ -156,14 +171,39 @@ debateContainer shared model =
debateList : Model -> Element Msg
debateList model =
column
pageList
let
argColumn : Bool -> Element Msg
argColumn isHidden =
column
-- (explain Debug.todo ::
[ padding 30
, spacing 10
]
<|
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.map2 (argumentMaker ToggleExpandArg model.argHeights)
argumentList
<|
List.range 0 <|
List.length model.argHeights
argColumn False
argumentList : List Argument

6
frontend/src/Ports.elm
View file

@ -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

32
frontend/src/interop.js
View file

@ -3,10 +3,10 @@
// The value returned here will be passed as flags
// into your `Shared.init` function.
export const flags = ({ env }) => {
return {
height: window.innerHeight,
width: window.innerWidth
}
return {
height: window.innerHeight,
width: window.innerWidth
}
}
// This is called AFTER your Elm app starts up
@ -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`);
} else {
console.error('Element not found.');
if (element) {
heights.push(element.offsetHeight);
} else {
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);
});
};

7
parts/config/devshells.nix
View file

@ -21,6 +21,13 @@
elm-review
elm-test
;
inherit
(pkgs.nodePackages)
"@commitlint/config-conventional"
npm
typescript-language-server
;
};
};
};