vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Steps refactor

pull/132/head
cagataycivici 2019-12-30 12:52:43 +03:00
parent bbf2bbac34
commit 28bba62530
6 changed files with 28 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/styles/app.scss
View File

@ -491,6 +491,10 @@ body {
&.implementation-charts { &.implementation-charts {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.demo-footer {
background-color: #ededed;
}
} }
&.content-submenu { &.content-submenu {
@ -619,7 +623,7 @@ body {
@include border-radius-top(3px); @include border-radius-top(3px);
a { a {
font-weight: 700; font-weight: 400;
color: #34495e; color: #34495e;
text-shadow: none; text-shadow: none;
height: inherit; height: inherit;
@ -1412,5 +1416,9 @@ pre[class*="language-"] code {
> h4 { > h4 {
color: #dedede !important color: #dedede !important
} }
.demo-footer {
background-color: #535353 !important;
}
} }
} }

2
src/views/steps/ConfirmationDemo.vue
View File

@ -56,7 +56,7 @@
</div> </div>
</template> </template>
<template slot="footer"> <template slot="footer">
<div class="p-grid p-fluid p-justify-between wizard-footer"> <div class="p-grid p-fluid p-justify-between wizard-footer demo-footer">
<div class="p-col-4 wizard-footer-back-button"> <div class="p-col-4 wizard-footer-back-button">
<Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" /> <Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
</div> </div>

8
src/views/steps/PersonalDemo.vue
View File

@ -24,13 +24,11 @@
</div> </div>
<div class="p-grid p-fluid wizard-content"> <div class="p-grid p-fluid wizard-content">
<div class="p-col-12 p-md-3" style="max-width: 176px;"> <div class="p-col-12 p-md-3" style="max-width: 176px;">
<InputText v-model="$v.firstname.$model" :class="{'p-error':$v.firstname.$invalid && submitted}" /> <InputText v-model="$v.firstname.$model" :class="{'p-error':$v.firstname.$invalid && submitted}" placeholder="Firstname"/>
<label class="wizard-input-label">First</label>
<ValidationMessage v-show="$v.firstname.$invalid && submitted" style="font-size: 12px">Firstname is required.</ValidationMessage> <ValidationMessage v-show="$v.firstname.$invalid && submitted" style="font-size: 12px">Firstname is required.</ValidationMessage>
</div> </div>
<div class="p-col-12 p-md-3" style="max-width: 176px;"> <div class="p-col-12 p-md-3" style="max-width: 176px;">
<InputText v-model="$v.lastname.$model" :class="{'p-error':$v.lastname.$invalid && submitted}" /> <InputText v-model="$v.lastname.$model" :class="{'p-error':$v.lastname.$invalid && submitted}" placeholder="Lastname" />
<label class="wizard-input-label">Last</label>
<ValidationMessage v-show="$v.lastname.$invalid && submitted" style="font-size: 12px">Lastname is required.</ValidationMessage> <ValidationMessage v-show="$v.lastname.$invalid && submitted" style="font-size: 12px">Lastname is required.</ValidationMessage>
</div> </div>
</div> </div>
@ -43,7 +41,7 @@
</div> </div>
</template> </template>
<template slot="footer"> <template slot="footer">
<div class="p-grid p-fluid p-justify-between wizard-footer"> <div class="p-grid p-fluid p-justify-between wizard-footer demo-footer">
<div class="p-col-4 wizard-footer-back-button"> <div class="p-col-4 wizard-footer-back-button">
<Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" /> <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
</div> </div>

4
src/views/steps/SeatDemo.vue
View File

@ -25,11 +25,9 @@
<div class="p-grid p-fluid wizard-content"> <div class="p-grid p-fluid wizard-content">
<div class="p-col-12 p-md-3" style="max-width: 176px;"> <div class="p-col-12 p-md-3" style="max-width: 176px;">
<Dropdown v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" /> <Dropdown v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" />
<label class="wizard-input-label">Class</label>
</div> </div>
<div class="p-col-12 p-md-3" style="max-width: 176px;"> <div class="p-col-12 p-md-3" style="max-width: 176px;">
<Dropdown v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" /> <Dropdown v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" />
<label class="wizard-input-label">Vagon</label>
</div> </div>
</div> </div>
<div class="p-grid p-fluid wizard-content"> <div class="p-grid p-fluid wizard-content">
@ -40,7 +38,7 @@
</div> </div>
</template> </template>
<template slot="footer"> <template slot="footer">
<div class="p-grid p-fluid p-justify-between wizard-footer"> <div class="p-grid p-fluid p-justify-between wizard-footer demo-footer">
<div class="p-col-4 wizard-footer-back-button"> <div class="p-col-4 wizard-footer-back-button">
<Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" /> <Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
</div> </div>

24
src/views/steps/StepsDemo.vue
View File

@ -82,9 +82,10 @@ export default {
.p-card-body { .p-card-body {
padding: 0; padding: 0;
padding-bottom: 0; }
padding-top: 0;
border-radius: 2px; .p-card-content {
padding: 1em;
} }
.card-header-message { .card-header-message {
@ -145,19 +146,12 @@ export default {
} }
.wizard-footer { .wizard-footer {
background-color: #ededed;
margin-top: 2em; margin-top: 2em;
margin-left: 0; margin-left: 0;
margin-right:0; margin-right:0;
& button { button {
max-width: 77px; max-width: 75px;
&:disabled {
background-color: #a0a0a0;
border: none;
cursor: unset;
}
} }
} }
@ -167,7 +161,7 @@ export default {
margin-left: .5em; margin-left: .5em;
span.pi { span.pi {
top: 54%; margin-top: -.4em;
} }
} }
@ -177,7 +171,7 @@ export default {
margin-right: .5em; margin-right: .5em;
span.pi { span.pi {
top: 54%; margin-top: -.4em;
} }
} }
@ -186,7 +180,7 @@ export default {
text-align: right; text-align: right;
margin-right: .5em; margin-right: .5em;
& button { button {
max-width: 108px; max-width: 108px;
} }
} }

159
src/views/steps/StepsDoc.vue
View File

@ -169,152 +169,7 @@ export default {
} }
} }
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css">
/deep/ .stepsdemo-content {
h1 {
font-weight: 400;
display: inline-block;
vertical-align: middle;
font-size: 24px;
margin-top: 1em;
}
i {
vertical-align: middle;
font-size: 2em;
margin-top: .3em;
}
.p-card-body {
padding: 0;
padding-bottom: 0;
padding-top: 0;
border-radius: 2px;
}
.card-header-message {
font-size: 14px;
color: #ffffff;
}
.wizard-header {
background-color: #057ad8;
margin:0;
max-height: 48px;
}
.wizard-header-content {
align-self: center;
padding: 0px;
font-weight: 600;
margin-left: 1em;
}
.wizard-header-steps {
align-self: center;
text-align: center;
max-width:90px;
padding: 0px;
font-size: 14px;
font-weight: normal;
}
.wizard-content {
padding-left: 1em;
margin-top: .1em;
p {
margin: 0;
}
&.wizard-confirmation {
box-shadow: 0 25px 0 -23px #ededed;
p {
font-weight: 600;
}
label.wizard-input-label {
opacity: 0.6;
font-size: 14px;
}
}
}
.wizard-content-summary {
margin-bottom: .1em;
padding-left: 1em;
p {
margin: 0;
}
}
.wizard-footer {
background-color: #ededed;
margin-top: 2em;
margin-left: 0;
margin-right:0;
& button {
max-width: 77px;
&:disabled {
background-color: #a0a0a0;
border: none;
cursor: unset;
}
}
}
.wizard-footer-back-button {
align-self: center;
text-align: left;
margin-left: .5em;
span.pi {
top: 54%;
}
}
.wizard-footer-next-button {
align-self: center;
text-align: right;
margin-right: .5em;
span.pi {
top: 54%;
}
}
.wizard-footer-complete-button {
align-self: center;
text-align: right;
margin-right: .5em;
& button {
max-width: 108px;
}
}
.wizard-input-label {
font-size: 12px;
}
p.wizard-input-header {
margin-bottom: 7px;
}
@media screen and (max-width: 768px) {
.wizard-content {
padding-right: 1em;
}
.wizard-header {
max-height: 66px;
}
}
}
</CodeHighlight>
</TabPanel> </TabPanel>
<TabPanel header="Personal"> <TabPanel header="Personal">
<CodeHighlight> <CodeHighlight>
@ -344,13 +199,11 @@ export default {
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-grid p-fluid wizard-content"&gt; &lt;div class="p-grid p-fluid wizard-content"&gt;
&lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt; &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
&lt;InputText v-model="$v.firstname.$model" :class="{'p-error':$v.firstname.$invalid && submitted}" /&gt; &lt;InputText v-model="$v.firstname.$model" :class="{'p-error':$v.firstname.$invalid && submitted}" placeholder="Firstname" /&gt;
&lt;label class="wizard-input-label"&gt;First&lt;/label&gt;
&lt;ValidationMessage v-show="$v.firstname.$invalid && submitted" style="font-size: 12px"&gt;Firstname is required.&lt;/ValidationMessage&gt; &lt;ValidationMessage v-show="$v.firstname.$invalid && submitted" style="font-size: 12px"&gt;Firstname is required.&lt;/ValidationMessage&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt; &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
&lt;InputText v-model="$v.lastname.$model" :class="{'p-error':$v.lastname.$invalid && submitted}" /&gt; &lt;InputText v-model="$v.lastname.$model" :class="{'p-error':$v.lastname.$invalid && submitted}" placeholder="Lastname"/&gt;
&lt;label class="wizard-input-label"&gt;Last&lt;/label&gt;
&lt;ValidationMessage v-show="$v.lastname.$invalid && submitted" style="font-size: 12px"&gt;Lastname is required.&lt;/ValidationMessage&gt; &lt;ValidationMessage v-show="$v.lastname.$invalid && submitted" style="font-size: 12px"&gt;Lastname is required.&lt;/ValidationMessage&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -363,7 +216,7 @@ export default {
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template slot="footer"&gt; &lt;template slot="footer"&gt;
&lt;div class="p-grid p-fluid p-justify-between wizard-footer"&gt; &lt;div class="p-grid p-fluid p-justify-between wizard-footer demo-footer"&gt;
&lt;div class="p-col-4 wizard-footer-back-button"&gt; &lt;div class="p-col-4 wizard-footer-back-button"&gt;
&lt;Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" /&gt; &lt;Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -443,11 +296,9 @@ export default {
&lt;div class="p-grid p-fluid wizard-content"&gt; &lt;div class="p-grid p-fluid wizard-content"&gt;
&lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt; &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
&lt;Dropdown v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" /&gt; &lt;Dropdown v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" /&gt;
&lt;label class="wizard-input-label"&gt;Class&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt; &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
&lt;Dropdown v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" /&gt; &lt;Dropdown v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" /&gt;
&lt;label class="wizard-input-label"&gt;Vagon&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-grid p-fluid wizard-content"&gt; &lt;div class="p-grid p-fluid wizard-content"&gt;
@ -458,7 +309,7 @@ export default {
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template slot="footer"&gt; &lt;template slot="footer"&gt;
&lt;div class="p-grid p-fluid p-justify-between wizard-footer"&gt; &lt;div class="p-grid p-fluid p-justify-between wizard-footer demo-footer"&gt;
&lt;div class="p-col-4 wizard-footer-back-button"&gt; &lt;div class="p-col-4 wizard-footer-back-button"&gt;
&lt;Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" /&gt; &lt;Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -661,7 +512,7 @@ export default {
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template slot="footer"&gt; &lt;template slot="footer"&gt;
&lt;div class="p-grid p-fluid p-justify-between wizard-footer"&gt; &lt;div class="p-grid p-fluid p-justify-between wizard-footer demo-footer"&gt;
&lt;div class="p-col-4 wizard-footer-back-button"&gt; &lt;div class="p-col-4 wizard-footer-back-button"&gt;
&lt;Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" /&gt; &lt;Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" /&gt;
&lt;/div&gt; &lt;/div&gt;