CODEWITHSUNDEEP
javascriptandroidhtmlcsscordova
Mssm
Mssm

Reputation: 787

Cordova is not giving the wanted result

Trying to do an app using Cordova, and I'm not having the wanted result.

Here's my app before building (displaying using ripple in google chrome) enter image description here

And Here's the rendering after being built (in my phone) enter image description here

Don't mind about the background image, I just need to design one with the appropriate size.

Other things that doesn't work well, all the animations, are either not with the right animation-duration, or not playing with the right size (like filling a button with another color when clicking on it goes out of its border).

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
    <title>LoginPage</title>
    <link rel="stylesheet" href="css/ExternalCSS/materialize.min.css">
    <link rel="stylesheet" href="css/ExternalCSS/semantic.min.css">
    <link rel="stylesheet" href="css/MyCSS/LoginPage.css">
</head>
<body id="body" class="verticalDiv">
    <div id="title" class="verticalDiv">
        <h1>SIGN IN</h1>
        <div class="horizentalDiv">
            <div class="verticalDiv">
                <svg><line x1="10" y1="0" x2="96" y2="0"/></svg>
                <svg><line x1="10" y1="0" x2="96" y2="0"/></svg>
            </div>
            <h6 style="margin: 0px 0px 0px 0px;">TO</h6>
            <div class="verticalDiv">
                <svg><line x1="5" y1="0" x2="90" y2="0"/></svg>
                <svg><line x1="5" y1="0" x2="90" y2="0"/></svg>
            </div>
        </div>
        <h3>YOUR ACCOUNT</h3>
    </div>
    <!-- FIN DU TEXTE -->
    <div id="informations" class="verticalDiv" >
        <div id="formulaireEmail">
            <div class="horizentalDiv">
                <input type="text" placeholder=" Email adress">
            </div>
        </div>
        <div id="FormulairePassword">
            <div class="horizentalDiv">
                <input type="password" placeholder=" Password">
            </div>
        </div>
        <div id="FormulaireConfirmationPassword">
            <div class="horizentalDiv">
                <input type="password" placeholder=" Password confirmation" style="animation-duration: 1s; display: none">
            </div>
        </div>
        <div id="buttons" class="horizentalDiv">
            <button class="horizentalDiv btn-large btn-floating waves-effect waves-light cyan">
                <img src="img/iconeConnexion.png" style="width: 25px; ">
            </button>
            <button class="horizentalDiv btn-large btn-floating pulse scale-transition cyan scale-in">
                <img src="img/iconeInscription.png" style="width: 25px;">
            </button>
            <button class="horizentalDiv btn-large btn-floating scale-transition cyan pulse scale-out">
                <img src="img/iconeAccueil.png" style="width: 25px;">
            </button>
        </div>
    </div>
    <div id="fbgmailsignin" class="verticalDiv">
        <button class="horizentalDiv fbgmail waves-effect waves-light ">
            <img src="img/FB.png">
        </button>
        <button class="horizentalDiv fbgmail waves-effect waves-light ">
            <img src="img/Gmail.png">
        </button>
    </div>
</body>
<script src="js/ExternalJS/jquery.min.js"></script>
<script src="js/ExternalJS/semantic.min.js"></script>
<script src="js/ExternalJS/materialize.min.js"></script>
<script src="js/MyJS/LoginPage.js"></script>

CSS:

html{  width: 100%;  height: 100%;  }
#body {
    position: absolute;
    width: 100%;
height: 100%;
left: 0px;
top: 0px;
margin: 0px 0px 0px 0px;
background-repeat: no-repeat;
background-image: linear-gradient(2deg, rgba(0, 206, 155, 0.3) 0%, rgba(0,         196, 208, 0.3) 100%), url("../../img/Background-image.png");
justify-content: space-around;
}
svg{  width: 100px;  height: 2px;  }
line{  stroke: rgb(255,255,255);  }
::-webkit-input-placeholder{  color: rgba(255,255,255,0.4);  }
h1,h2,h3,h4,h5,h6{  color: white;  margin: 5px 5px 0px 5px;  }
hr{  margin: 5px 0px 0px 0px;  }
input{  color: rgba(255,255,255,0.8);  font-size: 12pt;  }
/* My Classes */
.horizentalDiv{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.verticalDiv{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

/* DIV Text au millieu */
#title {animation-duration: 1.5s;}
#title h1{  margin: 0px 0px 0px 0px;  font-size: 40pt;  }
#title h6{  font-size: 8pt;  }
#title h3{  font-size: 14pt;  }
/* DIV Sign in */
#informations input{ padding: 0px 0px 0px 40px; }
#informations input[type="text"]{
    background: url("../../img/iconeEmail.png");
    background-repeat: no-repeat;
    background-position: left;
}
#informations input[type="password"]{
    background: url("../../img/iconePass.png");
    background-repeat: no-repeat;
    background-position: left;
}
/* Sign up / Sign in buttons */
#buttons button:nth-child(1),#buttons button:nth-child(2){  margin-right: 10px;  }
/* Gmail/FB Container */

