- Fix About layout

- update home buttons layout - Add CSS for hide/show depending on left menu

- Fix About layout
- update home buttons layout - Add CSS for hide/show depending on left menu
1faf31ee · Benoit Lavenier · 94e37e0b · 1faf31ee · 1faf31ee · 1faf31ee
Commit 1faf31ee authored 8 years ago by Benoit Lavenier
--- a/config.xml
+++ b/config.xml
@@ -27,6 +27,7 @@
    <param name="ios-package" onload="true" value="CDVStatusBar" />
  </feature>
  <platform name="android">
+    <preference name="Fullscreen" value="true" />
      <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
      <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
      <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />

--- a/scss/ionic.app.scss
+++ b/scss/ionic.app.scss
@@ -54,6 +54,8 @@ $screen-sm-max:                   991px;
 $screen-md:                       992px;
 $screen-md-max:                   1199px;
 $screen-lg:                       1200px;
+
+
 // IE10 on Windows Phone 8
 // IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
 // other words, say on a Lumia, you'll get 768px as the device width,
@@ -279,6 +281,10 @@ $screen-lg:                       1200px;
        display: none !important;
        visibility: hidden !important;
    }
+    .visible-lg {
+        display: inherit !important;
+        visibility: visible !important;
+    }
    .badge {
      text-overflow: ellipsis !important;
      white-space: nowrap;
@@ -296,12 +302,6 @@ $screen-lg:                       1200px;
        visibility: visible;
    }
 }
-@media screen and (min-width: $screen-lg) {
-    .visible-lg {
-        display: inherit !important;
-        visibility: visible !important;
-    }
-}
 @media screen and (max-width: $screen-md-max) {
    .visible-lg {
        display: none;
@@ -320,20 +320,116 @@ $screen-lg:                       1200px;
    }
 }

+/* ============
+ Left menu
+=============== */
+
+// Resolution for left menu show/hide
+$screen-nomenu-max:               844px;
+$screen-menu:                     845px;
+
+// Screen without left menu
+@media screen and (max-width: $screen-nomenu-max) {
+    .hidden-nomenu {
+        display: none !important;
+        visibility: hidden !important;
+    }
+    .visible-nomenu {
+        display: inherit !important;
+        visibility: visible !important;
+    }
+}
+@media screen and (min-width: $screen-menu) {
+    .hidden-nomenu {
+        display: inherit;
+        visibility: visible;
+    }
+    .visible-nomenu {
+        display: none !important;
+        visibility: hidden !important;
+    }
+}
+
+// Screen WITH left menu
+@media screen and (min-width: $screen-menu) {
+    .hidden-menu {
+        display: none !important;
+        visibility: hidden !important;
+    }
+    .visible-menu {
+        display: inherit !important;
+        visibility: visible !important;
+    }
+}
+@media screen and (max-width: $screen-nomenu-max) {
+    .hidden-menu {
+        display: inherit;
+        visibility: visible;
+    }
+    .visible-menu {
+        display: none;
+        visibility: hidden;
+    }
+}
+
 #unitPopover .item.selected {
  background-color: $stable;
 }

+/* ============
+ Home page
+=============== */
+
 #home .logo {
  margin-top: 15px;
-  height: 200px;
  width: 100%;
-  background-image: url(../../resources/logo/svg/colors/logo.large.cesium.dune.svg);
-  background-size: 200px 200px;
  background-position: center center;
  background-repeat: no-repeat;
 }

