render back button in client list as left chevron

This commit is contained in:
Bruno Windels 2020-12-04 17:16:44 +01:00
parent 920a95296c
commit f538be6748
3 changed files with 33 additions and 2 deletions

View file

@ -2,6 +2,25 @@
padding: 16px 0; padding: 16px 0;
} }
.ClientListView > h2 {
display: flex;
align-items: center;
}
.ClientListView > h2 .back {
background: url('../images/chevron-left.svg');
background-color: none;
background-size: 40%;
background-repeat: no-repeat;
background-position: center;
border: none;
width: 24px;
height: 24px;
padding: 16px;
cursor: pointer;
margin-right: 8px;
}
.ClientView { .ClientView {
border: 1px solid #E6E6E6; border: 1px solid #E6E6E6;
border-radius: 8px; border-radius: 8px;
@ -29,6 +48,7 @@
height: 60px; height: 60px;
overflow: hidden; overflow: hidden;
display: block; display: block;
margin-left: 8px;
} }
.ClientView .actions a.badge { .ClientView .actions a.badge {

10
images/chevron-left.svg Normal file
View file

@ -0,0 +1,10 @@
<svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#333333"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="8" height="17" fill="white" transform="translate(8.5 17) rotate(-180)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 657 B

View file

@ -62,10 +62,11 @@ class AllClientsView extends TemplateView {
class ContinueWithClientView extends TemplateView { class ContinueWithClientView extends TemplateView {
render(t, vm) { render(t, vm) {
const backTitle = "Back to all clients";
return t.div({className: "ClientListView"}, [ return t.div({className: "ClientListView"}, [
t.h2([ t.h2([
`Continue with ${vm.clientViewModel.name} `, t.button({className: "back", ["aria-label"]: backTitle, title: backTitle, onClick: () => vm.showAll()}),
t.button({onClick: () => vm.showAll()}, "Back") t.span(`Continue with ${vm.clientViewModel.name}`)
]), ]),
t.div({className: "list"}, t.view(new ClientView(vm.clientViewModel))) t.div({className: "list"}, t.view(new ClientView(vm.clientViewModel)))
]); ]);