#fbgmailsignin button:nth-child(1){  margin-bottom: 5px;  }
.fbgmail{  border-radius: 24px;  }

JavaScript:

LoginPage = {
launch: function(){
    this.initListeners();
},

initListeners: function(){
    var bouttonLogin = document.querySelector("#buttons button:nth-child(1)");
        bouttonLogin.addEventListener("click", function(){
            $("#buttons button:nth-child(1)").transition('jiggle');

        });
    var title = document.querySelector("#title");
        title.addEventListener("animationend", function(){
            LoginPage.Animation.animateTitleNext();
        });
    var bouttonInscription = document.querySelector("#buttons button:nth-child(2)");
        bouttonInscription.addEventListener("click", function(){
            LoginPage.Animation.animateButtonSignup(false);
            LoginPage.Animation.animerBouttonAccueil(true);
            LoginPage.Animation.animatePasswordConfirmation();
            LoginPage.Animation.animateTitle();
            LoginPage.Animation.animateFBGmail();
        });
    var bouttonAccueil = document.querySelector("#buttons button:nth-child(3");
        bouttonAccueil.addEventListener("click", function(){
            LoginPage.Animation.animerBouttonAccueil(false);
            LoginPage.Animation.animateButtonSignup(true);
            LoginPage.Animation.animatePasswordConfirmation();
            LoginPage.Animation.animateTitle();
            LoginPage.Animation.animateFBGmail();
        });
    var bouttonFB = document.querySelector("#fbgmailsignin button:nth-child(1)");
        bouttonFB.addEventListener("click", function(){
            $("#fbgmailsignin button:nth-child(1)").transition('jiggle');
        })
    var bouttonGmail = document.querySelector("#fbgmailsignin button:nth-child(2)");
        bouttonGmail.addEventListener("click", function(){
            $("#fbgmailsignin button:nth-child(2)").transition('jiggle');
        })
},

Animation: {
    firstTime: true,
    stop: false,

    animateTitle: function(){
        $("#title").transition('swing down');
        this.firstTime = !this.firstTime;
        this.stop = false;
    },
    animateTitleNext: function(){
        if(!this.stop){
            $("#title").transition('swing down');
            if(!this.firstTime) {
                document.querySelector("#title h1").innerHTML = "SIGN UP";
                document.querySelector("#title h6").innerHTML = "AND";
                document.querySelector("#title h3").innerHTML = "ENJOY !";
            }
            else {
                document.querySelector("#title h1").innerHTML = "SIGN IN";
                document.querySelector("#title h6").innerHTML = "TO";
                document.querySelector("#title h3").innerHTML = "YOUR ACCOUNT";
            }
            this.stop = true;
        }
    },
    animatePasswordConfirmation: function(){
        if(this.firstTime)
            $("#FormulaireConfirmationPassword input").transition("horizontal flip");
        else $("#FormulaireConfirmationPassword input").transition("vertical flip");
    },
    animateFBGmail: function(){
        if(this.firstTime){
            $("#fbgmailsignin button:nth-child(1)").transition('fly left');
            $("#fbgmailsignin button:nth-child(2)").transition('fly right');
        }
        else {
            $("#fbgmailsignin button:nth-child(1)").transition('fly right');
            $("#fbgmailsignin button:nth-child(2)").transition('fly left');
        }
    },
    animateButtonSignup: function(repere){
        var bouttonInscription = document.querySelector("#buttons button:nth-child(2)");
        if(repere){
            bouttonInscription.classList.remove("scale-out");
            bouttonInscription.classList.add("scale-in");
        }
        else{
            bouttonInscription.classList.remove("scale-in");
            bouttonInscription.classList.add("scale-out");
        }
    },
    animerBouttonAccueil: function(repere){
        var bouttonAccueil = document.querySelector("#buttons button:nth-child(3)");
            if(repere){
                bouttonAccueil.classList.remove("scale-out");
                bouttonAccueil.classList.add("scale-in");
            }
            else{
                bouttonAccueil.classList.remove("scale-in");
                bouttonAccueil.classList.add("scale-out");
            }
        }
    }
}
LoginPage.launch();

Here's the project link for the ones who want to test it. https://www.fichier-rar.fr/2017/07/05/myproject/

Thanks in advance...

Upvotes: 0

Views: 44

Answers (1)

Jose Rojas
Jose Rojas

Reputation: 3520

It looks like is not a responsive site and the container in your cordova app is bigger than browser one. You could debug your app in Chrome in Android case or Safari in the iOS case.

Regardig to effects, make sure that scale-out and scale-in classes have their transitions with prefix -web-kit the other way this does not works.

Upvotes: 1

Related Questions