viveksantayana/wanderhome-quiz-client
viveksantayana/wanderhome-quiz-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Edited colour scheme

Browse Source
This commit is contained in:
Vivek Santayana 2022-09-01 16:55:12 +01:00
parent 28732539de
commit a943cf8f96
12 changed files with 49 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Header.vue
View File

@ -4,7 +4,7 @@
} }
</script> </script>
<template> <template>
<h1 class="text-4xl text-center pb-1 border-b-2 border-solid border-lime-600 mb-6 uncial-antiqua"> <h1 class="text-4xl text-center pb-1 border-b-2 border-solid border-olive-600 mb-6 uncial-antiqua">
<slot></slot> <slot></slot>
</h1> </h1>
</template> </template>

8
client/src/components/navbar/Index.vue
View File

@ -28,7 +28,7 @@
</script> </script>
<template> <template>
<nav class="fixed bg-lime-900 text-white drop-shadow-xl w-full z-50"> <nav class="fixed bg-olive-900 text-white drop-shadow-xl w-full z-50">
<div class="flex relative px-2 max-w-5xl mx-auto items-center justify-between"> <div class="flex relative px-2 max-w-5xl mx-auto items-center justify-between">
<!-- Logo --> <!-- Logo -->
<router-link class-active="" class="transition-all ease-in-out duration-500 hover:text-orange-300 active:text-orange-500 inline-flex justify-center items-center" to="/"> <router-link class-active="" class="transition-all ease-in-out duration-500 hover:text-orange-300 active:text-orange-500 inline-flex justify-center items-center" to="/">
@ -41,14 +41,14 @@
</div> </div>
<Menu v-slot="{ open }" as="div" class="relative inline-block text-left md:hidden"> <Menu v-slot="{ open }" as="div" class="relative inline-block text-left md:hidden">
<div> <div>
<MenuButton class="inline-flex justify-center w-full rounded-md drop-shadow-sm px-4 py-2 bg-lime-800 text-white hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500"> <MenuButton class="inline-flex justify-center w-full rounded-md drop-shadow-sm px-4 py-2 bg-olive-800 text-white hover:bg-olive-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500">
<span class="scale-150"> <span class="scale-150">
<mdiMenu/> <mdiMenu/>
</span> </span>
</MenuButton> </MenuButton>
</div> </div>
<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95"> <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
<MenuItems class="origin-top-right absolute right-0 mt-2 p-1 space-y-2 w-56 rounded-md drop-shadow-lg bg-lime-700 ring-1 ring-black ring-opacity-5 focus:outline-none"> <MenuItems class="origin-top-right absolute right-0 mt-2 p-1 space-y-2 w-56 rounded-md drop-shadow-lg bg-olive-700 ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1"> <div class="py-1">
<MenuItem v-slot="{ active }" v-for="route in $router.options.routes.filter( value => value.meta.indexBase >= 0 )" :key="route.path" > <MenuItem v-slot="{ active }" v-for="route in $router.options.routes.filter( value => value.meta.indexBase >= 0 )" :key="route.path" >
<a :href="route.path" target="_blank" rel="noopener noreferrer" :class="[active ? 'text-orange-300' : 'text-white', 'flex px-4 py-2 active:text-orange-500 rounded-lg h-fit align-middle transition-all ease-in-out duration-500']" v-if="route.path.startsWith('http')"> <a :href="route.path" target="_blank" rel="noopener noreferrer" :class="[active ? 'text-orange-300' : 'text-white', 'flex px-4 py-2 active:text-orange-500 rounded-lg h-fit align-middle transition-all ease-in-out duration-500']" v-if="route.path.startsWith('http')">
@ -59,7 +59,7 @@
<span>{{ route.meta.title }}</span> <span>{{ route.meta.title }}</span>
</div> </div>
</a> </a>
<router-link :to="route.path" :class="[active ? 'text-white bg-lime-600' : 'text-white', 'flex px-4 py-2 active:text-orange-500 rounded-lg h-fit align-middle transition-all ease-in-out duration-500', this.$route.fullPath == route.path ? 'bg-orange-500 text-white hover:bg-orange-600 hover:text-white' : '']" v-else> <router-link :to="route.path" :class="[active ? 'text-white bg-olive-600' : 'text-white', 'flex px-4 py-2 active:text-orange-500 rounded-lg h-fit align-middle transition-all ease-in-out duration-500', this.$route.fullPath == route.path ? 'bg-orange-500 text-white hover:bg-orange-600 hover:text-white' : '']" v-else>
<div class="inline-flex px-3 py-1 space-x-1"> <div class="inline-flex px-3 py-1 space-x-1">
<span class="scale-75"> <span class="scale-75">
<svg-icon type="mdi" :path="route.meta.svgPath"></svg-icon> <svg-icon type="mdi" :path="route.meta.svgPath"></svg-icon>

4
client/src/components/navbar/Navlink.vue
View File

