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: adjust mobile version of the website

Browse source
This commit is contained in:
Valentin Kaelin 2019-10-12 15:51:30 +02:00
parent fb7f4bf815
commit 35206b9962
5 changed files with 52 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/public/index.html
View file

@ -16,7 +16,7 @@
<title>LeagueStats</title> <title>LeagueStats</title>
</head> </head>
<body> <body class="min-w-1200">
<noscript> <noscript>
<strong>We're sorry but LeagueStats doesn't work properly without JavaScript enabled. Please enable it to <strong>We're sorry but LeagueStats doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong> continue.</strong>

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

@ -1,5 +1,13 @@
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900'); @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
.min-w-1200 {
min-width: 1200px;;
}
.page-wrapper {
width: 1200px;
}
button:focus { button:focus {
outline: 0; outline: 0;
} }

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

@ -5,7 +5,6 @@
<input <input
v-model="summoner" v-model="summoner"
type="text" type="text"
autofocus
:class="[elementClasses, inputClasses]" :class="[elementClasses, inputClasses]"
class="input w-full px-2 rounded-lg outline-none pl-8 pr-16 font-bold" class="input w-full px-2 rounded-lg outline-none pl-8 pr-16 font-bold"
/> />

78
client/src/components/SummonerLoader.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mt-4 container mx-auto text-white pb-12"> <div class="mt-4 text-white pb-12">
<div class="flex justify-between xl:px-12"> <div class="flex justify-between xl:px-12">
<div style="width: 517px; height: 272px;"> <div style="width: 517px; height: 272px;">
<content-loader <content-loader
@ -156,11 +156,11 @@
v-for="index in 10" v-for="index in 10"
:key="index" :key="index"
class="ml-10 mt-4 rounded-lg w-full bg-blue-800" class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
style="width: 1240px; height: 144px;" style="width: 1160px; height: 144px;"
> >
<content-loader <content-loader
:height="144" :height="144"
:width="1240" :width="1160"
:speed="2" :speed="2"
primary-color="#17314f" primary-color="#17314f"
secondary-color="#2b6cb0" secondary-color="#2b6cb0"
@ -171,42 +171,42 @@
<rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" /> <rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
<rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" /> <rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
<rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" /> <rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" />
<rect x="68" y="37" rx="8" ry="8" width="64" height="64" /> <rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
<rect x="142" y="41" rx="6" ry="6" width="24" height="24" /> <rect x="142" y="40" rx="6" ry="6" width="24" height="24" />
<rect x="142" y="73" rx="6" ry="6" width="24" height="24" /> <rect x="142" y="72" rx="6" ry="6" width="24" height="24" />
<rect x="424" y="37" rx="6" ry="6" width="32" height="32" /> <rect x="396" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="460" y="37" rx="6" ry="6" width="32" height="32" /> <rect x="432" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="496" y="37" rx="6" ry="6" width="32" height="32" /> <rect x="468" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="424" y="73" rx="6" ry="6" width="32" height="32" /> <rect x="396" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="460" y="73" rx="6" ry="6" width="32" height="32" /> <rect x="432" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="496" y="73" rx="6" ry="6" width="32" height="32" /> <rect x="468" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="580" y="38" rx="3" ry="3" width="72" height="13" /> <rect x="555" y="38" rx="3" ry="3" width="72" height="13" />
<rect x="580" y="57" rx="3" ry="3" width="103" height="13" /> <rect x="555" y="57" rx="3" ry="3" width="103" height="13" />
<rect x="580" y="76" rx="3" ry="3" width="131" height="13" /> <rect x="555" y="76" rx="3" ry="3" width="131" height="13" />
<rect x="580" y="95" rx="3" ry="3" width="131" height="13" /> <rect x="555" y="95" rx="3" ry="3" width="131" height="13" />
<circle cx="916" cy="33" r="12" /> <circle cx="862" cy="32" r="12" />
<circle cx="916" cy="53" r="12" /> <circle cx="862" cy="52" r="12" />
<circle cx="916" cy="73" r="12" /> <circle cx="862" cy="72" r="12" />
<circle cx="916" cy="93" r="12" /> <circle cx="862" cy="92" r="12" />
<circle cx="916" cy="113" r="12" /> <circle cx="862" cy="112" r="12" />
<circle cx="980" cy="33" r="12" /> <circle cx="926" cy="32" r="12" />
<circle cx="980" cy="53" r="12" /> <circle cx="926" cy="52" r="12" />
<circle cx="980" cy="73" r="12" /> <circle cx="926" cy="72" r="12" />
<circle cx="980" cy="93" r="12" /> <circle cx="926" cy="92" r="12" />
<circle cx="980" cy="113" r="12" /> <circle cx="926" cy="112" r="12" />
<rect x="827" y="29" rx="3" ry="3" width="72" height="9" /> <rect x="770" y="29" rx="3" ry="3" width="72" height="9" />
<rect x="827" y="49" rx="3" ry="3" width="72" height="9" /> <rect x="770" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="827" y="69" rx="3" ry="3" width="72" height="9" /> <rect x="770" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="827" y="89" rx="3" ry="3" width="72" height="9" /> <rect x="770" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="827" y="109" rx="3" ry="3" width="72" height="9" /> <rect x="770" y="109" rx="3" ry="3" width="72" height="9" />
<rect x="997" y="29" rx="3" ry="3" width="72" height="9" /> <rect x="945" y="29" rx="3" ry="3" width="72" height="9" />
<rect x="997" y="49" rx="3" ry="3" width="72" height="9" /> <rect x="945" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="997" y="69" rx="3" ry="3" width="72" height="9" /> <rect x="945" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="997" y="89" rx="3" ry="3" width="72" height="9" /> <rect x="945" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="997" y="109" rx="3" ry="3" width="72" height="9" /> <rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
<circle cx="1188.58" cy="50.55" r="11.88" /> <circle cx="1106" cy="50.55" r="11.88" />
<rect x="1156" y="66" rx="3" ry="3" width="64" height="17" /> <rect x="1074" y="66" rx="3" ry="3" width="64" height="17" />
<rect x="1158" y="90" rx="3" ry="3" width="59" height="14" /> <rect x="1077" y="90" rx="3" ry="3" width="59" height="14" />
</content-loader> </content-loader>
</div> </div>
</ul> </ul>

