Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix homepage

Browse source
This commit is contained in:
Valentin Kaelin 2019-04-16 21:28:42 +09:00
parent 73472b5603
commit 3794780574
4 changed files with 112 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
client/package-lock.json generated
View file

@ -2767,7 +2767,8 @@
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
"integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
"dev": true
"dev": true,
"optional": true
},
"coa": {
"version": "2.0.2",
@ -5043,7 +5044,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -5064,12 +5066,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -5084,17 +5088,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -5211,7 +5218,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -5223,6 +5231,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -5237,6 +5246,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -5244,12 +5254,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -5268,6 +5280,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -5348,7 +5361,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -5360,6 +5374,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -5445,7 +5460,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -5481,6 +5497,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -5500,6 +5517,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -5543,12 +5561,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
@ -9435,7 +9455,8 @@
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
"integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
"dev": true
"dev": true,
"optional": true
},
"rx-lite-aggregates": {
"version": "4.0.8",

36
client/src/assets/css/base.css
View file

@ -1 +1,37 @@
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
.transition-all {
transition-property: all;
}
.transition-fastest {
transition-duration: 50ms;
}
.transition-faster {
transition-duration: 100ms;
}
.transition-fast {
transition-duration: 150ms;
}
.transition-medium {
transition-duration: 200ms;
}
.ease-out-quad {
transition-timing-function: cubic-bezier(.25, .46, .45, .94);
}
.ease-in-quad {
transition-timing-function: cubic-bezier(.55, .085, .68, .53);
}
.scale-70 {
transform: scale(.7);
}
.scale-100 {
transform: scale(1);
}

11
client/src/components/SearchForm.vue
View file

@ -17,7 +17,14 @@
<v-icon name="caret-down" class="ml-1"></v-icon>
</div>
</div>
<transition name="bounce">
<transition
enter-active-class="transition-all transition-fastest ease-out-quad"
leave-active-class="transition-all transition-faster ease-in-quad"
enter-class="opacity-0 scale-70"
enter-to-class="opacity-100 scale-100"
leave-class="opacity-100 scale-100"
leave-to-class="opacity-0 scale-70"
>
<div
v-if="dropdown"
@click="dropdown = !dropdown"
@ -27,7 +34,7 @@
v-for="(region, index) in regions"
:key="region"
@click="selectedRegion = region"
class="px-4 py-1 text-sm bg-teal-600 hover:bg-teal-500"
class="px-4 py-1 text-xs bg-teal-600 hover:bg-teal-500"
:class="classRegions(index)"
>
{{ region }}

35
client/src/views/Home.vue
View file

@ -1,10 +1,16 @@
<template>
<div class="homepage h-screen flex flex-col items-center justify-center">
<div class="relative flex flex-col items-center w-full max-w-lg">
<div class="absolute logo">
<img src="@/assets/Logo.svg" alt="logo">
<div class="absolute top-0 right-0">
<div class="line line-top relative mr-4 mt-4 w-20 h-2"></div>
</div>
<div class="absolute bottom-0 left-0">
<div class="line line-bottom relative ml-4 mb-4 w-20 h-2"></div>
</div>
<div class="relative flex flex-col items-center w-full max-w-lg">
<img class="absolute logo" src="@/assets/Logo.svg" alt="logo">
<SearchForm @formSubmit="redirect"/>
</div>
@ -34,6 +40,29 @@ export default {
background-repeat: no-repeat;
}
.line {
background: rgba(178, 245, 234, .55);
}
.line::after {
content: '';
position: absolute;
width: 4.5rem;
height: .5rem;
background: rgba(178, 245, 234, .55);
}
.line-top::after {
transform-origin: bottom right;
transform: rotate(90deg) translateX(100%);
}
.line-bottom::after {
transform-origin: top left;
transform: rotate(90deg) translateX(-100%);
margin-left: .5rem;
}
.logo {
top: -160px;
}