Skip to content
Snippets Groups Projects
Commit e27d1e72 authored by Rasmus Thomsen's avatar Rasmus Thomsen
Browse files

Merge branch 'tim' into 'master' 

Merge tim into master

See merge request !1
parents 476e3f16 51f6b754
No related branches found
No related tags found
1 merge request!1Merge tim into master
Pipeline #3443 passed
Stage: production
Hide whitespace changes
Inline Side-by-side
Showing
with 161 additions and 309 deletions
frontend/assets/variables.scss
+ 6
− 3
View file @ e27d1e72
// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
//
// The variables you want to modify
// $font-size-root: 20px;
@import url("https://fonts.googleapis.com/css2?family=Taviraj:wght@600&display=swap");
$heading-font-family: "Taviraj", serif;
$material-dark: (
background: #162c41,
);
frontend/components/Logo.vue deleted 100644 → 0
+ 0
− 79
View file @ 476e3f16
<template>
<div class="VueToNuxtLogo">
<div class="Triangle Triangle--two" />
<div class="Triangle Triangle--one" />
<div class="Triangle Triangle--three" />
<div class="Triangle Triangle--four" />
</div>
</template>
<style>
.VueToNuxtLogo {
display: inline-block;
animation: turn 2s linear forwards 1s;
transform: rotateX(180deg);
position: relative;
overflow: hidden;
height: 180px;
width: 245px;
}
.Triangle {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
.Triangle--one {
border-left: 105px solid transparent;
border-right: 105px solid transparent;
border-bottom: 180px solid #41b883;
}
.Triangle--two {
top: 30px;
left: 35px;
animation: goright 0.5s linear forwards 3.5s;
border-left: 87.5px solid transparent;
border-right: 87.5px solid transparent;
border-bottom: 150px solid #3b8070;
}
.Triangle--three {
top: 60px;
left: 35px;
animation: goright 0.5s linear forwards 3.5s;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 120px solid #35495e;
}
.Triangle--four {
top: 120px;
left: 70px;
animation: godown 0.5s linear forwards 3s;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 60px solid #fff;
}
@keyframes turn {
100% {
transform: rotateX(0deg);
}
}
@keyframes godown {
100% {
top: 180px;
}
}
@keyframes goright {
100% {
left: 70px;
}
}
</style>
frontend/components/NavSwitcher.vue 0 → 100644
+ 27
− 0
View file @ e27d1e72
<template>
<v-container align-content-end align-end d-flex grid justify-end>
<v-btn x-large icon @click="changeRoute()">
<v-icon x-large>{{
showInfo ? "mdi-information-outline" : "mdi-gamepad-variant-outline"
}}</v-icon>
</v-btn>
</v-container>
</template>
<script>
export default {
data() {
return {
showInfo: true,
};
},
methods: {
changeRoute() {
this.showInfo = !this.showInfo;
this.showInfo ? this.$router.push("/info") : this.$router.push("/games");
},
},
};
</script>
<style></style>
frontend/components/VuetifyLogo.vue deleted 100644 → 0
+ 0
− 18
View file @ 476e3f16
<template>
<img class="VuetifyLogo" alt="Vuetify Logo" src="/vuetify-logo.svg" />
</template>
<style>
.VuetifyLogo {
height: 180px;
width: 180px;
transform: rotateY(560deg);
animation: turn 3.5s ease-out forwards 1s;
}
@keyframes turn {
100% {
transform: rotateY(0deg);
}
}
</style>
frontend/layouts/default.vue
+ 6
− 81
View file @ e27d1e72
<template>
<v-app dark>
<v-navigation-drawer
v-model="drawer"
:mini-variant="miniVariant"
:clipped="clipped"
fixed
app
>
<v-list>
<v-list-item
v-for="(item, i) in items"
:key="i"
:to="item.to"
router
exact
>
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title v-text="item.title" />
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar :clipped-left="clipped" fixed app>
<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
<v-btn icon @click.stop="miniVariant = !miniVariant">
<v-icon>mdi-{{ `chevron-${miniVariant ? "right" : "left"}` }}</v-icon>
</v-btn>
<v-btn icon @click.stop="clipped = !clipped">
<v-icon>mdi-application</v-icon>
</v-btn>
<v-btn icon @click.stop="fixed = !fixed">
<v-icon>mdi-minus</v-icon>
</v-btn>
<v-toolbar-title v-text="title" />
<v-spacer />
<v-btn icon @click.stop="rightDrawer = !rightDrawer">
<v-icon>mdi-menu</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<v-container>
<nuxt />
</v-container>
<nuxt />
</v-main>
<v-navigation-drawer v-model="rightDrawer" :right="right" temporary fixed>
<v-list>
<v-list-item @click.native="right = !right">
<v-list-item-action>
<v-icon light> mdi-repeat </v-icon>
</v-list-item-action>
<v-list-item-title>Switch drawer (click me)</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-footer :absolute="!fixed" app>
<span>&copy; {{ new Date().getFullYear() }}</span>
<v-footer style="background: var(--v-background-lighten1)" app>
<v-flex text-center>
Diese Website steht in keiner Verbindung mit den abgebildeten Kommunen
</v-flex>
</v-footer>
</v-app>
</template>
<script>
export default {
data() {
return {
clipped: false,
drawer: false,
fixed: false,
items: [
{
icon: "mdi-apps",
title: "Welcome",
to: "/",
},
{
icon: "mdi-chart-bubble",
title: "Inspire",
to: "/inspire",
},
],
miniVariant: false,
right: true,
rightDrawer: false,
title: "Vuetify.js",
};
},
};
export default {};
</script>
frontend/layouts/error.vue
+ 19
− 10
View file @ e27d1e72
<template>
<v-app dark>
<h1 v-if="error.statusCode === 404">
{{ pageNotFound }}
</h1>
<h1 v-else>
{{ otherError }}
</h1>
<NuxtLink to="/"> Home page </NuxtLink>
<v-container align-center d-flex fill-height justify-space-around>
<v-row class="justify-center">
<h1 class="text-h1 justify-start text-center">
{{ errorMsg }}
</h1>
</v-row>
<NuxtLink id="home-page" to="/" class="text-uppercase">
Home page
</NuxtLink>
</v-container>
</v-app>
</template>
<script>
export default {
layout: "empty",
props: {
error: {
type: Object,
......@@ -21,13 +23,15 @@ export default {
},
data() {
return {
errorMsg: `${
this.error.statusCode === 404 ? "404 Not Found" : "An error occured"
}`,
pageNotFound: "404 Not Found",
otherError: "An error occurred",
};
},
head() {
const title =
this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
const title = this.errorMsg;
return {
title,
};
......@@ -36,6 +40,11 @@ export default {
</script>
<style scoped>
#home-page {
font-size: x-large;
text-decoration: none;
color: var(--v-info-base);
}
h1 {
font-size: 20px;
}
......
frontend/nuxt.config.js
+ 37
− 14
View file @ e27d1e72
import colors from 'vuetify/es5/util/colors'
import colors from "vuetify/es5/util/colors";
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
titleTemplate: '%s - cdv-frontend',
title: 'cdv-frontend',
titleTemplate: "%s",
title: "Spaß mit Wappen",
htmlAttrs: {
lang: 'en',
lang: "de",
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
......@@ -28,27 +28,50 @@ export default {
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/eslint
'@nuxtjs/eslint-module',
"@nuxtjs/eslint-module",
// https://go.nuxtjs.dev/vuetify
'@nuxtjs/vuetify',
"@nuxtjs/vuetify",
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
"@nuxtjs/axios",
"@nuxtjs/proxy",
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {},
axios: {
proxy: true,
},
proxy: {
"/api/": {
target:
process.env.NODE_ENV === "production"
? "https://davincihackathonbackend.herokuapp.com/"
: "http://localhost:8000",
pathRewrite: { "^/api/": "/" },
},
},
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: {
customVariables: ['~/assets/variables.scss'],
customVariables: ["~/assets/variables.scss"],
treeShake: true,
defaultAssets: {
font: {
family: "Poppins",
},
},
theme: {
options: {
customProperties: true,
},
dark: true,
themes: {
dark: {
background: "#162c41",
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
......@@ -63,4 +86,4 @@ export default {
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
}
};
frontend/package.json
+ 1
− 0
View file @ e27d1e72
......@@ -12,6 +12,7 @@
},
"dependencies": {
"@nuxtjs/axios": "^5.13.1",
"@nuxtjs/proxy": "^2.1.0",
"core-js": "^3.9.1",
"nuxt": "^2.15.3"
},
......
frontend/pages/index.vue
+ 13
− 88
View file @ e27d1e72
<template>
<v-row justify="center" align="center">
<v-col cols="12" sm="8" md="6">
<div class="text-center">
<logo />
<vuetify-logo />
</div>
<v-card>
<v-card-title class="headline">
Welcome to the Vuetify + Nuxt.js template
</v-card-title>
<v-card-text>
<p>
Vuetify is a progressive Material Design component framework for
Vue.js. It was designed to empower developers to create amazing
applications.
</p>
<p>
For more information on Vuetify, check out the
<a
href="https://vuetifyjs.com"
target="_blank"
rel="noopener noreferrer"
>
documentation </a
>.
</p>
<p>
If you have questions, please join the official
<a
href="https://chat.vuetifyjs.com/"
target="_blank"
rel="noopener noreferrer"
title="chat"
>
discord </a
>.
</p>
<p>
Find a bug? Report it on the github
<a
href="https://github.com/vuetifyjs/vuetify/issues"
target="_blank"
rel="noopener noreferrer"
title="contribute"
>
issue board </a
>.
</p>
<p>
Thank you for developing with Vuetify and I look forward to bringing
more exciting features in the future.
</p>
<div class="text-xs-right">
<em><small>&mdash; John Leider</small></em>
</div>
<hr class="my-3" />
<a
href="https://nuxtjs.org/"
target="_blank"
rel="noopener noreferrer"
>
Nuxt Documentation
</a>
<br />
<a
href="https://github.com/nuxt/nuxt.js"
target="_blank"
rel="noopener noreferrer"
>
Nuxt GitHub
</a>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn color="primary" nuxt to="/inspire"> Continue </v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
<v-container class="d-flex" fill-height>
<v-row class="justify-center align-center">
<h1 align="center" class="text-h4 center text-sm-h2 text-lg-h1">
Spaß mit Wappen
</h1>
</v-row>
<v-row class="justify-center">
<nuxt-link to="/info">
<v-btn color="primary" elevation="4" x-large dark> Start </v-btn>
</nuxt-link>
</v-row>
</v-container>
</template>
<script>
import Logo from "~/components/Logo.vue";
import VuetifyLogo from "~/components/VuetifyLogo.vue";
export default {
components: {
Logo,
VuetifyLogo,
},
};
export default {};
</script>
frontend/pages/info.vue 0 → 100644
+ 49
− 0
View file @ e27d1e72
<template>
<v-container grid-list-xs>
<NavSwitcher />
</v-container>
</template>
<script>
import NavSwitcher from "~/components/NavSwitcher.vue";
export default {
components: {
NavSwitcher,
},
created() {
this.getRibbons();
},
methods: {
async getRibbonsBrickedDemo() {
await this.$axios
.get("/api/ribbons?from=2&to=1")
.then((res) => {
console.log(res.data);
})
.catch((e) => {
if (e.response) {
console.log(
`The API returned with an error status code: ${e.response.status}`
);
}
});
},
async getRibbons() {
await this.$axios
.get("/api/ribbons")
.then((res) => {
console.log(res.data);
})
.catch((e) => {
if (e.response) {
console.log(
`The API returned with an error status code: ${e.response.status}`
);
}
});
},
},
};
</script>
<style></style>
frontend/pages/inspire.vue deleted 100644 → 0
+ 0
− 15
View file @ 476e3f16
<template>
<v-row>
<v-col class="text-center">
<img src="/v.png" alt="Vuetify.js" class="mb-5" />
<blockquote class="blockquote">
&#8220;First, solve the problem. Then, write the code.&#8221;
<footer>
<small>
<em>&mdash;John Johnson</em>
</small>
</footer>
</blockquote>
</v-col>
</v-row>
</template>
frontend/static/v.png deleted 100644 → 0
+ 0
− 0
View file @ 476e3f16
frontend/static/v.png

5.54 KiB

frontend/static/vuetify-logo.svg deleted 100644 → 0
+ 0
− 1
View file @ 476e3f16
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
frontend/store/index.js 0 → 100644
+ 3
− 0
View file @ e27d1e72
export const state = () => ({});
export const mutations = {};
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

Hosted with love by Chaotikum e.V. Support us if you can