mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-25 01:06:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Responsive center of animated background

Browse source
This commit is contained in:
Robin Linus 2015-12-31 01:33:43 +01:00
parent 8ab428f75c
commit 23b4bbe443
3 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/elements/buddy-finder/buddy-finder.html
View file

@ -36,12 +36,7 @@
cursor: pointer; cursor: pointer;
} }
.me {
position: absolute;
bottom: 24px;
left: 50%;
margin-left: -180px;
}
.explanation { .explanation {
@apply(--paper-font-headline); @apply(--paper-font-headline);

12
app/elements/buddy-finder/personal-avatar.html
View file

@ -7,6 +7,10 @@
@apply(--layout-vertical); @apply(--layout-vertical);
@apply(--layout-center); @apply(--layout-center);
width: 360px; width: 360px;
position: absolute;
bottom: 24px;
left: 50%;
margin-left: -180px;
} }
iron-icon { iron-icon {
@ -24,10 +28,14 @@
color: #4285f4; color: #4285f4;
} }
@media all and (max-height: 370px) { @media all and (max-height: 370px) {
iron-icon{ :host {
bottom: 8px;
}
iron-icon {
width: 32px; width: 32px;
height: 32px; height: 32px;
margin-bottom: 2px;
} }
} }
</style> </style>

5
app/scripts/animated-bg.js
View file

@ -19,8 +19,9 @@
h = window.innerHeight; h = window.innerHeight;
c.width = w; c.width = w;
c.height = h; c.height = h;
var offset = h > 370 ? 103 : 65;
x0 = w / 2; x0 = w / 2;
y0 = h - 103; y0 = h - offset;
dw = Math.max(w, h, 1000) / 13; dw = Math.max(w, h, 1000) / 13;
drawCircles(); drawCircles();
} }
@ -28,7 +29,7 @@
function drawCicrle(radius) { function drawCicrle(radius) {
ctx.beginPath(); 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.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
ctx.stroke(); ctx.stroke();