Skip to content

Commit db61a48

Browse files
kyr0kyr0
committed
UX and i18n
1 parent 8bdcd64 commit db61a48

34 files changed

+539
-467
lines changed

‎assets/global-styles.scss

+21-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ body {
1313

1414
.info-button,
1515
.info-button:hover {
16-
background-color: $colivery-blue;
16+
background-color: $colivery-green;
1717
}
1818

1919
.cancel-button,
@@ -26,6 +26,14 @@ body {
2626
background-color: $colivery-green;
2727
}
2828

29+
.materialize-textarea {
30+
height: 100% !important;
31+
}
32+
33+
.btn-full-width {
34+
width: 100%;
35+
}
36+
2937
.hint {
3038
color: #ccc;
3139
}
@@ -48,6 +56,11 @@ h3.slogan {
4856
}
4957
}
5058

59+
.btn-secondary {
60+
background-color: $colivery-grey;
61+
color: #fff;
62+
}
63+
5164
.btn-footer-secondary {
5265
background-color: $colivery-grey;
5366
float: left;
@@ -102,9 +115,16 @@ textarea.materialize-textarea {
102115
border-radius: 5px !important;
103116
padding-left: 10px !important;
104117
padding-right: 10px !important;
118+
}
119+
120+
input:not(.browser-default) {
105121
width: calc(100% - 20px) !important;
106122
}
107123

124+
input[type=range] {
125+
width: 100% !important;
126+
}
127+
108128
.input-field > label:not(.label-icon) {
109129
transform: translateY(12px) translateX(10px);
110130
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,6 @@
4242
"libsodium-wrappers": "^0.7.6",
4343
"materialize-css": "^1.0.0",
4444
"springtype": "[email protected]",
45-
"st-materialize": "1.0.0-beta.21"
45+
"st-materialize": "1.0.0-beta.27"
4646
}
4747
}

‎src/component/center/center.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@ import { component } from "springtype/web/component";
44
@component({ tag: 'center' })
55
export class Center extends st.component {
66

7+
style = {
8+
display: 'block',
9+
width: '100%',
10+
};
11+
712
render() {
813
return this.renderChildren();
914
}

‎src/component/nav-header/nav-header.scss

+36-17
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,26 @@
55
}
66

77
nav {
8-
background-color: $colivery-background !important;
9-
box-shadow: none !important;
8+
background-color: $colivery-background !important;
9+
box-shadow: none !important;
10+
}
11+
12+
.back-button {
13+
left: 0px !important;
14+
z-index: 999999;
15+
}
16+
17+
.back-button-icon {
18+
margin-left: 22px;
19+
z-index: 1001;
20+
position: absolute;
21+
margin-top: -9px;
22+
}
23+
24+
@media screen and (max-width: 768px) {
25+
.back-button-icon {
26+
margin-top: -4px;
27+
}
1028
}
1129

