Skip to content

Commit a439ecb

Browse files
author
Leny BERNARD
committed
Merge pull request #45 from Victoire/feature/login
new galactical login
2 parents 21325cd + b739986 commit a439ecb

File tree

11 files changed

+681
-52
lines changed

11 files changed

+681
-52
lines changed

‎Bundle/CoreBundle/Resources/public/images/login/constellations.svg

Lines changed: 290 additions & 0 deletions
Loading

‎Bundle/CoreBundle/Resources/public/images/login/logo.svg

Lines changed: 26 additions & 0 deletions
Loading

‎Bundle/CoreBundle/Resources/public/js/constellations/EasePack.min.js

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Bundle/CoreBundle/Resources/public/js/constellations/TweenLite.min.js

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Bundle/CoreBundle/Resources/public/js/constellations/constellations.js

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
(function() {
2+
3+
var width, height, vicLogin, canvas, ctx, points, target, animateHeader = true;
4+
5+
// Main
6+
initHeader();
7+
initAnimation();
8+
addListeners();
9+
10+
function initHeader() {
11+
width = window.innerWidth;
12+
height = window.innerHeight;
13+
target = {x: width/2, y: height/2};
14+
15+
vicLogin = document.getElementById('vic-login-wrapper');
16+
vicLogin.style.height = height+'px';
17+
18+
canvas = document.getElementById('constellations-canvas');
19+
canvas.width = width;
20+
canvas.height = height;
21+
ctx = canvas.getContext('2d');
22+
23+
// create points
24+
points = [];
25+
for(var x = 0; x < width; x = x + width/20) {
26+
for(var y = 0; y < height; y = y + height/20) {
27+
var px = x + Math.random()*width/20;
28+
var py = y + Math.random()*height/20;
29+
var p = {x: px, originX: px, y: py, originY: py };
30+
points.push(p);
31+
}
32+
}
33+
34+
// for each point find the 5 closest points
35+
for(var i = 0; i < points.length; i++) {
36+
var closest = [];
37+
var p1 = points[i];
38+
for(var j = 0; j < points.length; j++) {
39+
var p2 = points[j]
40+
if(!(p1 == p2)) {
41+
var placed = false;
42+
for(var k = 0; k < 5; k++) {
43+
if(!placed) {
44+
if(closest[k] == undefined) {
45+
closest[k] = p2;
46+
placed = true;
47+
}
48+
}
49+
}
50+
51+
for(var k = 0; k < 5; k++) {
52+
if(!placed) {
53+
if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
54+
closest[k] = p2;
55+
placed = true;
56+
}
57+
}
58+
}
59+
}
60+
}
61+
p1.closest = closest;
62+
}
63+
64+
// assign a circle to each point
65+
for(var i in points) {
66+
var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
67+
points[i].circle = c;
68+
}
69+
}
70+
71+
// Event handling
72+
function addListeners() {
73+
if(!('ontouchstart' in window)) {
74+
window.addEventListener('mousemove', mouseMove);
75+
}
76+
window.addEventListener('scroll', scrollCheck);
77+
window.addEventListener('resize', resize);
78+
}
79+
80+
function mouseMove(e) {
81+
var posx = posy = 0;
82+
if (e.pageX || e.pageY) {
83+
posx = e.pageX;
84+
posy = e.pageY;
85+
}
86+
else if (e.clientX || e.clientY) {
87+
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
88+
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
89+
}
90+
target.x = posx;
91+
target.y = posy;
92+
}
93+
94+
function scrollCheck() {
95+
if(document.body.scrollTop > height) animateHeader = false;
96+
else animateHeader = true;
97+
}
98+
99+
function resize() {
100+
width = window.innerWidth;
101+
height = window.innerHeight;
102+
vicLogin.style.height = height+'px';
103+
canvas.width = width;
104+
canvas.height = height;
105+
}
106+
107+
// animation
108+
function initAnimation() {
109+
animate();
110+
for(var i in points) {
111+
shiftPoint(points[i]);
112+
}
113+
}
114+
115+
function animate() {
116+
if(animateHeader) {
117+
ctx.clearRect(0,0,width,height);
118+
for(var i in points) {
119+
// detect points in range
120+
if(Math.abs(getDistance(target, points[i])) < 4000) {
121+
points[i].active = 0.3;
122+
points[i].circle.active = 0.6;
123+
} else if(Math.abs(getDistance(target, points[i])) < 20000) {
124+
points[i].active = 0.1;
125+
points[i].circle.active = 0.3;
126+
} else if(Math.abs(getDistance(target, points[i])) < 40000) {
127+
points[i].active = 0.02;
128+
points[i].circle.active = 0.1;
129+
} else {
130+
points[i].active = 0;
131+
points[i].circle.active = 0;
132+
}
133+
134+
drawLines(points[i]);
135+
points[i].circle.draw();
136+
}
137+
}
138+
requestAnimationFrame(animate);
139+
}
140+
141+
function shiftPoint(p) {
142+
TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
143+
y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
144+
onComplete: function() {
145+
shiftPoint(p);
146+
}});
147+
}
148+
149+
// Canvas manipulation
150+
function drawLines(p) {
151+
if(!p.active) return;
152+
for(var i in p.closest) {
153+
ctx.beginPath();
154+
ctx.moveTo(p.x, p.y);
155+
ctx.lineTo(p.closest[i].x, p.closest[i].y);
156+
ctx.strokeStyle = 'rgba(255,255,255,'+ p.active+')';
157+
ctx.stroke();
158+
}
159+
}
160+
161+
function Circle(pos,rad,color) {
162+
var _this = this;
163+
164+
// constructor
165+
(function() {
166+
_this.pos = pos || null;
167+
_this.radius = rad || null;
168+
_this.color = color || null;
169+
})();
170+
171+
this.draw = function() {
172+
if(!_this.active) return;
173+
ctx.beginPath();
174+
ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
175+
ctx.fillStyle = 'rgba(255,255,255,'+ _this.active+')';
176+
ctx.fill();
177+
};
178+
}
179+
180+
// Util
181+
function getDistance(p1, p2) {
182+
return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
183+
}
184+
185+
})();

