xyvs/guessit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: Update style and docker container

Browse Source
This commit is contained in:
xyvs
2025-02-21 19:31:29 -06:00
parent 5cf3985108
commit 909c85053a
5 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docker-compose.dev.yml
View File

@@ -7,11 +7,13 @@ services:
depends_on:
- backend
ports:
- '8000:8000'
- 5173:5173
volumes:
- './services/frontend:/app'
- /app/node_modules
command: /bin/sh -c "yarn dev"
command: /bin/sh -c "yarn dev --host"
environment:
- VITE_HOST_URL=http://localhost:5000
backend:
build:
context: ./services/backend

2
services/frontend/src/App.vue
View File

@@ -13,7 +13,7 @@ const setHome = (value: boolean) => {
</script>
<template>
<div class="min-h-screen w-full bg-slate-100 flex flex-col justify-between items-center p-4 md:p-16 gap-5 text-neutral-700">
<div class="min-h-screen w-full bg-[#393f4d] flex flex-col justify-between items-center p-4 md:p-16 gap-5 text-neutral-700">
<Header @setHome="setHome" />
<Home v-if="isHome" />
<About v-else />

2
services/frontend/src/components/Footer.vue
View File

@@ -3,7 +3,7 @@
<template>
<div>
<ul class="flex justify-center bg-white rounded-lg px-2 py-1 text-sm shadow">
<ul class="flex justify-center bg-[#2e3440] text-white rounded-lg px-2 py-1 text-sm shadow">
<a href="https://www.xyvs.io/" target="_blank" >
<li class="font-semibold rounded-lg px-3 py-2 hover:bg-neutral-50">
Made by xyvs

8
services/frontend/src/components/Header.vue
View File

@@ -8,19 +8,19 @@ const setHome = (value: boolean) => {
<template>
<div>
<ul class="flex justify-center bg-white rounded-lg px-2 py-1 text-sm shadow">
<ul class="flex flex-wrap justify-center bg-[#2e3440] text-white rounded-lg p-2 text-sm shadow">
<a href="#/" @click="setHome(true)">
<li class="font-semibold rounded-lg px-3 py-2 hover:bg-neutral-50">
<li class="font-semibold rounded-lg px-3 py-2 hover:bg-[#393f4d]">
Home
</li>
</a>
<a href="#/" @click="setHome(false)">
<li class="font-semibold rounded-lg px-3 py-2 hover:bg-neutral-50">
<li class="font-semibold rounded-lg px-3 py-2 hover:bg-[#393f4d]">
About
</li>
</a>
<a href="https://github.com/xyvs/guessit_app" target="_blank">
<li class="font-semibold rounded-lg px-3 py-2 hover:bg-neutral-50">
<li class="font-semibold rounded-lg px-3 py-2 hover:bg-[#393f4d]">
Code
</li>
</a>

23
services/frontend/src/components/Home.vue
View File

@@ -8,6 +8,7 @@ const filename = ref('')
const code = ref(`{
result: 'Fill the input with the filename and click Guess'
}`)
const loadingForm = ref(false)
const url = `${import.meta.env.VITE_HOST_URL}`
@@ -20,7 +21,7 @@ const getFilenameData = () => {
const data = {
filename: filename.value
}
loadingForm.value = true
axios.get(url, { params: data })
.then(response => {
code.value = formatDictionaryAsString(response.data)
@@ -28,13 +29,16 @@ const getFilenameData = () => {
.catch((error) => {
console.log(error)
})
.finally(() => {
loadingForm.value = false
})
}
</script>
<template>
<div class="flex flex-col gap-12 flew-grow text-center md:w-[600px] bg-[#2e3440] rounded-lg text-neutral-100 shadow pt-6 md:pt-12 pb-6 md:pb-6">
<div class="space-y-12 px-4 md:px-12">
<div class="flex flex-col gap-10 flew-grow text-center md:w-[600px] bg-[#2e3440] rounded-lg text-neutral-100 shadow pt-6 md:pt-12 pb-6 md:pb-6 px-6">
<div class="space-y-12 md:px-12">
<div class="flex flex-col items-center justify-center gap-4">
<h2 class="text-4xl font-semibold">
guessit
@@ -43,7 +47,7 @@ const getFilenameData = () => {
A web app that guesses info about a video file based on its filename.
</p>
</div>
<div class="space-y-4 text-neutral-700">
<div class="hidden md:block space-y-4 text-neutral-700">
<div class="text-sm flex w-full">
<div class="flex-grow">
<input v-model="filename" type="text" class="bg-neutral-100 p-3 rounded-l appearance-none focus:outline-none w-full shadow" placeholder="Enter the filename">
@@ -61,11 +65,16 @@ const getFilenameData = () => {
</div>
</div>
</div>
<div class="hidden md:block text-left text-sm px-4">
<div v-if="loadingForm" class="flex flex-wrap justify-center items-center">
<div class="text-center text-blue-100 bg-blue-400 rounded shadow font-semibold px-5 py-2 text-sm">
Loading...
</div>
</div>
<div v-else class="hidden md:block text-left text-sm px-4">
<highlightjs :code="code" ref="codeRef" />
</div>
<div class="md:hidden text-center px-4">
Sorry, this section is not available on mobile devices.
<div class="md:hidden text-center text-slate-900 bg-yellow-200 rounded shadow font-semibold px-5 py-2 text-sm">
To view the app, please open this page on a larger screen.
</div>
</div>
</template>