From fefb84e27bd3295fe06a5338899dd9b48658c92b Mon Sep 17 00:00:00 2001 From: Guillermo Ramos Date: Fri, 21 Feb 2025 18:56:08 +0100 Subject: Prettify --- front/src/Main.elm | 45 +++++++++++++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 16 deletions(-) diff --git a/front/src/Main.elm b/front/src/Main.elm index 18e13b6..19fd765 100644 --- a/front/src/Main.elm +++ b/front/src/Main.elm @@ -1,7 +1,7 @@ module Main exposing (main) import Browser -import Html exposing (Html, button, div, hr, input, span, table, tbody, td, text, th, thead, tr) +import Html exposing (Attribute, Html, button, div, hr, input, span, table, tbody, td, text, th, thead, tr) import Html.Attributes exposing (class, disabled, max, min, step, style, title, type_, value) import Html.Events exposing (onClick, onInput) import Http @@ -191,6 +191,15 @@ update msg model = +-- VIEW (THEME) + + +butAttrs : List (Attribute Msg) +butAttrs = + [ class "px-3 rounded-md bg-lime-300 enabled:active:bg-lime-400 border border-lime-600 disabled:opacity-75" ] + + + -- VIEW @@ -228,7 +237,7 @@ specsView simSpecsTxt = simSpecs = simSpecsParse simSpecsTxt - simButtonAttrs = + simButAttrs = case simSpecs of Nothing -> [ disabled True ] @@ -237,10 +246,11 @@ specsView simSpecsTxt = [ onClick (RunSimulation specs) ] in div [] - [ div [] + [ div [ class "flex" ] [ text "Principal: " , input [ type_ "range" + , class "accent-lime-300" , Html.Attributes.min "0" , Html.Attributes.max "1000000" , step "10000" @@ -250,7 +260,7 @@ specsView simSpecsTxt = [] , text principalTxt ] - , div [] + , div [ class "flex" ] [ text "Interest rate: " , input [ Html.Attributes.min "0" @@ -260,10 +270,11 @@ specsView simSpecsTxt = ] [] ] - , div [] + , div [ class "flex" ] [ text "Years: " , input [ type_ "range" + , class "accent-lime-300" , Html.Attributes.min "1" , Html.Attributes.max "50" , step "1" @@ -273,7 +284,7 @@ specsView simSpecsTxt = [] , text yearsTxt ] - , button simButtonAttrs [ text "Simulate" ] + , button (butAttrs ++ simButAttrs) [ text "Simulate" ] ] @@ -284,7 +295,7 @@ historyView quotas = [ "Month", "Quota", "Pending" ] head = - thead [] [ tr [] (List.map (\t -> th [ class "px-3 py-1 border border-gray-300" ] [ text t ]) titles) ] + thead [ class "bg-lime-100" ] [ tr [] (List.map (\t -> th [ class "px-3 py-1 border border-gray-300" ] [ text t ]) titles) ] in table [ class "border border-collapse border-gray-400" ] [ head, tbody [] (List.map quotaView quotas) ] @@ -325,13 +336,15 @@ simView { history, topay, payed } = view : Model -> Html Msg view model = - div [] - [ specsView model.simSpecsTxt - , case model.simulation of - Nothing -> - text "" - - Just sim -> - div [] [ simView sim ] - , div [] [ text model.error ] + div [ class "flex flex-row max-w-sm mx-auto" ] + [ div [ class "flex flex-col items-center" ] + [ specsView model.simSpecsTxt + , case model.simulation of + Nothing -> + text "" + + Just sim -> + div [] [ simView sim ] + , div [] [ text model.error ] + ] ] -- cgit v1.2.3