Skip to content

Commit

Permalink
Added responsive breakpoints.
Browse files Browse the repository at this point in the history
  • Loading branch information
@rapind
rapind committed Sep 28, 2023
1 parent e0204f6 commit ffa8c1e
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 52 deletions.
4 changes: 1 addition & 3 deletions dev.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@
</head>
<body>
<!-- <div style="padding: 20px; margin: 20px; width: 100%; height: 100px; font&#45;size: 36px; text&#45;align: center;">Website Content</div> -->
<div style="display: flex; justify-content: center; align-items: center; padding: 20px 0 20px 0;">
<div id="curlingio_results"></div>
</div>
<div id="curlingio_results"></div>
<script>
var scoring = Elm.Results.init(
{
Expand Down
2 changes: 1 addition & 1 deletion prod.min.js
View file

Large diffs are not rendered by default.

166 changes: 118 additions & 48 deletions src/Results.elm
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
port module Results exposing (init)

import Browser
import Browser.Dom
import Browser.Events
import Browser.Navigation as Navigation
import CustomSvg exposing (..)
Expand Down Expand Up @@ -95,8 +96,6 @@ type alias Translation =
type alias Flags =
{ host : Maybe String
, hash : Maybe String
, deviceWidth : Int
, deviceHeight : Int
, lang : Maybe String
, apiKey : Maybe String
, subdomain : Maybe String
Expand Down Expand Up @@ -391,8 +390,6 @@ decodeFlags =
Decode.succeed Flags
|> optional "host" (nullable string) Nothing
|> optional "hash" (nullable string) Nothing
|> optional "deviceWidth" int 1200
|> optional "deviceHeight" int 800
|> optional "lang" (nullable string) Nothing
|> optional "apiKey" (nullable string) Nothing
|> optional "subdomain" (nullable string) Nothing
Expand Down Expand Up @@ -960,6 +957,13 @@ deliveryToString translations delivery =

init : Decode.Value -> ( Model, Cmd Msg )
init flags_ =
let
device =
El.classifyDevice
{ width = 800
, height = 600
}
in
case Decode.decodeValue decodeFlags flags_ of
Ok flags ->
let
Expand Down Expand Up @@ -995,18 +999,13 @@ init flags_ =
Just hash ->
hash

device =
El.classifyDevice
{ width = flags.deviceWidth
, height = flags.deviceHeight
}

newModel =
Model flags newHash device False NotAsked NotAsked (ItemFilter 1 0 "" False) NotAsked NotAsked Nothing Nothing timeBetweenReloads
in
( newModel
, Cmd.batch
[ getTranslations flags
[ Task.perform InitDevice Browser.Dom.getViewport
, getTranslations flags
, Tuple.second (getItemsMaybe newModel newHash False)
, Tuple.second (getEventMaybe newModel newHash False)
, Tuple.second (getProductMaybe newModel newHash)
Expand All @@ -1016,13 +1015,7 @@ init flags_ =
Err error ->
let
flags =
Flags Nothing Nothing 1200 800 Nothing Nothing Nothing False LeaguesSection False [] Nothing Nothing []

device =
El.classifyDevice
{ width = flags.deviceWidth
, height = flags.deviceHeight
}
Flags Nothing Nothing Nothing Nothing Nothing False LeaguesSection False [] Nothing Nothing []
in
( Model flags "" device False NotAsked NotAsked (ItemFilter 1 0 "" False) NotAsked NotAsked Nothing (Just (Decode.errorToString error)) 0
, Cmd.none
Expand Down Expand Up @@ -1713,6 +1706,7 @@ reloadEnabled { flags, hash, event } =

type Msg
= NoOp
| InitDevice Browser.Dom.Viewport
| Tick Time.Posix
| SetDevice Int Int
| NavigateTo String
Expand All @@ -1737,6 +1731,16 @@ update msg model =
NoOp ->
( model, Cmd.none )

InitDevice { viewport } ->
let
device =
El.classifyDevice
{ width = round viewport.width
, height = round viewport.height
}
in
( { model | device = device }, Cmd.none )

Tick _ ->
let
newReloadIn =
Expand Down Expand Up @@ -1923,10 +1927,30 @@ view model =
viewMain =
row
[ El.htmlAttribute (class "cio__main")
, El.width El.fill
, El.width
(El.fill
|> El.maximum
(case model.device.class of
El.Phone ->
599

El.Tablet ->
1199

El.Desktop ->
1200

El.BigDesktop ->
1920
)
)
, El.padding 10
, El.centerX
, El.scrollbarX
, El.clipY
, El.inFront
(row [ El.alignRight, El.spacing 10 ]
[ el [] (viewReloadButton model)
(row [ El.alignRight, El.spacing 10, El.paddingXY 0 10 ]
[ el [ El.alignTop ] (viewReloadButton model)
, if model.flags.fullScreenToggle then
el [] (viewFullScreenButton model.fullScreen)

Expand Down Expand Up @@ -1954,10 +1978,8 @@ view model =
El.layout
[ Font.size 16
, Font.color theme.defaultText
, El.width (El.fill |> El.maximum 1024)
, El.width El.fill
, El.height El.fill
, El.scrollbarX
, El.clipY
, Font.family
[ Font.typeface "-apple-system"
, Font.typeface "BlinkMacSystemFont"
Expand Down Expand Up @@ -2034,10 +2056,11 @@ viewRoute model translations =

viewReloadButton : Model -> Element Msg
viewReloadButton model =
if reloadEnabled model then
if reloadEnabled model && model.device.class /= El.Phone then
el
[ El.paddingXY 8 4
, Font.size 14
[ El.paddingXY 8 0
, El.alignTop
, Font.size 12
, Font.color theme.secondary
, El.htmlAttribute (class "cio__reload_button")
]
Expand Down Expand Up @@ -2391,7 +2414,7 @@ viewProduct fullScreen translations product =


viewEvent : Model -> List Translation -> NestedEventRoute -> Event -> Element Msg
viewEvent { flags, scoringHilight, fullScreen } translations nestedRoute event =
viewEvent { flags, device, scoringHilight, fullScreen } translations nestedRoute event =
let
viewNavItem eventSection =
let
Expand Down Expand Up @@ -2434,7 +2457,7 @@ viewEvent { flags, scoringHilight, fullScreen } translations nestedRoute event =
, El.htmlAttribute (class "cio__event")
]
[ el [ Font.size 28, El.width El.fill, Font.medium, El.htmlAttribute (class "cio__event_name") ] (text event.name)
, row [ El.width (El.fill |> El.maximum 1024), El.htmlAttribute (class "cio__event_nav") ]
, El.wrappedRow [ El.width El.fill, El.htmlAttribute (class "cio__event_nav") ]
(List.map viewNavItem (eventSections flags.excludeEventSections event)
++ (if flags.eventId == Nothing then
[ el [ El.alignRight ]
Expand All @@ -2456,7 +2479,7 @@ viewEvent { flags, scoringHilight, fullScreen } translations nestedRoute event =
)
, case nestedRoute of
DetailsRoute ->
viewDetails translations event
viewDetails device translations event

RegistrationsRoute ->
viewRegistrations translations event.registrations
Expand Down Expand Up @@ -2494,15 +2517,15 @@ viewEvent { flags, scoringHilight, fullScreen } translations nestedRoute event =
StagesRoute ->
case List.head event.stages of
Just stage ->
viewStages translations event stage
viewStages device translations event stage

Nothing ->
viewNoDataForRoute translations

StageRoute id ->
case List.Extra.find (\s -> s.id == id) event.stages of
Just stage ->
viewStages translations event stage
viewStages device translations event stage

Nothing ->
viewNoDataForRoute translations
Expand All @@ -2526,8 +2549,8 @@ viewEvent { flags, scoringHilight, fullScreen } translations nestedRoute event =
]


viewDetails : List Translation -> Event -> Element Msg
viewDetails translations event =
viewDetails : Device -> List Translation -> Event -> Element Msg
viewDetails device translations event =
row [ El.spacing 20, El.htmlAttribute (class "cio__event_details") ]
[ column [ El.spacing 20, El.width El.fill, El.alignTop ]
[ case ( event.description, event.summary ) of
Expand Down Expand Up @@ -2556,7 +2579,7 @@ viewDetails translations event =

_ ->
El.none
, row [ El.width El.fill, El.spacing 30 ]
, row [ El.width El.fill, El.spacing 20 ]
[ column [ El.width El.fill, El.spacing 10, El.htmlAttribute (class "cio__event_starts_on") ]
[ el [ Font.bold ] (text (translate translations "starts_on"))
, el [] (text event.startsOn)
Expand All @@ -2566,7 +2589,7 @@ viewDetails translations event =
, el [] (text event.endsOn)
]
]
, row [ El.width El.fill, El.spacing 30 ]
, row [ El.width El.fill, El.spacing 20 ]
[ column [ El.width El.fill, El.spacing 10, El.htmlAttribute (class "cio__event_registration_opens_at") ]
[ el [ Font.bold ] (text (translate translations "registration_opens_at"))
, el [] (text (Maybe.withDefault "" event.registrationOpensAt))
Expand All @@ -2576,7 +2599,7 @@ viewDetails translations event =
, el [] (text (Maybe.withDefault "" event.registrationClosesAt))
]
]
, row [ El.width El.fill, El.spacing 30 ]
, row [ El.width El.fill, El.spacing 20 ]
[ column [ El.width El.fill, El.spacing 10, El.htmlAttribute (class "cio__event_team_restriction") ]
[ el [ Font.bold ] (text (translate translations "team_restriction"))
, el [] (text event.teamRestriction)
Expand All @@ -2597,7 +2620,11 @@ viewDetails translations event =
]
, case event.sponsor of
Just sponsor ->
viewSponsor sponsor
if device.class == El.Phone then
El.none

else
viewSponsor sponsor

Nothing ->
El.none
Expand Down Expand Up @@ -3045,8 +3072,8 @@ viewTeams translations event =
)


viewStages : List Translation -> Event -> Stage -> Element Msg
viewStages translations event onStage =
viewStages : El.Device -> List Translation -> Event -> Stage -> Element Msg
viewStages device translations event onStage =
let
teams =
teamsWithGames event.teams onStage.games
Expand Down Expand Up @@ -3113,48 +3140,84 @@ viewStages translations event onStage =

teamColumn =
Just
{ header = tableHeader "team"
{ header = tableHeader " "
, width = El.fill
, view =
\i teamResult ->
let
teamName =
if device.class == El.Phone then
teamResult.team.shortName

else
teamResult.team.name
in
tableCell i
(if teamHasDetails teamResult.team then
button
[ Font.color theme.primary, El.focused [ Background.color theme.transparent ] ]
{ onPress = Just (NavigateTo (teamUrl event.id teamResult.team))
, label = text teamResult.team.name
, label = text teamName
}

else
text teamResult.team.name
text teamName
)
}

gamesColumn =
Just
{ header = tableHeader "games"
{ header =
tableHeader
(if device.class == El.Phone then
"G"

else
"games"
)
, width = El.fill
, view = \i teamResult -> tableCell i (text (String.fromInt teamResult.gamesPlayed))
}

winsColumn =
Just
{ header = tableHeader "wins"
{ header =
tableHeader
(if device.class == El.Phone then
"W"

else
"wins"
)
, width = El.fill
, view = \i teamResult -> tableCell i (text (String.fromInt teamResult.wins))
}

lossesColumn =
Just
{ header = tableHeader "losses"
{ header =
tableHeader
(if device.class == El.Phone then
"L"

else
"losses"
)
, width = El.fill
, view = \i teamResult -> tableCell i (text (String.fromInt teamResult.losses))
}

tiesColumn =
if hasTies then
Just
{ header = tableHeader "ties"
{ header =
tableHeader
(if device.class == El.Phone then
"T"

else
"ties"
)
, width = El.fill
, view = \i teamResult -> tableCell i (text (String.fromInt teamResult.ties))
}
Expand All @@ -3165,7 +3228,14 @@ viewStages translations event onStage =
pointsColumn =
if hasPoints then
Just
{ header = tableHeader "points"
{ header =
tableHeader
(if device.class == El.Phone then
"P"

else
"points"
)
, width = El.fill
, view = \i teamResult -> tableCell i (text (String.fromFloat teamResult.points))
}
Expand Down

0 comments on commit ffa8c1e

Please sign in to comment.