Closed minewarriorsSchool closed 10 months ago
martinbryant
commented
10 months ago Hi @minewarriorsSchool looks to me like you have done everything correctly though you shouldn't need to redefine the styles that you want to keep.
Does your page apply any styling from 'Styling/custom-styling.css'? Obviously I cannot see your project setup
minewarriorsSchool
commented
10 months ago I did a quick check and if I for example do this:
.content table td, .content table th {
border: 1px solid #dbdbdb;
border-width: 0 0 1px;
padding: 0px !important;
vertical-align: top
}
.title{
font-size: 400px;
}To see if the title would change font, nothing would happen either. Below you will find my index.fs code. I removed any sensitive information
namespace Client
open Client.ElmishModel.ModelMsg
open Feliz
open Feliz.Bulma
open Client.Styling
open Shared
open System
module Index =
// Views
let containerBox (model: Model) (dispatch: Msg -> unit) =
Bulma.box [
Bulma.field.div[
field.isGrouped
prop.children [
Bulma.control.p[
control.isExpanded
prop.children[
Bulma.input.password [
prop.hidden (true)
prop.style[style.width (300); style.padding (0)]
prop.value model.Password
prop.placeholder "Enter password here..."
prop.onChange (fun x -> SetPassword x |> dispatch)
prop.onKeyUp (fun x ->
if x.key.Equals("Enter") then
ValidatePassword |> dispatch)
]
]
]
Bulma.control.p[
control.isExpanded
prop.children[
Bulma.input.text [
prop.style[
if model.IsPassWordValid then
style.visibility.visible
else
style.visibility.collapse
style.width(0)
style.height(0)]
prop.value model.Input
prop.placeholder "Enter the VM name to be added here..."
prop.onChange (fun x -> SetVmInput x |> dispatch)
]
]
]
Bulma.control.p[
Bulma.content[
Html.table[
Html.tr[
Bulma.button.button[
//style
model.IsPassWordValid |> Styles.AdminPane.adminPassWordIsValidStyle
color.hasBackgroundGrey
color.hasTextWhite
text.hasTextWeightBold
prop.disabled (model.IsPassWordValid |> not || model.Input |> String.IsNullOrWhiteSpace)
prop.text "Add VM"
prop.onClick(fun _ -> AddVmPressed |> dispatch)
]
]
Html.tr[
Bulma.button.button[
//style
model.IsPassWordValid |> Styles.AdminPane.adminPassWordIsValidStyle
color.hasBackgroundGrey
color.hasTextWhite
text.hasTextWeightBold
prop.disabled (model.IsPassWordValid |> not || model.ChangesMade |> not )
prop.text "Save changes"
prop.onClick(fun _ -> SaveChanges |> dispatch)
]
]
]
]
]
]
]
Bulma.content[
Html.table [
Html.thead [
Html.tr [
prop.children [
Html.th [ prop.text "Tester"; prop.style [style.padding(0)] ]
Html.th [
model.IsPassWordValid |> Styles.AdminPane.adminPassWordIsValidStyle
prop.text "Alias"
]
Html.th [ prop.text "User Name" ; prop.style [style.padding(0)]]
Html.th [ prop.text "Logged on since"; prop.style [style.padding(0)] ]
Html.th [ prop.text "IG-XL Version"; prop.style [style.padding(0)]]
Html.th [
//style
prop.text "Windows Version";prop.style [style.padding(0)]
]
Html.th [
//style
model.IsPassWordValid |> Styles.AdminPane.adminPassWordIsValidStyle
]
]
]
]
Html.tbody [
for loggedOn in model.UserInfos do
Html.tr [
prop.children [
// Tester
Html.td [
prop.style [
(style.color (loggedOn |> Styles.MachineName.toTextColor))
style.padding(0)
]
(prop.text (Styles.MachineName.machineNameAndAlias(loggedOn, model.IsPassWordValid)))
text.hasTextWeightBold
]
// Alias
Html.td [
Bulma.input.text[
input.isSmall
//style
model.IsPassWordValid |> Styles.AdminPane.adminPassWordIsValidStyle
color.isWarning
color.hasTextDanger
prop.valueOrDefault loggedOn.AliasName
prop.disabled (model.IsPassWordValid |> not)
prop.ariaDisabled (model.IsPassWordValid |> not)
prop.onChange (fun x -> SetAliasName (loggedOn.Tester ,x) |> dispatch)
]
]
// User Name
Html.td [
prop.text loggedOn.User
Styles.Table.getNormalDataRowStyle()
]
// Logged on since
Html.td [
prop.text loggedOn.LoggedOnSince
Styles.Table.getNormalDataRowStyle()
]
// IG-XL Version
Html.td [
prop.text loggedOn.TosVersion
Styles.Table.getNormalDataRowStyle()
]
// Windows-XP
//section with checkbox
Html.td [
Styles.Table.getNormalDataRowStyle()
prop.text (Shared.Machines.isXpMachine loggedOn)
]
//Removal section
Html.td [
Html.table [
Html.tr[
Html.td[
Bulma.button.button[
button.isSmall
color.isWarning
color.hasTextDanger
//style
model.IsPassWordValid |> Styles.AdminPane.adminPassWordIsValidStyle
prop.text "Remove"
prop.disabled (model.IsPassWordValid |> not)
prop.ariaDisabled (model.IsPassWordValid |> not)
prop.onClick (fun _ -> loggedOn.Tester |> RemoveVmPressed |> dispatch)
]
]
Html.td[
Bulma.button.button [
button.isSmall
Bulma.button.isRounded
model.IsPassWordValid |> Styles.AdminPane.adminPassWordIsValidStyle
prop.disabled (model.IsPassWordValid |> not)
prop.ariaDisabled (model.IsPassWordValid |> not)
prop.onClick (fun _ -> (loggedOn.Tester, true) |> MoveIndexUpDown |> dispatch)
Bulma.color.isDanger
prop.text "Up"
]
]
Html.td[
Bulma.button.button [
button.isSmall
Bulma.button.isRounded
model.IsPassWordValid |> Styles.AdminPane.adminPassWordIsValidStyle
prop.disabled (model.IsPassWordValid |> not)
prop.ariaDisabled (model.IsPassWordValid |> not)
prop.onClick (fun _ -> (loggedOn.Tester, false) |> MoveIndexUpDown |> dispatch)
Bulma.color.isDanger
prop.text "down"
]
]
]
]
]
]
]
]
]
]
]
let view (model: Model) (dispatch: Msg -> unit) =
Bulma.hero [
hero.isFullHeight
color.isPrimary
prop.style [
style.backgroundSize "cover"
style.backgroundImageUrl
@"removed info"
style.backgroundPosition "no-repeat center center fixed"
]
prop.children [
Bulma.heroHead [
prop.children [
Html.a [
prop.href "removed info"
prop.text "For questions, click >>removed info<<"
]
]
]
Bulma.heroBody [
prop.style [ style.paddingTop (0); style.paddingBottom(0); style.marginBottom(0); style.marginTop(0)]
prop.children [
Bulma.container [
Bulma.column [
column.isFull
prop.children [
Bulma.title [
text.hasTextCentered
prop.text "Who Is Logged On?"
]
containerBox model dispatch
]
]
]
]
]
Bulma.heroFoot [
Bulma.heroFoot [
Bulma.content[
prop.style[
style.marginBottom(0)
]
prop.text "Hit F5 to refresh the table"
]
Bulma.content[
prop.text "Version 1.0.2 | (12-2023)"
]
]
]
]
]Perhaps this helps a little more of finding out the root cause of the issue. As you can see in the code, I manually set the padding of things already to 0. Which do not seem to do anything. Hence the reason I tried to create an overwrite on the CSS files.
If you have got any feedback in regards to best practices' using Safe Stack, I am open for feedback obviously!
minewarriorsSchool
commented
10 months ago Extra info:
This is the "Styles" class that is called sometimes.
namespace Client.Styling
open Feliz
open Feliz.Bulma
open Shared
open System
module Styles =
module MachineName =
let toTextColor (loggedOn:UserInfo) =
match loggedOn.ValidMachineNameOrIp with
| true ->
match loggedOn.User |> String.IsNullOrEmpty with
| true -> "LimeGreen"
| false ->
match loggedOn.Status with
| Up -> "Black"
| Down -> "Red"
| false -> "Purple"
let machineNameAndAlias (loggedOn:UserInfo, validPassWord:bool) =
match validPassWord with
| true -> loggedOn.Tester
|false ->
match loggedOn.AliasName |> String.IsNullOrEmpty with
| true -> loggedOn.Tester
| false -> loggedOn.Tester + " (" + loggedOn.AliasName + ")"
module AdminPane =
let adminPassWordIsValidStyle(valid:bool) =
prop.style[
if valid then
style.visibility.visible
style.width.minContent
else
style.visibility.collapse
style.width(0)
style.textAlign.left
style.height(20)
style.padding(0)
style.margin(0)
]
module Table =
let getNormalDataRowStyle() =
prop.style[
style.padding(0)
style.width.minContent
]I can see that you are using .title in your css which would mean it would apply this styling to a css class named title. And you do not appear to have anything in your Index file with a class name title (though Bulma.title may have a class of title)
I would try a new css selector say 'test', a new html element in your page say
Html.p [
prop.className "test"
]Do you see the style on the element?
If you do not then it looks like there is an issue with your custom stylesheet being included. There is a recipe for adding a custom stylesheet to your SAFE template here
minewarriorsSchool
commented
10 months ago I can see that you are using .title in your css which would mean it would apply this styling to a css class named title. And you do not appear to have anything in your Index file with a class name title (though Bulma.title may have a class of title)
I would try a new css selector say 'test', a new html element in your page say
Html.p [ prop.className "test" ]Do you see the style on the element?
If you do not then it looks like there is an issue with your custom stylesheet being included. There is a recipe for adding a custom stylesheet to your SAFE template here
Hey @martinbryant !
I tested your proposed solutions and it had to do with the reference of the stylesheet in the webpack config. I do not know what happened, but it looked like I made a small type or something like that.
when I re-did the steps of the github page it somehow started working.
Thanks a lot for your help and sorry if I caused any trouble haha.
Kind regards,
MW
martinbryant
commented
10 months ago @minewarriorsSchool no worries I'm glad that you got it sorted.
At some point maybe take a look the v5 of the Safe Stack template. it no longer uses webpack and instead uses vite which does not require a lot of the config from v4.
Hey all! So for some reason Bulma.min.css adds padding to my table data and table headers.
when I disable this padding in the browser is looks like this:
this is also the result I want.
In my whole index.fs file I have added 0 padding everywhere. Even tried to overwrite the bulma sheet with this:
But I can not seem to get that padding removed. Anybody an idea on how I am supposed to tackle this?