Skip to content

Commit 057875f

Browse files
committed
style: increase paddings in demo
1 parent 06eaf87 commit 057875f

File tree

7 files changed

+69
-41
lines changed

7 files changed

+69
-41
lines changed

demo-angular/src/app/home/home.component.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@
66
color: #303F9F;
77
}
88

9+
label {
10+
padding: 6 4;
11+
}
12+
13+
timepickerfield,
14+
datepickerfield {
15+
padding: 12 4;
16+
}
17+
918
timepickerfield.apply-css,
1019
datepickerfield.apply-css {
1120
color: #CDDC39;

demo-angular/src/app/home/home.component.html

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,66 +4,66 @@
44

55
<ScrollView>
66
<StackLayout class="p-20">
7-
<Label text="basic usage" class="content" android:paddingLeft="4"></Label>
7+
<Label text="basic usage" class="content"></Label>
88
<DatePickerField hint="select date"></DatePickerField>
99
<TimePickerField hint="select time"></TimePickerField>
1010
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
1111

12-
<Label text="initial values" class="content" android:paddingLeft="4"></Label>
12+
<Label text="initial values" class="content"></Label>
1313
<DatePickerField date="2019/02/24"></DatePickerField>
1414
<TimePickerField time="01:00"></TimePickerField>
1515
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
1616

17-
<Label text="min and max date" class="content" android:paddingLeft="4"></Label>
17+
<Label text="min and max date" class="content"></Label>
1818
<DatePickerField minDate="2020/02/02" maxDate="2021/02/02" hint="tap to select"></DatePickerField>
1919
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
2020

21-
<Label text="time format 12h" class="content" android:paddingLeft="4"></Label>
21+
<Label text="time format 12h" class="content"></Label>
2222
<TimePickerField time="16:00" timeFormat="h:mm a" locale="en_US"></TimePickerField>
2323
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
2424

25-
<Label text="time format 24h" class="content" android:paddingLeft="4"></Label>
25+
<Label text="time format 24h" class="content"></Label>
2626
<TimePickerField time="16:00" timeFormat="HH:mm" locale="en_UK"></TimePickerField>
2727
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
2828

29-
<Label text="modified picker texts" class="content" android:paddingLeft="4"></Label>
29+
<Label text="modified picker texts" class="content"></Label>
3030
<DatePickerField hint="tap to choose" pickerOkText="Approve" pickerCancelText="Reject"
3131
pickerTitle="Confirm predefined date selection" pickerDefaultDate="2019/05/15"></DatePickerField>
3232
<TimePickerField hint="tap to choose" pickerOkText="Approve" pickerCancelText="Reject"
3333
pickerTitle="Confirm predefined time selection" pickerDefaultTime="22:00"></TimePickerField>
3434
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
3535

36-
<Label text="preferred locale: en_US" class="content" android:paddingLeft="4"></Label>
36+
<Label text="preferred locale: en_US" class="content"></Label>
3737
<DatePickerField locale="en_US" hint="select date" pickerOkText="OK"
3838
pickerCancelText="Cancel" pickerTitle="Select date"></DatePickerField>
3939
<TimePickerField locale="en_US" hint="select time" pickerOkText="OK"
4040
pickerCancelText="Cancel" pickerTitle="Select time"></TimePickerField>
4141
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
4242

43-
<Label text="preferred locale: de_DE" class="content" android:paddingLeft="4"></Label>
43+
<Label text="preferred locale: de_DE" class="content"></Label>
4444
<DatePickerField locale="de_DE" hint="datum auswählen" pickerOkText="Bestätigen"
4545
pickerCancelText="Stornieren" pickerTitle="Datum auswählen"></DatePickerField>
4646
<TimePickerField locale="de_DE" hint="zeit wählen" pickerOkText="Bestätigen"
4747
pickerCancelText="Stornieren" pickerTitle="Zeit wählen"></TimePickerField>
4848
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
4949

50-
<Label text="custom format" class="content" android:paddingLeft="4"></Label>
50+
<Label text="custom format" class="content"></Label>
5151
<DatePickerField date="2019/02/24" dateFormat="'date': dd MMMM yyyy"></DatePickerField>
5252
<TimePickerField time="01:00" timeFormat="'time': HH:mm"></TimePickerField>
5353
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
5454

55-
<Label text="binding" class="content" android:paddingLeft="4"></Label>
56-
<Label [text]='dateTime' android:paddingLeft="4"></Label>
57-
<DatePickerField [(ngModel)]='dateTime'></DatePickerField>
58-
<TimePickerField [(ngModel)]='dateTime'></TimePickerField>
55+
<Label text="binding" class="content"></Label>
56+
<Label [text]="dateTime" color="#CBCBCB"></Label>
57+
<DatePickerField [(ngModel)]="dateTime"></DatePickerField>
58+
<TimePickerField [(ngModel)]="dateTime"></TimePickerField>
5959
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
6060

61-
<Label text="css applied" class="content" android:paddingLeft="4"></Label>
61+
<Label text="css applied" class="content"></Label>
6262
<DatePickerField date="2019/02/24" pickerTitle="select date" class="apply-css"></DatePickerField>
6363
<TimePickerField time="01:00" pickerTitle="select time" class="apply-css"></TimePickerField>
6464
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
6565

66-
<Label text="custom button" class="content" android:paddingLeft="4"></Label>
66+
<Label text="custom button" class="content"></Label>
6767
<Button [text]="dateText" (tap)="onPickDateTap($event)"></Button>
6868
<Button [text]="timeText" (tap)="onPickTimeTap($event)"></Button>
6969
</StackLayout>

demo-vue/app/components/Home.vue

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,66 +6,66 @@
66

77
<ScrollView>
88
<StackLayout class="p-20">
9-
<Label text="basic usage" class="content" android:paddingLeft="4"></Label>
9+
<Label text="basic usage" class="content"></Label>
1010
<DatePickerField hint="select date"></DatePickerField>
1111
<TimePickerField hint="select time"></TimePickerField>
1212
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
1313

14-
<Label text="initial values" class="content" android:paddingLeft="4"></Label>
14+
<Label text="initial values" class="content"></Label>
1515
<DatePickerField date="2019/02/24"></DatePickerField>
1616
<TimePickerField time="01:00"></TimePickerField>
1717
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
1818

19-
<Label text="min and max date" class="content" android:paddingLeft="4"></Label>
19+
<Label text="min and max date" class="content"></Label>
2020
<DatePickerField minDate="2020/02/02" maxDate="2021/02/02" hint="tap to select"></DatePickerField>
2121
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
2222

23-
<Label text="time format 12h" class="content" android:paddingLeft="4"></Label>
23+
<Label text="time format 12h" class="content"></Label>
2424
<TimePickerField time="16:00" timeFormat="h:mm a" locale="en_US"></TimePickerField>
2525
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
2626

27-
<Label text="time format 24h" class="content" android:paddingLeft="4"></Label>
27+
<Label text="time format 24h" class="content"></Label>
2828
<TimePickerField time="16:00" timeFormat="HH:mm" locale="en_UK"></TimePickerField>
2929
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
3030

31-
<Label text="modified picker texts" class="content" android:paddingLeft="4"></Label>
31+
<Label text="modified picker texts" class="content"></Label>
3232
<DatePickerField hint="tap to choose" pickerOkText="Approve" pickerCancelText="Reject"
3333
pickerTitle="Confirm predefined date selection" pickerDefaultDate="2019/05/15"></DatePickerField>
3434
<TimePickerField hint="tap to choose" pickerOkText="Approve" pickerCancelText="Reject"
3535
pickerTitle="Confirm predefined time selection" pickerDefaultTime="22:00"></TimePickerField>
3636
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
3737

38-
<Label text="preferred locale: en_US" class="content" android:paddingLeft="4"></Label>
38+
<Label text="preferred locale: en_US" class="content"></Label>
3939
<DatePickerField locale="en_US" hint="select date" pickerOkText="OK"
4040
pickerCancelText="Cancel" pickerTitle="Select date"></DatePickerField>
4141
<TimePickerField locale="en_US" hint="select time" pickerOkText="OK"
4242
pickerCancelText="Cancel" pickerTitle="Select time"></TimePickerField>
4343
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
4444

45-
<Label text="preferred locale: de_DE" class="content" android:paddingLeft="4"></Label>
45+
<Label text="preferred locale: de_DE" class="content"></Label>
4646
<DatePickerField locale="de_DE" hint="datum auswählen" pickerOkText="Bestätigen"
4747
pickerCancelText="Stornieren" pickerTitle="Datum auswählen"></DatePickerField>
4848
<TimePickerField locale="de_DE" hint="zeit wählen" pickerOkText="Bestätigen"
4949
pickerCancelText="Stornieren" pickerTitle="Zeit wählen"></TimePickerField>
5050
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
5151

52-
<Label text="custom format" class="content" android:paddingLeft="4"></Label>
52+
<Label text="custom format" class="content"></Label>
5353
<DatePickerField date="2019/02/24" dateFormat="'date': dd MMMM yyyy"></DatePickerField>
5454
<TimePickerField time="01:00" timeFormat="'time': HH:mm"></TimePickerField>
5555
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
5656

57-
<Label text="binding" class="content" android:paddingLeft="4"></Label>
58-
<Label :text="dateTime" android:paddingLeft="4"></Label>
57+
<Label text="binding" class="content"></Label>
58+
<Label :text="dateTime" color="#CBCBCB"></Label>
5959
<DatePickerField @dateChange="onDateTimeChange" :date="dateTime"></DatePickerField>
6060
<TimePickerField @timeChange="onDateTimeChange" :time="dateTime"></TimePickerField>
6161
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
6262

63-
<Label text="css applied" class="content" android:paddingLeft="4"></Label>
63+
<Label text="css applied" class="content"></Label>
6464
<DatePickerField date="2019/02/24" pickerTitle="select date" class="apply-css"></DatePickerField>
6565
<TimePickerField time="01:00" pickerTitle="select time" class="apply-css"></TimePickerField>
6666
<StackLayout class="hr-light m-10" android:visibility="collapse"></StackLayout>
6767

68-
<Label text="custom button" class="content" android:paddingLeft="4"></Label>
68+
<Label text="custom button" class="content"></Label>
6969
<Button :text="dateText" @tap="onPickDateTap"></Button>
7070
<Button :text="timeText" @tap="onPickTimeTap"></Button>
7171
</StackLayout>
@@ -161,6 +161,15 @@
161161
color: #303F9F;
162162
}
163163
164+
label {
165+
padding: 6 4;
166+
}
167+
168+
timepickerfield,
169+
datepickerfield {
170+
padding: 12 4;
171+
}
172+
164173
timepickerfield.apply-css,
165174
datepickerfield.apply-css {
166175
color: #CDDC39;

demo-vue/index.ts

Whitespace-only changes.

demo-vue/tsconfig.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
]
2222
}
2323
},
24+
"include": [ "index.ts" ],
2425
"exclude": [
2526
"node_modules",
2627
"platforms"

demo/app/home/home-page.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@
66
color: #303F9F;
77
}
88

