Generic help for a Novize required - responsive design
16 views
Skip to first unread message
micha...@gmail.com
Apr 11, 2016, 1:58:08 PM4/11/16
to Polymer
Hi,
I am creating my first login screen with Polymer. On a 1920x1080 everything looks like it should be . However if the screen resolution is not sufficient to render the elements ie on an IPhone , it looks like they are overlayed ... i have attached two sceenshots
Any help or tips would be highly appreciated.
Cheers, Mike
here is the code of my two elements :
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<dom-module id="ngrt-login">
<style>
:host {
background: var(--default-primary-color);
height: 100%;
width: 100%;
align-items: center;
display: flex;
flex-direction: column;
/*justify-content: center;*/
/*box-sizing: border-box;*/
}
paper-input{
color:var(--primary-text-color) !important;
}
paper-button{
margin-top: 25px;
height: 35px;
line-height: 35px;
box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
background: var(--dark-primary-color);
color: white;
border: none;
border-radius: 1px;
cursor: pointer;
padding: 0px 16px;
width:100px
}
.title{
text-align: center;
height: 40px;
line-height: 40px;
color:var(--secondary-text-color);
}
.login-container{
background: #fff;
/*box-shadow: 10px 10px 25px rgba(0,0,0,0.25);*/
padding: 25px;
width: 400px;
height: 250px;
}
.logo img{
border-radius: 0;
width: 100px;
padding: 20px 0px;
}
.light img{
vertical-align:middle; /* Alignment the ig to the text */
}
</style>
<template>
<div class="logo"><a href="/home"><img src="../images/timeless-systems_logo.svg"/></a></div>
<div class="login-container">
<content></content>
<iron-ajax id="loginRequest" url="/auth/local" method="POST" content-type="application/json" on-response="handleResponse" on-error="handleError"></iron-ajax>
<div class="title">Sign in with your account</div>
<paper-input name="username" type="text" label="User Name" value="{{username}}" auto-validate pattern="[[usernameValidationPattern]]" error-message="[[usernameErrorMessage]]">
</paper-input>
<paper-input name="password" type="password" label="Password" value="{{password}}" auto-validate pattern="[[passwordValidationPattern]]" error-message="[[passwordErrorMessage]]">
</paper-input>
<div class="controls layout horizontal justified">
<label for='user_remember_me'>
<input name="user[remember_me]" type="hidden" value="0" /><input type="checkbox" value="1" name="user[remember_me]" id="user_remember_me" />
<span>Remember me</span>
</label>
<a href="/users/password/new">Forgot your password?</a>
</div>
<div class="controls layout horizontal justified">
<paper-button class='light' on-click="handleLogin">SIGN IN</paper-button>
<p>
<span class='light'>
Sign in with
</span>
<span class='light'>
<a href="/auth/google">
<img src="../images/btn_google_signin.png" height="27" width="28" alt="Login with Google" />
</a>
</span>
<span class='light'>
<a href="/auth/twitter">
<img src="../images/btn_twitter_signin.png" height="40" width="40" alt="Login with Twitter" />
</a>
</p>
<paper-toast id="paper-toast"></paper-toast>
</template>
</dom-module>
<script>
Polymer({
is: "ngrt-login",
properties: {
username: {
type: "string",
value: ""
},
/**
* Pattern used to validate username.
* @type {string}
*/
usernameValidationPattern: {
type: String,
value: '^[a-zA-Z0-9]+$'
},
/**
* Pattern used to validate password.
* @type {string}
*/
passwordValidationPattern: {
type: String,
value: '^[a-zA-Z0-9]+$'
},
/**
* Error message displayed if `usernameValidationPattern` is not matched.
* @type {string}
*/
usernameErrorMessage: {
type: String,
value: 'letters and numbers only'
},
/**
* Error message displayed if `passwordValidationPattern` is not matched.
* @type {string}
*/
passwordErrorMessage: {
type: String,
value: 'letters and numbers only'
}
},
attached: function () {
console.log('ngrt-login');
// this.username = this.password = "demo";
},
handleLogin : function () {
if(this.username.trim() == ""){
this.$["paper-toast"].text = "Username cannot be blank";
this.$["paper-toast"].show();
}else if(this.password == ""){
this.$["paper-toast"].text = "Password cannot be blank";
this.$["paper-toast"].show();
}else{
var body = {
username : this.username,
password : this.password
};
this.$.loginRequest.body = JSON.stringify(body);
this.$.loginRequest.generateRequest();
console.log('LoginRequest : ' + this.$.loginRequest.body);
}
},
handleResponse: function (e) {
console.log('handleResponse');
console.log(e.detail);
console.log(e.detail.xhr.responseURL);
location.assign(e.detail.xhr.responseURL);
},
handleError: function (e) {
console.log('handleError');
var response = e.detail.request.xhr.response;
console.log(response);
this.$["paper-toast"].text = response.message;
this.$["paper-toast"].show();
}
});
</script>
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/gold-email-input/gold-email-input.html">
<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<dom-module id="ngrt-signup">
<style>
:host {
background: var(--default-primary-color);
height: 100%;
width: 100%;
align-items: center;
display: flex;
flex-direction: column;
/*justify-content: center;
/*box-sizing: border-box;*/
position: relative;
}
paper-input{
color:var(--primary-text-color) !important;
}
paper-button{
margin-top: 25px;
height: 35px;
line-height: 35px;
box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
background: var(--dark-primary-color);
color: white;
border: none;
border-radius: 1px;
cursor: pointer;
padding: 0px 16px;
width:100px
}
.title{
text-align: center;
height: 40px;
line-height: 40px;
color:var(--secondary-text-color);
}
.signup-container{
background: #fff;
/*box-shadow: 10px 10px 25px rgba(0,0,0,0.25); . */
padding: 25px;
width: 400px;
height: 375px;
}
</style>
<template>
<div class="signup-container">
<content></content>
<iron-ajax id="signupRequest" url="/signup" method="POST" content-type="application/json" on-response="handleResponse" on-error="handleError"></iron-ajax>
<div class="title">New User ? Create an account today</div>
<paper-input name="name" type="text" label="Name" value="{{name}}" auto-validate pattern="[[nameValidationPattern]]" error-message="[[nameErrorMessage]]"></paper-input>
<paper-input name="username" type="text" label="User Name" value="{{username}}" auto-validate pattern="[[usernameValidationPattern]]" error-message="[[usernameErrorMessage]]"></paper-input>
<gold-email-input auto-validate label="Email" value="{{email}}" ></gold-email-input>
<paper-input name="password" type="password" label="Password" value="{{password}}" auto-validate pattern="[[passwordValidationPattern]]" error-message="[[passwordErrorMessage]]"></paper-input>
<paper-button on-click="handleSignup">SIGN UP</paper-button>
</div>
<paper-toast id="paper-toast"></paper-toast>
</template>
</dom-module>
<script>
Polymer({
is: "ngrt-signup",
properties: {
username: {
type: "string",
value: ""
},
/**
* Pattern used to validate username.
* @type {string}
*/
nameValidationPattern: {
type: String,
value: '^[a-zA-Z0-9]+$'
},
/**
* Pattern used to validate username.
* @type {string}
*/
usernameValidationPattern: {
type: String,
value: '^[a-zA-Z0-9]+$'
},
/**
* Pattern used to validate password.
* @type {string}
*/
passwordValidationPattern: {
type: String,
value: '^[a-zA-Z0-9]+$'
},
/**
* Error message displayed if `nameValidationPattern` is not matched.
* @type {string}
*/
nameErrorMessage: {
type: String,
value: 'letters and numbers only'
},
/**
* Error message displayed if `usernameValidationPattern` is not matched.
* @type {string}
*/
usernameErrorMessage: {
type: String,
value: 'letters and numbers only'
},
/**
* Error message displayed if `passwordValidationPattern` is not matched.
* @type {string}
*/
passwordErrorMessage: {
type: String,
value: 'letters and numbers only'
}
},
attached: function () {
console.log('ngrt-signup');
},
handleSignup : function () {
if(this.username.trim() == ""){
this.$["paper-toast"].text = "Username cannot be blank";
this.$["paper-toast"].show();
}else if(this.password == ""){
this.$["paper-toast"].text = "Password cannot be blank";
this.$["paper-toast"].show();
}else{
var body = {
username : this.username,
password : this.password,
email : this.email.toLowerCase()
};
this.$.signupRequest.body = JSON.stringify(body);
this.$.signupRequest.generateRequest();
console.log('signupRequest : ' + this.$.signupRequest.body);
}
},
handleResponse: function (e) {
console.log('handleResponse');
console.log(e.detail);
console.log(e.detail.xhr.responseURL);
location.assign(e.detail.xhr.responseURL);
},
handleError: function (e) {
console.log('handleError');
var response = e.detail.request.xhr.response;
console.log(response);
this.$["paper-toast"].text = response.message;
this.$["paper-toast"].show();
}
});
</script>
Reply all
Reply to author
Forward
0 new messages