11module Pages.Learning.Resource_ exposing (Model , Msg , page )
22
3+ import Css
34import Effect exposing (Effect )
45import Html.Styled as Html exposing (Html , div , span , text )
56import Html.Styled.Attributes as Attr exposing (css , href , target )
67import Layouts
8+ import LearningResources.Emojis as Emojis
79import LearningResources.Types as LearningResources
810import Page exposing (Page )
911import Route exposing (Route )
@@ -14,9 +16,7 @@ import Tailwind.Breakpoints as Breakpoints
1416import Tailwind.Theme as Tw
1517import Tailwind.Utilities as Tw
1618import Theming
17- import Css
1819import View exposing (View )
19- import LearningResources.Emojis as Emojis
2020
2121
2222page : Shared .Model -> Route { resource : String } -> Page Model Msg
@@ -27,9 +27,12 @@ page shared route =
2727 , subscriptions = \ _ -> Sub . none
2828 , view = view shared route. params
2929 }
30- |> Page . withLayout ( \ _ -> Layouts . Global {
31- activePage = Route . Path . Learning
32- } )
30+ |> Page . withLayout
31+ ( \ _ ->
32+ Layouts . Global
33+ { activePage = Route . Path . Learning
34+ }
35+ )
3336
3437
3538type alias Model =
@@ -59,7 +62,7 @@ view shared route _ =
5962 LearningResources . entityTagFromString route. resource
6063
6164 activeMeta =
62- activeTag
65+ activeTag
6366 |> Maybe . andThen ( \ tag -> List . filter ( \ m -> m. id == tag) db. metadata |> List . head)
6467 in
6568 { title = Maybe . map . name activeMeta |> Maybe . withDefault " Topic"
@@ -71,14 +74,11 @@ view shared route _ =
7174viewExplorerLayout : LearningResources .Database -> Maybe LearningResources .EntityTag -> String -> Html Msg
7275viewExplorerLayout db activeTag activeSlug =
7376 div [ css [ Tw . flex, Tw . max_w_7xl, Tw . mx_auto, Tw . pt_12, Tw . pb_24, Tw . gap_12 ] ]
74- [
75- div [ css [ Tw . w_64, Tw . flex_shrink_0, Tw . hidden, Breakpoints . lg [ Tw . block ] ] ]
76- [ Html . h3 [ css [ Theming . headingFont, Tw . text_xl, Tw . mb_6, Tw . border_b, Tw . border_color Tw . slate_700, Tw . pb_2 ] ]
77+ [ div [ css [ Tw . w_64, Tw . flex_shrink_0, Tw . hidden, Breakpoints . lg [ Tw . block ] ] ]
78+ [ Html . h3 [ css [ Theming . headingFont, Tw . text_xl, Tw . mb_6, Tw . border_b, Tw . border_color Tw . slate_700, Tw . pb_2 ] ]
7779 [ text " Topics" ]
7880 , viewSidebarTopicList db. metadata activeSlug
7981 ]
80-
81-
8282 , div [ css [ Tw . flex_1 ] ]
8383 [ case activeTag of
8484 Nothing ->
@@ -124,8 +124,16 @@ viewSidebarLink activeSlug meta =
124124 , Tw . px_3
125125 , Tw . rounded_lg
126126 , Tw . transition_colors
127- , if isActive then Tw . bg_color Tw . slate_800 else Tw . bg_color Tw . transparent
128- , if isActive then Tw . text_color Tw . white else Tw . text_color Tw . gray_400
127+ , if isActive then
128+ Tw . bg_color Tw . slate_800
129+
130+ else
131+ Tw . bg_color Tw . transparent
132+ , if isActive then
133+ Tw . text_color Tw . white
134+
135+ else
136+ Tw . text_color Tw . gray_400
129137 , Css . hover [ Tw . text_color Tw . white, Tw . bg_color Tw . slate_800 ]
130138 ]
131139 ]
@@ -144,7 +152,7 @@ viewTopicHeader maybeMeta =
144152 [ div [ css [ Tw . text_5xl ] ] [ text ( Emojis . emojiOrBackup meta) ]
145153 , Html . h1 [ css [ Theming . headingFont, Tw . text_4xl, Tw . font_bold ] ] [ text meta. name ]
146154 ]
147- , Html . p [ css [ Theming . bodyFont, Tw . text_xl, Tw . text_color Tw . gray_300, Tw . mb_4 ] ]
155+ , Html . p [ css [ Theming . bodyFont, Tw . text_xl, Tw . text_color Tw . gray_300, Tw . mb_4 ] ]
148156 [ text meta. description ]
149157 ]
150158
@@ -153,6 +161,7 @@ viewResourceGrid : List LearningResources.Resource -> Html Msg
153161viewResourceGrid resources =
154162 if List . isEmpty resources then
155163 div [ css [ Theming . bodyFont, Tw . text_color Tw . gray_400, Tw . italic ] ] [ text " No resources found for this topic yet." ]
164+
156165 else
157166 div [ css [ Tw . grid, Tw . grid_cols_1, Breakpoints . md [ Tw . grid_cols_2 ], Tw . gap_6 ] ]
158167 ( List . map viewResourceCard resources)
@@ -161,30 +170,23 @@ viewResourceGrid resources =
161170viewResourceCard : LearningResources .Resource -> Html Msg
162171viewResourceCard resource =
163172 Theming . cardShell [ Tw . p_6, Tw . flex, Tw . flex_col ]
164- [
165- div [ css [ Tw . flex, Tw . justify_between, Tw . items_start, Tw . mb_4 ] ]
173+ [ div [ css [ Tw . flex, Tw . justify_between, Tw . items_start, Tw . mb_4 ] ]
166174 [ Html . h3 [ css [ Theming . headingFont, Tw . text_lg ] ] [ text resource. name ]
167175 , viewPricingBadge resource. pricing
168176 ]
169-
170-
171177 , div [ css [ Tw . flex, Tw . gap_2, Tw . mb_4 ] ]
172178 ( List . map viewTypeBadge resource. type_)
173-
174-
175179 , Html . p [ css [ Theming . bodyFont, Tw . text_sm, Tw . mb_6, Tw . flex_grow ] ]
176180 [ text ( Maybe . withDefault " No description provided." resource. description) ]
177-
178-
179- , Html . a
181+ , Html . a
180182 [ Attr . href resource. url
181183 , Attr . target " _blank"
182- , css
184+ , css
183185 [ Theming . headingFont
184186 , Tw . text_color Tw . dd_pink
185187 , Css . hover [ Tw . text_color Tw . white ]
186- , Tw . transition_colors
187- ]
188+ , Tw . transition_colors
189+ ]
188190 ]
189191 [ text " Read more ->" ]
190192 ]
@@ -235,4 +237,4 @@ viewPricingBadge pricing =
235237 , Tw . rounded_md
236238 ]
237239 ]
238- [ text ( paid. model ++ " : $" ++ String . fromFloat paid. amount) ]
240+ [ text ( paid. model ++ " : $" ++ String . fromFloat paid. amount) ]
0 commit comments