bit-badger/PrayerTracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 16 Wiki Activity

Update layout style on pref page (#38)

Browse Source
This commit is contained in:
Daniel J. Summers 2022-08-14 22:27:33 -04:00
parent ae29a6c03b
commit 24f5b5a741
3 changed files with 95 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/PrayerTracker.UI/CommonFunctions.fs
View File

@ -104,7 +104,7 @@ let colorToHex (color : string) =
let radio name domId value current = let radio name domId value current =
input [ _type "radio" input [ _type "radio"
_name name _name name
_id domId if domId <> "" then _id domId
_value value _value value
if value = current then _checked ] if value = current then _checked ]

152
src/PrayerTracker.UI/SmallGroup.fs
View File

@ -370,6 +370,7 @@ let preferences (model : EditPreferences) ctx viewInfo =
|> toHtmlIds |> toHtmlIds
let fontsId = $"#{nameof model.Fonts}" let fontsId = $"#{nameof model.Fonts}"
$"{numberFields} {{ width: 3rem; }}" $"{numberFields} {{ width: 3rem; }}"
$"#{nameof model.EmailFromName} {{ width: 15rem; }}"
$"#{nameof model.EmailFromAddress} {{ width: 20rem; }}" $"#{nameof model.EmailFromAddress} {{ width: 20rem; }}"
$"{fontsId} {{ width: 40rem; }}" $"{fontsId} {{ width: 40rem; }}"
$"@media screen and (max-width: 40rem) {{ {fontsId} {{ width: 100%%; }} }}" $"@media screen and (max-width: 40rem) {{ {fontsId} {{ width: 100%%; }} }}"
@ -412,13 +413,16 @@ let preferences (model : EditPreferences) ctx viewInfo =
] ]
] ]
] ]
fieldset [] [ fieldset [ _fieldRow ] [
legend [] [ strong [] [ icon "sort"; rawText " &nbsp;"; locStr s["Request Sorting"] ] ] legend [] [ strong [] [ icon "sort"; rawText " &nbsp;"; locStr s["Request Sorting"] ] ]
radio (nameof model.RequestSort) $"{nameof model.RequestSort}_D" "D" model.RequestSort label [] [
label [ _for $"{nameof model.RequestSort}_D" ] [ locStr s["Sort by Last Updated Date"] ] radio (nameof model.RequestSort) "" "D" model.RequestSort
rawText " &nbsp; " locStr s["Sort by Last Updated Date"]
radio (nameof model.RequestSort) $"{nameof model.RequestSort}_R" "R" model.RequestSort ]
label [ _for $"{nameof model.RequestSort}_R" ] [ locStr s["Sort by Requestor Name"] ] label [] [
radio (nameof model.RequestSort) "" "R" model.RequestSort
locStr s["Sort by Requestor Name"]
]
] ]
fieldset [] [ fieldset [] [
legend [] [ strong [] [ icon "mail_outline"; rawText " &nbsp;"; locStr s["E-mail"] ] ] legend [] [ strong [] [ icon "mail_outline"; rawText " &nbsp;"; locStr s["E-mail"] ] ]
@ -450,45 +454,63 @@ let preferences (model : EditPreferences) ctx viewInfo =
legend [] [ strong [] [ icon "color_lens"; rawText " &nbsp;"; locStr s["Colors"] ]; rawText " ***" ] legend [] [ strong [] [ icon "color_lens"; rawText " &nbsp;"; locStr s["Colors"] ]; rawText " ***" ]
div [ _fieldRow ] [ div [ _fieldRow ] [
div [ _inputField ] [ div [ _inputField ] [
label [ _class "pt-center-text" ] [ locStr s["Color of Heading Lines"] ] label [] [ locStr s["Color of Heading Lines"] ]
span [] [ span [ _class "pt-radio-group" ] [
radio (nameof model.LineColorType) $"{nameof model.LineColorType}_Name" "Name" span [] [
model.LineColorType label [] [
label [ _for $"{nameof model.LineColorType}_Name" ] [ locStr s["Named Color"] ] radio (nameof model.LineColorType) $"{nameof model.LineColorType}_Name" "Name"
namedColorList (nameof model.LineColor) model.LineColor [ model.LineColorType
_id $"{nameof model.LineColor}_Select" locStr s["Named Color"]
if model.LineColor.StartsWith "#" then _disabled ] s ]
rawText "&nbsp; &nbsp; "; str (s["or"].Value.ToUpper ()) space
radio (nameof model.LineColorType) $"{nameof model.LineColorType}_RGB" "RGB" namedColorList (nameof model.LineColor) model.LineColor [
model.LineColorType _id $"{nameof model.LineColor}_Select"
label [ _for $"{nameof model.LineColorType}_RGB" ] [ locStr s["Custom Color"] ] if model.LineColor.StartsWith "#" then _disabled ] s
input [ _type "color" ]
_name (nameof model.LineColor) span [] [
_id $"{nameof model.LineColor}_Color" label [ _for $"{nameof model.LineColorType}_RGB" ] [
_value (colorToHex model.LineColor) radio (nameof model.LineColorType) $"{nameof model.LineColorType}_RGB" "RGB"
if not (model.LineColor.StartsWith "#") then _disabled ] model.LineColorType
locStr s["Custom Color"]
]
space
input [ _type "color"
_name (nameof model.LineColor)
_id $"{nameof model.LineColor}_Color"
_value (colorToHex model.LineColor)
if not (model.LineColor.StartsWith "#") then _disabled ]
]
] ]
] ]
] ]
div [ _fieldRow ] [ div [ _fieldRow ] [
div [ _inputField ] [ div [ _inputField ] [
label [ _class "pt-center-text" ] [ locStr s["Color of Heading Text"] ] label [] [ locStr s["Color of Heading Text"] ]
span [] [ span [ _class "pt-radio-group" ] [
radio (nameof model.HeadingColorType) $"{nameof model.HeadingColorType}_Name" "Name" span [] [
model.HeadingColorType label [] [
label [ _for $"{nameof model.HeadingColorType}_Name" ] [ locStr s["Named Color"] ] radio (nameof model.HeadingColorType) $"{nameof model.HeadingColorType}_Name" "Name"
namedColorList (nameof model.HeadingColor) model.HeadingColor [ model.HeadingColorType
_id $"{nameof model.HeadingColor}_Select" locStr s["Named Color"]
if model.HeadingColor.StartsWith "#" then _disabled ] s ]
rawText "&nbsp; &nbsp; "; str (s["or"].Value.ToUpper ()) space
radio (nameof model.HeadingColorType) $"{nameof model.HeadingColorType}_RGB" "RGB" namedColorList (nameof model.HeadingColor) model.HeadingColor [
model.HeadingColorType _id $"{nameof model.HeadingColor}_Select"
label [ _for $"{nameof model.HeadingColorType}_RGB" ] [ locStr s["Custom Color"] ] if model.HeadingColor.StartsWith "#" then _disabled ] s
input [ _type "color" ]
_name (nameof model.HeadingColor) span [] [
_id $"{nameof model.HeadingColor}_Color" label [] [
_value (colorToHex model.HeadingColor) radio (nameof model.HeadingColorType) $"{nameof model.HeadingColorType}_RGB" "RGB"
if not (model.HeadingColor.StartsWith "#") then _disabled ] model.HeadingColorType
locStr s["Custom Color"]
]
space
input [ _type "color"
_name (nameof model.HeadingColor)
_id $"{nameof model.HeadingColor}_Color"
_value (colorToHex model.HeadingColor)
if not (model.HeadingColor.StartsWith "#") then _disabled ]
]
] ]
] ]
] ]
@ -518,29 +540,23 @@ let preferences (model : EditPreferences) ctx viewInfo =
legend [] [ strong [] [ icon "settings"; rawText " &nbsp;"; locStr s["Other Settings"] ] ] legend [] [ strong [] [ icon "settings"; rawText " &nbsp;"; locStr s["Other Settings"] ] ]
div [ _fieldRow ] [ div [ _fieldRow ] [
div [ _inputField ] [ div [ _inputField ] [
label [ _for (nameof model.TimeZone) ] [ locStr s["Time Zone"] ] label [] [ locStr s["Request List Visibility"] ]
seq { span [ _class "pt-radio-group" ] [
"", selectDefault s["Select"].Value let name = nameof model.Visibility
yield! let value = string model.Visibility
TimeZones.all label [] [
|> List.map (fun tz -> TimeZoneId.toString tz, (TimeZones.name tz s).Value) radio name $"{name}_Public" (string GroupVisibility.PublicList) value
} locStr s["Public"]
|> selectList (nameof model.TimeZone) model.TimeZone [ _required ] ]
] label [] [
] radio name $"{name}_Private" (string GroupVisibility.PrivateList) value
div [ _inputField ] [ locStr s["Private"]
label [] [ locStr s["Request List Visibility"] ] ]
span [] [ label [] [
let name = nameof model.Visibility radio name $"{name}_Password" (string GroupVisibility.HasPassword) value
let value = string model.Visibility locStr s["Password Protected"]
radio name $"{name}_Public" (string GroupVisibility.PublicList) value ]
label [ _for $"{name}_Public" ] [ locStr s["Public"] ] ]
rawText " &nbsp;"
radio name $"{name}_Private" (string GroupVisibility.PrivateList) value
label [ _for $"{name}_Private" ] [ locStr s["Private"] ]
rawText " &nbsp;"
radio name $"{name}_Password" (string GroupVisibility.HasPassword) value
label [ _for $"{name}_Password" ] [ locStr s["Password Protected"] ]
] ]
] ]
let classSuffix = if model.Visibility = GroupVisibility.HasPassword then [ "pt-show" ] else [] let classSuffix = if model.Visibility = GroupVisibility.HasPassword then [ "pt-show" ] else []
@ -551,6 +567,16 @@ let preferences (model : EditPreferences) ctx viewInfo =
] ]
] ]
div [ _fieldRow ] [ div [ _fieldRow ] [
div [ _inputField ] [
label [ _for (nameof model.TimeZone) ] [ locStr s["Time Zone"] ]
seq {
"", selectDefault s["Select"].Value
yield!
TimeZones.all
|> List.map (fun tz -> TimeZoneId.toString tz, (TimeZones.name tz s).Value)
}
|> selectList (nameof model.TimeZone) model.TimeZone [ _required ]
]
div [ _inputField ] [ div [ _inputField ] [
label [ _for (nameof model.PageSize) ] [ locStr s["Page Size"] ] label [ _for (nameof model.PageSize) ] [ locStr s["Page Size"] ]
inputField "number" (nameof model.PageSize) (string model.PageSize) [ inputField "number" (nameof model.PageSize) (string model.PageSize) [

8
src/PrayerTracker/wwwroot/css/app.css
View File

@ -165,9 +165,6 @@ select {
font-family: var(--native-fonts); font-family: var(--native-fonts);
border-width: 1px; border-width: 1px;
} }
input:nth-of-type(2) {
margin-left: 2rem;
}
button[type=submit] { button[type=submit] {
border-radius: .6rem; border-radius: .6rem;
padding: .2rem 1rem; padding: .2rem 1rem;
@ -257,6 +254,11 @@ footer a:hover {
text-transform: uppercase; text-transform: uppercase;
color: #777; color: #777;
} }
.pt-radio-group {
display: flex;
flex-flow: row;
gap: 2rem;
}
.pt-center-text { .pt-center-text {
text-align: center; text-align: center;
} }