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

[fix] Settings: better layout on small screen

parent 09ec9a66
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
www/css/style.css
+ 16
− 1
View file @ 7f54ba4f
......@@ -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;
}
......
www/i18n/locale-fr-FR.json
+ 2
− 2
View file @ 7f54ba4f
......@@ -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",
......
www/plugins/es/templates/settings/plugin_settings.html
+ 20
− 7
View file @ 7f54ba4f
......@@ -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>
......
www/templates/settings/settings.html
+ 30
− 17
View file @ 7f54ba4f
......@@ -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">
......
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