added mobile specific treatment

fixes some UI
GeoloeG · Mar 12, 2016 · 35de008 · 35de008
1 parent a4cc09e
commit 35de008
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 29 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "firebase-element-extended",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "authors": [
     "Pascal Gula aka MeTaNoV <pascal.gula@gmail.com>"
   ],
@@ -45,7 +45,8 @@
     "iron-icon": "PolymerElements/iron-icon#^1.0.0",
     "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
     "iron-image": "PolymerElements/iron-image#^1.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
     "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^1.0.0",
     "paper-button": "PolymerElements/paper-button#^1.0.0",
     "paper-input": "PolymerElements/paper-input#^1.0.0",
@@ -55,9 +56,9 @@
     "paper-menu": "PolymerElements/paper-menu#^1.0.0",
     "paper-toast": "PolymerElements/paper-toast#^1.0.0",
     "neon-animation": "PolymerElements/neon-animation#^1.0.0",
-    "firebase-element": "GoogleWebComponents/firebase-element#^1.0.0",
     "gold-email-input": "PolymerElements/gold-email-input#^1.0.0",
     "gold-password-input": "gold-password-input#^1.0.0",
+    "firebase-element": "GoogleWebComponents/firebase-element#^1.0.0",
     "akc-meta": "akc42/akc-meta#^v1.0.0"
   },
   "devDependencies": {
@@ -66,6 +67,7 @@
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
     "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
     "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
   }

diff --git a/demo/index.html b/demo/index.html
@@ -55,10 +55,9 @@
           background-color: #3f51b5;
           color: white;
         };
-      }
-
-      /* Provied mobile friendly view */
-      @media (max-width: 600px) {
+        --paper-toolbar-content: {
+          padding: 0;
+        };
       }
 
     </style>
@@ -87,7 +86,6 @@ <h2 title-sign-in>Sign-In Dialog</h2>
       <!-- App Toolbar -->
       <paper-toolbar>
         <paper-icon-button icon="menu"></paper-icon-button>
-        <paper-icon-button icon="info"></paper-icon-button>
         <span class="title">Firebase Element eXtended Demo</span>
         <firebase-account-menu></firebase-account-menu>
       </paper-toolbar>

diff --git a/firebase-account-menu.html b/firebase-account-menu.html
@@ -2,50 +2,62 @@
 
 <link rel="import" href="../iron-icon/iron-icon.html">
 <link rel="import" href="../iron-image/iron-image.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../iron-media-query/iron-media-query.html">
+
 <link rel="import" href="../paper-button/paper-button.html">
 <link rel="import" href="../paper-menu-button/paper-menu-button.html">
 <link rel="import" href="../paper-menu/paper-menu.html">
 <link rel="import" href="../paper-item/paper-item.html">
+
 <link rel="import" href="../neon-animation/animations/scale-up-animation.html">
 <link rel="import" href="../neon-animation/animations/fade-out-animation.html">
 
-<link rel="import" href="./firebase-auth-dialog.html">
-<link rel="import" href="./firebase-icons.html">
 <link rel="import" href="./firebase-state.html">
 
 <!--
 `<firebase-account-menu>` is a navigation menu to be placed inside a `<paper-toolbar>` that provides and hook the authentication functionnality of `<firebase-auth-manager>`.
-Signing up and signing in is done thanks to a self-registered `<firebase-auth-dialog>` declared somewhere else.
+Signing Up and Signing In is done thanks to a self-registered `<firebase-auth-dialog>` declared somewhere else.
 It also provides access to the menu dedicated to account actions with a default logout action.
 
 Example:
 
     <firebase-account-menu>
-      TODO PG: add paper-item item
+      <paper-item on-tap="menu1Open">Menu 1</paper-item>
+      <paper-item on-tap="menu2Open">Menu 2</paper-item>
     </firebase-account-menu>
 
-@group GoogleWebComponents Elements
-@element firebase-account-menu
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--firebase-account-menu` | Mixin applied to the account menu | `{}`
+`--firebase-account-menu-image` | Mixin applied to the iron-image | `{}`
+
 @demo demo/index.html
-@hero hero.svg
 -->
 <dom-module id="firebase-account-menu">
   <template>
     <style>
-      /* TODO PG: beautify and provide styling hook? */
       :host {
         display: block;
+
+        @apply(--firebase-account-menu);
       }
 
       #signedIn, #signedOut {
-        display: flex;
-        align-items: center;
+        @apply(--layout-horizontal);
+        @apply(--layout-center-center);
       }
 
       iron-image {
-        width: 45px;
-        height: 45px;
-        border-radius: 10px;
+        width: 40px;
+        height: 40px;
+        border-radius: 20px;
+
+        @apply(--firebase-account-menu-image);
       }
 
       #profileLabel {
@@ -57,24 +69,26 @@
       }
     </style>
 
-    <firebase-state logged="{{logged}}" profile="{{profile}}"></firebase-state>
+    <firebase-state logged="{{_logged}}" profile="{{_profile}}"></firebase-state>
+
+    <iron-media-query query="(max-width: 600px)" query-matches="{{_isMobile}}"></iron-media-query>
 
-    <paper-menu-button hidden$="[[!logged]]"
+    <paper-menu-button hidden$="[[!_logged]]"
                        vertical-offset="72"
                        horizontal-align="right"
                        horizontal-offset="12">
       <paper-button id="signedIn" class="dropdown-trigger">
-        <iron-image src="[[profile.picture]]" sizing="cover"></iron-image>
-        <span id="profileLabel">[[profile.displayName]]</span>
+        <iron-image src="[[_profile.picture]]" sizing="cover"></iron-image>
+        <span id="profileLabel" hidden$="[[_isMobile]]">[[_profile.displayName]]</span>
         <iron-icon icon="expand-more"></iron-icon>
       </paper-button>
       <paper-menu class="dropdown-content">
-        <!-- TODO PG: here comes the user specific menu... -->
         <content></content>
         <paper-item on-tap="signOutButton">Sign Out</paper-item>
       </paper-menu>
     </paper-menu-button>
-    <div id="signedOut" hidden$="[[logged]]">
+
+    <div id="signedOut" hidden$="[[_logged]]">
       <paper-button on-tap="signUpButton">Sign-Up</paper-button>
       <paper-button on-tap="signInButton">Sign-In</paper-button>
     </div>
@@ -85,9 +99,15 @@
       is: 'firebase-account-menu',
 
       properties: {
-        profile: {
+        _logged: {
+          type: Boolean
+        },
+        _profile: {
           type: Object
-        }
+        },
+        _isMobile: {
+          type: Boolean
+        },
       },
 
       get _firebaseAuthDialog() {

diff --git a/firebase-auth-dialog.html b/firebase-auth-dialog.html
@@ -2,10 +2,13 @@
 
 <link rel="import" href="../iron-meta/iron-meta.html">
 <link rel="import" href="../iron-icon/iron-icon.html">
+
 <link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
 <link rel="import" href="../paper-dialog-behavior/paper-dialog-shared-styles.html">
 <link rel="import" href="../paper-button/paper-button.html">
+
 <link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
+
 <link rel="import" href="../gold-email-input/gold-email-input.html">
 <link rel="import" href="../gold-password-input/gold-password-input.html">
 <link rel="import" href="../gold-password-input/gold-password-input-validator.html">
@@ -75,6 +78,10 @@ <h2 title-sign-in>Sign-In Dialog</h2>
         display: block;
       }
 
+      :host > ::content > *:first-child {
+        margin-top: 0;
+      }
+
       .facebook {
         color: white;
         --iron-icon-fill-color: white;