1230
.nav-wrapper {
@@ -18,9 +36,9 @@ nav {
1836
}
1937

2038
.nav-brand-logo {
21-
height: 10vh;
22-
min-height: 45px;
23-
margin: auto;
39+
height: 10vh;
40+
min-height: 45px;
41+
margin: auto;
2442
}
2543

2644
nav .brand-logo {
@@ -29,13 +47,12 @@ nav .brand-logo {
2947
transform: translateY(-5%) translateX(-50%);
3048
}
3149

32-
.left-btn-position {
50+
.left-btn-position {
3351
position: absolute;
3452
top: 50%;
3553
transform: translateY(-70%);
3654
}
3755

38-
3956
.dropdown-content.show {
4057
display: block;
4158
opacity: 1;
@@ -72,14 +89,14 @@ nav .brand-logo {
7289
}
7390

7491
.menu-link {
75-
width: 100%;
76-
height: 100%;
77-
position: absolute;
78-
z-index: 1002;
92+
width: 100%;
93+
height: 100%;
94+
position: absolute;
95+
z-index: 1002;
7996
}
8097

8198
.menu-icon {
82-
position: absolute;
99+
position: absolute;
83100
width: 20px;
84101
height: 16px;
85102
margin: auto;
@@ -106,7 +123,9 @@ nav .brand-logo {
106123
}
107124
}
108125

109-
.menu-line-1 { top: 0; }
126+
.menu-line-1 {
127+
top: 0;
128+
}
110129

111130
.menu-line-2 {
112131
top: 0;
@@ -115,8 +134,8 @@ nav .brand-logo {
115134
margin: auto;
116135
}
117136

118-
.menu-line-3 {
119-
bottom: 0;
137+
.menu-line-3 {
138+
bottom: 0;
120139
width: 85%;
121140
}
122141

@@ -143,7 +162,7 @@ nav .brand-logo {
143162
position: fixed;
144163
opacity: 0;
145164
visibility: hidden;
146-
margin-left: 20px;
165+
padding-left: 14px;
147166
transition: opacity 0.2s ease-in-out;
148167
z-index: 1001;
149168
}
@@ -164,4 +183,4 @@ nav .brand-logo {
164183
margin-top: 0.5vh;
165184
margin-bottom: 0.5vh;
166185
display: inline-block;
167-
}
186+
}

‎src/component/nav-header/nav-header.tsx

+46-41
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { st } from "springtype/core";
2-
import { event } from "springtype/web/component/decorator/event";
32
import { attr, component } from "springtype/web/component";
43
import { tsx } from "springtype/web/vdom";
54
import "./nav-header.scss";
@@ -10,6 +9,7 @@ import { PreferenceService } from "../../service/preference";
109
import { ConsumerOrderListPage } from "../../page/consumer-order-list/consumer-order-list";
1110
import { DriverOrderList } from "../../page/driver-order-list/driver-order-list";
1211
import { TERMS_OF_USE_URL, PRIVACY_STATEMENT_URL, LEGAL_NOTICE_URL } from "../../config/website-urls";
12+
import { Center } from "../center/center";
1313

1414
export interface NavHeaderProps {
1515
showBackButton?: boolean;
@@ -78,10 +78,11 @@ export class NavHeader extends st.component<NavHeaderProps> {
7878
</div>
7979

8080
{this.showBackButton ?
81-
<a class='left-btn-position btn btn-flat btn-small' href='javascript:' onClick={() => {
81+
<a class='btn btn-flat btn-small menu left-btn-position back-button' href='javascript:' onClick={() => {
8282
this.onBackButtonClick()
8383
}}>
84-
<i class="material-icons">arrow_back_ios</i>
84+
<span class="menu-circle"></span>
85+
<i class="material-icons back-button-icon">arrow_back_ios</i>
8586
</a> : <div class="menu left-btn-position" ref={{ menuIcon: this }}>
8687
<span class="menu-circle"></span>
8788
<a href="javascript:" onclick={this.toggleMenu} class="menu-link">
@@ -102,43 +103,46 @@ export class NavHeader extends st.component<NavHeaderProps> {
102103

103104
renderMenuItems = () => {
104105

105-
this.renderPartial(<fragment>
106-
<a href="javascript:" onClick={() => {
107-
this.onUserProfileClick()
108-
}}>
109-
<div class="material-align-middle">
110-
<i class="material-icons">account_circle</i> {st.t("My Profile")}
111-
</div>
112-
</a>
113-
{this.getActiveProfile()}
114-
115-
<a href={TERMS_OF_USE_URL} target="_blank">
116-
<div class="material-align-middle">
117-
<i class="material-icons">description</i> {st.t("Terms of Use")}
118-
</div>
119-
</a>
120-
121-
<a href={PRIVACY_STATEMENT_URL} target="_blank">
122-
<div class="material-align-middle">
123-
<i class="material-icons">security</i> {st.t("Privacy Statement")}
124-
</div>
125-
</a>
126-
127-
128-
<a href={LEGAL_NOTICE_URL} target="_blank">
129-
<div class="material-align-middle">
130-
<i class="material-icons">policy</i> {st.t("Contact Details")}
131-
</div>
132-
</a>
133-
134-
<a href="javascript:" onclick={() => {
135-
this.onLogoutClick()
136-
}}>
137-
<div class="material-align-middle">
138-
<i class="material-icons">directions_run</i> {st.t("Logout")}
139-
</div>
140-
</a>
141-
</fragment>, this.menuOverlay)
106+
this.renderPartial(
107+
<div class="row">
108+
<div class="col s12 m9 l6 offset-l4 offset-m4">
109+
<a href="javascript:" onClick={() => {
110+
this.onUserProfileClick()
111+
}}>
112+
<div class="material-align-middle">
113+
<i class="material-icons">account_circle</i> {st.t("My Profile")}
114+
</div>
115+
</a>
116+
{this.getActiveProfile()}
117+
118+
<a href={TERMS_OF_USE_URL} target="_blank">
119+
<div class="material-align-middle">
120+
<i class="material-icons">description</i> {st.t("Terms of Use")}
121+
</div>
122+
</a>
123+
124+
<a href={PRIVACY_STATEMENT_URL} target="_blank">
125+
<div class="material-align-middle">
126+
<i class="material-icons">security</i> {st.t("Privacy Statement")}
127+
</div>
128+
</a>
129+
130+
131+
<a href={LEGAL_NOTICE_URL} target="_blank">
132+
<div class="material-align-middle">
133+
<i class="material-icons">policy</i> {st.t("Contact Details")}
134+
</div>
135+
</a>
136+
137+
<a href="javascript:" onclick={() => {
138+
this.onLogoutClick()
139+
}}>
140+
<div class="material-align-middle">
141+
<i class="material-icons">directions_run</i> {st.t("Logout")}
142+
</div>
143+
</a>
144+
</div>
145+
</div>, this.menuOverlay)
142146
}
143147

144148
onUserProfileClick = () => {
@@ -165,7 +169,8 @@ export class NavHeader extends st.component<NavHeaderProps> {
165169
};
166170

167171
private getActiveProfile() {
168-
const isDriver = this.preferenceService.getProfile() === 'driver';
172+
const isDriver = this.preferenceService.getProfile() !== 'consumer';
173+
console.log('isDriver', isDriver, this.preferenceService.getProfile());
169174
return <fragment>
170175
<a href="javascript:" style={{ display: isDriver ? 'block' : 'none' }} onclick={() => {
171176
this.onCustomerSwitch();

‎src/component/refresh-button/refresh-button.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.refresh-button:hover{
2+
background-color: inherit;
3+
}

‎src/component/refresh-button/refresh-button.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import "./refresh-button.scss";
2+
3+
import { component } from "springtype/web/component";
4+
import { st } from "springtype/core";
5+
import { ILifecycle } from "springtype/web/component/interface";
6+
import { tsx } from "springtype/web/vdom";
7+
8+
@component({ tag: 'a' })
9+
export class RefreshButton extends st.component implements ILifecycle {
10+
11+
class = ['btn btn-flat mat-align-middle refresh-button'];
12+
13+
render() {
14+
return <fragment>
15+
<i class="material-icons">find_replace</i> &nbsp;{st.t("Refresh list")}
16+
</fragment>
17+
}
18+
}

‎src/function/formatDate.ts

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
import { formatRelative } from 'date-fns'
2-
import { de } from 'date-fns/locale'
2+
import { de, enUS, nn, he } from 'date-fns/locale'
3+
import { I18nService } from '../service/i18n';
4+
import { st } from 'springtype/core';
35

4-
export const formatDate = (date: Date) => {
5-
return formatRelative(date, new Date(), { locale: de });
6+
const locales = {
7+
'de': de,
8+
'en': enUS,
9+
'nn': nn,
10+
'il': he
11+
}
12+
13+
export const formatDate = (date: Date) => {
14+
const i18nService: I18nService = st.inject(I18nService);
15+
return formatRelative(date, new Date(), { locale: locales[i18nService.getLanguage()] });
616
}

‎src/function/get-order-status-text.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { OrderStatus } from "../datamodel/order";
2+
import { st } from "springtype/core";
23

34
export const getOrderStatusText = (status: OrderStatus) => {
45
switch (status) {
56
case "accepted":
6-
return "Auf dem Weg zu Dir";
7+
return st.t("In delivery");
78
case "to_be_delivered":
8-
return "Bisher kein Fahrer gefunden";
9+
return st.t("No driver yet");
910
case "delivered":
10-
return "Erfolgreich geliefert";
11+
return st.t("Delivered successfully");
1112
case "consumer_canceled":
12-
return "Abbruch durch Dich";
13+
return st.t("Cancelled by user");
1314
}
1415
}

0 commit comments

Comments
 (0)