9+
label {
10+
padding: 6 4;
11+
}
12+
13+
timepickerfield,
14+
datepickerfield {
15+
padding: 12 4;
16+
}
17+
918
timepickerfield.apply-css,
1019
datepickerfield.apply-css {
1120
color: #CDDC39;

demo/app/home/home-page.xml

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,66 +9,66 @@
99

1010
<ScrollView>
1111
<StackLayout class="p-20">
12-
<Label text="basic usage" class="content" android:paddingLeft="4"/>
12+
<Label text="basic usage" class="content"/>
1313
<datetime:DatePickerField hint="select date"/>
1414
<datetime:TimePickerField hint="select time"/>
1515
<StackLayout class="hr-light m-10" android:visibility="collapse"/>
1616

17-
<Label text="initial values" class="content" android:paddingLeft="4"/>
17+
<Label text="initial values" class="content"/>
1818
<datetime:DatePickerField date="2019/02/24"/>
1919
<datetime:TimePickerField time="01:00"/>
2020
<StackLayout class="hr-light m-10" android:visibility="collapse"/>
2121

22-
<Label text="min and max date" class="content" android:paddingLeft="4"/>
22+
<Label text="min and max date" class="content"/>
2323
<datetime:DatePickerField minDate="2020/02/02" maxDate="2021/02/02" hint="tap to select"/>
2424
<StackLayout class="hr-light m-10" android:visibility="collapse"/>
2525

26-
<Label text="time format 12h" class="content" android:paddingLeft="4"/>
26+
<Label text="time format 12h" class="content"/>
2727
<datetime:TimePickerField time="16:00" timeFormat="h:mm a" locale="en_US" />
2828
<StackLayout class="hr-light m-10" android:visibility="collapse"/>
2929

30-
<Label text="time format 24h" class="content" android:paddingLeft="4"/>
30+
<Label text="time format 24h" class="content"/>
3131
<datetime:TimePickerField time="16:00" timeFormat="HH:mm" locale="en_UK" />
3232
<StackLayout class="hr-light m-10" android:visibility="collapse"/>
3333

34-
<Label text="modified picker texts" class="content" android:paddingLeft="4"/>
34+
<Label text="modified picker texts" class="content"/>
3535
<datetime:DatePickerField hint="tap to choose" pickerOkText="Approve" pickerCancelText="Reject"
3636
pickerTitle="Confirm predefined date selection" pickerDefaultDate="2019/05/15"/>
3737
<datetime:TimePickerField hint="tap to choose" pickerOkText="Approve" pickerCancelText="Reject"
3838
pickerTitle="Confirm predefined time selection" pickerDefaultTime="22:00"/>
3939
<StackLayout class="hr-light m-10" android:visibility="collapse"/>
4040

41-
<Label text="preferred locale: en_US" class="content" android:paddingLeft="4"/>
41+
<Label text="preferred locale: en_US" class="content"/>
4242
<datetime:DatePickerField locale="en_US" hint="select date" pickerOkText="OK"
4343
pickerCancelText="Cancel" pickerTitle="Select date"/>
4444
<datetime:TimePickerField locale="en_US" hint="select time" pickerOkText="OK"
4545
pickerCancelText="Cancel" pickerTitle="Select time"/>
4646
<StackLayout class="hr-light m-10" android:visibility="collapse"/>
4747

48-
<Label text="preferred locale: de_DE" class="content" android:paddingLeft="4"/>
48+
<Label text="preferred locale: de_DE" class="content"/>
4949
<datetime:DatePickerField locale="de_DE" hint="datum auswählen" pickerOkText="Bestätigen"
5050
pickerCancelText="Stornieren" pickerTitle="Datum auswählen"/>
5151
<datetime:TimePickerField locale="de_DE" hint="zeit wählen" pickerOkText="Bestätigen"
5252
pickerCancelText="Stornieren" pickerTitle="Zeit wählen"/>
5353
<StackLayout class="hr-light m-10" android:visibility="collapse"/>
5454

55-
<Label text="custom format" class="content" android:paddingLeft="4"/>
55+
<Label text="custom format" class="content"/>
5656
<datetime:DatePickerField date="2019/02/24" dateFormat="'date': dd MMMM yyyy"/>
5757
<datetime:TimePickerField time="01:00" timeFormat="'time': HH:mm"/>
5858
<StackLayout class="hr-light m-10" android:visibility="collapse"/>
5959

60-
<Label text="binding" class="content" android:paddingLeft="4"/>
61-
<Label text="{{ dateTime }}" android:paddingLeft="4"/>
60+
<Label text="binding" class="content"/>
61+
<Label text="{{ dateTime }}" color="#CBCBCB"/>
6262
<datetime:DatePickerField date="{{ dateTime }}"/>
6363
<datetime:TimePickerField time="{{ dateTime }}"/>
6464
<StackLayout class="hr-light m-10" android:visibility="collapse"/>
6565

66-
<Label text="css applied" class="content" android:paddingLeft="4"/>
66+
<Label text="css applied" class="content"/>
6767
<datetime:DatePickerField date="2019/02/24" pickerTitle="select date" class="apply-css"/>
6868
<datetime:TimePickerField time="01:00" pickerTitle="select time" class="apply-css"/>
6969
<StackLayout class="hr-light m-10" android:visibility="collapse"/>
7070

71-
<Label text="custom button" class="content" android:paddingLeft="4"/>
71+
<Label text="custom button" class="content"/>
7272
<Button text="{{ dateText }}" tap="{{ onPickDateTap }}"/>
7373
<Button text="{{ timeText }}" tap="{{ onPickTimeTap }}"/>
7474
</StackLayout>

0 commit comments

Comments
 (0)