ayush
/
aplesports
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

finish regional pages

Browse Source
apl/regionalrumble
Ayush Mukherjee 1 year ago
parent 4d32436018
commit 3e4d1ca13d
9 changed files with 304 additions and 17 deletions
Show Stats Download Patch File Download Diff File

6
src/components/Header.vue
Unescape Escape View File

@ -19,7 +19,7 @@
<router-link :to="{ name: 'News' }" :class="$route.name === 'News' && 'router-link-active' || $route.name === 'Article' && 'router-link-active' ? 'active' : ''">news</router-link>
<router-link :to="{ name: 'Tournaments' }">tournaments</router-link>
<router-link :to="{ name: 'Team' }">team</router-link>
<a href="https://discord.aplesports.com" target="_blank">discord</a>
<a href="https://discord.gg/q6Nf2eh" target="_blank">discord</a>
<!-- <a href="https://www.patreon.com/apl_esports" target="_blank">patreon</a> -->
<!-- <a href="https://donate.aplesports.com" target="_blank">donate</a> -->
</div>
@ -38,9 +38,9 @@
<router-link :to="{ name: 'News' }" :class="$route.name === 'News' && 'router-link-active' || $route.name === 'Article' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">news</router-link>
<router-link :to="{ name: 'Tournaments' }" @click.native="closeMenu()">tournaments</router-link>
<router-link :to="{ name: 'Team' }" @click.native="closeMenu()">team</router-link>
<a href="https://discord.aplesports.com" target="_blank" @click.native="closeMenu()">discord</a>
<a href="https://discord.gg/q6Nf2eh" target="_blank" @click.native="closeMenu()">discord</a>
<!-- <a href="https://www.patreon.com/apl_esports" target="_blank" @click.native="closeMenu()">patreon</a> -->
<a href="https://donate.aplesports.com" target="_blank" @click.native="closeMenu()">donate</a>
<!--<a href="https://donate.aplesports.com" target="_blank" @click.native="closeMenu()">donate</a>-->
</div>
</nav>
</div>

25
src/router/index.js
Unescape Escape View File

@ -41,11 +41,6 @@ Vue.use(VueRouter)
name: 'Nationals',
component: () => import('../views/Nationals.vue')
},
{
path: '/regionalrumble',
name: 'RumbleMain',
component: () => import('../views/RegionalRumble.vue'),
},
{
path: '/Nationals',
redirect: '/nationals',
@ -55,6 +50,26 @@ Vue.use(VueRouter)
name: 'Nationals Register',
component: () => import('../views/NationalsRegister.vue')
},
{
path: '/regionalrumble',
name: 'RumbleMain',
component: () => import('../views/RegionalRumble.vue'),
},
{
path: '/regionalrumble/apac',
name: 'RumbleApac',
component: () => import('../views/AsianRumble.vue'),
},
{
path: '/regionalrumble/mena',
name: 'RumbleMena',
component: () => import('../views/MERumble.vue'),
},
{
path: '/regionalrumble/ssa',
name: 'RumbleSsa',
component: () => import('../views/AfricanRumble.vue'),
},
{
path: '*',
name: 'NotFound',

3
src/scss/main.scss
Unescape Escape View File

@ -31,7 +31,8 @@
'pages/about',
'pages/kickoff',
'pages/nationals',
'pages/rumble';
'pages/rumble',
'pages/rumbleregions';
@import
'themes/default';

4
src/scss/pages/_rumble.scss
Unescape Escape View File

@ -1,7 +1,3 @@
.scroll {
background: rgba(black, 0.5) !important;
}
.rumble {
display: flex;
flex-direction: column;

135
src/scss/pages/_rumbleregions.scss
Unescape Escape View File

@ -0,0 +1,135 @@
.regional {
.bg-only {
position: fixed;
top: 0;
left: 0;
height: 400%;
width: 400%;
overflow: hidden;
z-index: -1;
background-color: #161616;
opacity: 0.1;
rotate: 30deg;
transform: translate(-50%, 0);
background-image: linear-gradient(#ffffff 1.8px, transparent 1.8px), linear-gradient(90deg, #ffffff 1.8px, transparent 1.8px), linear-gradient(#ffffff 0.9px, transparent 0.9px), linear-gradient(90deg, #ffffff 0.9px, #161616 0.9px);
background-size: 45px 45px, 45px 45px, 9px 9px, 9px 9px;
background-position: -1.8px -1.8px, -1.8px -1.8px, -0.9px -0.9px, -0.9px -0.9px;
animation: moveBg 20s ease-in-out infinite;
}
section {
min-height: 100vh;
&.hero {
position: relative;
img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
min-width: 300px;
width: 20%;
max-width: 500px;
}
.goback {
padding-top: 100px;
margin: 0 auto;
display: flex;
flex-direction: row;
max-width: 300px;
justify-content: space-evenly;
align-items: center;
p {
font-size: 14pt;
}
svg {
width: 24px;
height: 24px;
fill: white;
}
&:hover {
cursor: pointer;
p {
text-decoration-line: underline;
}
}
}
}
&.info {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.infomercial {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: calc(100vw / 2);
}
}
}
&.trailer {
min-height: 100vh;
display: grid;
place-items: center;
padding: 1rem 2rem;
iframe {
width: 100%;
height: 100%;
max-width: 1280px;
max-height: 720px;
}
}
}
}
@keyframes moveBg {
0% {
transform: translate(-50%, 0);
}
50% {
transform: translate(-50%, 2%);
}
100% {
transform: translate(-50%, 0);
}
}
@media screen and (max-width: 960px) {
.regional > section.info {
padding: 1rem 2rem;
margin-bottom: 5rem;
.infomercial {
flex-direction: column;
width: 100%;
height: 100%;
div {
width: 100%;
height: 100%;
justify-content: space-evenly;
align-items: flex-start;
}
}
}
}

44
src/views/AfricanRumble.vue
Unescape Escape View File

@ -0,0 +1,44 @@
<template>
<div class="regional">
<div class="bg-only"></div>
<section class="hero">
<div class="goback" @click="goback">
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9.474 5.209s-4.501 4.505-6.254 6.259c-.147.146-.22.338-.22.53s.073.384.22.53c1.752 1.754 6.252 6.257 6.252 6.257.145.145.336.217.527.217.191-.001.383-.074.53-.221.293-.293.294-.766.004-1.057l-4.976-4.976h14.692c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-14.692l4.978-4.979c.289-.289.287-.761-.006-1.054-.147-.147-.339-.221-.53-.221-.191-.001-.38.071-.525.215z" fill-rule="nonzero"/></svg>
<p>back to Regional Rumble</p>
</div>
<img alt="Regional Rumble SSA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629d08e60rr23-brand-logo-ssa-white.png" />
</section>
<section class="info">
<h1>SSA Rumble</h1>
<div class="infomercial">
<div>
<h2>Biweekly Rumble - $1500 Each</h2>
<ul>
<li><b>SSA:</b>7th October / 21st October / 4th November 2023</li>
</ul>
</div>
<div>
<h2>Regional Rumble - $15,500</h2>
<ul>
<li><b>Day 1:</b> 18th November 2023</li>
<li><b>Day 2:</b> 25th November 2023</li>
</ul>
</div>
</div>
</section>
<section class="trailer">
<iframe src="https://www.youtube.com/embed/b53E8v2tFYw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
</div>
</template>
<script>
export default {
name: 'AsianRumble',
methods: {
goback() {
this.$router.push('/regionalrumble');
}
},
}
</script>

45
src/views/AsianRumble.vue
Unescape Escape View File

@ -0,0 +1,45 @@
<template>
<div class="regional">
<div class="bg-only"></div>
<section class="hero">
<div class="goback" @click="goback">
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9.474 5.209s-4.501 4.505-6.254 6.259c-.147.146-.22.338-.22.53s.073.384.22.53c1.752 1.754 6.252 6.257 6.252 6.257.145.145.336.217.527.217.191-.001.383-.074.53-.221.293-.293.294-.766.004-1.057l-4.976-4.976h14.692c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-14.692l4.978-4.979c.289-.289.287-.761-.006-1.054-.147-.147-.339-.221-.53-.221-.191-.001-.38.071-.525.215z" fill-rule="nonzero"/></svg>
<p>back to Regional Rumble</p>
</div>
<img alt="Regional Rumble APAC Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/65086296b79fcrr23-brand-logo-asia-white.png" />
</section>
<section class="info">
<h1>APAC Rumble</h1>
<div class="infomercial">
<div>
<h2>Biweekly Rumble - $1500 Each</h2>
<ul>
<li><b>APAC N:</b> 8th October / 22nd October / 5th November 2023</li>
<li><b>APAC S:</b> 7th October / 21st October / 4th November</li>
</ul>
</div>
<div>
<h2>Regional Rumble - $15,500</h2>
<ul>
<li><b>Day 1:</b> 19th November 2023</li>
<li><b>Day 2:</b> 26th November 2023</li>
</ul>
</div>
</div>
</section>
<section class="trailer">
<iframe src="https://www.youtube.com/embed/b53E8v2tFYw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
</div>
</template>
<script>
export default {
name: 'AsianRumble',
methods: {
goback() {
this.$router.push('/regionalrumble');
}
},
}
</script>

45
src/views/MERumble.vue
Unescape Escape View File

@ -0,0 +1,45 @@
<template>
<div class="regional">
<div class="bg-only"></div>
<section class="hero">
<div class="goback" @click="goback">
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9.474 5.209s-4.501 4.505-6.254 6.259c-.147.146-.22.338-.22.53s.073.384.22.53c1.752 1.754 6.252 6.257 6.252 6.257.145.145.336.217.527.217.191-.001.383-.074.53-.221.293-.293.294-.766.004-1.057l-4.976-4.976h14.692c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-14.692l4.978-4.979c.289-.289.287-.761-.006-1.054-.147-.147-.339-.221-.53-.221-.191-.001-.38.071-.525.215z" fill-rule="nonzero"/></svg>
<p>back to Regional Rumble</p>
</div>
<img alt="Regional Rumble MENA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629a9ba86rr23-brand-logo-mena-white.png" />
</section>
<section class="info">
<h1>MENA Rumble</h1>
<div class="infomercial">
<div>
<h2>Biweekly Rumble - $2,500 for ME / $1,000 for NAF each</h2>
<ul>
<li><b>ME:</b>5th October / 19th October / 2nd November 2023</li>
<li><b>NAF:</b>6th October / 20th October / 3rd November 2023</li>
</ul>
</div>
<div>
<h2>Regional Rumble - $20,000</h2>
<ul>
<li><b>Day 1:</b> 17th November 2023</li>
<li><b>Day 2:</b> 24th November 2023</li>
</ul>
</div>
</div>
</section>
<section class="trailer">
<iframe src="https://www.youtube.com/embed/b53E8v2tFYw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
</div>
</template>
<script>
export default {
name: 'MERumble',
methods: {
goback() {
this.$router.push('/regionalrumble');
}
},
}
</script>

12
src/views/RegionalRumble.vue
Unescape Escape View File

@ -13,15 +13,15 @@
</section>
<section class="selector">
<div class="apac">
<div class="apac" @click="gotoRoute('/regionalrumble/apac')">
<span class="unoverlay"></span>
<img alt="Regional Rumble APAC Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/65086296b79fcrr23-brand-logo-asia-white.png" />
</div>
<div class="me">
<div class="me" @click="gotoRoute('/regionalrumble/mena')">
<span class="unoverlay"></span>
<img alt="Regional Rumble MENA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629a9ba86rr23-brand-logo-mena-white.png" />
</div>
<div class="ssa">
<div class="ssa" @click="gotoRoute('/regionalrumble/ssa')">
<span class="unoverlay"></span>
<img alt="Regional Rumble SSA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629d08e60rr23-brand-logo-ssa-white.png" />
</div>
@ -35,6 +35,12 @@
<script>
export default {
name: 'RegionalRumble',
methods: {
gotoRoute(route) {
document.querySelector('header').classList.remove('scroll');
this.$router.push(route);
},
},
mounted() {
const h = document.querySelector('header');
const container = document.querySelector('.rumble');

Write Preview
Loading…
Cancel
Save