Finish redesign of new movie list

src/app/components/MovieList.vue

@@ -1,16 +1,18 @@
 <template>
-	<ul class="w-full flex flex-col space-y-4">
-		<li class="flex flex-row bg-white rounded-lg overflow-hidden shadow-md" v-for="(movie, index) in movies"
+	<ul class="w-full grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 lg:gap-8">
+		<li class="flex flex-row bg-white rounded-lg overflow-hidden shadow-md lg:flex-col transform hover:scale-105 transition-transform cursor-pointer" v-for="(movie, index) in movies"
 			@click="$emit('onClickMovie', movie, index)">
-			<movie-poster class="w-3/12 flex-shrink-0" :is-on-plex="movie.plexLink !== null"
+			<movie-poster class="w-3/12 lg:w-full flex-shrink-0" :is-on-plex="movie.plexLink !== null"
 				:src="movie.posterPath ?? undefined" size="w185"/>
-			<div class="relative box-border p-4 flex flex-col justify-center w-full">
-				<div class="flex-grow flex flex-col justify-center">
-					<h3 class="font-medium text-md sm:text-xl">{{ movie.title }}</h3>
+			<div class="relative box-border p-4 flex flex-col justify-center w-full lg:h-full text-md xs:text-lg sm:text-xl md:text-base xl:text-sm" style="box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.10);">
+				<div class="flex-grow flex flex-col justify-center lg:justify-start">
+					<h3 class="font-medium">{{ movie.title }}</h3>
 					<span v-if="movie.releaseDate" class="opacity-50">{{ movie.releaseDate.slice(0, 4) }}</span>
 				</div>
-				<div v-if="movie.plexLink" class="">
-					<img src="../assets/plex_logo.svg" alt="Added to Plex" class="bg-ui-plexGray px-3 py-1.5 h-5 rounded-full"/>
+				<div v-if="movie.plexLink" title="Added to Plex" class="flex">
+					<div class="inline-block bg-ui-plexGray rounded-full w-1/6 lg:w-1/4">
+						<img src="../assets/plex_logo.svg" alt="Added to Plex" style="margin: 15% 25%;"/>
+					</div>
 				</div>
 				<!-- <div class="poster-decal" v-if="isOnPlex">
 					<img class="w-full" src="../assets/plex_logo.svg" alt="Watchable now on Plex"/>

src/app/components/SideNav.vue

@@ -9,7 +9,7 @@
 				<i class="fas fa-bars"></i>
 			</button>
 		</div>
-		<nav class="fixed lg:relative inset-y-0 w-72 lg:w-64 xl:w-72 flex flex-col bg-white shadow-lg z-50" :class="{'active': isOpen}">
+		<nav class="fixed lg:relative inset-y-0 w-72 lg:w-64 xl:w-72 flex flex-col flex-shrink-0 bg-white shadow-lg z-50" :class="{'active': isOpen}">
 			<div class="brand">AUTOPLEX</div>
 			<div class="mt-4 text-center">
 				<div class="user"><i class="fas opacity-40" :class="{'fa-user': !isAdmin, 'fa-user-tie': isAdmin}"></i></div>

src/app/views/Search.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="space-y-4">
+    <div class="space-y-4 lg:p-4">
         <form @submit.prevent="() => search()">
             <div class="flex rounded-xl overflow-hidden shadow-md">
                 <input type="text" v-model="searchValue" :placeholder="exampleTitles[Math.floor(exampleTitles.length*Math.random())]"

tailwind.config.js

@@ -1,3 +1,5 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+
 module.exports = {
   purge: ["./index.html", "src/app/**/*.{vue,ts}"],
   darkMode: false, // or 'media' or 'class'
@@ -7,8 +9,12 @@ module.exports = {
         ui: {
           plexGray: "rgb(31, 35, 38)"
         }
-      },
+      }
     },
+    screens: {
+      xs: "475px",
+      ...defaultTheme.screens
+    }
   },
   variants: {
     extend: {