snapdrop

commit 23b4bbe443ecc8af0e2d34bc602f46d46fd79e73
parent 8ab428f75ce08c3456b48a40ef7e149e7b1a87d3
Author: Robin Linus <robin_woll@capira.de>
Date:   Thu, 31 Dec 2015 01:33:43 +0100

Responsive center of animated background

Diffstat:
M
app/elements/buddy-finder/buddy-finder.html
 | 
7
+------
M
app/elements/buddy-finder/personal-avatar.html
 | 
16
++++++++++++----
M
app/scripts/animated-bg.js
 | 
5
+++--

3 files changed, 16 insertions(+), 12 deletions(-)
diff --git a/app/elements/buddy-finder/buddy-finder.html b/app/elements/buddy-finder/buddy-finder.html
@@ -36,12 +36,7 @@
             cursor: pointer;
         }
         
-        .me {
-            position: absolute;
-            bottom: 24px;
-            left: 50%;
-            margin-left: -180px;
-        }
+
         
         .explanation {
             @apply(--paper-font-headline);
diff --git a/app/elements/buddy-finder/personal-avatar.html b/app/elements/buddy-finder/personal-avatar.html
@@ -7,6 +7,10 @@
             @apply(--layout-vertical);
             @apply(--layout-center);
             width: 360px;
+            position: absolute;
+            bottom: 24px;
+            left: 50%;
+            margin-left: -180px;
         }
         
         iron-icon {
@@ -23,12 +27,16 @@
         .discover {
             color: #4285f4;
         }
-
-         @media all and (max-height: 370px) {
-            iron-icon{
+        
+        @media all and (max-height: 370px) {
+            :host {
+                bottom: 8px;
+            }
+            iron-icon {
                 width: 32px;
                 height: 32px;
-            }   
+                margin-bottom: 2px;
+            }
         }
         </style>
         <iron-icon icon="chat:wifi-tethering"></iron-icon>
diff --git a/app/scripts/animated-bg.js b/app/scripts/animated-bg.js
@@ -19,8 +19,9 @@
         h = window.innerHeight;
         c.width = w;
         c.height = h;
+        var offset = h > 370 ? 103 : 65;
         x0 = w / 2;
-        y0 = h - 103;
+        y0 = h - offset;
         dw = Math.max(w, h, 1000) / 13;
         drawCircles();
     }
@@ -28,7 +29,7 @@
 
     function drawCicrle(radius) {
         ctx.beginPath();
-        var color = Math.round(255 * (1- radius / Math.max(w, h)));
+        var color = Math.round(255 * (1 - radius / Math.max(w, h)));
         ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
         ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
         ctx.stroke();