feat: started working on responsiveness

frontend/src/Pages/Services.elm

@@ -3,6 +3,7 @@ module Pages.Services exposing (Model, Msg, page)
 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 Effect exposing (Effect)
 import Element exposing (..)
@@ -29,7 +30,7 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
         |> Page.withLayout toLayout
 
@@ -86,28 +87,76 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
-view model =
+view : Shared.Model -> Model -> View Msg
+view shared model =
     { title = servicesName
     , attributes = []
-    , element = servicesContainer
+    , element = servicesContainer shared.device
     }
 
 
-servicesContainer : Element msg
-servicesContainer =
-    topLevelContainer servicesList
+servicesContainer : Device -> Element msg
+servicesContainer device =
+    topLevelContainer (servicesList device)
 
 
-servicesList : Element msg
-servicesList =
+servicesList : Device -> Element msg
+servicesList device =
     column
-        pageList
+        (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
                 [ servicesHeader ]
-            , List.map serviceMaker
+            , (case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    List.map serviceMakerMobile
+
+                ( Phone, Landscape ) ->
+                    List.map serviceMakerMobile
+
+                ( Tablet, Portrait ) ->
+                    List.map serviceMakerMobile
+
+                ( Tablet, Landscape ) ->
+                    List.map serviceMakerMobile
+
+                ( Desktop, Portrait ) ->
+                    List.map serviceMaker
+
+                ( Desktop, Landscape ) ->
+                    List.map serviceMaker
+
+                ( BigDesktop, Portrait ) ->
+                    List.map serviceMaker
+
+                ( BigDesktop, Landscape ) ->
+                    List.map serviceMaker
+              )
                 [ servicesDebateAnalysis
                 , servicesDebateTutoring
                 , servicesNutritionScience