ryujinx-archive/Ryujinx-Website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Deprecate News page, implement link to Blog, modify colors

Browse source
This commit is contained in:
Lordmau5 2018-06-10 20:20:54 +02:00
parent a6f6b445f2
commit d950e064ed
6 changed files with 44 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/App.vue
View file

@ -17,11 +17,11 @@
<v-btn flat exact :to="{ name: 'Home' }">
<v-icon>fas fa-home</v-icon>
</v-btn>
<v-btn flat exact :to="{ name: 'News' }">
<v-btn flat href="https://blog.ryujinx.org/">
<v-icon>fas fa-newspaper</v-icon>
</v-btn>
<v-btn flat href="https://github.com/gdkchan/Ryujinx/wiki">
<v-icon>fas fa-lemon</v-icon>
<v-icon>fas fa-globe</v-icon>
</v-btn>
<v-btn flat exact :to="{ name: 'Build' }">
<v-icon>fas fa-database</v-icon>
@ -34,20 +34,22 @@
</v-btn>
<v-btn flat color="green" href="https://github.com/gdkchan/Ryujinx"><v-icon>fab fa-github</v-icon></v-btn>
<v-btn flat color="red" href="https://yt.ryujinx.org/"><v-icon>fab fa-youtube</v-icon></v-btn>
<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ"><v-icon>fab fa-discord</v-icon></v-btn>
<v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx"><v-icon>fab fa-reddit</v-icon></v-btn>
</v-toolbar-items>
<v-toolbar-items class="hidden-md-and-down">
<v-btn flat exact :to="{ name: 'Home' }">Home</v-btn>
<v-btn flat exact :to="{ name: 'News' }">News</v-btn>
<v-btn flat href="https://blog.ryujinx.org/">Blog</v-btn>
<v-btn flat href="https://github.com/gdkchan/Ryujinx/wiki">Wiki</v-btn>
<v-btn flat exact :to="{ name: 'Build' }">Build</v-btn>
<v-btn flat exact :to="{ name: 'Contribute' }">Contribute</v-btn>
<v-btn flat exact :to="{ name: 'Compatibility' }">Compatibility</v-btn>
<v-btn flat color="green" href="https://github.com/gdkchan/Ryujinx"><v-icon left>fab fa-github</v-icon>GitHub</v-btn>
<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ"><v-icon left>fab fa-discord</v-icon>Discord</v-btn>
<v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx"><v-icon left>fab fa-reddit</v-icon>Reddit</v-btn>
<v-btn flat color="green" href="https://github.com/gdkchan/Ryujinx"><v-icon>fab fa-github</v-icon></v-btn>
<v-btn flat color="red" href="https://yt.ryujinx.org/"><v-icon>fab fa-youtube</v-icon></v-btn>
<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ"><v-icon>fab fa-discord</v-icon></v-btn>
<v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx"><v-icon>fab fa-reddit</v-icon></v-btn>
</v-toolbar-items>
<v-toolbar-items class="ml-0 mr-2">
<v-btn flat @click.stop="toggleDarkMode()">
@ -74,17 +76,17 @@
</v-list-tile>
<!-- News -->
<v-list-tile exact :to="{ name: 'News' }">
<v-list-tile href="https://blog.ryujinx.org/">
<v-list-tile-action>
<v-icon>fas fa-newspaper</v-icon>
</v-list-tile-action>
<v-list-tile-title>News</v-list-tile-title>
<v-list-tile-title>Blog</v-list-tile-title>
</v-list-tile>
<!-- Wiki -->
<v-list-tile href="https://github.com/gdkchan/Ryujinx/wiki">
<v-list-tile-action>
<v-icon>fas fa-lemon</v-icon>
<v-icon>fas fa-globe</v-icon>
</v-list-tile-action>
<v-list-tile-title>Wiki</v-list-tile-title>
</v-list-tile>
@ -123,6 +125,14 @@
<v-list-tile-title>GitHub</v-list-tile-title>
</v-list-tile>
<!-- YouTube -->
<v-list-tile color="red" href="https://yt.ryujinx.org/">
<v-list-tile-action>
<v-icon color="red">fab fa-youtube</v-icon>
</v-list-tile-action>
<v-list-tile-title>YouTube</v-list-tile-title>
</v-list-tile>
<!-- Discord -->
<v-list-tile color="blue" href="https://discord.gg/VkQYXAZ">
<v-list-tile-action>
@ -154,6 +164,12 @@
}
</style>
<style>
a {
color: #00C4E1;
}
</style>
<script>
export default {

4
src/components/Build.vue
View file

@ -17,14 +17,14 @@
<v-layout row wrap align-start justify-center>
<v-flex xs12 md6>
<p class="mt-4 title">Building methods</p>
<v-btn dark color="blue" :to="{ name: 'BuildNetCore' }">
<v-btn dark color="ryu_blue" :to="{ name: 'BuildNetCore' }">
<v-icon left>fas fa-code</v-icon>
.NET Core
</v-btn>
</v-flex>
<v-flex xs12 md6>
<p class="mt-4 title">Automatically compiled builds</p>
<v-btn dark color="red" target="_blank" :href="downloadURL">
<v-btn dark color="ryu_orange" target="_blank" :href="downloadURL">
<v-icon left>fas fa-download</v-icon>
Download for <v-icon class="mx-1">fab fa-windows</v-icon> ({{ version }})
</v-btn>

22
src/components/Home.vue
View file

@ -41,11 +41,11 @@
Please consider reporting it via our Discord server.
</p>
<v-btn dark color="blue" :to="{ name: 'Compatibility' }">
<v-btn dark color="ryu_blue" :to="{ name: 'Compatibility' }">
<v-icon left>fas fa-gamepad</v-icon>
Game compatibility list
</v-btn>
<v-btn dark color="red" :to="{ name: 'Build' }">
<v-btn dark color="ryu_orange" :to="{ name: 'Build' }">
<v-icon left>fas fa-download</v-icon>
Download the latest build
</v-btn>
@ -65,7 +65,7 @@
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="blue--text text--lighten-2">fab fa-github</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-github</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Where can I grab it?</div>
@ -80,7 +80,7 @@
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="blue--text text--lighten-2">fas fa-code</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-code</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">How can I contribute?</div>
@ -93,7 +93,7 @@
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="blue--text text--lighten-2">fas fa-gamepad</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-gamepad</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Gaming?</div>
@ -118,9 +118,9 @@
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="blue--text text--lighten-2 mr-4">fab fa-windows</v-icon>
<v-icon x-large class="blue--text text--lighten-2 mr-4">fab fa-apple</v-icon>
<v-icon x-large class="blue--text text--lighten-2">fab fa-linux</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2 mr-4">fab fa-windows</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2 mr-4">fab fa-apple</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-linux</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Platforms</div>
@ -135,7 +135,7 @@
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="blue--text text--lighten-2">fab fa-discord</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-discord</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Discord</div>
@ -150,7 +150,7 @@
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="blue--text text--lighten-2">fab fa-nintendo-switch</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-nintendo-switch</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Why the name?</div>
@ -179,7 +179,7 @@
<v-flex xs12>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="blue--text text--lighten-2">fas fa-users</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-users</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Our Team</div>

110
src/components/News.vue
View file

@ -1,110 +0,0 @@
<template>
<div>
<section>
<v-layout
column
wrap
class="my-5"
align-center
justify-center
>
<v-container grid-list-xl fluid>
<v-layout
v-if="loading"
row
wrap
align-center
justify-center
>
<v-flex
xs12
class="text-xs-center"
>
<v-progress-circular :size="100" indeterminate color="primary"></v-progress-circular>
</v-flex>
</v-layout>
<v-layout row wrap align-start>
<v-flex
v-for="article in articles"
xs12 md6 lg4
:key="article.title"
>
<v-card hover @click.native.stop="openArticle(article)">
<v-card-media :src="article.image" height="300px"></v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">{{ article.title }}</h3>
<span class="grey--text">{{ article.created }} by {{ article.author }}</span>
<vue-markdown class="mt-3" v-if="article.short">{{ article.short }}</vue-markdown>
</div>
</v-card-title>
<v-card-actions v-if="article.text">
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat="flat" @click.native.stop="openArticle(article)">Learn More</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</section>
<v-dialog v-model="dialog" max-width="1000" scrollable lazy>
<v-card>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">{{ currentArticle.title }}</h3>
<span class="grey--text">{{ currentArticle.created }} by {{ currentArticle.author }}</span>
</div>
</v-card-title>
<v-card-media v-if="currentArticle" :src="currentArticle.image" height="300px"></v-card-media>
<v-card-text>
<vue-markdown :source="currentArticle.text"></vue-markdown>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
export default {
components: {
VueMarkdown
},
data () {
return {
currentArticle: false,
dialog: false,
loading: true,
articles: []
};
},
methods: {
async fetchArticles () {
let _a = await fetch('https://ryujinx.org/public/articles.json');
this.articles = await _a.json();
this.loading = false;
},
openArticle (article) {
if (!article.text) return;
this.dialog = true;
this.currentArticle = article;
}
},
mounted () {
this.fetchArticles();
}
};
</script>

7
src/main.js
View file

@ -6,7 +6,12 @@ import router from './router';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
Vue.use(Vuetify, {
theme: {
ryu_blue: '#00C4E1',
ryu_orange: '#FF5E5B'
}
});
Vue.config.productionTip = false;

6
src/router/index.js
View file

@ -1,7 +1,6 @@
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import News from '@/components/News';
import Contribute from '@/components/Contribute';
import Build from '@/components/Build';
import BuildNetCore from '@/components/Build.Net_Core';
@ -16,11 +15,6 @@ export default new Router({
name: 'Home',
component: Home
},
{
path: '/news',
name: 'News',
component: News
},
{
path: '/contribute',
name: 'Contribute',