+#home .center {
+  float: none;
+  text-align: center;
+  display: inline-block;
+}
+#home .center .button {
+  display: inline-block;
+}
+
+@media screen and (max-width: $screen-xs-max) {
+  #home .logo {
+    height: 96px;
+    background-image: url(../img/logo_96px.png);
+    background-size: 96px 96px;
+  }
+  #home .footer {
+    display:none;
+  }
+}
+@media screen and (min-width: $screen-sm) and (max-width: $screen-sm-max) {
+  #home .logo {
+    height: 144px;
+    background-image: url(../img/logo_144px.png);
+    background-size: 144px 144px;
+  }
+  #home .button {
+     max-width: 350px;
+  }
+}
+@media screen and (min-width: $screen-md) {
+  #home .logo {
+    height: 200px;
+    background-image: url(../../resources/logo/svg/colors/logo.large.cesium.dune.svg);
+    background-size: 200px 200px;
+  }
+
+  #home .button {
+     max-width: 350px;
+  }
+}
+
+
+
 @media screen and (min-width: $screen-md) {
  .circle-bg-dark {
    ion-content.scroll-content {

--- a/www/css/ionic.app.css
+++ b/www/css/ionic.app.css
--- a/www/css/ionic.app.min.css
+++ b/www/css/ionic.app.min.css
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -181,8 +181,15 @@ angular.module('cesium', ['ionic', 'ionic-material', 'ngMessages', 'ngAnimate',
      if (ionic.Platform.isIOS()) {
        cordova.plugins.Keyboard.disableScroll(true);
      }
+
+      // See - http://ionicframework.com/docs/api/page/keyboard/
+      else if (ionic.Platform.isAndroid()) {
+        ionic.Platform.isFullScreen = true;
+      }
    }

+
+
    // Status bar
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required

--- a/www/js/controllers/app-controllers.js
+++ b/www/js/controllers/app-controllers.js
@@ -258,6 +258,14 @@ function AppController($scope, $rootScope, $ionicModal, $state, $ionicSideMenuDe
    });
  };

+  $scope.showAboutModal = function() {
+    Modals.showAbout();
+  };
+
+  $scope.showNewAccountModal = function() {
+    Modals.showNewAccount();
+  };
+
  ////////////////////////////////////////
  // Layout Methods
  ////////////////////////////////////////

--- a/www/js/controllers/home-controllers.js
+++ b/www/js/controllers/home-controllers.js
@@ -160,14 +160,6 @@ function NewAccountModalController($scope, $ionicModal, $state, $ionicSideMenuDe
 function HomeController($scope, Modals) {
  'ngInject';

-  /* -- modals -- */
-  $scope.showAboutModal = function() {
-    Modals.showAbout();
-  };
-
-  $scope.showNewAccountModal = function() {
-    Modals.showNewAccount();
-  };
 }

 function JoinController($scope, $timeout, Modals) {

--- a/www/templates/home/home.html
+++ b/www/templates/home/home.html
@@ -3,64 +3,57 @@

  </ion-nav-title>

-  <ion-content class="has-header center padding-xs positive-900-bg">
+  <ion-content class="has-header text-center padding-xs positive-900-bg">

    <h2 class="hidden-xs" translate>HOME.WELCOME</h2>
    <div class="logo"></div>
    <h4 class="hidden-xs" translate>HOME.MESSAGE</h4>
    <h4 class="visible-xs" translate>HOME.MESSAGE_SHORT</h4>

-    <div class="row no-padding">
-      <div class="col col-25 hidden-xs hidden-sm">&nbsp;</div>
-
-      <div class="col">
-        <!-- CURRENCY -->
-        <button type="button"
-                class="button button-block button-stable button-raised icon icon-left ion-ios-world-outline ink-dark"
-                ng-if="options.registry.enable"
-                ui-sref="app.currency_lookup" translate>HOME.BTN_CURRENCIES</button>
-        <button type="button"
-                class="button button-block button-stable button-raised icon icon-left ion-ios-world-outline ink-dark hidden-sm hidden-xs"
-                ng-if="!options.registry || !options.registry.enable"
-                ui-sref="app.currency_view_lg" translate>HOME.BTN_CURRENCY</button>
-        <button type="button"
-                class="button button-block button-stable button-raised icon icon-left ion-ios-world-outline ink-dark visible-sm visible-xs"
-                ng-if="!options.registry || !options.registry.enable"
-                ui-sref="app.currency_view" translate>HOME.BTN_CURRENCY</button>
-
-        <button type="button"
-                class="button button-block button-positive button-raised icon icon-left ion-locked ink-dark"
-                ng-click="login()" ng-show="!isLogin()" translate>COMMON.BTN_LOGIN</button>
-        <button type="button"
-                class="button button-block button-positive button-raised icon icon-left ion-card ink-dark"
-                ui-sref="app.view_wallet" ng-show="isLogin()" translate>HOME.BTN_ACCOUNT</button>
-
-        <div class="text-center no-padding" ng-show="!isLogin()">
-          {{'LOGIN.NO_ACCOUNT_QUESTION'|translate}}
-          <br class="visible-xs">
-          <b>
-            <a class="assertive" ng-click="showNewAccountModal()" translate>
+    <div class="center">
+
+      <!-- CURRENCY -->
+      <button type="button"
+              class="button button-block button-stable button-raised icon icon-left ion-ios-world-outline ink-dark"
+              ng-if="options.registry.enable"
+              ui-sref="app.currency_lookup" translate>HOME.BTN_CURRENCIES</button>
+      <button type="button"
+              class="button button-block button-stable button-raised icon icon-left ion-ios-world-outline ink-dark hidden-sm hidden-xs"
+              ng-if="!options.registry || !options.registry.enable"
+              ui-sref="app.currency_view_lg" translate>HOME.BTN_CURRENCY</button>
+      <button type="button"
+              class="button button-block button-stable button-raised icon icon-left ion-ios-world-outline ink-dark visible-sm visible-xs"
+              ng-if="!options.registry || !options.registry.enable"
+              ui-sref="app.currency_view" translate>HOME.BTN_CURRENCY</button>
+
+      <button type="button"
+              class="button button-block button-positive button-raised icon icon-left ion-locked ink-dark"
+              ng-click="login()" ng-show="!isLogin()" translate>COMMON.BTN_LOGIN</button>
+      <button type="button"
+              class="button button-block button-positive button-raised icon icon-left ion-card ink-dark"
+              ui-sref="app.view_wallet" ng-show="isLogin()" translate>HOME.BTN_ACCOUNT</button>
+
+      <div class="text-center no-padding" ng-show="!isLogin()">
+        {{'LOGIN.NO_ACCOUNT_QUESTION'|translate}}
+        <br class="visible-xs">
+        <b>
+          <a class="assertive" ng-click="showNewAccountModal()" translate>
            LOGIN.CREATE_ACCOUNT
          </a>
-          </b>
-        </div>
+        </b>
      </div>

-      <div class="col col-25 hidden-xs hidden-sm">&nbsp;</div>
+      <div class="text-center no-padding visible-xs stable">
+        <br/>
+        <!-- version -->
+        <span translate="COMMON.APP_VERSION" translate-values="{version: config.VERSION}"></span>
+        |
+        <!-- about -->
+        <a href="#" ng-click="showAboutModal()" translate>HOME.BTN_ABOUT</a>
+      </div>
    </div>

-  </ion-content>
-
-  <ion-footer-bar align-title="center" class="positive-900-bg light footer">
-
-    <h1 class="title stable">
-      <!-- version -->
-      <span translate="COMMON.APP_VERSION" translate-values="{version: config.VERSION}"></span>
-      |
-      <!-- about -->
-      <a href="#" ng-click="showAboutModal()" translate>HOME.BTN_ABOUT</a>
-    </h1>
-  </ion-footer-bar>

+  </ion-content>

 </ion-view>
--- a/www/templates/home/modal_about.html
+++ b/www/templates/home/modal_about.html
@@ -11,21 +11,27 @@
      <div class="item padding">
        Cesium est <b>libre de droit</b> (license GNU GPLv3).
      </div>
-      <div class="item item-icon-left">
-        <i class="icon ion-social-github"></i>
-        Code source :
-        <a href="https://github.com/duniter/cesium">https://github.com/duniter/cesium</a>
+      <div class="item item-complex item-icon-left">
+        <div class="item-content">
+          <i class="item-image icon ion-social-github"></i>
+          Code source :
+          <a href="https://github.com/duniter/cesium">https://github.com/duniter/cesium</a>
+        </div>
      </div>
-      <div class="item item-icon-left">
-        <i class="icon ion-chatbubbles"></i>
-        Forum :
-        <a href="https://forum.duniter.org">https://forum.duniter.org</a>
+      <div class="item item-complex item-icon-left">
+        <div class="item-content">
+          <i class="item-image icon ion-chatbubbles"></i>
+          Forum :
+          <a href="https://forum.duniter.org">https://forum.duniter.org</a>
+        </div>
      </div>
-      <div class="item item-icon-left">
-        <i class="icon ion-chatbubbles"></i>
-        Développeurs :
-        <a ui-sref="app.wot_lookup({q:'cgeek'})" modal-close>cgeek</a> &amp;
-        <a ui-sref="app.wot_lookup({q:'kimamila'})" modal-close>kimamila</a>
+      <div class="item item-complex item-icon-left">
+        <div class="item-content">
+          <i class="item-image icon ion-chatbubbles"></i>
+          Développeurs :
+          <a ui-sref="app.wot_lookup({q:'cgeek'})" modal-close>cgeek</a> &amp;
+          <a ui-sref="app.wot_lookup({q:'kimamila'})" modal-close>kimamila</a>
+        </div>
      </div>
      <div class="item item-complex item-icon-left item-text-wrap">
        <div class="item-content">

--- a/www/templates/menu.html
+++ b/www/templates/menu.html
@@ -7,7 +7,7 @@
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
-        <button class="button button-icon button-clear icon ion-navicon visible-xs" menu-toggle="left" ></button>
+        <button class="button button-icon button-clear icon ion-navicon visible-nomenu" menu-toggle="left" ></button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="fabContent"></ion-nav-view>
@@ -121,10 +121,12 @@

    <ion-footer-bar class="bar-stable footer hidden-xs hidden-sm">
      <h1 class="title">
+        <!-- version -->
        <span translate="COMMON.APP_VERSION" translate-values="{version: config.VERSION}"></span>
-        <span class="buildDate" translate="COMMON.APP_BUILD_DATE" translate-values="{buildDate: config.BUILD_DATE}"></span>
+        |
+        <!-- about -->
+        <a href="#" ng-click="showAboutModal()" translate>HOME.BTN_ABOUT</a>
      </h1>
-
    </ion-footer-bar>
  </ion-side-menu>