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

[fix] Wot identity: display given certification stock (on small screen)

scss/ionic.app.scss

@@ -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;
   }
 }
 

www/css/style.css

@@ -277,7 +277,7 @@
 **********/
 
 .list .item.item-wallet .badge{
-  top: 28px;
+  top: 29px;
 }
 .list .item.item-wallet {
   height: 38px;

www/plugins/es/templates/wallet/view_wallet_extend.html

@@ -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>

www/plugins/es/templates/wot/view_identity_extend.html

@@ -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>

www/templates/login/popover_methods.html

@@ -36,7 +36,6 @@
         {{'LOGIN.METHOD.SCAN' | translate}}
       </a>
 
-
       <a class="item item-icon-left ink"
          ng-if="!isAuth"
          ng-click="changeMethod('PUBKEY')">

www/templates/wallet/list/view_wallets.html

@@ -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>

www/templates/wallet/view_wallet_tx.html

@@ -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>

www/templates/wot/view_identity.html

@@ -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>