From f113c2268ba9f129af9611c3541f129bb04e335a Mon Sep 17 00:00:00 2001 From: Josh Date: Sat, 2 Nov 2024 20:00:39 +1000 Subject: [PATCH] Screen size tweak --- AirportAlphabetGame/Program.fs | 2 +- .../Properties/launchSettings.json | 4 +-- AirportAlphabetGame/View.fs | 3 ++- AirportAlphabetGame/sass/core.sass | 25 ++++++++++++++++--- AirportAlphabetGame/wwwroot/styles/core.css | 25 ++++++++++++++++--- .../wwwroot/styles/core.css.map | 2 +- 6 files changed, 49 insertions(+), 12 deletions(-) diff --git a/AirportAlphabetGame/Program.fs b/AirportAlphabetGame/Program.fs index 3912a5a..dc59928 100644 --- a/AirportAlphabetGame/Program.fs +++ b/AirportAlphabetGame/Program.fs @@ -44,7 +44,7 @@ module Program = use_router router use_developer_exceptions service_config ServiceConfig - url "http://0.0.0.0:8181" + url "http://0.0.0.0:5001" } run app diff --git a/AirportAlphabetGame/Properties/launchSettings.json b/AirportAlphabetGame/Properties/launchSettings.json index c012451..7d3b243 100644 --- a/AirportAlphabetGame/Properties/launchSettings.json +++ b/AirportAlphabetGame/Properties/launchSettings.json @@ -13,7 +13,7 @@ "commandName": "Project", "dotnetRunMessages": true, "launchBrowser": true, - "applicationUrl": "http://localhost:8181", + "applicationUrl": "http://localhost:5001", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } @@ -22,7 +22,7 @@ "commandName": "Project", "dotnetRunMessages": true, "launchBrowser": true, - "applicationUrl": "https://localhost:7051;http://localhost:8181", + "applicationUrl": "https://localhost:7051;http://localhost:5001", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } diff --git a/AirportAlphabetGame/View.fs b/AirportAlphabetGame/View.fs index 76837a0..5baf889 100644 --- a/AirportAlphabetGame/View.fs +++ b/AirportAlphabetGame/View.fs @@ -16,7 +16,7 @@ let index content = head [] [ meta [_name "viewport"; _content "width=device-width"] title [] [str "Have you flown the alphabet?"] - link [_rel "stylesheet" ; _href "/styles/core.css"] + link [_rel "stylesheet" ; _href "/styles/core.css?v=56"] script [_src "/scripts/htmx.min.js"] [] script [_src "/scripts/json-enc.js"] [] script [_src "/scripts/index.js"] [] @@ -88,6 +88,7 @@ let table (message) (title: string) (plaintextAirports: string) (rows: XmlNode[] ] yield! rows ] + br [] ] diff --git a/AirportAlphabetGame/sass/core.sass b/AirportAlphabetGame/sass/core.sass index c7530b3..c52983c 100644 --- a/AirportAlphabetGame/sass/core.sass +++ b/AirportAlphabetGame/sass/core.sass @@ -44,7 +44,7 @@ h1 abbr cursor: pointer - section + > section @include flex height: 100dvh width: 100dvw @@ -71,11 +71,10 @@ h1 @include flex-column flex-basis: 50% width: 100% - gap: 0.6em + gap: 0.5em section @include flex - flex-basis: 50% width: 100% > input flex-basis: 75% @@ -108,6 +107,12 @@ h1 .loading display: none + section:first-of-type + flex-basis: 70% + + section:nth-of-type(2) + flex-basis: 30% + @include mobile gap: 2em @@ -127,6 +132,17 @@ h1 width: 100% font-size: 1em + > section:first-of-type + @include flex-column + + > section:nth-of-type(2) + width: 100% + flex-basis: 25% + + label + flex-basis: 50% + height: 50% + form.htmx-request @@ -189,6 +205,7 @@ h1 th, td background-color: lightcoral color: black + @include mobile min-height: 100% h1 @@ -212,4 +229,4 @@ h1 min-width: 90dvw max-width: 90dvw white-space: normal - word-break: break-all + word-break: break-all \ No newline at end of file diff --git a/AirportAlphabetGame/wwwroot/styles/core.css b/AirportAlphabetGame/wwwroot/styles/core.css index cf173ca..6a662df 100644 --- a/AirportAlphabetGame/wwwroot/styles/core.css +++ b/AirportAlphabetGame/wwwroot/styles/core.css @@ -38,7 +38,7 @@ h1 { #pageContainer abbr { cursor: pointer; } -#pageContainer section { +#pageContainer > section { display: flex; justify-content: center; align-items: center; @@ -72,13 +72,12 @@ h1 { flex-direction: column; flex-basis: 50%; width: 100%; - gap: 0.6em; + gap: 0.5em; } #pageContainer section#input article form section { display: flex; justify-content: center; align-items: center; - flex-basis: 50%; width: 100%; } #pageContainer section#input article form section > input { @@ -114,6 +113,12 @@ h1 { #pageContainer section#input article form section .loading { display: none; } +#pageContainer section#input article form section:first-of-type { + flex-basis: 70%; +} +#pageContainer section#input article form section:nth-of-type(2) { + flex-basis: 30%; +} @media screen and (max-width: 900px) { #pageContainer section#input article { gap: 2em; @@ -133,6 +138,20 @@ h1 { width: 100%; font-size: 1em; } + #pageContainer section#input article form > section:first-of-type { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + #pageContainer section#input article form > section:nth-of-type(2) { + width: 100%; + flex-basis: 25%; + } + #pageContainer section#input article form > section:nth-of-type(2) label { + flex-basis: 50%; + height: 50%; + } } #pageContainer section#input article form.htmx-request input, #pageContainer section#input article form.htmx-request button, #pageContainer section#input article form.htmx-request label { display: none; diff --git a/AirportAlphabetGame/wwwroot/styles/core.css.map b/AirportAlphabetGame/wwwroot/styles/core.css.map index 8a83258..d34553b 100644 --- a/AirportAlphabetGame/wwwroot/styles/core.css.map +++ b/AirportAlphabetGame/wwwroot/styles/core.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../sass/core.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;;AACJ;EACI;;;AAeJ;EARI;EACA;EACA;EAQA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EA/BA;EACA;EACA;EA+BI;EACA;EACA;EACA;;AAEJ;EACI;;AAGJ;EACI;;AAEA;EA7CJ;EACA;EACA;EAIA;EAyCQ;;AAEA;EACI;EACA;EACA;;AAEJ;EAtDR;EACA;EACA;EAIA;EAkDY;EACA;EACA;;AAEA;EA5DZ;EACA;EACA;EA4DgB;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EAvEhB;EACA;EACA;EAuEoB;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAjGpB;EAiDI;IAoDQ;IACA;;EAEA;IACI;;EAEJ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;;AAKR;EACI;;AAEJ;EACI;;AAEhB;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EArIJ;EACA;EACA;EAIA;EAiIQ;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAER;EACI;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AACJ;EACI;EACA;;AAnLpB;EAyII;IA4CQ;;EACA;IACI;IACA;IACA;;EAEJ;IACI;;EAEA;AAAA;IAEI;IACA;IACA;IACA;;EAEJ;AAAA;IAEI;IACA;IACA;IACA;IACA","file":"core.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../sass/core.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;;AACJ;EACI;;;AAeJ;EARI;EACA;EACA;EAQA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EA/BA;EACA;EACA;EA+BI;EACA;EACA;EACA;;AAEJ;EACI;;AAGJ;EACI;;AAEA;EA7CJ;EACA;EACA;EAIA;EAyCQ;;AAEA;EACI;EACA;EACA;;AAEJ;EAtDR;EACA;EACA;EAIA;EAkDY;EACA;EACA;;AAEA;EA5DZ;EACA;EACA;EA4DgB;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EAtEhB;EACA;EACA;EAsEoB;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAER;EACI;;AAEJ;EACI;;AAtGhB;EAiDI;IAyDQ;IACA;;EAEA;IACI;;EAEJ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEJ;IAvHhB;IACA;IACA;IAIA;;EAoHgB;IACI;IACA;;EAEA;IACI;IACA;;;AAKZ;EACI;;AAEJ;EACI;;AAEhB;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EArJJ;EACA;EACA;EAIA;EAiJQ;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAER;EACI;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AACJ;EACI;EACA;;AAnMpB;EAyJI;IA6CQ;;EACA;IACI;IACA;IACA;;EAEJ;IACI;;EAEA;AAAA;IAEI;IACA;IACA;IACA;;EAEJ;AAAA;IAEI;IACA;IACA;IACA;IACA","file":"core.css"} \ No newline at end of file