Siklos/vue-playground
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: Siklos:03e63ff5800929ff2dbce365feb81b9f289db454
Branches Tags
Siklos:master
...
compare: Siklos:12a945b806ae9b6d35f9a3a28434ecd4f31ad4be
Branches Tags
Siklos:master

3 commits
03e63ff580 ... 12a945b806

Author SHA1 Message Date
Hydroxycarbamide
12a945b806 Implement modal for login with anilist + disable unused icons 2022-05-15 18:34:45 +02:00
Hydroxycarbamide
4ce6b4536f Set color blue on sidebar 2022-05-15 17:24:34 +02:00
Hydroxycarbamide
4bfffa2def Add anilist auth button 2022-05-15 17:10:39 +02:00
16 changed files with 321 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/js/tw-elements/index.min.js"></script>
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body>

380
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -16,6 +16,7 @@
"@vue/apollo-composable": "^4.0.0-alpha.17", "@vue/apollo-composable": "^4.0.0-alpha.17",
"apollo-boost": "^0.4.9", "apollo-boost": "^0.4.9",
"graphql": "^15.8.0", "graphql": "^15.8.0",
"tw-elements": "^1.0.0-alpha12",
"vue": "^3.2.33", "vue": "^3.2.33",
"vue-apollo": "^3.1.0" "vue-apollo": "^3.1.0"
}, },

2
public/js/tw-elements/index.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
src/App.vue
View file

@ -4,6 +4,7 @@
// import HelloWorld from './components/HelloWorld.vue' // import HelloWorld from './components/HelloWorld.vue'
import Sidebar from './components/Sidebar.vue'; import Sidebar from './components/Sidebar.vue';
import Content from './components/Content.vue'; import Content from './components/Content.vue';
import AuthModal from './components/auth/AuthModal.vue';
</script> </script>
<template> <template>
@ -15,4 +16,5 @@ import Content from './components/Content.vue';
<Content /> <Content />
</div> </div>
</div> </div>
<AuthModal />
</template> </template>

BIN
src/assets/android-chrome-512x512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

6
src/auth/anilist.js Normal file
View file

@ -0,0 +1,6 @@
const client_id = '8337'
const redirect_uri = encodeURIComponent('https://anilist.co/api/v2/oauth/pin')
const response_type = 'token'
const href = `https://anilist.co/api/v2/oauth/authorize?client_id=${client_id}&response_type=${response_type}`
export default href;

2
src/components/Content.vue
View file

@ -36,7 +36,7 @@ export default {
this.fetchAnime(); this.fetchAnime();
}, },
components: { components: {
Card Card,
} }
} }

2
src/components/FetchButton.vue
View file

@ -22,5 +22,5 @@ function onClick() {
</script> </script>
<template> <template>
<button class="shadow-md p-2 rounded-full bg-blue-500 text-white hover:shadow-blue-500 shadow-blue-200 transition-shadow" @click="onClick">Fetch</button> <button class="button" @click="onClick">Fetch</button>
</template> </template>

6
src/components/Sidebar.vue
View file

@ -6,8 +6,8 @@ import SidebarIcon from "./SidebarIcon.vue";
<div class="fixed top-0 left-0 <div class="fixed top-0 left-0
m-0 h-screen bg-slate-900 m-0 h-screen bg-slate-900
text-white shadow-lg w-16 flex flex-col"> text-white shadow-lg w-16 flex flex-col">
<SidebarIcon icon="fire" text="Fire"></SidebarIcon> <SidebarIcon icon="right-to-bracket" text="Login" modal="authModal"></SidebarIcon>
<SidebarIcon icon="plus" text="Plus"></SidebarIcon> <!-- <SidebarIcon icon="plus" text="Plus"></SidebarIcon> -->
<SidebarIcon icon="poo" text="Poo"></SidebarIcon> <!-- <SidebarIcon icon="poo" text="Poo"></SidebarIcon> -->
</div> </div>
</template> </template>

15
src/components/SidebarIcon.vue
View file

@ -1,15 +1,24 @@
<script setup> <script setup>
const props = defineProps({ const props = defineProps({
icon: String, icon: String,
text: String text: String,
href: String,
newtab: Boolean,
modal: String,
}) })
</script> </script>
<template> <template>
<i class="sidebar-icon group"> <a v-if="newtab" :href="href" class="sidebar-icon group" target="_blank" data-bs-toggle="modal" :data-bs-target="'#' + modal">
<font-awesome-icon :icon="['fas', icon]" /> <font-awesome-icon :icon="['fas', icon]" />
<span class="sidebar-tooltip group-hover:scale-100"> <span class="sidebar-tooltip group-hover:scale-100">
{{ text }} {{ text }}
</span> </span>
</i> </a>
<a v-else :href="href" class="sidebar-icon group" data-bs-toggle="modal" :data-bs-target="'#' + modal">
<font-awesome-icon :icon="['fas', icon]" />
<span class="sidebar-tooltip group-hover:scale-100">
{{ text }}
</span>
</a>
</template> </template>

9
src/components/auth/AuthButton.vue Normal file
View file

@ -0,0 +1,9 @@
<script setup>
import href from '../../auth/anilist'
</script>
<template>
<a class="button inline-flex mx-auto max-w-sm items-center" :href="href" target="_blank">
Login with Anilist
<img class="h-5 w-5 ml-3" src="../../assets/android-chrome-512x512.png" />
</a>
</template>

46
src/components/auth/AuthModal.vue Normal file
View file

@ -0,0 +1,46 @@
<script setup>
import AuthButton from './AuthButton.vue';
const id = 'authModal';
</script>
<template>
<div class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
:id="id" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered relative w-auto pointer-events-none">
<div
class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
<div
class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
<h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">
Login with Anilist
</h5>
<button type="button"
class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body relative p-4">
<AuthButton />
<div class="mt-3">
<label for="tokenTextArea" class="form-label inline-block mb-2 text-gray-700">
Insert token below
</label>
<textarea
class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
id="tokenTextArea"
rows="3"
placeholder="Insert token here"></textarea>
</div>
</div>
<div
class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
<button type="button"
class="inline-block px-6 py-2.5 bg-slate-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-slate-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-slate-800 active:shadow-lg transition duration-150 ease-in-out"
data-bs-dismiss="modal">Close</button>
<button type="button"
data-bs-dismiss="modal"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1">Confirm</button>
</div>
</div>
</div>
</div>
</template>

7
src/index.css
View file

@ -6,7 +6,7 @@
.sidebar-icon { .sidebar-icon {
@apply relative flex items-center @apply relative flex items-center
justify-center h-12 w-12 mt-2 mb-2 mx-auto justify-center h-12 w-12 mt-2 mb-2 mx-auto
text-green-500 hover:bg-green-600 bg-gray-800 text-blue-500 hover:bg-blue-600 bg-gray-800
rounded-3xl hover:rounded-xl transition-all duration-300 rounded-3xl hover:rounded-xl transition-all duration-300
ease-linear cursor-pointer; ease-linear cursor-pointer;
} }
@ -19,4 +19,9 @@
transition-all duration-100 scale-0 origin-left; transition-all duration-100 scale-0 origin-left;
} }
.button {
@apply shadow-md p-2 rounded-full bg-blue-500 text-white px-6
hover:shadow-blue-500 shadow-blue-200 transition-shadow;
}
} }

3
src/main.js
View file

@ -8,8 +8,9 @@ import { far } from '@fortawesome/free-regular-svg-icons';
library.add(far); library.add(far);
import { dom } from "@fortawesome/fontawesome-svg-core"; import { dom } from "@fortawesome/fontawesome-svg-core";
dom.watch(); dom.watch();
import { faFire, faPlus, faPoo } from "@fortawesome/free-solid-svg-icons"; import { faFire, faPlus, faPoo, faRightToBracket } from "@fortawesome/free-solid-svg-icons";
library.add(faRightToBracket);
library.add(faFire); library.add(faFire);
library.add(faPlus); library.add(faPlus);
library.add(faPoo); library.add(faPoo);

3
tailwind.config.js
View file

@ -2,6 +2,7 @@ module.exports = {
content: [ content: [
"./index.html", "./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}", "./src/**/*.{vue,js,ts,jsx,tsx}",
'./node_modules/tw-elements/dist/js/**/*.js'
], ],
theme: { theme: {
extend: { extend: {
@ -12,5 +13,5 @@ module.exports = {
} }
}, },
}, },
plugins: [], plugins: [require('tw-elements/dist/plugin')],
} }