Commit 2438260f authored by erlendoeien's avatar erlendoeien
Browse files

Add styling

parent 671848c8
......@@ -17,4 +17,8 @@ const { signOut, loginName } = useCurrentUser();
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#app h1 {
font-weight: 700;
font-size: x-large;
}
</style>
<template>
<button><font-awesome-icon class="hover:scale-125 icon" size="lg" :icon="icon" /><slot /></button>
<button><font-awesome-icon class="hover:scale-125 icon" size="lg" :icon="icon" color="#172A53" /><slot /></button>
</template>
<script setup lang="ts">
......
<template>
<nav class="flex flex-row bg-slate-900 justify-between text-white items-center space-x-6 py-2 px-6">
<nav class="flex flex-row bg-slate-900 justify-between text-white items-center space-x-6 px-6">
<template v-if="loginName">
<div class="flex-grow ">
<div class="flex-grow py-2 ">
<router-link to="/movies"> <img :src="logo" width="64" /></router-link>
</div>
<div class="flex flex-row space-x-2 items-center">
......
<template>
<table>
<TableHead :isWishlist="isWishlist" />
<tbody v-for="row in data">
<TableRow
:rowData="row"
:key="row.id"
:adminIcon="isWishlist ? 'heart-broken' : 'heart'"
:adminFunc="adminFunc"
/>
</tbody>
<table class="border-separate text-center mx-auto min-w-[75%]">
<TableHead class="bg-slate-500 text-slate-200 text-lg h-8" :isWishlist="isWishlist" />
<template v-if="loading">
<tbody>
<TableRowSkeleton v-for="_ in 50" />
</tbody>
</template>
<template v-else>
<tbody v-for="row in data">
<TableRow
class="bg-slate-100 rounded-md"
:rowData="row"
:key="row.id"
:adminIcon="isWishlist ? 'heart-broken' : 'heart'"
:adminFunc="adminFunc"
/>
</tbody>
</template>
</table>
</template>
<script setup lang="ts">
......@@ -16,13 +24,20 @@ import { toRefs } from "vue";
import { IMovie } from "../types";
import TableHead from "./TableHead.vue";
import TableRow from "./TableRow.vue";
import TableRowSkeleton from "./TableRowSkeleton.vue";
interface ITableProps {
isWishlist: boolean;
data: IMovie[];
adminFunc(id: number): void;
loading: boolean;
}
const props = defineProps<ITableProps>();
const { data, adminFunc, isWishlist } = toRefs(props);
const { data, adminFunc, isWishlist, loading } = toRefs(props);
</script>
<style>
table {
border-spacing: 0em 0.5em;
}
</style>
<template>
<tr class="bg-gray-300 loading h-8 rounded-md">
<td class="first:rounded-l-md last:rounded-r-md border-0" v-for="_ in 4"/>
</tr>
</template>
<script setup lang="ts">
</script>
<style>
@keyframes loading {
40% {
background-position: 100% 0;
}
100% {
background-position: 100% 0;
}
}
.loading {
position: relative;
}
.loading:after {
position: absolute;
transform: translateY(-50%);
top: 50%;
left: 0;
content: "";
display: block;
width: 100%;
height:100%;
background-image: linear-gradient(
100deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0) 80%
);
background-size: 50% 100%;
background-position: -100px 0;
background-repeat: no-repeat;
animation: loading 1.2s infinite;
}
</style>
<template>
<div class="flex flex-col text-center justify-center mx-8 space-y-2">
<h1 class="mt-2">{{ title }}</h1>
<slot />
</div>
<footer class="h-8"/>
</template>
<script setup lang="ts">
import { toRefs } from "vue";
interface ITableViewProps {
title: string;
}
const props = defineProps<ITableViewProps>();
const { title } = toRefs(props);
</script>
<template>
<h1>Movies Room</h1>
<div>
<div class="flex flex-col items-center my-28 space-y-4">
<h1>Movies Room</h1>
<img :src="logo" width="256" />
<button @click="signIn">Sign in with Google</button>
<Button @click="signIn">Sign in with Google</Button>
</div>
</template>
......@@ -11,31 +11,18 @@ import { GoogleAuthProvider } from "firebase/auth";
import { getAuth, signInWithPopup } from "firebase/auth";
import { useRouter } from "vue-router";
import logo from "../assets/logo_512x512.png";
import Button from "../components/Button.vue";
const provider = new GoogleAuthProvider();
const auth = getAuth();
const router = useRouter();
const signIn = () =>
signInWithPopup(auth, provider)
.then((result) => {
// This gives you a Google Access Token. You can use it to access the Google API.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential?.accessToken;
// The signed-in user info.
const user = result.user;
console.log(user);
.then((_) => {
router.push("/movies");
// ...
})
.catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
console.log(error);
});
</script>
......
<template>
<h1>Movies</h1>
<input type="search" v-model="searchQuery" />
<div>
<div v-if="loading">
<h3>Loading...</h3>
<font-awesome-icon icon="spinner" spin />
<TableView title="Movies">
<input
type="search"
placeholder="Title, year or genre"
v-model="searchQuery"
class="mb-4 w-1/2 self-center"
/>
<div>
<Table :data="filteredMovies" :loading="loading" :adminFunc="addWish" :isWishlist="false" />
<Button v-if="hasMore" class="mx-auto " @click="loadMore">Load more</Button>
</div>
<template v-else>
<Table :data="filteredMovies" :adminFunc="addWish" :isWishlist="false" />
<Button v-if="hasMore" class="mx-auto mb-8" @click="loadMore">Load more</Button>
</template>
</div>
</TableView>
</template>
<script setup lang="ts">
import { useWishlistMovies, useMovies, useWishlist, useMatchedMovies } from "../hooks";
import Table from "../components/Table.vue";
import Button from "../components/Button.vue";
import TableView from "../components/TableView.vue";
const { movies, loading } = useMovies();
const { wishlist, addWish } = useWishlist();
......@@ -27,19 +28,7 @@ const {
hasMore,
moviesMatchingSearchQuery: filteredMovies,
} = useMatchedMovies(wishlistFilteredMovies);
</script>
<style>
div {
display: flex;
flex-direction: column;
}
table,
th,
td {
border: 1px solid black;
padding: 16px;
margin: 16px;
}
</style>
<template>
<h1>Wishlist</h1>
<div v-if="loading" >
<h3>Loading...</h3>
<font-awesome-icon icon="spinner" spin />
</div>
<div v-else-if="isEmpty">
<h3>No movies in wishlist</h3>
<Button @click="redirect">Add new movies</Button>
</div>
<div v-else>
<Table :data="filteredMovies" :adminFunc="deleteWish" isWishlist />
</div>
<TableView title="Wishlist">
<Table
v-if="!isEmpty"
:loading="loading"
:data="filteredMovies"
:adminFunc="deleteWish"
isWishlist
/>
<div v-else>
<h3>No movies in wishlist</h3>
<Button @click="redirect">Add new movies</Button>
</div>
</TableView>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { useWishlistMovies, useMovies, useWishlist } from "../hooks";
import Button from "../components/Button.vue";
import Table from "../components/Table.vue";
import TableView from "../components/TableView.vue";
const { movies, loading } = useMovies();
const { wishlist, deleteWish, isEmpty } = useWishlist();
......
Markdown is supported
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