feat: started working on responsiveness

frontend/src/Pages/Interviews.elm

@@ -3,6 +3,7 @@ module Pages.Interviews 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 (..)
@@ -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 = interviewsName}
+    Layouts.Navbar { currentRoute = interviewsName }
 
 
 
@@ -93,28 +94,76 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
-view model =
+view : Shared.Model -> Model -> View Msg
+view shared model =
     { title = interviewsName
     , attributes = []
-    , element = interviewContainer
+    , element = interviewContainer shared.device
     }
 
 
-interviewContainer : Element msg
-interviewContainer =
-    topLevelContainer interviewList
+interviewContainer : Device -> Element msg
+interviewContainer device =
+    topLevelContainer (interviewList device)
 
 
-interviewList : Element msg
-interviewList =
+interviewList : Device -> Element msg
+interviewList 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
                 [ interviewHeader ]
-            , List.map interviewMaker
+            , (case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    List.map interviewMakerMobile
+
+                ( Phone, Landscape ) ->
+                    List.map interviewMakerMobile
+
+                ( Tablet, Portrait ) ->
+                    List.map interviewMakerMobile
+
+                ( Tablet, Landscape ) ->
+                    List.map interviewMakerMobile
+
+                ( Desktop, Portrait ) ->
+                    List.map interviewMaker
+
+                ( Desktop, Landscape ) ->
+                    List.map interviewMaker
+
+                ( BigDesktop, Portrait ) ->
+                    List.map interviewMaker
+
+                ( BigDesktop, Landscape ) ->
+                    List.map interviewMaker
+              )
                 [ sigmaNutritionRadio
                 , markBellsPowerProject
                 , foolproofMastery