feat: started working on responsiveness

frontend/src/Pages/Donate.elm

@@ -4,6 +4,7 @@ import Browser.Dom as Dom
 import Config.Colour as T exposing (..)
 import Config.Format as O exposing (..)
 import Config.Identity as I exposing (..)
+import Config.Response exposing (..)
 import Config.Viewport exposing (..)
 import Donate.Helpers exposing (..)
 import Donate.Methods.Cardano exposing (donateCardano)
@@ -36,14 +37,14 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
         |> Page.withLayout toLayout
 
 
 toLayout : Model -> Layouts.Layout Msg
 toLayout model =
-    Layouts.Navbar {currentRoute = donateName}
+    Layouts.Navbar { currentRoute = donateName }
 
 
 
@@ -93,26 +94,76 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
-view model =
+view : Shared.Model -> Model -> View Msg
+view shared model =
     { title = donateName
     , attributes = []
-    , element = donateContainer
+    , element = donateContainer shared.device
     }
 
 
-donateContainer : Element msg
-donateContainer =
-    topLevelContainer donateList
+donateContainer : Device -> Element msg
+donateContainer device =
+    topLevelContainer (donateList device)
 
 
-donateList : Element msg
-donateList =
-    column pageList <|
+donateList : Device -> Element msg
+donateList device =
+    column
+        (case ( device.class, device.orientation ) of
+            ( Phone, Portrait ) ->
+                pageListDesktop
+
+            ( Phone, Landscape ) ->
+                pageListDesktop
+
+            ( Tablet, Portrait ) ->
+                pageListDesktop
+
+            ( Tablet, Landscape ) ->
+                pageListDesktop
+
+            ( Desktop, Portrait ) ->
+                pageListDesktop
+
+            ( Desktop, Landscape ) ->
+                pageListDesktop
+
+            ( BigDesktop, Portrait ) ->
+                pageListDesktop
+
+            ( BigDesktop, Landscape ) ->
+                pageListDesktop
+        )
+    <|
         List.concat
             [ List.map headerMaker
                 [ donateHeader ]
-            , List.map donateMaker
+            , (case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    List.map donateMakerMobile
+
+                ( Phone, Landscape ) ->
+                    List.map donateMakerMobile
+
+                ( Tablet, Portrait ) ->
+                    List.map donateMakerMobile
+
+                ( Tablet, Landscape ) ->
+                    List.map donateMakerMobile
+
+                ( Desktop, Portrait ) ->
+                    List.map donateMaker
+
+                ( Desktop, Landscape ) ->
+                    List.map donateMaker
+
+                ( BigDesktop, Portrait ) ->
+                    List.map donateMaker
+
+                ( BigDesktop, Landscape ) ->
+                    List.map donateMaker
+              )
                 [ donateLiberaPay
                 , donatePayPal
                 , donatePatreon