‎Bundle/CoreBundle/Resources/public/js/constellations/rAF.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
2+
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
3+
4+
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
5+
6+
// MIT license
7+
8+
(function() {
9+
var lastTime = 0;
10+
var vendors = ['ms', 'moz', 'webkit', 'o'];
11+
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
12+
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
13+
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
14+
|| window[vendors[x]+'CancelRequestAnimationFrame'];
15+
}
16+
17+
if (!window.requestAnimationFrame)
18+
window.requestAnimationFrame = function(callback, element) {
19+
var currTime = new Date().getTime();
20+
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
21+
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
22+
timeToCall);
23+
lastTime = currTime + timeToCall;
24+
return id;
25+
};
26+
27+
if (!window.cancelAnimationFrame)
28+
window.cancelAnimationFrame = function(id) {
29+
clearTimeout(id);
30+
};
31+
}());

‎Bundle/CoreBundle/Resources/style/less/layouts/login.less

Lines changed: 78 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,99 @@
1-
// Login
2-
3-
@vic-login-backgroundImage: "/bundles/victoirecore/images/background/nebu.jpg";
4-
@vic-login-backgroundColor: #000;
5-
@vic-login-logo-width: 334px;
6-
@vic-login-logo-height: 235px;
7-
@vic-login-logo-marginTop: 50px;
8-
@vic-login-logo-marginBottom: 30px;
9-
10-
@vic-login-panel-width: 320px;
11-
@vic-login-centerGap: 60px;
12-
131
.vic-login {
142
padding: 0;
15-
background-image: url(@vic-login-backgroundImage);
3+
background-color: @vicLogin_backgroundColor;
4+
background-image: url(@vicLogin_backgroundImage);
165
background-size: 100%;
176
background-position: top center;
187
background-repeat: repeat-x;
19-
background-color: @vic-login-backgroundColor;
208

219
&,
2210
* {
2311
font-family: @victoire-fontFamily !important;
12+
}
13+
}
2414

