Feature Request: Wizard

Post Reply
info@commodis.de
Posts: 9
Joined: 10 Mar 2021, 12:06

22 Nov 2021, 12:48

My company would love to see some form of native support from Serenity for wizards like in Ultima

https://www.primefaces.org/ultima/wizard.xhtml

Using the primefaces widget forces us to use AJAX (which we do not want in our usecase).
https://primefaces.github.io/primefaces ... nts/wizard

mert.sincan
Posts: 4852
Joined: 29 Jun 2013, 12:38

22 Dec 2021, 09:42

Hi,

Wizard is a custom widget for Ultima. Please see;

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        <title>PrimeFaces Ultima Wizard</title>

        <script type="text/javascript">
        //<![CDATA[
            var Wizard = {
                init: function() {
                    this.wizardContent = $('.wizard-content');
                    if (this.wizardContent.length) {
                        this.wizardCard = this.wizardContent.find('.wizard-card');
                        this.tabs = this.wizardCard.find('> .wizard-card-header .tab');
                        this.tabBar = this.wizardCard.find('> .wizard-card-header .tab-bar');

                        var continueButton = $('.continue-button'),
                            $this = this;

                        this.tabBar.css('width', (100 / this.tabs.length) + '%');

                        this.tabs.off('click.wizard-tab').on('click.wizard-tab', function() {
                            $this.openNextTab($(this));
                        });
                    
                        continueButton.off('click.cbutton').on('click.cbutton', function() {
                            var content = $(this).closest('.wizard-card-content'),
                                index = content.index(),
                                nextTab = $this.tabs.eq(index);
                                
                            content.find('.ink').remove();
                            $this.openNextTab(nextTab);
                        });
                    }
                },

                openNextTab: function(tab) {
                    var index = tab.index();

                    if (!tab.hasClass('selected-tab')) {
                        tab.siblings('.tab').removeClass('selected-tab').end().addClass('selected-tab');
                        this.wizardCard.children('.wizard-card-content').filter('.active-content').removeClass('active-content').end().eq(index).addClass('active-content');
                        this.tabBar.css('left', (index * (100 / this.tabs.length)) + '%');
                    }
                },

                selectOrderInfo: function(buttonSelector, orderSelector) {
                    var button = $(buttonSelector),
                        selectedOrder = $(orderSelector),
                        content = button.closest('.wizard-card-content'),
                        index = content.index(),
                        nextTab = this.tabs.eq(index);

                    content.find('.ink').remove();
                    selectedOrder.siblings().removeClass('selected-order').end().addClass('selected-order');
                    this.openNextTab(nextTab);
                }
            }


            $(function() {
                Wizard.init();
            });            
        //]]>
        </script>

        <h:outputScript name="js/ripple.js" library="ultima-layout" rendered="#{guestPreferences.ripple}"/>
    </h:head>

    <h:body styleClass="wizard-body">

        <div class="wizard-wrapper">
            <div class="wizard-topbar">
                <div class="logo"></div>
                <div class="profile">
                    <div class="profile-text">
                        <h1>Welcome to Ultima</h1>
                        <p>Please complete steps to register</p>
                    </div>
                    <p:graphicImage styleClass="profile-image" name="images/extensions/flag-us@2x.png"
                        library="ultima-layout" />
                </div>
            </div>
            <div class="wizard-content">
                <div class="wizard-card">
                    <div class="wizard-card-header">
                        <div class="p-grid p-col">
                            <div class="p-col-4 tab selected-tab register-tab">
                                <div class="icon">
                                    <i class="pi pi-sign-in"></i>
                                </div>
                                <div class="title">
                                    REGISTER
                                </div>
                            </div>
                            <div class="p-col-4 tab tier-tab">
                                <div class="icon">
                                    <i class="pi pi-clone"></i>
                                </div>
                                <div class="title">
                                    CHOOSE TIER
                                </div>
                            </div>
                            <div class="p-col-4 tab payment-tab">
                                <div class="icon">
                                    <i class="pi pi-shopping-cart"></i>
                                </div>
                                <div class="title">
                                    PAYMENT
                                </div>
                            </div>
                            <div class="tab-bar"></div>
                        </div>
                    </div>
                    <div class="wizard-card-content active-content register ">
                        <div class="p-grid ">
                            <div class="p-col-12 p-lg-6">
                                <h1>ESSENTIAL INFORMATION</h1>
                                <div class="forms ui-fluid">
                                    <div class="ui-inputgroup">
                                        <span class="ui-inputgroup-addon">
                                            <i class="pi pi-user"></i>
                                        </span>
                                        <span class="ui-float-label">
                                            <p:inputText/>
                                            <p:outputLabel for="@previous" value="Username"/>
                                        </span>
                                    </div>
                                    <div class="ui-inputgroup">
                                        <span class="ui-inputgroup-addon">
                                            <i class="pi pi-user"></i>
                                        </span>
                                        <span class="ui-float-label">
                                            <p:inputText/>
                                            <p:outputLabel for="@previous" value="Email"/>
                                        </span>
                                    </div>
                                    <div class="ui-inputgroup">
                                        <span class="ui-inputgroup-addon">
                                            <i class="pi pi-sign-in"></i>
                                        </span>
                                        <span class="ui-float-label">
                                            <p:password/>
                                            <p:outputLabel for="@previous" value="Password"/>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="p-col-12 p-lg-6 ui-fluid">
                                <h1>OPTIONAL</h1>
                                <div class="forms">
                                    <p:selectOneMenu id="timezone" style="margin-bottom:10px;">
                                        <f:selectItem itemLabel="Select Time Zone" itemValue="" />
                                        <f:selectItem itemLabel="UTC-12.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-11.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-10.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-09.30" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-09.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-08.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-07.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-06.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-05.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-04.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-03.30" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-03.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-02.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC-+00.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+01.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+02.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+03.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+03.30" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+04.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+04.30" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+05.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+05.30" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+05.45" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+06.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+06.30" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+07.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+08.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+08.45" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+09.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+09.30" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+10.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+10.30" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+11.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+12.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+12.45" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+13.00" itemValue="UTC-+Value" />
                                        <f:selectItem itemLabel="UTC+14.00" itemValue="UTC-+Value" />
                                    </p:selectOneMenu>

                                    <div class="calendar">
                                        <p:datePicker id="button" showIcon="true" placeholder="Birthdate"/>
                                    </div>

                                    <p:selectOneMenu id="ultima" style="margin-bottom:10px;">
                                        <f:selectItem itemLabel="Where did you hear Ultima" itemValue="" />
                                        <f:selectItem itemLabel="Blogs" itemValue="Blogs" />
                                        <f:selectItem itemLabel="Google Ads" itemValue="google" />
                                        <f:selectItem itemLabel="Your Forum" itemValue="prime-forum" />
                                        <f:selectItem itemLabel="Youtube" itemValue="Youtube" />
                                        <f:selectItem itemLabel="Events" itemValue="event" />
                                        <f:selectItem itemLabel="Other" itemValue="other" />
                                    </p:selectOneMenu>
                                </div>
                            </div>
                            <div class="p-col-12">
                                <p:commandButton type="button" value="CONTINUE" styleClass="continue-button" />
                            </div>
                        </div>
                    </div>
                    <div class="wizard-card-content tier">
                        <div class="p-grid ">
                            <div class="p-col-12 p-md-6 p-lg-4">
                                <div class="card basic">
                                    <div class="card-header">
                                        <div class="p-grid">
                                            <div class="p-col-8">
                                                <h1>BASIC</h1>
                                            </div>
                                            <div class="p-col-4">
                                                <h1>$5</h1><span>/m</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-row p-grid">
                                            <div class="p-col-3">
                                                <i class="pi pi-fw pi-check"></i>
                                            </div>
                                            <div class="p-col-9">Responsive</div>
                                        </div>
                                        <div class="card-row p-grid">
                                            <div class="p-col-3">
                                                <i class="pi pi-fw pi-check"></i>
                                            </div>
                                            <div class="p-col-9">Push Messages</div>
                                        </div>
                                        <div class="p-col-12 tier-button-wrapper">
                                            <p:commandButton value="BASIC" styleClass="tier-button basic" oncomplete="Wizard.selectOrderInfo('.basic', '.order-basic')" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="p-col-12 p-md-6 p-lg-4">
                                <div class="card pro">
                                    <div class="card-header">
                                        <div class="p-grid">
                                            <div class="p-col-7">
                                                <h1>PRO</h1>
                                            </div>
                                            <div class="p-col-5">
                                                <h1>$25</h1><span>/m</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-row p-grid">
                                            <div class="p-col-3">
                                                <i class="pi pi-fw pi-check"></i>
                                            </div>
                                            <div class="p-col-9">Responsive</div>
                                        </div>
                                        <div class="card-row p-grid">
                                            <div class="p-col-3">
                                                <i class="pi pi-fw pi-check"></i>
                                            </div>
                                            <div class="p-col-9">Push Messages</div>
                                        </div>
                                        <div class="card-row p-grid">
                                            <div class="p-col-3">
                                                <i class="pi pi-fw pi-check"></i>
                                            </div>
                                            <div class="p-col-9">7/24 Support</div>
                                        </div>
                                        <div class="card-row p-grid">
                                            <div class="p-col-3">
                                                <i class="pi pi-fw pi-check"></i>
                                            </div>
                                            <div class="p-col-9">Free Shipping</div>
                                        </div>
                                        <div class="p-col-12 tier-button-wrapper">
                                            <p:commandButton value="SELECT PRO" styleClass="tier-button pro" oncomplete="Wizard.selectOrderInfo('.pro', '.order-pro')" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="p-col-12 p-md-6 p-lg-4">
                                <div class="card pro-plus">
                                    <div class="card-header">
                                        <div class="p-grid">
                                            <div class="p-col-7">
                                                <h1>PRO+</h1>
                                            </div>
                                            <div class="p-col-5">
                                                <h1>$50</h1><span>/m</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-row p-grid">
                                            <div class="p-col-3">
                                                <i class="pi pi-fw pi-check"></i>
                                            </div>
                                            <div class="p-col-9">Responsive</div>
                                        </div>
                                        <div class="card-row p-grid">
                                            <div class="p-col-3">
                                                <i class="pi pi-fw pi-check"></i>
                                            </div>
                                            <div class="p-col-9">Push Messages</div>
                                        </div>
                                        <div class="card-row p-grid">
                                            <div class="p-col-3">
                                                <i class="pi pi-fw pi-check"></i>
                                            </div>
                                            <div class="p-col-9">7/24 Support</div>
                                        </div>
                                        <div class="card-row p-grid">
                                            <div class="p-col-3">
                                                <i class="pi pi-fw pi-check"></i>
                                            </div>
                                            <div class="p-col-9">Free Shipping</div>
                                        </div>
                                        <div class="card-row p-grid">
                                            <div class="p-col-3">
                                                <i class="pi pi-fw pi-check"></i>
                                            </div>
                                            <div class="p-col-9">Unlimited BW</div>
                                        </div>
                                        <div class="card-row p-grid">
                                            <div class="p-col-3">
                                                <i class="pi pi-fw pi-check"></i>
                                            </div>
                                            <div class="p-col-9">Special Gift Cards</div>
                                        </div>
                                        <div class="p-col-12 tier-button-wrapper">
                                            <p:commandButton value="SELECT PRO+" styleClass="tier-button pro-plus" oncomplete="Wizard.selectOrderInfo('.pro-plus', '.order-pro-plus')" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wizard-card-content payment">
                        <div class="p-grid p-nogutter">
                            <div class="p-lg-8 p-col-12 payment-info">
                                <div class="p-grid p-col">
                                    <p:selectOneRadio id="customRadio" layout="custom">
                                        <f:selectItem itemLabel="" itemValue="Credit" />
                                        <f:selectItem itemLabel="" itemValue="Paypal" />
                                    </p:selectOneRadio>

                                    <div class="p-col-1 p-lg-1 p-md-1" style="line-height: 2em">
                                        <p:radioButton id="opt1" for="customRadio" itemIndex="0" />
                                    </div>
                                    <div class="p-col-11 p-lg-5 p-md-5">
                                        <div class="credits">
                                            <p:graphicImage name="images/extensions/asset-mastercard.svg" library="ultima-layout" />
                                            <p:graphicImage name="images/extensions/asset-visa.svg" library="ultima-layout" />
                                            <p:graphicImage name="images/extensions/asset-amex.svg" library="ultima-layout" />
                                        </div>
                                    </div>
                                    <div class="p-col-1 p-lg-1 p-md-1" style="line-height: 2em">
                                        <p:radioButton id="opt2" for="customRadio" itemIndex="1" />
                                    </div>
                                    <div class="p-col-11 p-lg-5 p-md-5">
                                        <div class="paypal">
                                            <p:graphicImage name="images/extensions/asset-paypal.svg" library="ultima-layout" />
                                        </div>
                                    </div>
                                </div>
                                <div class="p-grid p-col">
                                    <div class="p-col-12">
                                        <span class="ui-float-label">
                                            <p:inputText/>
                                            <p:outputLabel for="@previous" value="Card Holder Name"/>
                                        </span>
                                    </div>
                                </div>
                                <div class="p-grid p-col">
                                    <div class="p-col-6">
                                        <span class="ui-float-label">
                                            <p:inputText/>
                                            <p:outputLabel for="@previous" value="Card No"/>
                                        </span>
                                    </div>
                                    <div class="p-col-3">
                                        <span class="ui-float-label">
                                            <p:inputText/>
                                            <p:outputLabel for="@previous" value="Date"/>
                                        </span>
                                    </div>
                                    <div class="p-col-3">
                                        <span class="ui-float-label">
                                            <p:inputText/>
                                            <p:outputLabel for="@previous" value="CCV"/>
                                        </span>
                                    </div>
                                </div>
                                <div class="p-grid p-col check-info">
                                    <p:selectManyCheckbox layout="responsive" columns="1">
                                        <f:selectItem itemLabel=" Save credit card information for future usage"
                                            itemValue="SaveInfo" />
                                    </p:selectManyCheckbox>
                                </div>
                            </div>
                            <div class="p-lg-4 p-col-12 order-info">
                                <div class="p-grid p-col">
                                    <div class="p-col-12">
                                        <h1>ORDER SUMMARY</h1>
                                    </div>
                                </div>
                                <div class="order order-default selected-order">
                                    <div class="p-grid p-col">
                                        <div class="p-col-8">Tier - </div>
                                        <div class="p-col-4 price">$0.00</div>
                                        <div class="p-col-8">VAT (%18)</div>
                                        <div class="p-col-4 price">$0.00</div>
                                    </div>
                                    <div class="p-grid p-col total">
                                        <div class="p-col-8">Total</div>
                                        <div class="p-col-4 price">$0.00</div>
                                        <div class="p-col-12">
                                            Please select one tier.
                                        </div>
                                    </div>
                                </div>
                                <div class="order order-basic">
                                    <div class="p-grid p-col">
                                        <div class="p-col-8">Tier - Basic</div>
                                        <div class="p-col-4 price">$5.00</div>
                                        <div class="p-col-8">VAT (%18)</div>
                                        <div class="p-col-4 price">$0.90</div>
                                    </div>
                                    <div class="p-grid p-col total">
                                        <div class="p-col-8">Total</div>
                                        <div class="p-col-4 price">$5.90</div>
                                        <div class="p-col-12">
                                            <p:commandButton type="button" value="CONFIRM ORDER" styleClass="buy-button" />
                                        </div>
                                    </div>
                                </div>
                                <div class="order order-pro">
                                    <div class="p-grid p-col">
                                        <div class="p-col-8">Tier - Pro</div>
                                        <div class="p-col-4 price">$25.00</div>
                                        <div class="p-col-8">VAT (%18)</div>
                                        <div class="p-col-4 price">$4.50</div>
                                    </div>
                                    <div class="p-grid p-col total">
                                        <div class="p-col-8">Total</div>
                                        <div class="p-col-4 price">$29.50</div>
                                        <div class="p-col-12">
                                            <p:commandButton type="button" value="CONFIRM ORDER" styleClass="buy-button" />
                                        </div>
                                    </div>
                                </div>
                                <div class="order order-pro-plus">
                                    <div class="p-grid p-col">
                                        <div class="p-col-8">Tier - Pro+</div>
                                        <div class="p-col-4 price">$50.00</div>
                                        <div class="p-col-8">VAT (%18)</div>
                                        <div class="p-col-4 price">$9.00</div>
                                    </div>
                                    <div class="p-grid p-col total">
                                        <div class="p-col-8">Total</div>
                                        <div class="p-col-4 price">$59.00</div>
                                        <div class="p-col-12">
                                            <p:commandButton type="button" value="CONFIRM ORDER" styleClass="buy-button" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h:outputStylesheet name="css/primeicons.css" library="ultima-layout"/>
        <h:outputStylesheet name="css/primeflex.min.css" library="ultima-layout"/>
        <h:outputStylesheet name="css/layout-#{guestPreferences.theme}.css" library="ultima-layout" />
        <h:outputStylesheet name="css/ripple.css" library="ultima-layout" />
    </h:body>

</html>

Code: Select all

.wizard-body {
    height: 100vh;
    background:  url("\#{resource['ultima-layout:images/extensions/background@2x.jpg']}") center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    .wizard-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;

        .wizard-topbar {
            background-color: #3949ab;
            z-index: 1000;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26); 
            height: 75px;
            padding: 0 10%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-basis: 75px;
            flex-grow: 0;
            flex-shrink: 0;

            .logo {
                display: inline-block;
                vertical-align: middle;
                width: 200px;
                height: 30px;
                background: url("\#{resource['ultima-layout:images/logo.png']}") top left no-repeat;
            }

            .profile {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row;

                .profile-text {
                    margin-right: 15px;
                    text-align: right;

                    h1{
                        font-size: 16px;
                        color:#ffffff;
                        margin: 0;
                    }

                    p{
                        font-size: 16px;
                        opacity: 0.6;
                        margin: 0;
                        color:rgba(255,255,255,.7);
                    }
                }

                .profile-image {
                    display: inline-block;
                    vertical-align: middle;
                    width: 40px;        
                } 
            }
        }

        .wizard-content {
            height: calc(100% - 75px);
            min-height: 600px;
            display: flex;
            align-items: center;
            justify-content: center;

            .wizard-card {
                background-color: #fafafa;
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2),
                            0 2px 1px -1px rgba(0, 0, 0, 0.12),
                            0 1px 1px 0 rgba(0, 0, 0, 0.14);
                height: 550px;
                width: 54.33%;
                display: flex;
                flex-direction: column;
                flex-grow: 0;
                flex-shrink: 0;

                .wizard-card-header{               
                    width:100%;                
                    background-color: #3f51b5;
                    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
                    position: relative;

                    .tab{
                        background-color: #3f51b5;
                        text-align: center;
                        cursor: pointer;
                        
                        i{
                            width: 20px;
                            opacity: 0.38;
                            color: #ffffff;
                        }
                        
                        .title{
                            color: #ffffff;
                            opacity: 0.38;
                            font-size: 16px;
                            line-height: 1.5em;
                        }

                        .icon{
                            line-height: 1.5em;
                        }

                        &.selected-tab{
                            transition-duration: 0.6s;

                            i{
                                opacity: 1;
                            }

                            .title{
                                opacity: 1;
                            }
                        }

                    }

                    .tab-bar {
                        position: absolute;
                        bottom: 0;
                        left: 0;                    
                        height: 2px;
                        width: 33.3333%;
                        transition: .5s cubic-bezier(.35,0,.25,1);
                        background-color: #ffffff;
                        visibility: visible;

                        &.tab-bar-register {
                            width: 33.3333%;
                            left: 0;
                        }

                        &.tab-bar-tier {
                            width: 33.3333%;
                            left: 33.3333%;
                        }

                        &.tab-bar-payment {
                            width: 33.3333%;
                            left: 66.6667%;
                        }
                    }
                }

                .wizard-card-content{
                    padding: 30px;
                    display: none;
                    overflow: auto;
                    height: 100%;

                    > .p-grid {
                        height: 100%;
                        width: 100%;
                    }

                    h1{
                        font-size: 12px;     
                        color: rgba(0, 0, 0, 0.6);
                        letter-spacing: 2px;
                        margin: 0;
                    }

                    &.active-content{
                        display: flex;
                        flex-grow: 1;
                    }

                    &.register{

                        .forms{              
                            .ui-inputgroup{
                                margin-top: 25px;
        
                                input{
                                    width: 100%;
                                    padding: 15px;
                                }

                                .ui-float-label {
                                    width: 100%;
                                }
                            }   
        
                            .ui-selectonemenu{
                                margin-top: 25px;
                                width: 100%;
        
                                .ui-selectonemenu-trigger{
                                    right: 10px;
                                }
                            }
        
                            .calendar{
                                margin-top:14px;
                            }
                        }    
                        
                        .continue-button{
                            &.ui-button{
                                width: 100%;
                                margin-top: 25px;
                            }
                        }
                    }

                    &.tier{
                        .card{                  
                            min-height: 400px;
                            padding: 0;   
                            position: relative;
                            
                            .card-header{                           
                                color:#ffffff;
                                font-size: 18px;
                                padding: 15px 10px;
                                background-color: #3f51b5;

                                h1{
                                    color: #ffffff;
                                    font-size: 24px;
                                    display: inline;
                                }
                            }

                            .card-content{
                                font-size: 14px;
                                padding:10px;
                            
                                i{
                                    color:#3f51b5;
                                }

                                .card-row{
                                    height: 40px;
                                    width: 100%;
                                }

                                .tier-button-wrapper{
                                    position: absolute;
                                    bottom: 15px;
                                    right: 10px;
                                    left: 0px;
                                    width: auto;

                                    .tier-button{
                                        &.ui-button{
                                            width: 100%;
                                        }
                                    }
                                }
                            }

                            &.pro{
                                .card-header{
                                    background-color: #e91e63;
                                }

                                .card-content{
                                    i{
                                        color:#e91e63;
                                    }  

                                    .tier-button{
                                        &.ui-button{
                                            background-color: #e91e63
                                        }
                                    }
                                }
                            }

                            &.pro-plus{
                                .card-header{
                                    background-color: #607d8b;
                                }

                                .card-content{

                                    i{
                                        color:#607d8b;
                                    }  

                                    .tier-button{
                                        &.ui-button{
                                            background-color: #607d8b
                                        }
                                    }
                                }
                            }
                        }
                    }

                    &.payment{              
                        padding: 0;

                        .payment-info{
                            padding: 70px 35px;

                            .ui-float-label{
                                input{
                                    width: 100%;
                                    padding-bottom: 15px;
                                    background-color: transparent;
                                } 
                            }  
                            
                            .ui-selectmanycheckbox{
                                margin-left: .5em;
                                font-size: 14px;
                            }
                            
                            #customPanel{
                                width:100%;
                            }

                            .check-info{
                                margin-top: 10px;
                            }
                        }

                        .order-info{
                            padding: 15px;
                            background-color: #e0e0e0;
                            border-left: solid 1px #bdbdbd;
                            font-size: 14px;
                            color: #757575;

                            .order-basic,.order-pro,.order-pro-plus,.order-default{
                                display: none;
                            }

                            .selected-order{
                                display: block;
                            }

                            h1{
                                margin-top: 15px;
                            }

                            .price{
                                font-weight: 700;
                                text-align: right;
                            }

                            .total{
                                border-top: 1px solid #bdbdbd;
                                padding: 15px 0px;
                                margin-top: 30px;
                            }

                            .buy-button{
                                &.ui-button{
                                    width: 100%;
                                    margin: 68px 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media(max-width:1024px){
    .wizard-body {
        .wizard-wrapper {
            .wizard-content {
                .wizard-card{
                    width: 90%;
                }
            }
        }
    }
}

@media(max-width:640px){
    .wizard-body {
        .wizard-wrapper {
            .wizard-topbar {
                height: 150px;
                padding: 0 5%;
                flex-direction: column;
                justify-content: space-around;
                flex-basis: 150px;

                .logo {
                    align-self: flex-start;
                }

                .profile {
                    align-self: flex-end;
                }
            }

            .wizard-content {
                height: calc(100% - 150px);
            }
        }
    }
}
You can integrate it into your project. Also, you can use the custom widgets of PrimeBlocks for such features.
https://www.primefaces.org/primeblocks-jsf/

Best Regards,

Post Reply

Return to “Serenity - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests