diff --git a/frontend/src/Debate/Helpers.elm b/frontend/src/Debate/Helpers.elm index dbdbad9..207f4c0 100755 --- a/frontend/src/Debate/Helpers.elm +++ b/frontend/src/Debate/Helpers.elm @@ -33,10 +33,10 @@ argumentMaker argument = [ cardContentSpacing [ column fieldSpacer - [ propositionMaker argument - , reductioMaker argument - , summaryMaker argument - , strengthMaker argument + [ propositionMakerDesktop argument + , reductioMakerDesktop argument + , summaryMakerDesktop argument + , strengthMakerDesktop argument , tableMaker argument , proofTreeMaker argument ] @@ -58,10 +58,10 @@ argumentMakerMobile argument = [ column fieldSpacer [ cardImageMakerMobile (argumentImage argument) - , propositionMaker argument - , reductioMaker argument - , summaryMaker argument - , strengthMaker argument + , propositionMakerMobile argument + , reductioMakerMobile argument + , summaryMakerMobile argument + , strengthMakerMobile argument , tableMaker argument , proofTreeMaker argument ] @@ -82,150 +82,222 @@ infoSpacing = E.width <| px 100 -propositionMaker : Argument -> Element msg -propositionMaker argument = +propositionMakerDesktop : Argument -> Element msg +propositionMakerDesktop argument = row [] - [ column - [ E.alignTop, E.alignLeft ] - [ paragraph - (paragraphBoldFormat - ++ [ F.size 18 - , infoSpacing - ] - ) - [ el - [ tooltip - "A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate." - ] - (text "Proposition:") - |> el [ F.color colourTheme.textLightOrange ] - ] - ] - , column - [ E.width fill, E.alignLeft ] - [ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) - [ text argument.propositionTitle - |> el - [ F.color colourTheme.textLightGrey - , F.regular - , F.size 16 - ] + [ propositionMaker + , propositionTitleMaker argument + ] + + +propositionMakerMobile : Argument -> Element msg +propositionMakerMobile argument = + column [] + [ propositionMaker + , propositionTitleMaker argument + ] + + +propositionMaker : Element msg +propositionMaker = + column + [ E.alignTop, E.alignLeft ] + [ paragraph + (paragraphBoldFormat + ++ [ F.size 18 + , infoSpacing + ] + ) + [ el + [ tooltip + "A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate." ] + (text "Proposition:") + |> el [ F.color colourTheme.textLightOrange ] ] ] -reductioMaker : Argument -> Element msg -reductioMaker argument = +propositionTitleMaker : Argument -> Element msg +propositionTitleMaker argument = + column + [ E.width fill, E.alignLeft ] + [ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) + [ text argument.propositionTitle + |> el + [ F.color colourTheme.textLightGrey + , F.regular + , F.size 16 + ] + ] + ] + + +reductioMakerDesktop : Argument -> Element msg +reductioMakerDesktop argument = case argument.propositionReductio of "" -> none reductio -> row - [ paddingEach - { top = 10 - , right = 0 - , bottom = 0 - , left = 0 - } - ] - [ column - [ E.alignTop, E.alignLeft ] - [ paragraph - (paragraphBoldFormat - ++ [ F.size 18 - , infoSpacing - ] - ) - [ el - [ tooltip - "This is the position from which the reductio ad absurdum is derived." - ] - (text "Reductio:") - |> el [ F.color colourTheme.textLightOrange ] - ] - ] - , column [ E.width fill, E.alignLeft ] - [ paragraph - (paragraphFormat - ++ [ F.size 16 - , spacing 3 - ] - ) - [ text reductio ] - ] + [] + [ reductioMaker + , reductioMakerTitle reductio ] -summaryMaker : Argument -> Element msg -summaryMaker argument = +reductioMakerMobile : Argument -> Element msg +reductioMakerMobile argument = + case argument.propositionReductio of + "" -> + none + + reductio -> + row + [] + [ reductioMaker + , reductioMakerTitle reductio + ] + + +reductioMaker : Element msg +reductioMaker = + column + [ E.alignTop, E.alignLeft ] + [ paragraph + (paragraphBoldFormat + ++ [ F.size 18 + , infoSpacing + ] + ) + [ el + [ tooltip + "This is the position from which the reductio ad absurdum is derived." + ] + (text "Reductio:") + |> el [ F.color colourTheme.textLightOrange ] + ] + ] + + +reductioMakerTitle : String -> Element msg +reductioMakerTitle reductio = + column [ E.width fill, E.alignLeft ] + [ paragraph + (paragraphFormat + ++ [ F.size 16 + , spacing 3 + ] + ) + [ text reductio ] + ] + + +summaryMakerDesktop : Argument -> Element msg +summaryMakerDesktop argument = row [] - [ column - [ E.alignTop - , E.alignLeft - ] - [ paragraph - (paragraphBoldFormat - ++ [ F.size 18 - , infoSpacing - ] - ) - [ el - [ tooltip - "The following information provides additional context and insight into the reasoning behind the argument." - ] - (text "Summary:") - |> el [ F.color colourTheme.textLightOrange ] - ] - ] - , column - [ E.width fill - , E.alignLeft - ] - [ paragraph - (paragraphBoldFormat - ++ [ F.size 18 - , spacing 3 - ] - ) - [ text argument.propositionSummary - |> el - [ F.color colourTheme.textLightGrey - , F.regular - , F.size 16 - ] + [ summaryMaker + , summaryMakerTitle argument + ] + + +summaryMakerMobile : Argument -> Element msg +summaryMakerMobile argument = + column [] + [ summaryMaker + , summaryMakerTitle argument + ] + + +summaryMaker : Element msg +summaryMaker = + column + [ E.alignTop + , E.alignLeft + ] + [ paragraph + (paragraphBoldFormat + ++ [ F.size 18 + , infoSpacing + ] + ) + [ el + [ tooltip + "The following information provides additional context and insight into the reasoning behind the argument." ] + (text "Summary:") + |> el [ F.color colourTheme.textLightOrange ] ] ] -strengthMaker : Argument -> Element msg -strengthMaker argument = +summaryMakerTitle : Argument -> Element msg +summaryMakerTitle argument = + column + [ E.width fill + , E.alignLeft + ] + [ paragraph + (paragraphBoldFormat + ++ [ F.size 18 + , spacing 3 + ] + ) + [ text argument.propositionSummary + |> el + [ F.color colourTheme.textLightGrey + , F.regular + , F.size 16 + ] + ] + ] + + +strengthMakerDesktop : Argument -> Element msg +strengthMakerDesktop argument = row [ E.width fill ] - [ column - [ E.alignTop - , E.alignLeft - ] - [ paragraph - (paragraphBoldFormat - ++ [ F.size 18 - , E.width fill - ] - ) - [ el - [ tooltip - "This represents my confidence in the soundness of the argument." - ] - (text "Confidence:") - |> el [ F.color colourTheme.textLightOrange ] - ] - ] - , barPadding - [ barMaker getConfidenceTooltip argument.argumentCertainty ] + [ strengthMaker + , strengthMakerBar argument ] +strengthMakerMobile : Argument -> Element msg +strengthMakerMobile argument = + column [ E.width fill ] + [ strengthMaker + , strengthMakerBar argument + ] + + +strengthMaker : Element msg +strengthMaker = + column + [ E.alignTop + , E.alignLeft + ] + [ paragraph + (paragraphBoldFormat + ++ [ F.size 18 + , E.width fill + ] + ) + [ el + [ tooltip + "This represents my confidence in the soundness of the argument." + ] + (text "Confidence:") + |> el [ F.color colourTheme.textLightOrange ] + ] + ] + + +strengthMakerBar : Argument -> Element msg +strengthMakerBar argument = + barPadding + [ barMaker getConfidenceTooltip argument.argumentCertainty ] + + getConfidenceTooltip : Int -> String getConfidenceTooltip num = case num of @@ -337,7 +409,7 @@ tableMaker argument = , padding 8 , E.width fill ] - (text "Definiens") + (text "Definiens")! |> el [ F.color colourTheme.textLightOrange ] , width = fill , view = @@ -376,6 +448,7 @@ formalizationMaker argument = [ centerX , F.center , spacing 3 + , E.width fill ] in List.indexedMap @@ -385,23 +458,20 @@ formalizationMaker argument = ++ [ spacing 3 , centerX , E.width fill - , paddingEach - { top = 10 - , right = 35 - , bottom = 0 - , left = 35 - } + , paddingXY 35 10 ] ) (List.indexedMap (\premiseIndex premiseWithNotation -> - column argumentFormatting + column + (argumentFormatting ++ [ E.width fill ]) [ paragraph paragraphHightlightedBoldText [ text ("P" ++ String.fromInt (premiseIndex + 1) ++ ")") , text premiseWithNotation.premise |> el [ F.color colourTheme.textLightGrey , F.regular + , E.width fill , paddingEach { top = 0 , right = 0 @@ -417,13 +487,15 @@ formalizationMaker argument = ] ) argumentEntry.premises - ++ [ column argumentFormatting + ++ [ column + (argumentFormatting ++ [ E.width fill ]) [ paragraph paragraphHightlightedBoldText [ text "C)" , text argumentEntry.conclusion |> el [ F.color colourTheme.textLightGrey , F.regular + , E.width fill , paddingEach { top = 0 , right = 0 @@ -486,25 +558,3 @@ proofTreeMaker argument = } ] ] - - -basicDivider : Element msg -basicDivider = - el - [ E.width fill - , centerX - , D.widthEach - { bottom = 1 - , top = 0 - , left = 0 - , right = 0 - } - , D.color (rgb255 200 200 200) - , paddingEach - { top = 40 - , bottom = 0 - , left = 0 - , right = 0 - } - ] - none diff --git a/frontend/src/Home/Helpers.elm b/frontend/src/Home/Helpers.elm index e44184b..202a8ac 100755 --- a/frontend/src/Home/Helpers.elm +++ b/frontend/src/Home/Helpers.elm @@ -65,7 +65,7 @@ mobileLargeHomePageImage = } -mobileLargedesktopHomePage = +mobileLargeHomePage = homePage mobileLargeHomePageImage @@ -76,5 +76,5 @@ mobileSmallHomePageImage = } -mobileSmallesktopHomePage = +mobileSmallHomePage = homePage mobileSmallHomePageImage diff --git a/frontend/src/Layouts/Navbar.elm b/frontend/src/Layouts/Navbar.elm index 3eeded5..22429a2 100755 --- a/frontend/src/Layouts/Navbar.elm +++ b/frontend/src/Layouts/Navbar.elm @@ -96,7 +96,6 @@ view { content, model, toContentMsg, props } = , height fill , B.color colourTheme.backgroundDarkGrey , E.height E.fill - , scrollbarY ] [ column [ htmlAttribute (H.style "position" "fixed") diff --git a/frontend/src/Pages/Home_.elm b/frontend/src/Pages/Home_.elm index d109402..944f106 100755 --- a/frontend/src/Pages/Home_.elm +++ b/frontend/src/Pages/Home_.elm @@ -33,7 +33,7 @@ page shared route = toLayout : Model -> Layouts.Layout Msg toLayout model = - Layouts.Navbar { } + Layouts.Navbar {} @@ -99,28 +99,26 @@ homeContainer device = homeList : Device -> Element msg homeList device = column pageListDesktop - (case ( device.class, device.orientation ) of - ( Phone, Portrait ) -> - [mobileSmallesktopHomePage] + [ case device.class of + Desktop -> + desktopHomePage - ( Phone, Landscape ) -> - [mobileSmallesktopHomePage] + BigDesktop -> + desktopHomePage - ( Tablet, Portrait ) -> - [mobileLargedesktopHomePage] + Tablet -> + case device.orientation of + Portrait -> + mobileLargeHomePage - ( Tablet, Landscape ) -> - [mobileLargedesktopHomePage] + Landscape -> + desktopHomePage - ( Desktop, Portrait ) -> - [ desktopHomePage ] + Phone -> + case device.orientation of + Portrait -> + mobileSmallHomePage - ( Desktop, Landscape ) -> - [ desktopHomePage ] - - ( BigDesktop, Portrait ) -> - [ desktopHomePage ] - - ( BigDesktop, Landscape ) -> - [ desktopHomePage ] - ) + Landscape -> + desktopHomePage + ] diff --git a/frontend/src/interop.js b/frontend/src/interop.js index 935b75a..36e9cc9 100755 --- a/frontend/src/interop.js +++ b/frontend/src/interop.js @@ -30,5 +30,5 @@ export const onReady = ({ app, env }) => { } app.ports.gotArgHeight.send(heights); - }); + });z };