Commit 1eeb421d by Torkel Ödegaard

ux: updated login page

parent 8ea94817
import React, { Component } from 'react';
const elementsInWidth = 22;
const elementRows = 50;
const xCount = 50;
const yCount = 50;
function Cell({ index, flipIndex }) {
const bgColor1 = getColor(index);
// const bgColor2 = getColor(index+2);
function Cell({ x, y, flipIndex }) {
const index = (y * xCount) + x;
const bgColor1 = getColor(x, y);
return (
<div className={`login-bg__item login-bg-${index} ${flipIndex === index ? 'login-bg-flip' : ''}`} key={index} style={{background: bgColor1}} />
<div className={`login-bg__item ${flipIndex === index ? 'login-bg-flip' : ''}`} key={index} style={{background: bgColor1}} />
);
}
const getRandomInt = (min, max) => {
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
};
}
export default class LoginBackground extends Component<any, any> {
nrOfElements: number;
cancelInterval: any;
constructor(props) {
super(props);
this.nrOfElements = elementsInWidth * elementRows;
this.state = {
flipIndex: null,
......@@ -33,14 +31,13 @@ export default class LoginBackground extends Component<any, any> {
}
flipElements() {
const elementIndexToFlip = getRandomInt(0, this.nrOfElements - 1);
const elementIndexToFlip = getRandomInt(0, (xCount * yCount) - 1);
this.setState(prevState => {
return {
...prevState,
flipIndex: elementIndexToFlip,
};
});
console.log('elementIndexToFlip', elementIndexToFlip);
}
componentWillMount() {
......@@ -56,9 +53,15 @@ export default class LoginBackground extends Component<any, any> {
return (
<div className="login-bg">
{Array.from(Array(elementsInWidth * elementRows)).map((el, index) => {
{Array.from(Array(yCount)).map((el, y) => {
return (
<Cell index={index} flipIndex={this.state.flipIndex} />
<div className="login-bg__row">
{Array.from(Array(xCount)).map((el2, x) => {
return (
<Cell y={y} x={x} flipIndex={this.state.flipIndex} />
);
})}
</div>
);
})}
</div>
......@@ -66,7 +69,7 @@ export default class LoginBackground extends Component<any, any> {
}
}
const getColor = index => {
function getColor(x, y) {
const colors = [
'#14161A',
'#111920',
......@@ -1228,5 +1231,10 @@ const getColor = index => {
'#101A27',
'#13171F',
];
return colors[index];
};
// let randX = getRandomInt(0, x);
// let randY = getRandomInt(0, y);
// let randIndex = randY * xCount + randX;
return colors[(y*xCount + x) % colors.length];
}
......@@ -73,6 +73,8 @@ select:-webkit-autofill:focus {
display: flex;
align-items: stretch;
flex-direction: column;
position: relative;
z-index: 1;
}
.login-branding {
......@@ -293,7 +295,7 @@ select:-webkit-autofill:focus {
padding: 2rem 4rem;
.logo-icon {
width: 100px;
width: 130px;
}
.icon-gf-grafana_wordmark {
......@@ -333,13 +335,27 @@ select:-webkit-autofill:focus {
left: 0;
right: 0;
perspective: 1000px;
display: flex;
flex-wrap: wrap;
z-index: 0;
flex-direction: column;
justify-content: stretch;
justify-items: stretch;
height: 100%;
.login-bg__row {
display: flex;
flex-grow: 1;
height: 10px;
justify-content: stretch;
}
.login-bg__item {
width: 4%;
height: 10px;
height: 100%;
flex-grow: 1;
// background: hotpink;
// border:1px solid #0F1926;
float: left;
transition: 1s ease-in-out;
z-index: 1;
transform-style: preserve-3d;
......@@ -348,7 +364,6 @@ select:-webkit-autofill:focus {
transform: rotateY(180deg);
}
&:before, &:after {
backface-visibility: hidden;
position: absolute;
......@@ -360,65 +375,10 @@ select:-webkit-autofill:focus {
display: block;
}
&:before {
z-index: 2;
transform: rotateY(0deg);
background-color: #215392;
}
&:after {
transform: rotateY(180deg);
background-color: rgb(25, 50, 80);
}
&:nth-child(3n+0) {
&:before {
background-color: #0f253c;
}
&:after {
background-color: blue;
}
}
&:nth-child(3n+1) {
&:before {
background-color: #102438;
}
&:after {
background-color: blue;
}
}
&:nth-child(3n+2) {
&:before {
background-color: #19314e;
}
&:after {
background-color: blue;
}
}
&:nth-child(3n+3) {
&:before {
background-color: #215392;
}
&:after {
background-color: blue;
}
}
// &:nth-child(3n+5) {
// &:before {
// background-color: hotpink;
// }
// &:after {
// background-color: blue;
// }
// }
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment