Skip to content
Snippets Groups Projects
Commit 54848211 authored by Benoit Lavenier's avatar Benoit Lavenier
Browse files

[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
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
scss/ionic.app.scss
+ 145
− 88
View file @ 54848211
...@@ -864,44 +864,6 @@ $screen-menu: 845px; ...@@ -864,44 +864,6 @@ $screen-menu: 845px;
background-image: url('../img/card.png'); 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 Popup alert
---- */ ---- */
...@@ -933,41 +895,85 @@ $screen-menu: 845px; ...@@ -933,41 +895,85 @@ $screen-menu: 845px;
* 'ion-refresher' * 'ion-refresher'
*******/ *******/
// Workaround to control background of 'ion-refresher' body {
.refresher-top-bg:before { // Set default refresher background height (for android)
position: absolute; --refresher-bg-height: 100px;
display: block;
top: 0; // Set default refresher background
width: 100%; --refresher-background-color: inherit;
height: 100px;
z-index: -10;
content: " ";
} }
.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-dark-100-bg {
.refresher-light .scroll-refresher { --refresher-background-color: $dark-100-bg;
.ionic-refresher-content { }
color: $light;
.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 * Wallet view
*******/ *******/
.view-wallet { .view-wallet {
/* set 'ion-refresher' background color */ // Set refresher background height (for android)
.refresher-top-bg { --refresher-bg-height: 200px;
@extend .refresher-light;
} .hero {
.refresher-top-bg:before {
@extend .positive-900-bg;
height: 200px; height: 200px;
} }
...@@ -1041,7 +1047,6 @@ $screen-menu: 845px; ...@@ -1041,7 +1047,6 @@ $screen-menu: 845px;
} }
@media screen and (max-width: $screen-sm-max) { @media screen and (max-width: $screen-sm-max) {
.view-wallet { .view-wallet {
.qrcode { .qrcode {
...@@ -1072,6 +1077,8 @@ $screen-menu: 845px; ...@@ -1072,6 +1077,8 @@ $screen-menu: 845px;
*******/ *******/
@media screen and (max-width: $screen-sm-max) { @media screen and (max-width: $screen-sm-max) {
.view-wallet-tx { .view-wallet-tx {
--refresher-bg-height: 100px;
.hero { .hero {
height: 100px; height: 100px;
} }
...@@ -1079,20 +1086,14 @@ $screen-menu: 845px; ...@@ -1079,20 +1086,14 @@ $screen-menu: 845px;
} }
@media screen and (min-width: $screen-md) { @media screen and (min-width: $screen-md) {
.view-wallet-tx { .view-wallet-tx {
--refresher-bg-height: 140px;
.hero { .hero {
height: 140px; height: 140px;
} }
} }
} }
.view-wallet-tx { .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 { .item-text-wrap {
white-space: normal !important; white-space: normal !important;
...@@ -1133,17 +1134,20 @@ $screen-menu: 845px; ...@@ -1133,17 +1134,20 @@ $screen-menu: 845px;
*******/ *******/
.view-identity { .view-identity {
.hero, // Set refresher background height (for android)
.refresher-top-bg:before { --refresher-bg-height: 200px;
@extend .dark-bg;
height: 200px; // Default wallet color
} --refresher-background-color: $dark-100-bg;
.member .hero,
.member.refresher-top-bg:before { // if member wallet, change wallet color
@extend .positive-900-bg; .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, ...@@ -1238,10 +1242,10 @@ a.underline:hover,
.animate-fade-slide-in-right .expanded .item, .animate-fade-slide-in-right .expanded .item,
.animate-fade-slide-in-right .expanded.item, .animate-fade-slide-in-right .expanded.item,
.animate-ripple .expanded .item, .animate-ripple .expanded .item,
.animate-ripple .expanded.item .animate-ripple .expanded.item,
.card-avatar-small.expanded .item .card-avatar-small.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,
.card-avatar-small .expanded .card.card-comment .card-avatar-small .expanded .card.card-comment
{ {
@extend .done; @extend .done;
...@@ -1392,13 +1396,66 @@ a.underline:hover, ...@@ -1392,13 +1396,66 @@ a.underline:hover,
.item-avatar.item-icon-right .icon:last-child, .item-avatar.item-icon-right .icon:last-child,
.item-avatar.item-icon-right .icon-help: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 .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, .item-avatar.item-icon-right #menu .footer .icon-help:last-child,
#menu .footer .item-avatar.item-icon-right .icon-help:last-child { #menu .footer .item-avatar.item-icon-right .icon-help:last-child {
left: auto; 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 { .item em {
...@@ -2179,8 +2236,8 @@ div[dropzone]:hover { ...@@ -2179,8 +2236,8 @@ div[dropzone]:hover {
/********** /**********
Wot identity Wot identity
**********/ **********/
.hero.dark-bg { .hero.dark-100-bg {
background-color: #555; background-color: $dark-100-bg;
} }
.hero.positive-900-bg { .hero.positive-900-bg {
background-color: $positive-900-bg !important; background-color: $positive-900-bg !important;
......
www/css/ionic.app.min.css
+ 2
− 2
View file @ 54848211
This diff is collapsed.
www/index.html
+ 0
− 1
View file @ 54848211
...@@ -35,7 +35,6 @@ ...@@ -35,7 +35,6 @@
<meta property="og:title" content="Cesium" /> <meta property="og:title" content="Cesium" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:description" content="Cesium is a Wallet for the Ğ1 currency." /> <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" content="./img/logo_200px.png" />
<meta property="og:image:type" content="image/png" /> <meta property="og:image:type" content="image/png" />
<meta property="og:image:height" content="200" /> <meta property="og:image:height" content="200" />
......
www/templates/wallet/view_wallet.html
+ 2
− 2
View file @ 54848211
...@@ -14,14 +14,14 @@ ...@@ -14,14 +14,14 @@
</button> </button>
</ion-nav-buttons> </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}"> bind-notifier="{ rebind:settings.useRelative, locale:$root.settings.locale.id}">
<ion-refresher pulling-text="{{'COMMON.BTN_REFRESH' | translate}}" <ion-refresher pulling-text="{{'COMMON.BTN_REFRESH' | translate}}"
on-refresh="doUpdate(true)"> on-refresh="doUpdate(true)">
</ion-refresher> </ion-refresher>
<div class="positive-900-bg hero" id="wallet-header" <div class="positive-900-bg hero"
ng-class="{'hero-qrcode-active': toggleQRCode}"> ng-class="{'hero-qrcode-active': toggleQRCode}">
<div class="content" ng-if="!loading"> <div class="content" ng-if="!loading">
......
www/templates/wallet/view_wallet_tx.html
+ 3
− 4
View file @ 54848211
...@@ -12,14 +12,13 @@ ...@@ -12,14 +12,13 @@
<cs-extension-point name="nav-buttons"></cs-extension-point> <cs-extension-point name="nav-buttons"></cs-extension-point>
<button class="button button-icon button-clear visible-xs visible-sm" <button class="button button-icon button-clear visible-xs visible-sm"
ng-if="enableSelectWallet" ng-if="enableSelectWallet && !loading"
ng-click="showSelectWalletModal()"> ng-click="showSelectWalletModal()">
<i class="ion-arrow-down-b"></i> <i class=" ion-arrow-down-b"></i>
</button> </button>
</ion-nav-buttons> </ion-nav-buttons>
<ion-content scroll="true" <ion-content scroll="true" class="refresher-positive-900-bg"
class="refresher-top-bg refresher-light"
bind-notifier="{ rebind:settings.useRelative, locale:settings.locale.id}"> bind-notifier="{ rebind:settings.useRelative, locale:settings.locale.id}">
<ion-refresher pulling-text="{{:locale:'COMMON.BTN_REFRESH' | translate}}" <ion-refresher pulling-text="{{:locale:'COMMON.BTN_REFRESH' | translate}}"
......
www/templates/wot/view_identity.html
+ 2
− 2
View file @ 54848211
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
</ion-nav-title> </ion-nav-title>
<ion-content scroll="true" <ion-content scroll="true"
class="refresher-top-bg" class="refresher-light"
ng-class="{'member': !loading && formData.isMember}"> 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}}" <ion-refresher pulling-text="{{'COMMON.BTN_REFRESH' | translate}}"
on-refresh="doUpdate(true)"> on-refresh="doUpdate(true)">
......
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