8
client/src/views/Summoner.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="bg-blue-900"> <div class="bg-blue-900 overflow-hidden">
<LazyBackground <LazyBackground
:image-source="require('@/assets/img/bg-homepage-1.jpg')" :image-source="require('@/assets/img/bg-homepage-1.jpg')"
image-class="fixed w-full h-200 z-0" image-class="fixed w-full h-200 z-0"
@ -7,9 +7,9 @@
transition-name="fade" transition-name="fade"
></LazyBackground> ></LazyBackground>
<div class="relative z-10"> <div class="relative page-wrapper mx-auto z-10">
<header class="text-teal-100"> <header class="text-teal-100">
<div class="container mx-auto flex justify-between items-center"> <div class="flex justify-between items-center">
<router-link to="/"> <router-link to="/">
<img class="h-24" src="@/assets/img/Logo.svg" alt="LeagueStats logo" /> <img class="h-24" src="@/assets/img/Logo.svg" alt="LeagueStats logo" />
</router-link> </router-link>
@ -19,7 +19,7 @@
</header> </header>
<template v-if="summonerFound"> <template v-if="summonerFound">
<div class="mt-4 container mx-auto text-white pb-12"> <div class="mt-4 text-white pb-12">
<div class="flex justify-between xl:px-12"> <div class="flex justify-between xl:px-12">
<div> <div>
<h1 class="text-4xl font-extrabold uppercase"> <h1 class="text-4xl font-extrabold uppercase">