Commit a2c2db7d authored by Benoit Lavenier's avatar Benoit Lavenier

[fix] list's item: Fix badge alignment on small screen

[fix] Wot identity: display given certification stock (on small screen)
parent 134c4625
......@@ -78,42 +78,30 @@ $screen-lg: 1200px;
//
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
//
// >>Autre doc http://getbootstrap.com/css/#responsive-utilities-classes
// Additional doc: http://getbootstrap.com/css/#responsive-utilities-classes
//
// ----------------------------------
// Smaller device: Phones (<401px)
// ----------------------------------
@media screen and (max-width: $screen-xxs-max) {
@-ms-viewport{
width: 320px;
}
.item .badge {
right: 16px;
}
}
// ----------------------------------
// Extra small device: Phones (<767px)
// ----------------------------------
@media screen and (max-width: $screen-xs-max) {
.hidden-xs {
display: none !important;
visibility: hidden !important;
}
.badge {
text-overflow: ellipsis !important;
white-space: nowrap;
overflow: hidden !important;
max-width: 300px !important;
display: block !important;
}
.badge:empty {
display: none !important;
}
.item .badge {
right: 16px;
}
.padding-top-xs {
padding-top: 10px;
}
}
@media screen and (min-width: $screen-sm) {
.hidden-xs {
......@@ -175,7 +163,10 @@ $screen-lg: 1200px;
margin: inherit;
}
}
// ----------------------------------
// Small devices: Tablets (≥768px)
// ----------------------------------
@media screen and (max-width: $screen-sm-max) and (min-width: $screen-sm){
.hidden-sm, .row-header.hidden-sm {
display: none !important;
......@@ -249,7 +240,9 @@ $screen-lg: 1200px;
}
// ----------------------------------
// Medium devices: Desktops (≥992px)
// ----------------------------------
@media screen and (min-width: $screen-md) and (max-width: $screen-md-max) {
.hidden-md {
display: none !important;
......@@ -297,8 +290,9 @@ $screen-lg: 1200px;
}
}
// ----------------------------------
// Large devices: Desktops (≥1200px)
// ----------------------------------
@media screen and (min-width: $screen-lg) {
.hidden-lg {
display: none !important;
......@@ -611,7 +605,7 @@ $screen-menu: 845px;
.popover-peer-info,
.popover-endpoints {
.item .badge {
right: 16px;
right: 16px !important;
}
.item .badge.badge-secondary {
......@@ -861,6 +855,10 @@ $screen-menu: 845px;
background-image: url('../img/card.png');
}
/**************
Item icons
**************/
.item.item-icon-left > i.avatar:first-child {
position: absolute;
display: flex;
......@@ -889,6 +887,12 @@ $screen-menu: 845px;
padding-left: 65px;
}
@media screen and (max-width: $screen-xs-max) {
.item.item-icon-right > i.icon:last-child {
right: 1px;
}
}
/* ----
Popup alert
---- */
......@@ -1355,27 +1359,16 @@ a.underline:hover,
border: solid 1px #D9D9D9;
overflow: hidden !important;
font-size: 45px !important;
/*padding-left: 0px;
padding-top: 0px;
text-align: center;
vertical-align: middle;*/
line-height: 56px;
width: 100% !important;
/*display: block !important;*/
max-height: 56px !important;
max-width: 56px !important;
top: 12px !important;
//left: 12px !important;
}
.item-avatar > .icon:first-child:before ,
.item-avatar .icon.item-image:first-child:before,
.item-avatar .item-content > .icon:first-child:before,
//.item-avatar .item-content .icon.item-image:first-child:before
//.item-avatar-left > .icon:first-child:before,
//.item-avatar-left .icon.item-image:first-child:before,
//.item-avatar-left .item-content > .icon:first-child:before,
//.item-avatar-left .item-content .icon.item-image:first-child:before,
.item-avatar.item-icon-right .icon:first-child:before,
.item-avatar.item-icon-right .icon-help:first-child:before,
.item-avatar.item-icon-right .icon-alert:first-child:before,
......@@ -1496,16 +1489,39 @@ a.underline:hover,
}
}
/**********
Badge
**********/
/*
* Badge
Badge inside an item
*/
.item.item-icon-right .badge,
.item.item-button-right .badge
{
right: 43px;
}
@media screen and (max-width: $screen-xs-max) {
.badge {
text-overflow: ellipsis !important;
white-space: nowrap;
overflow: hidden !important;
max-width: 300px !important;
display: block !important;
}
.badge:empty {
display: none !important;
}
.item .badge {
right: 26px !important;
}
}
/*
Editable badge
*/
$ionicon-var-badge-editable: $ionicon-var-edit + "\00a0";
.badge-editable:hover {
......@@ -1517,6 +1533,10 @@ $ionicon-var-badge-editable: $ionicon-var-edit + "\00a0";
content: $ionicon-var-badge-editable;
}
/*
Badge inside toolbar's button
*/
.bar {
.badge-button {
margin: 0 !important;
......@@ -1528,9 +1548,9 @@ $ionicon-var-badge-editable: $ionicon-var-edit + "\00a0";
}
}
/*
* Text
*/
/**********
Editable text
**********/
.text-editable:hover {
cursor: pointer;
......@@ -2116,7 +2136,7 @@ div[dropzone] {
.popover-locked-outputs {
.item .badge {
right: 16px;
right: 16px !important;
}
}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -277,7 +277,7 @@
**********/
.list .item.item-wallet .badge{
top: 28px;
top: 29px;
}
.list .item.item-wallet {
height: 38px;
......
......@@ -29,9 +29,7 @@
<small translate>PROFILE.PROFILE_DIVIDER_HELP</small>
</div>
<div class="double-padding-x padding-bottom">
<ng-include src="'plugins/es/templates/user/items_profile.html'" ng-init="showName=true"></ng-include>
</div>
<ng-include src="'plugins/es/templates/user/items_profile.html'" ng-init="showName=true"></ng-include>
<!-- subscriptions -->
<div class="item item-divider item-divider-top-border">
......@@ -61,30 +59,27 @@
<small translate>SUBSCRIPTION.SUBSCRIPTION_DIVIDER_HELP</small>
</div>
<div class="double-padding-x padding-bottom">
<div ng-if="!formData.subscriptions.count"
class="item gray" translate>SUBSCRIPTION.NO_SUBSCRIPTION</div>
<div ng-if="!formData.subscriptions.count"
class="item gray" translate>SUBSCRIPTION.NO_SUBSCRIPTION</div>
<a class="item item-icon-left item-text-wrap item-icon-right ink"
ng-if="formData.subscriptions.count && isDefaultWallet"
ui-sref="app.edit_subscriptions">
<i class="icon ion-gear-a"></i>
<span translate>SUBSCRIPTION.SUBSCRIPTION_COUNT</span>
<span class="badge badge-calm">{{formData.subscriptions.count}}</span>
<a class="item item-icon-left item-text-wrap item-icon-right ink"
ng-if="formData.subscriptions.count && isDefaultWallet"
ui-sref="app.edit_subscriptions">
<i class="icon ion-gear-a"></i>
<span translate>SUBSCRIPTION.SUBSCRIPTION_COUNT</span>
<span class="badge badge-calm">{{formData.subscriptions.count}}</span>
<i class="gray icon ion-ios-arrow-right"></i>
</a>
<a class="item item-icon-left item-text-wrap item-icon-right ink"
ng-if="formData.subscriptions.count && !isDefaultWallet"
ui-sref="app.edit_subscriptions_by_id({id: walletId})">
<i class="icon ion-gear-a"></i>
<span translate>SUBSCRIPTION.SUBSCRIPTION_COUNT</span>
<span class="badge badge-calm">{{formData.subscriptions.count}}</span>
<i class="gray icon ion-ios-arrow-right"></i>
</a>
<a class="item item-icon-left item-text-wrap item-icon-right ink"
ng-if="formData.subscriptions.count && !isDefaultWallet"
ui-sref="app.edit_subscriptions_by_id({id: walletId})">
<i class="icon ion-gear-a"></i>
<span translate>SUBSCRIPTION.SUBSCRIPTION_COUNT</span>
<span class="badge badge-calm">{{formData.subscriptions.count}}</span>
<i class="gray icon ion-ios-arrow-right"></i>
</a>
</div>
<i class="gray icon ion-ios-arrow-right"></i>
</a>
<!-- page -->
<div class="item item-divider item-divider-top-border">
......@@ -108,28 +103,25 @@
<small translate>REGISTRY.WALLET.REGISTRY_HELP</small>
</div>
<div class="double-padding-x padding-bottom">
<div ng-if="!formData.pages.count"
class="item gray" translate>REGISTRY.NO_PAGE</div>
<a class="item item-icon-left item-text-wrap item-icon-right ink"
ng-if="formData.pages.count && isDefaultWallet"
ui-sref="app.wallet_pages">
<i class="icon ion-social-buffer"></i>
<span translate>REGISTRY.MY_PAGES</span>
<span class="badge badge-calm">{{formData.pages.count}}</span>
<i class="gray icon ion-ios-arrow-right"></i>
</a>
<a class="item item-icon-left item-text-wrap item-icon-right ink"
ng-if="formData.pages.count && !isDefaultWallet"
ui-sref="app.wallet_pages_by_id({id: walletId})">
<i class="icon ion-social-buffer"></i>
<span translate>REGISTRY.MY_PAGES</span>
<span class="badge badge-calm">{{formData.pages.count}}</span>
<i class="gray icon ion-ios-arrow-right"></i>
</a>
</div>
<div ng-if="!formData.pages.count"
class="item gray" translate>REGISTRY.NO_PAGE</div>
<a class="item item-icon-left item-text-wrap item-icon-right ink"
ng-if="formData.pages.count && isDefaultWallet"
ui-sref="app.wallet_pages">
<i class="icon ion-social-buffer"></i>
<span translate>REGISTRY.MY_PAGES</span>
<span class="badge badge-calm">{{formData.pages.count}}</span>
<i class="gray icon ion-ios-arrow-right"></i>
</a>
<a class="item item-icon-left item-text-wrap item-icon-right ink"
ng-if="formData.pages.count && !isDefaultWallet"
ui-sref="app.wallet_pages_by_id({id: walletId})">
<i class="icon ion-social-buffer"></i>
<span translate>REGISTRY.MY_PAGES</span>
<span class="badge badge-calm">{{formData.pages.count}}</span>
<i class="gray icon ion-ios-arrow-right"></i>
</a>
</ng-if>
......@@ -23,8 +23,6 @@
<small translate>PROFILE.PROFILE_DIVIDER_HELP</small>
</div>
<div class="double-padding-x padding-bottom">
<ng-include src="'plugins/es/templates/user/items_profile.html'" ng-init="showName=false;"></ng-include>
</div>
<ng-include src="'plugins/es/templates/user/items_profile.html'" ng-init="showName=false;"></ng-include>
</ng-if>
......@@ -36,7 +36,6 @@
{{'LOGIN.METHOD.SCAN' | translate}}
</a>
<a class="item item-icon-left ink"
ng-if="!isAuth"
ng-click="changeMethod('PUBKEY')">
......
......@@ -59,7 +59,8 @@
</ion-content>
<button id="fab-add-wallet"
class="button button-fab button-fab-bottom-right button-assertive hidden-md hidden-lg drop"
class="button button-fab button-fab-bottom-right button-assertive hidden-md hidden-lg drop ng-hide"
ng-show="!loading"
ng-click="showNewWalletModal()">
<i class="icon ion-plus"></i>
</button>
......
......@@ -11,9 +11,10 @@
<ion-nav-buttons side="secondary">
<cs-extension-point name="nav-buttons"></cs-extension-point>
<button class="button button-icon button-clear icon ion-arrow-down-b visible-xs visible-sm"
<button class="button button-icon button-clear visible-xs visible-sm"
ng-if="enableSelectWallet"
ng-click="showSelectWalletModal()">
<i class="ion-arrow-down-b"></i>
</button>
</ion-nav-buttons>
......@@ -155,8 +156,8 @@
</ion-content>
<button id="fab-transfer"
ng-if="formData"
class="button button-fab button-fab-bottom-right button-energized-900 hidden-md hidden-lg drop"
ng-show="!loading"
class="button button-fab button-fab-bottom-right button-energized-900 hidden-md hidden-lg drop ng-hide"
ng-click="showTransferModal()">
<i class="icon ion-android-send"></i>
</button>
......
......@@ -127,7 +127,7 @@
<i class="icon ion-ribbon-a"></i>
<span translate>WOT.GIVEN_CERTIFICATIONS.SENT</span>
<cs-badge-given-certification identity="formData"
parameters="{sigStock: formData.sigStock}">
parameters="$root.currency.parameters">
</cs-badge-given-certification>
<i class="gray icon ion-ios-arrow-right"></i>
</a>
......
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