Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Design] Improve Jarbas document page legibility #525

Merged
merged 5 commits into from
May 27, 2020
Merged

[Design] Improve Jarbas document page legibility #525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e170a4c
Improve layout legibility and hierarchy
Apr 24, 2020
d824542
Remove unused supplierTitle text which was breaking layout
Apr 24, 2020
2ed5287
Hide 'X documents found' if there's only 1 result
Apr 24, 2020
8caadb1
Improve layout and style of primary buttons
Apr 24, 2020
c25faed
Fix weird menu icon position
Apr 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 23 additions & 22 deletions jarbas/layers/elm/Reimbursement/Company/View.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
]
Expand Down
2 changes: 1 addition & 1 deletion jarbas/layers/elm/Reimbursement/Map/View.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ view model =
Mdl
[ 0 ]
model.mdl
[ Button.minifab ]
[ Button.minifab, Button.primary ]
[ Icon.i "place"
, text (translate model.lang Map)
]
Expand Down
3 changes: 2 additions & 1 deletion jarbas/layers/elm/Reimbursement/Receipt/View.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ view model =
Mdl
[ 1 ]
model.mdl
[ Button.minifab ]
[ Button.minifab, Button.primary ]
[ Icon.i "receipt"
, text (translate model.lang ReceiptAvailable)
]
Expand All @@ -46,6 +46,7 @@ view model =
[ 0 ]
model.mdl
[ Button.minifab
, Button.primary
, Button.onClick (SearchReceipt model.reimbursement)
, Options.cs "receipt fetch-receipt"
]
Expand Down
14 changes: 11 additions & 3 deletions jarbas/layers/elm/Reimbursement/RelatedTable/View.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion jarbas/layers/elm/Reimbursement/Tweet/View.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ view model =
Mdl
[ 1 ]
model.mdl
[ Button.minifab ]
[ Button.minifab, Button.primary ]
[ Icon.i "share"
, text (translate model.lang RosiesTweet)
]
Expand Down
64 changes: 30 additions & 34 deletions jarbas/layers/elm/Reimbursement/View.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -239,23 +238,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
Expand Down Expand Up @@ -322,9 +314,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
Expand Down Expand Up @@ -459,18 +460,13 @@ viewReimbursement lang index reimbursement =

title =
Options.styled p
[ Typography.headline, Color.text Color.primary ]
[ Typography.headline ]
[ (translate lang ReimbursementTitle) ++ (toString reimbursement.documentId) |> text ]

supplier =
CompanyView.view reimbursement.supplierInfo
|> Html.map (CompanyMsg index)

supplierTitle =
Options.styled p
[ Typography.headline ]
[ text "" ]

sameDay : Html Msg
sameDay =
SameDay.view reimbursement.sameDay
Expand All @@ -490,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 ]
Expand All @@ -504,7 +500,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 ] ]
]


Expand Down Expand Up @@ -537,7 +533,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 ]
]

Expand All @@ -551,7 +547,7 @@ viewReimbursements model =
in
if model.loading then
text ""
else if searched then
else if total > 1 then
grid [] (title :: cells)
else
grid [] cells
Expand All @@ -563,7 +559,7 @@ viewReimbursements model =

view : Model -> Html Msg
view model =
div []
Options.styled div [ Options.css "background-color" "#fafafa" ]
[ SearchView.view model
, viewReimbursements model
]
6 changes: 6 additions & 0 deletions jarbas/layers/templates/layers/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,12 @@

</head>
<body>
<!-- Temporary fix: adjust weird positioning of menu icon in navbar -->
<style>
.mdl-layout__header .mdl-layout__drawer-button {
margin: 4px;
}
</style>

<script>
var lang = window.navigator.userLanguage || window.navigator.language;
Expand Down