render back button in client list as left chevron
This commit is contained in:
parent
920a95296c
commit
f538be6748
3 changed files with 33 additions and 2 deletions
|
@ -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
10
images/chevron-left.svg
Normal 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 |
|
@ -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)))
|
||||||
]);
|
]);
|
||||||
|
|
Loading…
Reference in a new issue