Commit b992523a authored by Wolf's avatar Wolf 💯
Browse files

updated about page

parent b173fcc4
<template>
<div class="contributors">
<h1>Contributors</h1>
<h1>Built by the community</h1>
<div class="contributors__subtitle">
We're a decentralized project, running on more than
{{ CONTRIBUTORS.length }} people contributing regularly to the Hive
......@@ -8,7 +8,7 @@
</div>
<div>
The list of contributors below is
<i class="link" @click="$accessor.shuffleContributors()">randomized</i>.
<i class="link" @click="$accessor.shuffleContributors({})">randomized</i>.
</div>
<div class="contributors__labels">
......@@ -108,9 +108,9 @@ export default defineComponent({
methods: {
async filterLabel(key: string) {
if (this.$route.query.t === key) {
await routerPush(this, `/about`)
await routerPush(this, `/contributors`)
} else {
await routerPush(this, `/about?t=${key}`)
await routerPush(this, `/contributors?t=${key}`)
}
},
},
......@@ -124,6 +124,7 @@ export default defineComponent({
align-items: center;
max-width: 1200px;
width: 100%;
min-height: 500px;
&__subtitle {
margin-bottom: 10px;
......
......@@ -90,7 +90,7 @@ export default defineComponent({
padding: 6px 10px;
margin: 10px 4px 10px 4px;
background: #f0f0f7;
color: #555562;
color: #555555;
border-radius: 14px 14px 1px 1px;
text-align: center;
cursor: pointer;
......
......@@ -24,7 +24,10 @@
"
class="navigation-item__link"
rel="nofollow noopener noreferrer"
:class="{'navigation-item__link--dark': dark}"
:class="{
'navigation-item__link--dark': dark,
'navigation-item__link--active': $route.name.startsWith(to),
}"
:to="{name: to}"
>
{{ name }}
......@@ -62,7 +65,8 @@ export default defineComponent({
color: white;
}
&:hover,
&.nuxt-link-active {
&.nuxt-link-active,
&--active {
color: $primary-color-100;
}
}
......
<template>
<div class="updates">
<UpdatesUpdate class="updates__update" :item="UPDATES[0]" :big="true" />
<div class="updates__smaller">
<UpdatesUpdate
v-for="update in UPDATES.slice(1, UPDATES.length)"
:key="update.title"
class="updates__update"
:item="update"
/>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from '@nuxtjs/composition-api'
import {UPDATES} from '~/helpers/updates'
export default defineComponent({
setup() {
return {
UPDATES: UPDATES.map((v) => {
if (v.video) {
v.video = v.video
.replace('youtube.', 'youtube-nocookie.')
.replace('youtu.be/', 'www.youtube-nocookie.com/embed/')
.replace('/watch?v=', '/embed/')
.replace('&t=', '?start=')
}
return v
}),
}
},
})
</script>
<style lang="scss">
.updates {
display: flex;
flex-flow: column nowrap;
align-items: center;
max-width: 1200px;
width: 100%;
&__smaller {
display: flex;
width: 100%;
flex-flow: row wrap;
justify-content: center;
.updates__update {
margin: 10px 15px;
}
}
}
</style>
<template>
<div class="updates-update" :class="{'updates-update--big': big}">
<div class="updates-update__title">{{ item.title }}</div>
<iframe
v-if="item.video"
:src="item.video"
frameBorder="0"
class="updates-update__iframe"
allowfullscreen
/>
</div>
</template>
<script lang="ts">
import {defineComponent} from '@nuxtjs/composition-api'
export default defineComponent({
props: {
item: {
type: Object,
default: () => {},
},
big: Boolean,
},
setup() {
return {}
},
})
</script>
<style lang="scss">
.updates-update {
display: flex;
flex-flow: column;
margin-bottom: 10px;
width: fit-content;
height: fit-content;
background: #e2e2ec;
border-radius: 10px;
// box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
&__title {
font-weight: 700;
margin-bottom: 10px;
font-size: 1.25rem;
padding: 12px 8px 4px 26px;
color: #555555;
}
&__iframe {
max-width: 100% !important;
height: 100%;
width: 100%;
border-radius: 0 0 10px 10px;
}
&--big {
margin-bottom: 40px;
iframe {
width: 793px !important;
height: 471px !important;
}
}
}
@media (min-width: 360px) {
.updates-update {
iframe {
width: 360px;
height: 205px;
}
}
}
// @media (min-width: 576px) {
// .updates-update {
// iframe {
// width: 504px;
// height: 285.6px;
// }
// }
// }
// @media (min-width: 768px) {
// .updates-update {
// iframe {
// width: 610px;
// height: 362px;
// }
// }
// }
</style>
......@@ -4,7 +4,7 @@
export const NAVIGATION_HEADER = [
{
to: 'about',
name: 'About',
name: 'Learn More',
},
{
to: 'eco',
......@@ -33,7 +33,7 @@ export const NAVIGATION_FOOTER = [
[
{
to: 'about',
name: 'About',
name: 'Learn More',
},
{
to: 'https://signup.hive.io',
......@@ -116,3 +116,12 @@ export const NAVIGATION_FOOTER = [
},
],
]
export const ABOUT_NAVIGATION = [
{
to: 'about',
text: 'About Hive',
},
{to: 'about-contributors', text: 'Contributors'},
{to: 'about-updates', text: 'Updates'},
]
export const enum UPDATE_TYPE {
coreDevMeeting = 'Core Dev Meeting',
qAndA = 'Q&A',
}
export interface IUpdate {
video?: string
title: string
type: UPDATE_TYPE
}
export const UPDATES: IUpdate[] = [
{
video: 'https://www.youtube.com/watch?v=FtyhMAWto90&t=825',
title: 'HardFork 25 Q&A',
type: UPDATE_TYPE.qAndA,
},
{
video: 'https://www.youtube.com/watch?v=pxUvrI0pyPs',
title: 'Core Dev Meeting #24',
type: UPDATE_TYPE.coreDevMeeting,
},
{
video: 'https://www.youtube.com/watch?v=KS4yRaZtejE',
title: 'Core Dev Meeting #23',
type: UPDATE_TYPE.coreDevMeeting,
},
{
video: 'https://www.youtube.com/watch?v=WIHxpfBa2KE',
title: 'Core Dev Meeting #22',
type: UPDATE_TYPE.coreDevMeeting,
},
{
video: 'https://www.youtube.com/watch?v=2tOH_yCANCo',
title: 'Core Dev Meeting #21',
type: UPDATE_TYPE.coreDevMeeting,
},
{
video: 'https://www.youtube.com/watch?v=JmQU5czs98w',
title: 'Core Dev Meeting #20',
type: UPDATE_TYPE.coreDevMeeting,
},
{
video: 'https://www.youtube.com/watch?v=UIRR5gFfVYk',
title: 'Core Dev Meeting #19',
type: UPDATE_TYPE.coreDevMeeting,
},
{
video: 'https://www.youtube.com/watch?v=OL4tH5w5oYY',
title: 'Core Dev Meeting #18',
type: UPDATE_TYPE.coreDevMeeting,
},
]
......@@ -6,6 +6,7 @@ export * from './socialmedias'
export * from './statswebsites'
export * from './wallets'
export * from './contributors'
export * from './updates'
export const INFOBAR = {
show: false,
......
<template>
<div class="about">
<div class="about__inner">
<div class="about__first">
<div class="about__nav">
<div
v-for="nav in ABOUT_NAVIGATION"
:key="nav.to"
class="about__nav__item"
:class="{'about__nav__item--active': nav.to === $route.name}"
@click="
nav.to !== $route.name ? $router.push({name: nav.to}) : () => {}
"
>
{{ nav.text }}
</div>
</div>
<div v-if="$route.name === 'about'" class="about__first">
<img
class="about__titleImage"
src="~/assets/images/progressiveApp.svg"
......@@ -34,21 +47,22 @@
</div>
</div>
</div>
<Contributors />
<Updates v-if="$route.name === 'about-updates'" />
<Contributors v-if="$route.name === 'about-contributors'" />
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from '@nuxtjs/composition-api'
import {ABOUT_NAVIGATION} from '~/helpers/navigation'
export default defineComponent({
name: 'About',
components: {},
props: {},
setup() {
return {}
return {ABOUT_NAVIGATION}
},
})
</script>
......@@ -70,13 +84,33 @@ export default defineComponent({
flex-flow: column;
align-items: center;
justify-content: center;
padding: 80px 0 40px 0;
padding: 0 0 40px 0;
max-width: 820px;
text-align: center;
margin-top: -15px;
min-height: 60vh;
}
&__nav {
display: flex;
margin-top: 20px;
margin-bottom: 50px;
&__item {
margin: 5px 7px;
padding: 10px 20px;
min-width: 110px;
text-align: center;
color: white;
background: rgba(33, 37, 41, 0.6);
border-radius: 5px;
cursor: pointer;
&--active {
background: $primary-color-100;
}
}
}
&__titleImage {
height: 150px;
margin-bottom: 35px;
......
......@@ -28,6 +28,18 @@ export const createRouter = () => {
name: 'about',
meta: {}
},
{
path: '/updates',
component: About,
name: 'about-updates',
meta: {}
},
{
path: '/contributors',
component: About,
name: 'about-contributors',
meta: {}
},
{
path: '/brand',
component: Brand,
......
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