From 7f54ba4f25f65d8f5c7e7add21cf4f2efb7dac07 Mon Sep 17 00:00:00 2001
From: blavenie <benoit.lavenier@e-is.pro>
Date: Wed, 20 Mar 2019 12:53:57 +0100
Subject: [PATCH] [fix] Settings: better layout on small screen
---
www/css/style.css | 17 ++++++-
www/i18n/locale-fr-FR.json | 4 +-
.../templates/settings/plugin_settings.html | 27 ++++++++---
www/templates/settings/settings.html | 47 ++++++++++++-------
4 files changed, 68 insertions(+), 27 deletions(-)
diff --git a/www/css/style.css b/www/css/style.css
index 98eb8b00..bd8c79dc 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -148,7 +148,22 @@
.settings .item-divider {
background-color: #f5f5f5;
}
-
+.settings .item .input-label{
+ width: 80%;
+}
+.settings .item-toggle .input-label{
+ display: inline;
+ width: auto;
+ max-width: 50%;
+}
+.settings .item-select .input-label{
+ display: inline;
+ width: auto;
+ max-width: 50%;
+}
+.settings .item .badge {
+ top: 22px;
+}
.no-margin {
margin: 0 !important;
}
diff --git a/www/i18n/locale-fr-FR.json b/www/i18n/locale-fr-FR.json
index d986f304..784c0db1 100644
--- a/www/i18n/locale-fr-FR.json
+++ b/www/i18n/locale-fr-FR.json
@@ -137,8 +137,8 @@
"USE_LOCAL_STORAGE": "Activer le stockage local",
"USE_LOCAL_STORAGE_HELP": "Permet de sauvegarder vos paramètres",
"WALLETS_SETTINGS": "Mes portefeuilles",
- "USE_WALLETS_ENCRYPTION": "Sécuriser la liste (chiffrement)",
- "USE_WALLETS_ENCRYPTION_HELP": "Permet de chiffrer la liste de vos portefeuilles. Authentification requise pour y accéder.",
+ "USE_WALLETS_ENCRYPTION": "Sécuriser la liste ?",
+ "USE_WALLETS_ENCRYPTION_HELP": "Permet de sécuriser la liste de vos portefeuilles (par chiffrement), en exigeant une authentification pour y accéder.",
"ENABLE_HELPTIP": "Activer les bulles d'aide contextuelles",
"ENABLE_UI_EFFECTS": "Activer les effets visuels",
"HISTORY_SETTINGS": "Mes opérations",
diff --git a/www/plugins/es/templates/settings/plugin_settings.html b/www/plugins/es/templates/settings/plugin_settings.html
index 1bd83aa7..2d4e24f8 100644
--- a/www/plugins/es/templates/settings/plugin_settings.html
+++ b/www/plugins/es/templates/settings/plugin_settings.html
@@ -14,9 +14,9 @@
</label>
</div>
- <div class="item item-toggle dark">
- <div ng-class="{'gray': !formData.enable}" class="input-label" translate>ES_SETTINGS.ENABLE_REMOTE_STORAGE</div>
- <h4 class="gray" ng-bind-html="'ES_SETTINGS.ENABLE_REMOTE_STORAGE_HELP' | translate"></h4>
+ <div class="item item-toggle item-text-wrap dark">
+ <div class="input-label" ng-class="{'gray': !formData.enable}" class="input-label" translate>ES_SETTINGS.ENABLE_REMOTE_STORAGE</div>
+ <h4 class="gray text-wrap" ng-bind-html="'ES_SETTINGS.ENABLE_REMOTE_STORAGE_HELP' | translate"></h4>
<label class="toggle toggle-royal">
<input type="checkbox" ng-model="formData.useRemoteStorage" ng-disabled="!formData.enable">
<div class="track">
@@ -27,10 +27,8 @@
<span class="item item-divider" translate>SETTINGS.NETWORK_SETTINGS</span>
- <div class="item ink" ng-click="formData.enable && changeEsNode()" ng-disabled="!formData.enable">
- <div class="input-label" ng-class="{'gray': !formData.enable}">
- {{'ES_SETTINGS.PEER' | translate}}
- </div>
+ <div class="item ink hidden-xs hidden-sm" ng-click="formData.enable && changeEsNode()" ng-disabled="!formData.enable">
+ <div class="input-label" ng-class="{'gray': !formData.enable}" translate>ES_SETTINGS.PEER</div>
<!-- node fallback node -->
<ng-if ng-if="isFallbackNode">
@@ -43,6 +41,21 @@
<span ng-if="!isFallbackNode" class="item-note" ng-class="{'dark': formData.enable}">{{server}}</span>
</div>
+ <ion-item class="ink item-icon-right item-text-wrap visible-xs visible-sm" ng-click="formData.enable && changeEsNode()" ng-disabled="!formData.enable">
+ <div class="input-label" ng-class="{'gray': !formData.enable}" translate>ES_SETTINGS.PEER</div>
+
+ <!-- node temporary changed -->
+ <ng-if ng-if="isFallbackNode">
+ <h4 class="gray text-wrap assertive" >
+ <b class="ion-alert-circled"></b>
+ <span ng-bind-html="'SETTINGS.PEER_CHANGED_TEMPORARY' | translate "></span>
+ </h4>
+ <div class="badge badge-assertive">{{server}}</div>
+ </ng-if>
+ <div class="badge" ng-class="{'badge-balanced': formData.enable, 'badge-stable': !formData.enable}"
+ ng-if="!isFallbackNode">{{server}}</div>
+ <i class="icon ion-ios-arrow-right"></i>
+ </ion-item>
<span class="item item-divider" translate>ES_SETTINGS.NOTIFICATIONS.DIVIDER</span>
diff --git a/www/templates/settings/settings.html b/www/templates/settings/settings.html
index 226af7bf..9fc22b8b 100644
--- a/www/templates/settings/settings.html
+++ b/www/templates/settings/settings.html
@@ -92,7 +92,7 @@
{{'SETTINGS.AUTHENTICATION_SETTINGS' | translate}}
</span>
- <div class="item item-toggle" >
+ <div class="item item-toggle item-text-wrap" >
<div class="input-label" ng-class="{'gray': !formData.useLocalStorage}">
{{'SETTINGS.REMEMBER_ME' | translate}}
</div>
@@ -106,18 +106,16 @@
</label>
</div>
- <div class="item item-input item-select">
- <div class="input-label">
- <span class="input-label" translate>SETTINGS.KEEP_AUTH</span>
- <h4 class="gray text-wrap" ng-bind-html="'SETTINGS.KEEP_AUTH_HELP' | translate"></h4>
- </div>
+ <ion-item class="item-text-wrap item-select">
+ <div class="input-label" translate>SETTINGS.KEEP_AUTH</div>
+ <h4 class="gray text-wrap hidden-xs" ng-bind-html="'SETTINGS.KEEP_AUTH_HELP' | translate"></h4>
<label>
<select ng-model="formData.keepAuthIdle"
ng-options="i as (keepAuthIdleLabels[i].labelKey | translate:keepAuthIdleLabels[i].labelParams ) for i in keepAuthIdles track by i">
</select>
</label>
- </div>
+ </ion-item>
<div class="item item-input hidden-xs hidden-sm" ng-class="{'gray': (!formData.useLocalStorage || !formData.rememberMe)}" ng-if="::$root.device.isDesktop()">
<div class="input-label">
@@ -134,7 +132,7 @@
<div class="item item-toggle item-text-wrap dark">
<span class="input-label" ng-class="{'gray': !formData.useLocalStorage}" translate>SETTINGS.USE_WALLETS_ENCRYPTION</span>
- <h4 class="gray" ng-bind-html="'SETTINGS.USE_WALLETS_ENCRYPTION_HELP' | translate">
+ <h4 class="gray text-wrap" ng-bind-html="'SETTINGS.USE_WALLETS_ENCRYPTION_HELP' | translate">
</h4>
<label class="toggle toggle-royal">
<input type="checkbox" ng-model="formData.useLocalStorageEncryption" ng-disabled="!formData.useLocalStorage">
@@ -146,7 +144,7 @@
<span class="item item-divider" translate>SETTINGS.HISTORY_SETTINGS</span>
- <div class="item item-toggle dark">
+ <div class="item item-toggle item-text-wrap dark">
<div class="input-label" translate>SETTINGS.DISPLAY_UD_HISTORY</div>
<label class="toggle toggle-royal">
<input type="checkbox" ng-model="formData.showUDHistory" >
@@ -172,10 +170,9 @@
<span class="item item-divider" translate>SETTINGS.NETWORK_SETTINGS</span>
- <div class="item ink item-text-wrap" ng-click="changeNode()">
- <div class="input-label">
- {{'SETTINGS.PEER' | translate}}
- </div>
+ <!-- Duniter node -->
+ <div class="item ink item-text-wrap hidden-xs hidden-sm" ng-click="changeNode()">
+ <div class="input-label" translate>SETTINGS.PEER</div>
<!-- node temporary changed -->
<ng-if ng-if="formData.node.temporary">
@@ -188,7 +185,22 @@
<div class="item-note dark" ng-if="!formData.node.temporary">{{bma.server}}</div>
</div>
+ <ion-item class="ink item-icon-right visible-xs visible-sm" ng-click="changeNode()">
+ <div class="input-label" translate>SETTINGS.PEER</div>
+
+ <!-- node temporary changed -->
+ <ng-if ng-if="formData.node.temporary">
+ <h4 class="gray text-wrap assertive" >
+ <b class="ion-alert-circled"></b>
+ <span ng-bind-html="'SETTINGS.PEER_CHANGED_TEMPORARY' | translate "></span>
+ </h4>
+ <div class="badge badge-assertive">{{bma.server}}</div>
+ </ng-if>
+ <div class="badge badge-balanced" ng-if="!formData.node.temporary">{{bma.server}}</div>
+ <i class="icon ion-ios-arrow-right"></i>
+ </ion-item>
+ <!-- Expert mode ?-->
<div class="item item-text-wrap item-toggle dark hidden-xs hidden-sm">
<div class="input-label" ng-bind-html="'SETTINGS.EXPERT_MODE' | translate"></div>
<h4 class="gray" ng-bind-html="'SETTINGS.EXPERT_MODE_HELP' | translate"></h4>
@@ -200,12 +212,13 @@
</label>
</div>
- <ion-item class="item-input item-select">
+ <!-- Block validity window-->
+ <ion-item class="item-text-wrap item-select">
<div class="input-label">
- <div class="input-label hidden-xs" translate>SETTINGS.BLOCK_VALIDITY_WINDOW</div>
- <div class="input-label visible-xs" translate>SETTINGS.BLOCK_VALIDITY_WINDOW_SHORT</div>
- <h4 class="gray " ng-bind-html="'SETTINGS.BLOCK_VALIDITY_WINDOW_HELP' | translate"></h4>
+ <div class="hidden-xs" translate>SETTINGS.BLOCK_VALIDITY_WINDOW</div>
+ <div class="visible-xs" translate>SETTINGS.BLOCK_VALIDITY_WINDOW_SHORT</div>
</div>
+ <h4 class="gray text-wrap hidden-xs" ng-bind-html="'SETTINGS.BLOCK_VALIDITY_WINDOW_HELP' | translate"></h4>
<label>
<select ng-model="formData.blockValidityWindow"
ng-options="i as (blockValidityWindowLabels[i].labelKey | translate:blockValidityWindowLabels[i].labelParams ) for i in blockValidityWindows track by i">
--
GitLab