@ -46,8 +46,8 @@ export default {
} }
.navlink { .navlink {
@apply hover:text-orange-300; @apply hover:text-orange-300;
@apply hover:bg-lime-700; @apply hover:bg-olive-700;
@apply bg-lime-800; @apply bg-olive-800;
@apply active:text-orange-500; @apply active:text-orange-500;
@apply rounded-lg; @apply rounded-lg;
@apply h-fit; @apply h-fit;

2
client/src/components/sidebar/Index.vue
View File

@ -14,7 +14,7 @@
</script> </script>
<template> <template>
<div class="flex flex-col bg-lime-50 px-3 py-5 rounded-xl"> <div class="flex flex-col bg-lime-50 px-3 py-5 rounded-xl">
<h1 class="text-xl my-2 border-b-2 border-lime-600 border-solid text-center uncial-antiqua md:text-left"> <h1 class="text-xl my-2 border-b-2 border-olive-600 border-solid text-center uncial-antiqua md:text-left">
<slot name="header"></slot> <slot name="header"></slot>
</h1> </h1>
<div class="flex flex-col text-md"> <div class="flex flex-col text-md">

2
client/src/components/sidebar/Navlink.vue
View File

@ -33,7 +33,7 @@ export default {
.navlink.active-link, .navlink.exact-active-link { .navlink.active-link, .navlink.exact-active-link {
@apply border-l-2; @apply border-l-2;
@apply border-solid; @apply border-solid;
@apply border-lime-600; @apply border-olive-600;
@apply drop-shadow-md; @apply drop-shadow-md;
} }
.navlink { .navlink {

2
client/src/views/Home.vue
View File

@ -52,7 +52,7 @@
</p> </p>
<div class="w-fit mx-auto"> <div class="w-fit mx-auto">
<router-link active-class="active-link" class="navlink" to="/quiz"> <router-link active-class="active-link" class="navlink" to="/quiz">
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white transition-all duration-300 ease-in-out hover:bg-lime-600"> <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
<span class="scale-75"> <span class="scale-75">
<AccountQuestion/> <AccountQuestion/>
</span> </span>

14
client/src/views/quiz/Question.vue
View File

@ -110,28 +110,28 @@
</div> </div>
<div class="w-full flex mx-auto items-center justify-between max-w-sm"> <div class="w-full flex mx-auto items-center justify-between max-w-sm">
<router-link :to="`/quiz/question/${this.id-1}`" v-if="this.id > 0"> <router-link :to="`/quiz/question/${this.id-1}`" v-if="this.id > 0">
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Back"> <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Back">
<span class="scale-100"> <span class="scale-100">
<ArrowLeftBold/> <ArrowLeftBold/>
</span> </span>
<span class="uncial-antiqua">Back</span> <span class="uncial-antiqua">Back</span>
</div> </div>
</router-link> </router-link>
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else> <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
<span class="scale-100"> <span class="scale-100">
<ArrowLeftBold/> <ArrowLeftBold/>
</span> </span>
<span class="uncial-antiqua">Back</span> <span class="uncial-antiqua">Back</span>
</div> </div>
<router-link :to="`/quiz/question/${this.id+1}`" v-if="this.id < this.questionStore.questions.length - 1 && this.answersStore.isAnswered(this.id)"> <router-link :to="`/quiz/question/${this.id+1}`" v-if="this.id < this.questionStore.questions.length - 1 && this.answersStore.isAnswered(this.id)">
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Next"> <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Next">
<span class="uncial-antiqua">Next</span> <span class="uncial-antiqua">Next</span>
<span class="scale-100"> <span class="scale-100">
<ArrowRightBold/> <ArrowRightBold/>
</span> </span>
</div> </div>
</router-link> </router-link>
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else> <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
<span class="uncial-antiqua">Next</span> <span class="uncial-antiqua">Next</span>
<span class="scale-100"> <span class="scale-100">
<ArrowRightBold/> <ArrowRightBold/>
@ -146,7 +146,7 @@
> >
<div v-show="this.id == this.questionStore.questions.length -1 && this.answersStore.isAnswered(this.id)" class="mx-auto my-8 w-fit transition-all"> <div v-show="this.id == this.questionStore.questions.length -1 && this.answersStore.isAnswered(this.id)" class="mx-auto my-8 w-fit transition-all">
<button @click="this.submitAnswers()"> <button @click="this.submitAnswers()">
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white transition-all duration-300 ease-in-out hover:bg-lime-600"> <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
<span class="scale-75"> <span class="scale-75">
<FleurDeLis/> <FleurDeLis/>
</span> </span>
@ -178,7 +178,7 @@
} }
:checked + label>div { :checked + label>div {
@apply border-lime-600; @apply border-olive-600;
@apply border-solid; @apply border-solid;
@apply border-l-2; @apply border-l-2;
@apply text-orange-600; @apply text-orange-600;
@ -191,7 +191,7 @@
} }
:checked:disabled + label>div { :checked:disabled + label>div {
@apply border-2; @apply border-2;
@apply border-lime-600; @apply border-olive-600;
@apply border-solid; @apply border-solid;
} }
</style> </style>

2
client/src/views/quiz/Quiz.vue
View File

@ -43,7 +43,7 @@
</p> </p>
<div class="w-fit mx-auto" key="welcome-5"> <div class="w-fit mx-auto" key="welcome-5">
<router-link active-class="active-link" class="navlink" to="/quiz/question/0"> <router-link active-class="active-link" class="navlink" to="/quiz/question/0">
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white transition-all duration-300 ease-in-out hover:bg-lime-600"> <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
<span class="scale-75"> <span class="scale-75">
<RoadVariant/> <RoadVariant/>
</span> </span>

2
client/src/views/results/Results.vue
View File

@ -46,7 +46,7 @@
</Header> </Header>
<Content> <Content>
<article class="prose"> <article class="prose">
<section v-for="playbook, index in this.resultsStore.results.playbooks" :key="Object.keys(playbook)[0]" :class="index < this.resultsStore.results.playbooks.length - 1 ? `border-solid border-b-2 border-lime-600 border-opacity-25` : ``"> <section v-for="playbook, index in this.resultsStore.results.playbooks" :key="Object.keys(playbook)[0]" :class="index < this.resultsStore.results.playbooks.length - 1 ? `border-solid border-b-2 border-olive-600 border-opacity-25` : ``">
<h2 class="flex justify-between"> <h2 class="flex justify-between">
<span class="uncial-antiqua align-bottom"> <span class="uncial-antiqua align-bottom">
<span class="text-xl">The</span> <span class="text-3xl capitalize">{{ Object.keys(playbook)[0] }}</span> <span class="text-xl">The</span> <span class="text-3xl capitalize">{{ Object.keys(playbook)[0] }}</span>

10
client/src/views/results/compare-answers/CompareQuestion.vue
View File

@ -80,28 +80,28 @@
</div> </div>
<div class="w-full flex mx-auto items-center justify-between max-w-sm"> <div class="w-full flex mx-auto items-center justify-between max-w-sm">
<router-link :to="`/results/answers/${this.id-1}`" v-if="this.id > 0"> <router-link :to="`/results/answers/${this.id-1}`" v-if="this.id > 0">
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Back"> <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Back">
<span class="scale-100"> <span class="scale-100">
<ArrowLeftBold/> <ArrowLeftBold/>
</span> </span>
<span class="uncial-antiqua">Back</span> <span class="uncial-antiqua">Back</span>
</div> </div>
</router-link> </router-link>
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else> <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
<span class="scale-100"> <span class="scale-100">
<ArrowLeftBold/> <ArrowLeftBold/>
</span> </span>
<span class="uncial-antiqua">Back</span> <span class="uncial-antiqua">Back</span>
</div> </div>
<router-link :to="`/results/answers/${this.id+1}`" v-if="this.id < this.questionStore.questions.length - 1"> <router-link :to="`/results/answers/${this.id+1}`" v-if="this.id < this.questionStore.questions.length - 1">
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Next"> <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Next">
<span class="uncial-antiqua">Next</span> <span class="uncial-antiqua">Next</span>
<span class="scale-100"> <span class="scale-100">
<ArrowRightBold/> <ArrowRightBold/>
</span> </span>
</div> </div>
</router-link> </router-link>
<div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else> <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
<span class="uncial-antiqua">Next</span> <span class="uncial-antiqua">Next</span>
<span class="scale-100"> <span class="scale-100">
<ArrowRightBold/> <ArrowRightBold/>
@ -117,7 +117,7 @@
</template> </template>
<style scoped> <style scoped>
.option-selected { .option-selected {
@apply border-lime-600; @apply border-olive-600;
@apply border-solid; @apply border-solid;
@apply border-l-2; @apply border-l-2;
@apply text-orange-600; @apply text-orange-600;

2
client/src/views/results/compare-answers/CompareQuestions.vue
View File

@ -40,7 +40,7 @@
</p> </p>
<div class="w-fit mx-auto"> <div class="w-fit mx-auto">
<router-link active-class="active-link" class="navlink" to="/results/answers/0"> <router-link active-class="active-link" class="navlink" to="/results/answers/0">
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white transition-all duration-300 ease-in-out hover:bg-lime-600"> <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
<span class="scale-75"> <span class="scale-75">
<FeatureSearch/> <FeatureSearch/>
</span> </span>

25
client/tailwind.config.cjs
View File

@ -1,3 +1,5 @@
const { white } = require('tailwindcss/colors');
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: [ content: [
@ -11,7 +13,28 @@ module.exports = {
lg: '976px', lg: '976px',
xl: '1440px' xl: '1440px'
}, },
extend: {}, extend: {
colors: {
olive: {
50: '#d6ffb7',
100: '#b0c087',
200: '#9eb26c',
600: '#8ca054',
700: '#5d6b38',
800: '#4f5d2f',
900: '#2e361b',
1000: '#171b0e'
},
darkorange: {
300: '#e3924f',
500: '#d99830',
600: '#dda448',
700: '#ff9c33',
800: '#cc6900',
900: '#a35400'
},
}
},
}, },
plugins: [ plugins: [
require('@tailwindcss/typography'), require('@tailwindcss/typography'),