Screen size tweak

This commit is contained in:
2024-11-02 20:00:39 +10:00
parent 8195dbe1f1
commit f113c2268b
6 changed files with 49 additions and 12 deletions

View File

@@ -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

View File

@@ -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"
}

View File

@@ -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 []
]

View File

@@ -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

View File

@@ -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;

View File

@@ -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"}
{"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"}