Skip to content

Commit 5b986be

Browse files
author
Hoang Nguyen
authored
ui: fix the style of zone wizard on mobile view (#4764)
This PR for fixes create zone form in mobile view
1 parent 03ad702 commit 5b986be

File tree

7 files changed

+190
-84
lines changed

7 files changed

+190
-84
lines changed

‎ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -194,11 +194,10 @@ export default {
194194
min-height: 200px;
195195
text-align: center;
196196
vertical-align: center;
197-
padding-top: 16px;
198-
padding-top: 16px;
199197
margin-top: 8px;
200198
max-height: 300px;
201199
overflow-y: auto;
200+
padding: 16px 20px 0;
202201
203202
/deep/.has-error {
204203
.ant-form-explain {

‎ui/src/views/infra/zone/IpAddressRangeForm.vue‎

Lines changed: 82 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -24,79 +24,94 @@
2424
</a-card>
2525
<a-table
2626
bordered
27+
:scroll="{ x: 500 }"
2728
:dataSource="ipRanges"
2829
:columns="columns"
2930
:pagination="false"
30-
style="margin-bottom: 24px;" >
31+
style="margin-bottom: 24px; width: 100%" >
3132
<template slot="actions" slot-scope="text, record">
3233
<a-button type="danger" shape="circle" icon="delete" @click="onDelete(record.key)" />
3334
</template>
3435
<template slot="footer">
3536
<a-form
36-
layout="inline"
37+
:layout="isMobile() ? 'horizontal': 'inline'"
3738
:form="form"
3839
@submit="handleAddRange">
39-
<a-form-item :style="{ display: 'inline-block', width: '14%' }">
40-
<a-input
41-
v-decorator="[ 'gateway', {
42-
rules: [{ required: true, message: $t('message.error.gateway') }]
43-
}]"
44-
:placeholder="$t('label.gateway')"
45-
autoFocus
46-
/>
47-
</a-form-item>
48-
<a-form-item :style="{ display: 'inline-block', width: '14%' }">
49-
<a-input
50-
v-decorator="[ 'netmask', {
51-
rules: [{ required: true, message: $t('message.error.netmask') }]
52-
}]"
53-
:placeholder="$t('label.netmask')"
54-
/>
55-
</a-form-item>
56-
<a-form-item :style="{ display: 'inline-block', width: '14%' }">
57-
<a-input
58-
v-decorator="[ 'vlan', { rules: [{ required: false }] }]"
59-
:placeholder="$t('label.vlan')"
60-
/>
61-
</a-form-item>
62-
<a-form-item :style="{ display: 'inline-block', width: '14%' }">
63-
<a-input
64-
v-decorator="[ 'startIp', {
65-
rules: [
66-
{
67-
required: true,
68-
message: $t('message.error.startip')
69-
},
70-
{
71-
validator: checkIpFormat,
72-
ipV4: true,
73-
message: $t('message.error.ipv4.address')
74-
}
75-
]
76-
}]"
77-
:placeholder="$t('label.start.ip')"
78-
/>
79-
</a-form-item>
80-
<a-form-item :style="{ display: 'inline-block', width: '14%' }">
81-
<a-input
82-
v-decorator="[ 'endIp', {
83-
rules: [
84-
{
85-
required: true,
86-
message: $t('message.error.endip')
87-
},
88-
{
89-
validator: checkIpFormat,
90-
ipV4: true,
91-
message: $t('message.error.ipv4.address')
92-
}]
93-
}]"
94-
:placeholder="$t('label.end.ip')"
95-
/>
96-
</a-form-item>
97-
<a-form-item :style="{ display: 'inline-block', width: '14%' }">
98-
<a-button type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
99-
</a-form-item>
40+
<a-row :gutter="12">
41+
<a-col :md="4" :lg="4">
42+
<a-form-item>
43+
<a-input
44+
v-decorator="[ 'gateway', {
45+
rules: [{ required: true, message: $t('message.error.gateway') }]
46+
}]"
47+
:placeholder="$t('label.gateway')"
48+
autoFocus
49+
/>
50+
</a-form-item>
51+
</a-col>
52+
<a-col :md="4" :lg="4">
53+
<a-form-item>
54+
<a-input
55+
v-decorator="[ 'netmask', {
56+
rules: [{ required: true, message: $t('message.error.netmask') }]
57+
}]"
58+
:placeholder="$t('label.netmask')"
59+
/>
60+
</a-form-item>
61+
</a-col>
62+
<a-col :md="4" :lg="4">
63+
<a-form-item>
64+
<a-input
65+
v-decorator="[ 'vlan', { rules: [{ required: false }] }]"
66+
:placeholder="$t('label.vlan')"
67+
/>
68+
</a-form-item>
69+
</a-col>
70+
<a-col :md="4" :lg="4">
71+
<a-form-item>
72+
<a-input
73+
v-decorator="[ 'startIp', {
74+
rules: [
75+
{
76+
required: true,
77+
message: $t('message.error.startip')
78+
},
79+
{
80+
validator: checkIpFormat,
81+
ipV4: true,
82+
message: $t('message.error.ipv4.address')
83+
}
84+
]
85+
}]"
86+
:placeholder="$t('label.start.ip')"
87+
/>
88+
</a-form-item>
89+
</a-col>
90+
<a-col :md="4" :lg="4">
91+
<a-form-item>
92+
<a-input
93+
v-decorator="[ 'endIp', {
94+
rules: [
95+
{
96+
required: true,
97+
message: $t('message.error.endip')
98+
},
99+
{
100+
validator: checkIpFormat,
101+
ipV4: true,
102+
message: $t('message.error.ipv4.address')
103+
}]
104+
}]"
105+
:placeholder="$t('label.end.ip')"
106+
/>
107+
</a-form-item>
108+
</a-col>
109+
<a-col :md="4" :lg="4">
110+
<a-form-item :style="{ display: 'inline-block', float: 'right' }">
111+
<a-button type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
112+
</a-form-item>
113+
</a-col>
114+
</a-row>
100115
</a-form>
101116
</template>
102117
</a-table>
@@ -126,7 +141,10 @@
126141
</div>
127142
</template>
128143
<script>
144+
import { mixinDevice } from '@/utils/mixin.js'
145+
129146
export default {
147+
mixins: [mixinDevice],
130148
props: {
131149
traffic: {
132150
type: String,
@@ -183,7 +201,7 @@ export default {
183201
title: '',
184202
dataIndex: 'actions',
185203
scopedSlots: { customRender: 'actions' },
186-
width: 50
204+
width: 70
187205
}
188206
],
189207
showError: false,

‎ui/src/views/infra/zone/StaticInputsForm.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -251,11 +251,10 @@ export default {
251251
min-height: 200px;
252252
text-align: center;
253253
vertical-align: center;
254-
padding-top: 16px;
255-
padding-top: 16px;
256254
margin-top: 8px;
257255
max-height: 300px;
258256
overflow-y: auto;
257+
padding: 16px 20px 0;
259258
260259
/deep/.has-error {
261260
.ant-form-explain {

‎ui/src/views/infra/zone/ZoneWizard.vue‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,15 @@
1818
<template>
1919
<div class="form">
2020
<a-steps
21+
ref="zoneStep"
2122
labelPlacement="vertical"
2223
size="small"
2324
:current="currentStep">
2425
<a-step
25-
v-for="(item) in steps"
26+
v-for="(item, index) in steps"
2627
:key="item.title"
27-
:title="$t(item.title)">
28+
:title="$t(item.title)"
29+
:ref="`step${index}`">
2830
</a-step>
2931
</a-steps>
3032
<div>
@@ -79,6 +81,7 @@
7981
</div>
8082
</template>
8183
<script>
84+
import { mixinDevice } from '@/utils/mixin.js'
8285
import ZoneWizardZoneTypeStep from '@views/infra/zone/ZoneWizardZoneTypeStep'
8386
import ZoneWizardZoneDetailsStep from '@views/infra/zone/ZoneWizardZoneDetailsStep'
8487
import ZoneWizardNetworkSetupStep from '@views/infra/zone/ZoneWizardNetworkSetupStep'
@@ -93,6 +96,7 @@ export default {
9396
ZoneWizardAddResources,
9497
ZoneWizardLaunchZone
9598
},
99+
mixins: [mixinDevice],
96100
data () {
97101
return {
98102
currentStep: 0,
@@ -138,9 +142,26 @@ export default {
138142
methods: {
139143
nextPressed () {
140144
this.currentStep++
145+
this.scrollToStepActive()
141146
},
142147
backPressed (data) {
143148
this.currentStep--
149+
this.scrollToStepActive()
150+
},
151+
scrollToStepActive () {
152+
if (!this.isMobile()) {
153+
return
154+
}
155+
this.$nextTick(() => {
156+
if (!this.$refs.zoneStep) {
157+
return
158+
}
159+
if (this.currentStep === 0) {
160+
this.$refs.zoneStep.$el.scrollLeft = 0
161+
return
162+
}
163+
this.$refs.zoneStep.$el.scrollLeft = this.$refs['step' + (this.currentStep - 1)][0].$el.offsetLeft
164+
})
144165
},
145166
onFieldsChanged (data) {
146167
if (data.zoneType &&
@@ -177,7 +198,8 @@ export default {
177198

178199
<style scoped lang="scss">
179200
.form {
180-
width: 95vw;
201+
width: 100%;
202+
181203
@media (min-width: 1000px) {
182204
width: 800px;
183205
}
@@ -197,6 +219,15 @@ export default {
197219
position: absolute;
198220
right: 0;
199221
}
222+
223+
/deep/.ant-steps {
224+
overflow-x: auto;
225+
padding: 10px 0;
226+
}
227+
228+
/deep/.submit-btn {
229+
display: none;
230+
}
200231
}
201232
202233
/deep/.ant-form-text {

‎ui/src/views/infra/zone/ZoneWizardAddResources.vue‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,15 @@
1717

1818
<template>
1919
<div style="width: auto;">
20-
<a-steps progressDot :current="currentStep" size="small" style="margin-left: 0; margin-top: 16px;">
20+
<a-steps
21+
ref="resourceStep"
22+
progressDot
23+
:current="currentStep"
24+
size="small"
25+
style="margin-left: 0; margin-top: 16px;">
2126
<a-step
22-
v-for="step in steps"
27+
v-for="(step, index) in steps"
28+
:ref="`resourceStep${index}`"
2329
:key="step.title"
2430
:title="$t(step.title)"></a-step>
2531
</a-steps>
@@ -97,13 +103,15 @@
97103
</div>
98104
</template>
99105
<script>
100-
import StaticInputsForm from '@views/infra/zone/StaticInputsForm'
101106
import { api } from '@/api'
107+
import { mixinDevice } from '@/utils/mixin.js'
108+
import StaticInputsForm from '@views/infra/zone/StaticInputsForm'
102109
103110
export default {
104111
components: {
105112
StaticInputsForm
106113
},
114+
mixins: [mixinDevice],
107115
props: {
108116
prefillContent: {
109117
type: Object,
@@ -687,14 +695,16 @@ export default {
687695
primaryStorageScopes: [],
688696
primaryStorageProtocols: [],
689697
storageProviders: [],
690-
currentStep: 0,
698+
currentStep: null,
691699
options: ['primaryStorageScope', 'primaryStorageProtocol', 'provider']
692700
}
693701
},
694702
mounted () {
703+
this.currentStep = this.prefillContent.resourceStep ? this.prefillContent.resourceStep : 0
695704
if (this.stepChild && this.stepChild !== '') {
696705
this.currentStep = this.steps.findIndex(item => item.fromKey === this.stepChild)
697706
}
707+
this.scrollToStepActive()
698708
if (this.prefillContent.hypervisor.value === 'BareMetal') {
699709
this.$emit('nextPressed')
700710
} else {
@@ -719,14 +729,35 @@ export default {
719729
this.$emit('nextPressed')
720730
} else {
721731
this.currentStep++
732+
this.$emit('fieldsChanged', { resourceStep: this.currentStep })
722733
}
734+
735+
this.scrollToStepActive()
723736
},
724737
handleBack (e) {
725738
if (this.currentStep === 0) {
726739
this.$emit('backPressed')
727740
} else {
728741
this.currentStep--
742+
this.$emit('fieldsChanged', { resourceStep: this.currentStep })
729743
}
744+
745+
this.scrollToStepActive()
746+
},
747+
scrollToStepActive () {
748+
if (!this.isMobile()) {
749+
return
750+
}
751+
this.$nextTick(() => {
752+
if (!this.$refs.resourceStep) {
753+
return
754+
}
755+
if (this.currentStep === 0) {
756+
this.$refs.resourceStep.$el.scrollLeft = 0
757+
return
758+
}
759+
this.$refs.resourceStep.$el.scrollLeft = this.$refs['resourceStep' + (this.currentStep - 1)][0].$el.offsetLeft
760+
})
730761
},
731762
fieldsChanged (changed) {
732763
this.$emit('fieldsChanged', changed)

0 commit comments

Comments
 (0)