Make horizontal section responsive

convoo · Jul 14, 2016 · 3538069 · 3538069
1 parent e434203
commit 3538069
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 52 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -19,7 +19,7 @@
   <body>
 
   <div>
-      <h3>Narrow login-fire Demo with all options</h3>
+      <h3>login-fire Demo with all options</h3>
       <demo-snippet>
         <template >
           <firebase-app
@@ -34,7 +34,7 @@ <h3>Narrow login-fire Demo with all options</h3>
     </div>
 
     <div>
-      <h3>Debug narrow login-fire Demo with all options</h3>
+      <h3>Debug login-fire Demo with all options</h3>
       <demo-snippet>
         <template >
           <firebase-app
@@ -50,23 +50,7 @@ <h3>Debug narrow login-fire Demo with all options</h3>
     </div>
 
     <div>
-      <h3>Wide login-fire Demo with all options</h3>
-          <demo-snippet>
-        <template >
-          <firebase-app
-            name="wideDemo"
-            api-key="AIzaSyACU-9dEBSmlEq8iwfuDCPCWU81UNDytuQ"
-            auth-domain="convoofire.firebaseapp.com"
-            database-url="https://convoofire.firebaseio.com"
-          >
-          </firebase-app>
-          <login-fire email-password anonymous twitter github google facebook app-name="wideDemo"></login-fire>
-             </template>
-      </demo-snippet>
-    </div>
-
-    <div class="horizontal-section-container centered">
-      <h3>Mini horizontal wide login-fire Demo with all options</h3>
+      <h3>Mini horizontal login-fire Demo with all options</h3>
       <demo-snippet>
         <template >
           <firebase-app
@@ -83,7 +67,7 @@ <h3>Mini horizontal wide login-fire Demo with all options</h3>
 
 
     <div>
-      <h3>Reversed narrow login-fire Demo with all options</h3>
+      <h3>Reversed login-fire Demo with all options</h3>
       <demo-snippet>
         <template >
           <firebase-app
@@ -98,24 +82,8 @@ <h3>Reversed narrow login-fire Demo with all options</h3>
       </demo-snippet>
     </div>
 
-    <div class="horizontal-section-container centered">
-      <h3>Reverse wide login-fire Demo with all options</h3>
-      <demo-snippet>
-        <template >
-          <firebase-app
-            name="reverseWideDemo"
-            api-key="AIzaSyACU-9dEBSmlEq8iwfuDCPCWU81UNDytuQ"
-            auth-domain="convoofire.firebaseapp.com"
-            database-url="https://convoofire.firebaseio.com"
-          >
-          </firebase-app>
-          <login-fire reverse email-password anonymous twitter github google facebook app-name="reverseWideDemo"></login-fire>
-        </template>
-      </demo-snippet>
-    </div>
-
-     <div class="horizontal-section-container centered">
-      <h3>Reverse mini horizontal wide login-fire Demo with all options</h3>
+     <div>
+      <h3>Reverse mini horizontal login-fire Demo with all options</h3>
       <demo-snippet>
         <template >
           <firebase-app

diff --git a/login-fire.html b/login-fire.html
@@ -21,6 +21,15 @@
       @apply(--layout-wrap-reverse);
     }
 
+    :host(.vertical) {
+      @apply(--layout-vertical);
+      @apply(--layout-center);
+    }
+
+    :host(.vertical-reversed) {
+      @apply(--layout-vertical-reverse);
+    }
+
     .verticalDivider{
       border-right: 1px solid #e0e0e0;
       margin: 0 auto;
@@ -46,10 +55,10 @@
     .horizontalDivider{
       border-top: 1px solid #e0e0e0;
       text-align: center;
-      margin: 50px 0 50px 0;
+      margin: 50px 35px 50px 35px;
       height: 1px;
       max-width: 400px;
-      min-width: 400px;
+      min-width: 300px;
     }
 
     .horizontalDivider div{
@@ -92,20 +101,24 @@
       auto-sign-up="{{autoSignUp}}"></email-login-fire>
   </template>
 
-
+  <iron-media-query query="(max-width: 650px)" query-matches="{{isNarrow}}"></iron-media-query>
 
   <template is="dom-if" if={{_showDivider}}>
-    <iron-media-query query="(max-width: 650px)" query-matches="{{isNarrow}}"></iron-media-query>
-    <div id="divider" class="horizontalDivider" hidden$="{{!isNarrow}}">
-      <div>or</div>
-    </div>
-    <div id="divider" class="verticalDivider" hidden$="{{isNarrow}}">
-      <div>or</div>
-    </div>
-  </template>
-
-
+
+    <template is="dom-if" if={{_showHorizontalDivider}}>
+      <div id="divider" class="horizontalDivider">
+        <div>or</div>
+      </div>
+    </template>
 
+
+    <template is="dom-if" if={{!_showHorizontalDivider}}>
+      <div id="divider" class="verticalDivider">
+        <div>or</div>
+      </div>
+    </template>
+
+  </template>
 
   <template is="dom-if" if={{_showButtons}}>
     <social-login-fire
@@ -269,7 +282,8 @@
          */
         horizontal: {
           type: Boolean,
-          value: false
+          value: false,
+          observer: '_horizontalChanged'
         },
         _showDivider: {
           type: Boolean,
@@ -279,6 +293,10 @@
           type: Boolean,
           computed: '_computeShowButtons(debug)'
         },
+        _showHorizontalDivider: {
+          type: Boolean,
+          computed: '_computeShowHorizontalDivider(isNarrow, horizontal)'
+        }
     },
 
       _reverseChanged: function(newVal, oldVal){
@@ -289,6 +307,10 @@
         }
       },
 
+      _computeShowHorizontalDivider: function(isNarrow, horizontal){
+        return isNarrow || horizontal;
+      },
+
       _computeUser: function(emailUser, socialUser){
         if(this.emailSignedIn){return emailUser;}
         else if(this.socialSignedIn){return socialUser;}
@@ -310,6 +332,15 @@
           }
         }
       },
+      _horizontalChanged: function(newVal,oldVal){
+        if(newVal){
+          this.classList.add("vertical");
+          if(this.reverse){this.classList.add("vertical-reversed");}
+        } else {
+          this.classList.remove("vertical");
+          this.classList.remove("vertical-reversed");
+        }
+      },
       /**
        * Signs out the signed in user
        */