25-
&.fa {
26-
font-family: FontAwesome !important;
15+
#vic-login-wrapper {
16+
position: relative;
17+
}
18+
19+
20+
21+
#vic-login-content {
22+
position: absolute;
23+
top: 50%;
24+
left: 50%;
25+
.transform(translate3D(-50%, -50%, 0));
26+
}
27+
28+
#vic-login-logo {
29+
margin-bottom: @vicLogin-logo_marginBottom;
30+
}
31+
32+
#vic-login-form {
33+
width: @vicLogin-content_width;
34+
}
35+
36+
.vic-form-group {
37+
&.-vic-login {
38+
margin-bottom: 0;
39+
40+
& + & {
41+
margin-top: @vicLogin-formGroup_gutterHeight;
2742
}
2843
}
44+
}
2945

30-
.customCheckbox {
46+
.vic-form-control {
47+
&.-vic-login {
48+
background-color: transparent;
49+
border-width: @vicLogin-formControl_borderWidth;
50+
border-color: @vicLogin_color;
51+
color: @vicLogin_color;
52+
font-weight: 400;
53+
height: @vicLogin-formControl_height;
54+
padding: @vicLogin-formControl_padding;
55+
.box-shadow(@vicLogin-formControl_boxShadow, inset @vicLogin-formControl_boxShadow);
56+
57+
&::-webkit-input-placeholder {
58+
color: @vicLogin_color;
59+
}
60+
61+
&::-moz-placeholder {
62+
color: @vicLogin_color;
63+
}
64+
}
65+
}
66+
67+
68+
.customCheckbox {
69+
&.-vic-login {
3170
+ label {
32-
line-height: 39px;
71+
line-height: @vicLogin-customCheckbox_lineHeight;
72+
color: @vicLogin_color;
73+
font-weight: 400;
3374

3475
&:before {
35-
margin-top: (39px - @customCheckbox-height) / 2;
36-
line-height: @customCheckbox-height;
76+
border-width: @vicLogin-formControl_borderWidth;
77+
margin-top: (@vicLogin-customCheckbox_lineHeight - @customCheckbox-height) / 2;
78+
line-height: @customCheckbox-height - @vicLogin-formControl_borderWidth;
79+
}
80+
81+
&,
82+
&:hover {
83+
&:before {
84+
color: @vicLogin_color;
85+
border-color: @vicLogin_color;
86+
.box-shadow(@vicLogin-formControl_boxShadow, inset @vicLogin-formControl_boxShadow);
87+
}
3788
}
3889
}
3990
}
4091
}
4192

42-
.vic-login-logo {
43-
position: absolute;
44-
left: 50%;
45-
margin-left: @vic-login-logo-width * -0.5;
46-
margin-top: @vic-login-logo-marginTop;
47-
}
48-
49-
.vic-login-panel {
50-
width: @vic-login-panel-width;
51-
position: absolute;
52-
left: 50%;
53-
margin-top: @vic-login-logo-marginTop + @vic-login-logo-marginBottom + @vic-login-logo-height;
54-
margin-left: @vic-login-panel-width * -0.5;
55-
.radius(5px);
56-
background-color: #fff;
57-
.box-shadow(5px 8px 15px fade(black, 13%));
58-
padding: 10px;
59-
}
93+
.vic-btn {
94+
&.-vic-login {
95+
border-width: 0;
96+
.box-shadow(@vicLogin-formControl_boxShadow);
97+
height: @vicLogin-formControl_height;
98+
}
99+
}

‎Bundle/CoreBundle/Resources/style/less/parameters/login.less

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@vicLogin_backgroundImage: "/bundles/victoirecore/images/background/nebu.jpg";
2+
@vicLogin_backgroundColor: #000;
3+
@vicLogin_color: @white;
4+
@vicLogin-content_width: 320px;
5+
@vicLogin-logo_marginBottom: 60px;
6+
@vicLogin-formGroup_gutterHeight: 10px;
7+
@vicLogin-formControl_boxShadow: 0 2px 5px 0 fade(black, 26%);
8+
@vicLogin-formControl_borderWidth: 2px;
9+
@vicLogin-formControl_height: 50px;
10+
@vicLogin-formControl_padding: 15px;
11+
@vicLogin-customCheckbox_lineHeight: 39px;

‎Bundle/CoreBundle/Resources/style/less/parameters/parameters.less

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,5 @@
2121
@import 'vic-widget';
2222
@import 'victoire';
2323
@import 'vendor-mixins';
24-
@import 'type';
24+
@import 'type';
25+
@import 'login';

0 commit comments

Comments
 (0)