Remove unnecessary demoes and add mini horizontal to login-fire

fixes #22, also adjusts divider class based on horizontal attribute
convoo · Jul 14, 2016 · 42b9687 · 42b9687
1 parent c1f1dad
commit 42b9687
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 48 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -65,99 +65,68 @@ <h3>Wide login-fire Demo with all options</h3>
       </demo-snippet>
     </div>
 
-    <div class="vertical-section-container centered">
-      <h3>Narrow login-fire Demo with 2 options</h3>
-      <demo-snippet>
-        <template >
-          <firebase-app
-            name="narrowDemo2"
-            api-key="AIzaSyACU-9dEBSmlEq8iwfuDCPCWU81UNDytuQ"
-            auth-domain="convoofire.firebaseapp.com"
-            database-url="https://convoofire.firebaseio.com"
-          >
-          </firebase-app>
-          <login-fire twitter facebook app-name="narrowDemo2"></login-fire>
-        </template>
-      </demo-snippet>
-    </div>
-
     <div class="horizontal-section-container centered">
-      <h3>Wide login-fire Demo with 2 options & emailPassword option</h3>
+      <h3>Mini horizontal wide login-fire Demo with all options</h3>
       <demo-snippet>
         <template >
           <firebase-app
-            name="wideDemo2"
+            name="miniHorizontalWideDemo"
             api-key="AIzaSyACU-9dEBSmlEq8iwfuDCPCWU81UNDytuQ"
             auth-domain="convoofire.firebaseapp.com"
             database-url="https://convoofire.firebaseio.com"
           >
           </firebase-app>
-          <login-fire twitter facebook email-password app-name="wideDemo2"></login-fire>
+          <login-fire mini horizontal email-password anonymous twitter github google facebook app-name="miniHorizontalWideDemo"></login-fire>
         </template>
       </demo-snippet>
     </div>
 
+
     <div class="vertical-section-container centered">
-      <h3>Narrow login-fire Demo with emailPassword option only</h3>
+      <h3>Reversed narrow login-fire Demo with all options</h3>
       <demo-snippet>
         <template >
           <firebase-app
-            name="narrowDemo3"
+            name="reverseNarrowDemo"
             api-key="AIzaSyACU-9dEBSmlEq8iwfuDCPCWU81UNDytuQ"
             auth-domain="convoofire.firebaseapp.com"
             database-url="https://convoofire.firebaseio.com"
           >
           </firebase-app>
-          <login-fire email-password app-name="narrowDemo3"></login-fire>
+          <login-fire reverse email-password anonymous twitter github google facebook app-name="reverseNarrowDemo"></login-fire>
         </template>
       </demo-snippet>
     </div>
 
     <div class="horizontal-section-container centered">
-      <h3>Wide login-fire Demo with emailPassword option only</h3>
-      <demo-snippet>
-        <template >
-          <firebase-app
-            name="wideDemo3"
-            api-key="AIzaSyACU-9dEBSmlEq8iwfuDCPCWU81UNDytuQ"
-            auth-domain="convoofire.firebaseapp.com"
-            database-url="https://convoofire.firebaseio.com"
-          >
-          </firebase-app>
-          <login-fire email-password app-name="wideDemo3"></login-fire>
-        </template>
-      </demo-snippet>
-    </div>
-
-
-    <div class="vertical-section-container centered">
-      <h3>Reversed narrow login-fire Demo with all options</h3>
+      <h3>Reverse wide login-fire Demo with all options</h3>
       <demo-snippet>
         <template >
           <firebase-app
-            name="reverseNarrowDemo"
+            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="reverseNarrowDemo"></login-fire>
+          <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 wide login-fire Demo with all options</h3>
+     <div class="horizontal-section-container centered">
+      <h3>Reverse mini horizontal wide login-fire Demo with all options</h3>
       <demo-snippet>
         <template >
           <firebase-app
-            name="reverseWideDemo"
+            name="reverseMiniHorizontalWideDemo"
             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>
+          <h2 style="text-align: center;">Sign In</h2>
+          <login-fire reverse mini horizontal email-password anonymous twitter github google facebook app-name="reverseMiniHorizontalWideDemo"></login-fire>
         </template>
       </demo-snippet>
     </div>

diff --git a/email-login-fire.html b/email-login-fire.html
@@ -92,6 +92,12 @@
     /**
      * An element that allows simple configuration of email and password authentication with
      * firebase.
+     * 
+     * For email authentication only, use email-login-fire.
+     * 
+     * For social provider authentication only, use social-login-fire.
+     * 
+     * For both email and social provider authentication, use login-fire.
      *
      * Example:
      * ```

diff --git a/login-fire.html b/login-fire.html
@@ -108,7 +108,9 @@
       google="{{google}}"
       facebook="{{facebook}}"
       twitter="{{twitter}}"
-      github="{{github}}"></social-login-fire>
+      github="{{github}}"
+      mini="{{mini}}"
+      horizontal="{{horizontal}}"></social-login-fire>
   </template>
 
 </template>
@@ -117,6 +119,12 @@
     /**
      * An element that allows simple configuration of email and social provider login with
      * firebase.
+     * 
+     * For email authentication only, use email-login-fire.
+     * 
+     * For social provider authentication only, use social-login-fire.
+     * 
+     * For both email and social provider authentication, use login-fire.
      *
      * Example:
      * ```
@@ -238,6 +246,20 @@
           type: Boolean,
           value: false
         },
+        /**
+         * Displays mini social sign in buttons removing the "Sign in with" text
+         */
+        mini: {
+          type: Boolean,
+          value: false
+        },
+        /**
+         * Prefers a horizontally structured social login
+         */
+        horizontal: {
+          type: Boolean,
+          value: false
+        },
 
         _dividerClass: {
           type: String,
@@ -265,7 +287,11 @@
         }
       },
       _computeDividerClass: function(debug){
-        return this.clientWidth > 500 ? "wideDivider" : "narrowDivider";
+        if(this.horizontal){
+          return "narrowDivider";
+        } else {
+          return this.clientWidth > 500 ? "wideDivider" : "narrowDivider";
+        }
       },
 
       _computeUser: function(emailUser, socialUser){

diff --git a/social-login-fire.html b/social-login-fire.html
@@ -122,6 +122,12 @@
     /**
      * An element that allows simple configuration of multiple social provider login with
      * firebase.
+     * 
+     * For email authentication only, use email-login-fire.
+     * 
+     * For social provider authentication only, use social-login-fire.
+     * 
+     * For both email and social provider authentication, use login-fire.
      *
      * Example:
      * ```