user profile, signup, login to the new design
arnaucode idoctnef@openmailbox.org
Fri, 27 Jan 2017 01:27:51 +0100
11 files changed,
89 insertions(+),
61 deletions(-)
jump to
M
www/css/style.css
→
www/css/style.css
@@ -8,6 +8,40 @@ }
.o_floatRight{ float: right; } +.o_userProfileBackground{ + min-height: 30%!important; + width: 100%; + min-height: auto; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + -o-background-size: cover; + background-position: center; + background-image: url('../img/userProfileBackground.png'); + text-align: center; + /*color: white;*/ + + /* Create the parallax scrolling effect */ + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + + color: #ffffff; +} +.o_userImgCircular { + margin-top: 5%; + background: #ffffff; + width: 40%; + border: 4px #ffffff solid; + border-radius: 150px; + -webkit-border-radius: 150px; + -moz-border-radius: 150px; + /*background: url(http://link-to-your/image.jpg) no-repeat;*/ +} +.o_userImgCircular p{ + color: #ffffff!important; +} /* SISTEMA DE COLORS
M
www/js/translations.js
→
www/js/translations.js
@@ -13,7 +13,7 @@ "Help": "Help",
"Login": "Login", "Username": "Username", "Password": "Password", - "Mail": "Mail", + "Email": "Email", "Phone": "Phone", "Telegram": "Telegram", "Avatar": "Avatar",
M
www/templates/login.html
→
www/templates/login.html
@@ -1,24 +1,20 @@
<ion-modal-view> - <ion-header-bar> - <h1 class="title">{{'Login' | translate}}</h1> - <div class="buttons"> - <a class="button button-balanced" ng-href="#/app/signup">{{'Signup' | translate}}</a> - </div> - </ion-header-bar> <ion-content> + <img src="img/header.png" style="width:100%;"/> <form ng-submit="doLogin()"> - <div class="list"> - <label class="item item-input"> - <span class="input-label">{{'Username' | translate}}</span> - <input type="text" ng-model="loginData.username"> - </label> - <label class="item item-input"> - <span class="input-label">{{'Password' | translate}}</span> - <input type="password" ng-model="loginData.password"> - </label> - <label class="item"> - <button class="button button-block button-positive" type="submit">{{'Login' | translate}}</button> - </label> + <div class="list padding"> + <md-input-container class="md-block" flex-gt-sm> + <label>{{'Username' | translate}}</label> + <input ng-model="loginData.username"> + </md-input-container> + <md-input-container class="md-block" flex-gt-sm> + <label>{{'Password' | translate}}</label> + <input ng-model="loginData.password" type="password"> + </md-input-container> + <div> + <md-button class="o_purple100" ng-href="#/app/signup">{{'Signup' | translate}}</md-button> + <md-button class="o_purple300 o_floatRight" ng-click="doLogin()">{{'Login' | translate}}</md-button> + </div> </div> </form> </ion-content>
M
www/templates/signup.html
→
www/templates/signup.html
@@ -1,44 +1,37 @@
<ion-modal-view> <ion-header-bar> <h1 class="title">{{'Signup' | translate }}</h1> - <div class="buttons"> - <a class="button button-dark" ng-href="#/app/login">{{'Close' | translate }}</a> - </div> </ion-header-bar> <ion-content> - <form ng-submit="doSignup()"> - <div class="list"> - <label class="item item-input"> - <span class="input-label">{{'Username' | translate }}*</span> - <input type="text" ng-model="signupData.username"> - </label> - <label class="item item-input"> - <span class="input-label">{{'Password' | translate }}*</span> - <input type="password" ng-model="signupData.password"> - </label> - <label class="item item-input"> - <span class="input-label">{{'Mail' | translate }}*</span> - <input type="email" ng-model="signupData.email"> - </label> - <label class="item item-input"> - <span class="input-label">{{'Phone' | translate }}</span> - <input type="number" ng-model="signupData.phone"> - </label> - <label class="item item-input"> - <span class="input-label">{{'Telegram' | translate }}</span> - <input type="text" ng-model="signupData.telegram"> - </label> - <label class="item item-input"> - <span class="input-label">{{'Description' | translate }}</span> - <input type="text" ng-model="signupData.description"> - </label> - <!--<p>{{'Avatar' | translate }}*: <b>{{signupData.avatar}}</b></p> - <img ng-repeat="avatar in avatars" ng-click="avatarSelect('{{avatar}}')" ng-src="img/avatars/{{avatar}}.png" class="o-imgSelectAvatar" > ---> - <label class="item"> - <button class="button button-block button-positive" type="submit">{{'Signup' | translate }}</button> - </label> + <div class="padding"> + <md-input-container class="md-block" flex-gt-sm> + <label>{{'Username' | translate}}</label> + <input ng-model="signupData.username"> + </md-input-container> + <md-input-container class="md-block" flex-gt-sm> + <label>{{'Password' | translate}}</label> + <input type="password" ng-model="signupData.password"> + </md-input-container> + <md-input-container class="md-block" flex-gt-sm> + <label>{{'Email' | translate}}</label> + <input ng-model="signupData.email"> + </md-input-container> + <md-input-container class="md-block" flex-gt-sm> + <label>{{'Phone' | translate}}</label> + <input type="number" ng-model="signupData.phone"> + </md-input-container> + <md-input-container class="md-block" flex-gt-sm> + <label>{{'Telegram' | translate}}</label> + <input ng-model="signupData.telegram"> + </md-input-container> + <md-input-container class="md-block" flex-gt-sm> + <label>{{'Description' | translate}}</label> + <input ng-model="signupData.description"> + </md-input-container> + <div> + <md-button class="o_purple100" ng-href="#/app/login">{{'Cancel' | translate}}</md-button> + <md-button class="o_purple300 o_floatRight" ng-click="doSignup()">{{'Signup' | translate}}</md-button> + </div> </div> - </form> </ion-content> </ion-modal-view>
M
www/templates/user.html
→
www/templates/user.html
@@ -1,12 +1,14 @@
<ion-view view-title="{{'User' | translate}} {{user.username}}"> <ion-content> - <div class="item item-avatar"> - <img ng-src="{{user.avatar}}" /> - <h2>{{user.username}}</h2> + <div class="o_userProfileBackground"> + <img ng-src="{{user.avatar}}" class="o_userImgCircular" /> + <h3>{{user.username}}</h3> + <p>{{user.description}}</p> + <p>{{user.email}}</p> </div> - <div class="item item-body"> - <p class="o-bold">{{user.description}}</p> - <p>{{user.mail}}</p> + <div class=""> + + <p ng-show="user.telegram"> <!--<a ng-href="https://telegram.me/{{user.telegram}}" target="_blank" class="button">--> <img class='o-imgMenu' src="img/telegram.png" /> @{{user.telegram}}@@ -31,6 +33,9 @@ <!--<a ng-repeat="join in user.favs" ng-href="#/app/users/{{join.joinedUsername}}" class="button button-small button-dark">
<img ng-src="img/avatars/{{join.joinedAvatar}}.png" class="o-img-joined" />{{join.joinedUsername}}<br> </a>--> </div> + </div> + <div class="item"> + <img src="img/faircoinpublickey_sample.png" style="width: 100%;" /> </div> <div class="item item-body"> {{'current_publications_of' | translate}} {{user.username}}: