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

Implement modal for login with anilist + disable unused icons

Browse source
This commit is contained in:
Hydroxycarbamide 2022-05-15 18:34:45 +02:00
parent 4ce6b4536f
commit 12a945b806
13 changed files with 298 additions and 162 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

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>

7
src/components/Sidebar.vue
View file

@ -1,14 +1,13 @@
<script setup> <script setup>
import SidebarIcon from "./SidebarIcon.vue"; import SidebarIcon from "./SidebarIcon.vue";
import href from "../auth/anilist"
</script> </script>
<template> <template>
<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="right-to-bracket" text="Login" :href="href" newtab="true" ></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>

5
src/components/SidebarIcon.vue
View file

@ -4,17 +4,18 @@ const props = defineProps({
text: String, text: String,
href: String, href: String,
newtab: Boolean, newtab: Boolean,
modal: String,
}) })
</script> </script>
<template> <template>
<a v-if="newtab" :href="href" class="sidebar-icon group" target="_blank"> <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>
</a> </a>
<a v-else :href="href" class="sidebar-icon group"> <a v-else :href="href" class="sidebar-icon group" 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 }}

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>

2
src/index.css
View file

@ -20,7 +20,7 @@
} }
.button { .button {
@apply shadow-md p-2 rounded-full bg-blue-500 text-white @apply shadow-md p-2 rounded-full bg-blue-500 text-white px-6
hover:shadow-blue-500 shadow-blue-200 transition-shadow; hover:shadow-blue-500 shadow-blue-200 transition-shadow;
} }

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')],
} }