Commit 54848211 authored by Benoit Lavenier's avatar Benoit Lavenier

[fix] iOS: My Account > background is fixed while scrolling - fix #832

[fix] Clicking on list item move the right icon (to the left), when an ink is enable
parent 66605a3a
......@@ -864,44 +864,6 @@ $screen-menu: 845px;
background-image: url('../img/card.png');
}
/**************
Item icons
**************/
.item.item-icon-left > i.avatar:first-child {
position: absolute;
display: flex;
height: 100%;
align-items: center;
font-size: 16px;
left: 16px;
top: 8px;
max-height: 32px;
max-width: 32px;
}
.item.item-checkbox.item-avatar > i.avatar:first-child,
.item.item-checkbox.item-avatar > i.item-image:first-child,
.item.item-checkbox.item-avatar .item-content > i.avatar:first-child,
.item.item-checkbox.item-avatar .item-content > i.item-image:first-child,
.item.item-checkbox.item-avatar * > i.avatar:first-child,
.item.item-checkbox.item-avatar * > i.item-image:first-child,
.item.item-checkbox.item-avatar * .item-content > i.avatar:first-child,
.item.item-checkbox.item-avatar * .item-content > i.item-image:first-child {
left: 65px;
}
.item.item-checkbox.item-avatar .item-content,
.item.item-checkbox .item-content .item-avatar {
padding-left: 65px;
}
@media screen and (max-width: $screen-xs-max) {
.item.item-icon-right > i.icon:last-child {
right: 1px;
}
}
/* ----
Popup alert
---- */
......@@ -933,41 +895,85 @@ $screen-menu: 845px;
* 'ion-refresher'
*******/
// Workaround to control background of 'ion-refresher'
.refresher-top-bg:before {
position: absolute;
display: block;
top: 0;
width: 100%;
height: 100px;
z-index: -10;
content: " ";
body {
// Set default refresher background height (for android)
--refresher-bg-height: 100px;
// Set default refresher background
--refresher-background-color: inherit;
}
.refresher-top-bg .scroll-refresher {
z-index: 50;
.refresher-positive-900-bg {
--refresher-background-color: $positive-900-bg;
}
// Set refresher color (icon and text)
.refresher-light .scroll-refresher {
.ionic-refresher-content {
color: $light;
.refresher-dark-100-bg {
--refresher-background-color: $dark-100-bg;
}
.platform-android {
// Workaround to control background of 'ion-refresher'
.refresher-positive-900-bg:before,
.refresher-dark-100-bg:before {
background-color: var(--refresher-background-color);
position: absolute;
display: block;
top: 0;
width: 100%;
height: var(--refresher-bg-height, 100px);
z-index: -10;
content: " ";
}
.scroll-refresher {
z-index: 50;
}
}
.platform-ios {
.refresher-positive-900-bg,
.refresher-dark-100-bg {
// use light color for icon and text
//@extend .refresher-light;
background-color: var(--refresher-background-color) !important;
.scroll {
background-color: #fff;
bottom: auto;
min-height: 100%;
}
}
.spinner {
stroke: $light;
fill: $light;
}
// Lighter style for refresher (icon and text)
.refresher-light {
.scroll-refresher {
.ionic-refresher-content {
color: $light;
}
.spinner {
stroke: $light;
fill: $light;
}
}
}
.refresher-positive-900-bg,
.refresher-dark-100-bg {
@extend .refresher-light;
}
/******
* Wallet view
*******/
.view-wallet {
/* set 'ion-refresher' background color */
.refresher-top-bg {
@extend .refresher-light;
}
.refresher-top-bg:before {
@extend .positive-900-bg;
// Set refresher background height (for android)
--refresher-bg-height: 200px;
.hero {
height: 200px;
}
......@@ -1041,7 +1047,6 @@ $screen-menu: 845px;
}
@media screen and (max-width: $screen-sm-max) {
.view-wallet {
.qrcode {
......@@ -1072,6 +1077,8 @@ $screen-menu: 845px;
*******/
@media screen and (max-width: $screen-sm-max) {
.view-wallet-tx {
--refresher-bg-height: 100px;
.hero {
height: 100px;
}
......@@ -1079,20 +1086,14 @@ $screen-menu: 845px;
}
@media screen and (min-width: $screen-md) {
.view-wallet-tx {
--refresher-bg-height: 140px;
.hero {
height: 140px;
}
}
}
.view-wallet-tx {
/* set 'ion-refresher' background color */
.refresher-top-bg {
@extend .refresher-light;
}
.refresher-top-bg:before {
@extend .positive-900-bg;
height: 100px;
}
.item-text-wrap {
white-space: normal !important;
......@@ -1133,17 +1134,20 @@ $screen-menu: 845px;
*******/
.view-identity {
.hero,
.refresher-top-bg:before {
@extend .dark-bg;
height: 200px;
}
.member .hero,
.member.refresher-top-bg:before {
@extend .positive-900-bg;
// Set refresher background height (for android)
--refresher-bg-height: 200px;
// Default wallet color
--refresher-background-color: $dark-100-bg;
// if member wallet, change wallet color
.member {
--refresher-background-color: $positive-900-bg;
}
.refresher-top-bg {
@extend .refresher-light;
.hero {
height: 200px;
background-color: var(--refresher-background-color);
}
}
......@@ -1238,10 +1242,10 @@ a.underline:hover,
.animate-fade-slide-in-right .expanded .item,
.animate-fade-slide-in-right .expanded.item,
.animate-ripple .expanded .item,
.animate-ripple .expanded.item
.card-avatar-small.expanded .item
.card-avatar-small .expanded .item
.card-avatar-small.expanded .card.card-comment
.animate-ripple .expanded.item,
.card-avatar-small.expanded .item,
.card-avatar-small .expanded .item,
.card-avatar-small.expanded .card.card-comment,
.card-avatar-small .expanded .card.card-comment
{
@extend .done;
......@@ -1392,13 +1396,66 @@ a.underline:hover,
.item-avatar.item-icon-right .icon:last-child,
.item-avatar.item-icon-right .icon-help:last-child,
.item-avatar.item-icon-right .icon-alert:last-child,
.item-avatar.item-icon-right.ink .icon.ion-ios-arrow-right,
.item-avatar.item-icon-right #menu .footer .icon-help:last-child,
#menu .footer .item-avatar.item-icon-right .icon-help:last-child {
left: auto;
}
/**********
Item > Other
Item > Left icon position
**********/
.item.item-icon-left > i.avatar:first-child {
position: absolute;
display: flex;
height: 100%;
align-items: center;
font-size: 16px;
left: 16px;
top: 8px;
max-height: 32px;
max-width: 32px;
}
.item.item-checkbox.item-avatar > i.avatar:first-child,
.item.item-checkbox.item-avatar > i.item-image:first-child,
.item.item-checkbox.item-avatar .item-content > i.avatar:first-child,
.item.item-checkbox.item-avatar .item-content > i.item-image:first-child,
.item.item-checkbox.item-avatar * > i.avatar:first-child,
.item.item-checkbox.item-avatar * > i.item-image:first-child,
.item.item-checkbox.item-avatar * .item-content > i.avatar:first-child,
.item.item-checkbox.item-avatar * .item-content > i.item-image:first-child {
left: 65px;
}
.item.item-checkbox.item-avatar .item-content,
.item.item-checkbox .item-content .item-avatar {
padding-left: 65px;
}
/**********
Item > Right icon position
**********/
// Workaround to force the right arrow to stay on the left
// (because the ink effect, a div.ink-ripple can be the last-child)
.item-icon-left.item-icon-right.ink .icon.ion-ios-arrow-right {
left: auto;
}
@media screen and (max-width: $screen-xs-max) {
// Reduce right space on the right icon
.item.item-icon-right > .icon:last-child,
// Workaround to force the right arrow to stay on the left
// (because the ink effect, a div.ink-ripple can be the last-child)
.item.item-icon-right > .icon.ion-ios-arrow-right{
right: 1px;
}
}
/**********
Item > Other properties
**********/
.item em {
......@@ -2179,8 +2236,8 @@ div[dropzone]:hover {
/**********
Wot identity
**********/
.hero.dark-bg {
background-color: #555;
.hero.dark-100-bg {
background-color: $dark-100-bg;
}
.hero.positive-900-bg {
background-color: $positive-900-bg !important;
......
This diff is collapsed.
......@@ -35,7 +35,6 @@
<meta property="og:title" content="Cesium" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Cesium is a Wallet for the Ğ1 currency." />
<meta property="og:type" content="website" />
<meta property="og:image" content="./img/logo_200px.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:height" content="200" />
......
......@@ -14,14 +14,14 @@
</button>
</ion-nav-buttons>
<ion-content scroll="true" class="refresher-top-bg refresher-light"
<ion-content scroll="true" class="refresher-positive-900-bg"
bind-notifier="{ rebind:settings.useRelative, locale:$root.settings.locale.id}">
<ion-refresher pulling-text="{{'COMMON.BTN_REFRESH' | translate}}"
on-refresh="doUpdate(true)">
</ion-refresher>
<div class="positive-900-bg hero" id="wallet-header"
<div class="positive-900-bg hero"
ng-class="{'hero-qrcode-active': toggleQRCode}">
<div class="content" ng-if="!loading">
......
......@@ -12,14 +12,13 @@
<cs-extension-point name="nav-buttons"></cs-extension-point>
<button class="button button-icon button-clear visible-xs visible-sm"
ng-if="enableSelectWallet"
ng-if="enableSelectWallet && !loading"
ng-click="showSelectWalletModal()">
<i class="ion-arrow-down-b"></i>
<i class=" ion-arrow-down-b"></i>
</button>
</ion-nav-buttons>
<ion-content scroll="true"
class="refresher-top-bg refresher-light"
<ion-content scroll="true" class="refresher-positive-900-bg"
bind-notifier="{ rebind:settings.useRelative, locale:settings.locale.id}">
<ion-refresher pulling-text="{{:locale:'COMMON.BTN_REFRESH' | translate}}"
......
......@@ -3,8 +3,8 @@
</ion-nav-title>
<ion-content scroll="true"
class="refresher-top-bg"
ng-class="{'member': !loading && formData.isMember}">
class="refresher-light"
ng-class="{'member refresher-positive-900-bg': !loading && formData.isMember, 'refresher-dark-100-bg': loading || !formData.isMember}">
<ion-refresher pulling-text="{{'COMMON.BTN_REFRESH' | translate}}"
on-refresh="doUpdate(true)">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment