diff --git a/frontend/src/Config/Helpers/Cards/Helpers.elm b/frontend/src/Config/Helpers/Cards/Helpers.elm index 4e5355d..4f458f2 100755 --- a/frontend/src/Config/Helpers/Cards/Helpers.elm +++ b/frontend/src/Config/Helpers/Cards/Helpers.elm @@ -264,56 +264,6 @@ cardMaker device cardable contents = ) } - cardImageMaker : String -> Element msg - cardImageMaker image = - let - mobileImageSize = - [ E.width <| px 45 - , E.height <| px 45 - ] - in - el - [ alignRight - , alignTop - , paddingEach - { top = 20 - , bottom = 0 - , left = 30 - , right = 0 - } - ] - <| - el - [ D.rounded 100 - , D.width 5 - , glowDeepDarkGrey - , D.color colourTheme.backgroundDarkGrey - , B.color colourTheme.backgroundDarkGrey - ] - <| - E.image - ([ alignRight - , alignTop - , D.rounded 100 - , clip - ] - ++ (case ( device.class, device.orientation ) of - ( Phone, Portrait ) -> - mobileImageSize - - ( Tablet, Portrait ) -> - mobileImageSize - - _ -> - [ E.width <| px 90 - , E.height <| px 90 - ] - ) - ) - { src = image - , description = "" - } - cardInner : String -> Maybe String -> List (Element msg) -> Element msg cardInner title maybeUrl elements = column @@ -392,15 +342,6 @@ cardMaker device cardable contents = Nothing ) [ cardContentMaker content - , case ( device.class, device.orientation ) of - ( Phone, Portrait ) -> - none - - ( Tablet, Portrait ) -> - none - - _ -> - cardImageMaker image ] ) url @@ -422,15 +363,6 @@ cardMaker device cardable contents = cardInner title Nothing [ cardContentMaker content - , case ( device.class, device.orientation ) of - ( Phone, Portrait ) -> - none - - ( Tablet, Portrait ) -> - none - - _ -> - cardImageMaker image ] cardWithNoImage : String -> List (Element msg) -> Element msg diff --git a/frontend/src/Config/Style/Images.elm b/frontend/src/Config/Style/Images.elm index a28477b..ca8f4e1 100644 --- a/frontend/src/Config/Style/Images.elm +++ b/frontend/src/Config/Style/Images.elm @@ -37,5 +37,8 @@ imageSizer size = "Medium" -> 45 - _ -> + "Smallish" -> 35 + + _ -> + 28 diff --git a/frontend/src/Pages/Debate/Cucklist.elm b/frontend/src/Pages/Debate/Cucklist.elm index da2b336..0712649 100755 --- a/frontend/src/Pages/Debate/Cucklist.elm +++ b/frontend/src/Pages/Debate/Cucklist.elm @@ -152,7 +152,7 @@ contentList device cuck = [ alignRight , alignTop , paddingEach - { top = 0 + { top = 3 , right = 10 , bottom = 0 , left = 0 @@ -164,13 +164,13 @@ contentList device cuck = [ row [ width fill ] [ case ( device.class, device.orientation ) of ( Phone, Portrait ) -> - image "Small" + image "Smallish" ( Tablet, Portrait ) -> - image "Small" + image "Smallish" _ -> - image "Fatty" + image "Medium" , column [ width fill , spacing 3 diff --git a/frontend/src/Pages/Interviews.elm b/frontend/src/Pages/Interviews.elm index 90a0d5a..c8171ee 100755 --- a/frontend/src/Pages/Interviews.elm +++ b/frontend/src/Pages/Interviews.elm @@ -13,6 +13,7 @@ import Config.Helpers.Format import Config.Helpers.Headers.Helpers exposing (..) import Config.Helpers.Headers.Records exposing (interviewHeader) import Config.Helpers.Headers.Types as R exposing (..) +import Config.Helpers.ImageFolders as M exposing (..) import Config.Helpers.Response exposing ( pageList @@ -36,6 +37,7 @@ import Config.Pages.Interviews.Records.SigmaNutritionRadio exposing (sigmaNutrit import Config.Pages.Interviews.Records.StrenuousLifePodcast exposing (strenuousLifePodcast) import Config.Pages.Interviews.Types exposing (..) import Config.Style.Colour exposing (colourTheme) +import Config.Style.Images exposing (imageSquareMaker) import Config.Style.Transitions exposing ( hoverFontDarkOrange @@ -143,7 +145,7 @@ interviewList device = [ [ headerMaker (R.Interviews interviewHeader) ] , List.map (\interview -> - cardMaker device (C.Interview interview) (contentList interview) + cardMaker device (C.Interview interview) (contentList device interview) ) [ sigmaNutritionRadio , markBellsPowerProject @@ -158,10 +160,67 @@ interviewList device = ] -contentList : Interview -> List (Element msg) -contentList interview = - [ appearanceTitle interview - , appearanceMaker interview +contentList : Device -> Interview -> List (Element msg) +contentList device interview = + let + image : String -> Element msg + image size = + el + [ alignLeft + , alignTop + , paddingEach + { top = 0 + , right = 8 + , bottom = 0 + , left = 0 + } + ] + <| + imageSquareMaker device (imagePathMaker M.Interviews interview.interviewImage) True size + in + [ row + [ paddingEach + { top = 3 + , right = 0 + , bottom = 0 + , left = 0 + } + ] + [ case ( device.class, device.orientation ) of + ( Phone, Portrait ) -> + image "Smallish" + + ( Tablet, Portrait ) -> + image "Smallish" + + _ -> + image "Medium" + , column + [ width fill + ] + [ socialMaker interview + , appearanceTitle interview + ] + ] + , el + [ paddingEach + { top = 0 + , right = 0 + , bottom = 0 + , left = + case ( device.class, device.orientation ) of + ( Phone, Portrait ) -> + 5 + + ( Tablet, Portrait ) -> + 5 + + _ -> + 55 + } + ] + <| + appearanceMaker interview ] @@ -173,8 +232,7 @@ socialMaker interview = , F.bold , headerFontSizeSmall ] - [ text "Social: " - , newTabLink + [ newTabLink [ paragraphFontSize , F.color colourTheme.textLightOrange ] @@ -203,7 +261,7 @@ appearanceTitle interview = appearanceMaker : Interview -> Element msg appearanceMaker interview = - column [ spacing 15, width fill ] <| + column [ spacing 10, width fill ] <| List.map2 (\x y -> makeAppearance x y) interview.interviewAppearances (List.range 1 (List.length interview.interviewAppearances)) @@ -218,12 +276,12 @@ makeAppearance appearanceEntry index = <| row [ E.width fill - , spacing 5 + , spacing 3 ] [ el [ F.color colourTheme.textLightGrey , paragraphSpacing - , headerFontSizeSmall + , paragraphFontSize , F.bold , alignTop , F.alignRight @@ -231,8 +289,8 @@ makeAppearance appearanceEntry index = <| text (String.fromInt index ++ ". ") , column - [ spacing 8 - , width fill + [ width fill + , spacing 3 ] [ episodeMaker appearanceEntry , experienceMaker appearanceEntry @@ -383,7 +441,7 @@ subjectMaker appearanceEntry = subjectList : Appearance -> Element msg subjectList appearanceEntry = column - [ spacing 8 + [ spacing 5 , width fill , paddingEach { top = 0