From e170a4cc0f1f72990b962be8a05d4cc316ba6b86 Mon Sep 17 00:00:00 2001 From: Mauricio Uehara Date: Fri, 24 Apr 2020 13:40:09 -0300 Subject: [PATCH 1/5] Improve layout legibility and hierarchy --- .../layers/elm/Reimbursement/Company/View.elm | 45 ++++++++++--------- .../elm/Reimbursement/RelatedTable/View.elm | 14 ++++-- jarbas/layers/elm/Reimbursement/View.elm | 44 +++++++++--------- 3 files changed, 57 insertions(+), 46 deletions(-) diff --git a/jarbas/layers/elm/Reimbursement/Company/View.elm b/jarbas/layers/elm/Reimbursement/Company/View.elm index dff289d7f..6e763611c 100644 --- a/jarbas/layers/elm/Reimbursement/Company/View.elm +++ b/jarbas/layers/elm/Reimbursement/Company/View.elm @@ -82,11 +82,19 @@ viewCompany lang apiKey company = source = "http://www.receita.fazenda.gov.br/PessoaJuridica/CNPJ/cnpjreva/cnpjreva_solicitacao2.asp" in - div - [] + Options.styled div + [ Options.css "background-color" "white" + , Options.css "border" "1px solid #e0e0e0" + , Options.css "border-radius" "4px" + , Options.css "margin-bottom" "16px" + , Options.css "padding" "16px" + ] [ Options.styled p - [ Typography.subhead ] + [ Typography.subhead + , Options.css "border-bottom" "1px solid #e0e0e0" + , Options.css "padding-bottom" "8px" + ] [ icon , text title , location @@ -103,23 +111,16 @@ viewCompany lang apiKey company = viewRow : ( String, String ) -> Html.Html Msg viewRow ( label, value ) = - let - styles = - [ Options.css "display" "flex" - , Options.css "justify-content" "space-between" - , Options.css "align-items" "center" - ] - - labelStyles = - Options.css "width" "30%" :: styles - in - Options.styled div - [ Options.css "display" "flex" - , Options.css "flex-direction" "row" - ] - [ Options.styled span (Typography.body2 :: labelStyles) [ text label ] - , Options.styled span (Typography.body1 :: styles) [ text value ] - ] + Options.styled div + [ Options.css "display" "grid" + , Options.css "grid-template-columns" "0.33fr 0.66fr" + , Options.css "grid-column-gap" "8px" + ] + [ Options.styled span + [ Typography.body2, Options.css "color" "#757575" ] + [ text label ] + , Options.styled span [ Typography.body1 ] [ text value ] + ] viewActivity : Activity -> Html.Html Msg @@ -135,8 +136,8 @@ viewActivities ( label, activities ) = |> List.intersperse (br [] []) in Options.styled div - [] - [ Options.styled span [ Typography.body2 ] [ text label ] + [ Options.css "margin-top" "16px" ] + [ Options.styled span [ Typography.body2, Options.css "color" "#757575" ] [ text label ] , br [] [] , Options.styled span [ Typography.body1 ] value ] diff --git a/jarbas/layers/elm/Reimbursement/RelatedTable/View.elm b/jarbas/layers/elm/Reimbursement/RelatedTable/View.elm index 051dfa47f..2393d01ce 100644 --- a/jarbas/layers/elm/Reimbursement/RelatedTable/View.elm +++ b/jarbas/layers/elm/Reimbursement/RelatedTable/View.elm @@ -86,16 +86,24 @@ view model title = if Array.isEmpty model.results.reimbursements then text "" else - div [] + Options.styled div + [ Options.css "background-color" "white" + , Options.css "border" "1px solid #e0e0e0" + , Options.css "border-radius" "4px" + , Options.css "margin-bottom" "16px" + , Options.css "padding" "16px" + ] [ Options.styled p [ Typography.subhead - , Options.css "margin-top" "2em" + , Options.css "border-bottom" "1px solid #e0e0e0" + , Options.css "padding-bottom" "8px" + , Options.css "margin-bottom" "24px" ] [ Icon.view "today" [ Options.css "transform" "translateY(0.4rem)" ] - , text title + , text (" " ++ title) ] , model.results.reimbursements |> Array.toIndexedList diff --git a/jarbas/layers/elm/Reimbursement/View.elm b/jarbas/layers/elm/Reimbursement/View.elm index d85afdd86..712506e99 100644 --- a/jarbas/layers/elm/Reimbursement/View.elm +++ b/jarbas/layers/elm/Reimbursement/View.elm @@ -239,23 +239,16 @@ viewError lang error = viewReimbursementBlockLine : Language -> Field -> Html Msg viewReimbursementBlockLine lang field = - let - styles = - [ Options.css "display" "flex" - , Options.css "justify-content" "space-between" - , Options.css "align-items" "center" - ] - - labelStyles = - Options.css "width" "30%" :: styles - in - Options.styled div - [ Options.css "display" "flex" - , Options.css "flex-direction" "row" - ] - [ Options.styled span (Typography.body2 :: labelStyles) [ text <| Fields.getLabelTranslation lang field ] - , Options.styled span (Typography.body1 :: styles) [ text <| Fields.getValue field ] - ] + Options.styled div + [ Options.css "display" "grid" + , Options.css "grid-template-columns" "0.33fr 0.66fr" + , Options.css "grid-column-gap" "8px" + ] + [ Options.styled span + [ Typography.body2, Options.css "color" "#757575" ] + [ text <| Fields.getLabelTranslation lang field ] + , Options.styled span [ Typography.body1 ] [ text <| Fields.getValue field ] + ] viewSummaryPs : Language -> Reimbursement -> Html Msg @@ -322,9 +315,18 @@ viewReimbursementBlock lang reimbursement ( title, icon, fields ) = else text "" in - div [] + Options.styled div + [ Options.css "background-color" "white" + , Options.css "border" "1px solid #e0e0e0" + , Options.css "border-radius" "4px" + , Options.css "margin-bottom" "16px" + , Options.css "padding" "16px" + ] [ Options.styled p - [ Typography.subhead ] + [ Typography.subhead + , Options.css "border-bottom" "1px solid #e0e0e0" + , Options.css "padding-bottom" "8px" + ] [ iconTag, text (" " ++ title) ] , List.ul [] (List.map (viewReimbursementBlockLine lang) fields) , ps @@ -537,7 +539,7 @@ viewReimbursements model = title = cell [ size Desktop 12, size Tablet 8, size Phone 4 ] [ Options.styled div - [ Typography.center, Typography.display1 ] + [ Typography.center, Typography.body1 ] [ results |> text ] ] @@ -563,7 +565,7 @@ viewReimbursements model = view : Model -> Html Msg view model = - div [] + Options.styled div [ Options.css "background-color" "#fafafa" ] [ SearchView.view model , viewReimbursements model ] From d8245428dee86744d1d037eea827723b616c2d31 Mon Sep 17 00:00:00 2001 From: Mauricio Uehara Date: Fri, 24 Apr 2020 13:42:14 -0300 Subject: [PATCH 2/5] Remove unused supplierTitle text which was breaking layout --- jarbas/layers/elm/Reimbursement/View.elm | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/jarbas/layers/elm/Reimbursement/View.elm b/jarbas/layers/elm/Reimbursement/View.elm index 712506e99..d3c7a9263 100644 --- a/jarbas/layers/elm/Reimbursement/View.elm +++ b/jarbas/layers/elm/Reimbursement/View.elm @@ -468,11 +468,6 @@ viewReimbursement lang index reimbursement = CompanyView.view reimbursement.supplierInfo |> Html.map (CompanyMsg index) - supplierTitle = - Options.styled p - [ Typography.headline ] - [ text "" ] - sameDay : Html Msg sameDay = SameDay.view reimbursement.sameDay @@ -506,7 +501,7 @@ viewReimbursement lang index reimbursement = , sameSubquota ] , cell [ size Desktop 6, size Tablet 8, size Phone 4 ] - [ Options.styled div [] [ supplierTitle, supplier ] ] + [ Options.styled div [] [ supplier ] ] ] From 2ed52870a61006f751e16ededd9ec760b7a6219a Mon Sep 17 00:00:00 2001 From: Mauricio Uehara Date: Fri, 24 Apr 2020 14:00:19 -0300 Subject: [PATCH 3/5] Hide 'X documents found' if there's only 1 result --- jarbas/layers/elm/Reimbursement/View.elm | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jarbas/layers/elm/Reimbursement/View.elm b/jarbas/layers/elm/Reimbursement/View.elm index d3c7a9263..508f873e6 100644 --- a/jarbas/layers/elm/Reimbursement/View.elm +++ b/jarbas/layers/elm/Reimbursement/View.elm @@ -548,7 +548,7 @@ viewReimbursements model = in if model.loading then text "" - else if searched then + else if total > 1 then grid [] (title :: cells) else grid [] cells From 8caadb19010fd6833b998a1e427e6ba9244c173f Mon Sep 17 00:00:00 2001 From: Mauricio Uehara Date: Fri, 24 Apr 2020 16:47:08 -0300 Subject: [PATCH 4/5] Improve layout and style of primary buttons --- jarbas/layers/elm/Reimbursement/Map/View.elm | 2 +- jarbas/layers/elm/Reimbursement/Receipt/View.elm | 3 ++- jarbas/layers/elm/Reimbursement/Tweet/View.elm | 2 +- jarbas/layers/elm/Reimbursement/View.elm | 11 +++++------ 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/jarbas/layers/elm/Reimbursement/Map/View.elm b/jarbas/layers/elm/Reimbursement/Map/View.elm index 13beb071c..1f01f0c67 100644 --- a/jarbas/layers/elm/Reimbursement/Map/View.elm +++ b/jarbas/layers/elm/Reimbursement/Map/View.elm @@ -27,7 +27,7 @@ view model = Mdl [ 0 ] model.mdl - [ Button.minifab ] + [ Button.minifab, Button.primary ] [ Icon.i "place" , text (translate model.lang Map) ] diff --git a/jarbas/layers/elm/Reimbursement/Receipt/View.elm b/jarbas/layers/elm/Reimbursement/Receipt/View.elm index 3ac981586..204e58a82 100644 --- a/jarbas/layers/elm/Reimbursement/Receipt/View.elm +++ b/jarbas/layers/elm/Reimbursement/Receipt/View.elm @@ -22,7 +22,7 @@ view model = Mdl [ 1 ] model.mdl - [ Button.minifab ] + [ Button.minifab, Button.primary ] [ Icon.i "receipt" , text (translate model.lang ReceiptAvailable) ] @@ -46,6 +46,7 @@ view model = [ 0 ] model.mdl [ Button.minifab + , Button.primary , Button.onClick (SearchReceipt model.reimbursement) , Options.cs "receipt fetch-receipt" ] diff --git a/jarbas/layers/elm/Reimbursement/Tweet/View.elm b/jarbas/layers/elm/Reimbursement/Tweet/View.elm index 998206a42..43a8eed19 100644 --- a/jarbas/layers/elm/Reimbursement/Tweet/View.elm +++ b/jarbas/layers/elm/Reimbursement/Tweet/View.elm @@ -23,7 +23,7 @@ view model = Mdl [ 1 ] model.mdl - [ Button.minifab ] + [ Button.minifab, Button.primary ] [ Icon.i "share" , text (translate model.lang RosiesTweet) ] diff --git a/jarbas/layers/elm/Reimbursement/View.elm b/jarbas/layers/elm/Reimbursement/View.elm index 508f873e6..5e8160d73 100644 --- a/jarbas/layers/elm/Reimbursement/View.elm +++ b/jarbas/layers/elm/Reimbursement/View.elm @@ -13,7 +13,6 @@ import Http import Internationalization exposing (translate) import Internationalization.Types exposing (Language(..), TranslationId(..)) import Material.Button as Button -import Material.Color as Color import Material.Grid exposing (Device(..), cell, grid, size) import Material.Icon as Icon import Material.List as List @@ -461,7 +460,7 @@ viewReimbursement lang index reimbursement = title = Options.styled p - [ Typography.headline, Color.text Color.primary ] + [ Typography.headline ] [ (translate lang ReimbursementTitle) ++ (toString reimbursement.documentId) |> text ] supplier = @@ -487,11 +486,11 @@ viewReimbursement lang index reimbursement = [ text (translate lang ReimbursementChamberOfDeputies) ] ] in - [ cell [ size Desktop 6, size Tablet 4, size Phone 2 ] - [ Options.styled div [ Options.css "margin-top" "3rem" ] [ title ] ] - , cell [ size Desktop 6, size Tablet 4, size Phone 2 ] + [ cell [ size Desktop 6, size Tablet 4, size Phone 4 ] + [ title ] + , cell [ size Desktop 6, size Tablet 4, size Phone 4 ] [ Options.styled div - [ Options.css "margin-top" "3rem", Typography.right ] + [ Typography.right ] [ tweet, receipt, mapButton ] ] , cell [ size Desktop 6, size Tablet 8, size Phone 4 ] From c25faeddfb48f5f4fc199930ce36a79dee4224ef Mon Sep 17 00:00:00 2001 From: Mauricio Uehara Date: Fri, 24 Apr 2020 17:28:15 -0300 Subject: [PATCH 5/5] Fix weird menu icon position --- jarbas/layers/templates/layers/home.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/jarbas/layers/templates/layers/home.html b/jarbas/layers/templates/layers/home.html index 8e0bd2c5d..cd9006edd 100644 --- a/jarbas/layers/templates/layers/home.html +++ b/jarbas/layers/templates/layers/home.html @@ -36,6 +36,12 @@ + +