enlarge scrolleritemportrait and update readme

README.md

@@ -1,45 +1,28 @@
 # featherfin
 
-This template should help get you started developing with Vue 3 in Vite.
+### TODO
-
+
-## Recommended IDE Setup
+- [ ] Add episode title and SXXEXX to item screen for episode
-
+- [ ] Enlarge Next Up section on Home
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+- [ ] Fix row spacing on Home
-
+- [ ] Add Continue Watching section to Home
-## Type Support for `.vue` Imports in TS
+- [ ] Finish Item page
-
+  - [ ] Add Actor List to all items except seasons
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+  - [ ] Add episode list for series/seasons
-
+  - [ ] Add next episode list for episode
-## Customize configuration
+  - [ ] Add related shows/movies to series and movies
-
+- [ ] Finish implementing MediaInfo
-See [Vite Configuration Reference](https://vite.dev/config/).
+- [ ] Move all MediaInfo stand-ins to the component
-
+- [ ] Make Like and Favorite buttons work
-## Project Setup
+  - [ ] Show state
-
+  - [ ] Update state
-```sh
+- [ ] Make play buttons on media start playing
-bun install
+  - [ ] Movies start playing movie
-```
+  - [ ] Episodes play episode
-
+  - [ ] Series play next episode
-### Compile and Hot-Reload for Development
+- [ ] Add sorting and filters to BrowseView
-
+  - [ ] Design UI elements
-```sh
+  - [ ] Implement
-bun dev
+- [ ] Add search
-```
+- [ ] Make featured media carousel work
-
+  - [ ] a lot
-### Type-Check, Compile and Minify for Production
-
-```sh
-bun run build
-```
-
-### Run Unit Tests with [Vitest](https://vitest.dev/)
-
-```sh
-bun test:unit
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-bun lint
-```

src/assets/main.css

@@ -142,6 +142,13 @@ a:hover {
   line-clamp: 6;
   -webkit-box-orient: vertical;
 }
+.clamp-8 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 8; /* number of lines to show */
+  line-clamp: 8;
+  -webkit-box-orient: vertical;
+}
 
 .no-select {
   user-select: none;

src/components/MediaGrid.vue

@@ -119,7 +119,7 @@ onMounted(() => {
 
 <style scoped>
 .media-grid {
-  max-width: 80%;
+  max-width: 90%;
   margin: auto;
   margin-top: 3em;
 }
@@ -128,5 +128,6 @@ onMounted(() => {
   flex-direction: row;
   flex-wrap: wrap;
   gap: 1em;
+  justify-content: center;
 }
 </style>

src/components/MediaInfo.vue

@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import type { FeedItem } from '@/feed'
+
+const props = defineProps<{
+  item: FeedItem
+  endsAt: boolean
+  size: string
+}>()
+</script>
+
 <template>
   <div class="info-misc">
     <div class="misc-info-year">2019</div>
@@ -6,7 +16,7 @@
       <font-awesome-icon icon="fa-solid fa-star" size="xs" class="star-rating" /> 7.6
     </div>
     <div class="misc-info-age-rating"><span class="age-rating">R</span></div>
-    <div class="media-showcase-end-time">Ends at 6:23pm</div>
+    <div class="media-showcase-end-time" v-if="props.endsAt">Ends at 6:23pm</div>
   </div>
 </template>
 

src/components/ScrollerItemPortrait.vue

@@ -23,8 +23,8 @@ const props = defineProps<{
           :src="props.item.image"
           alt=""
           :style="{
-            width: `${120}px`,
+            width: `${160}px`,
-            height: `${120 * (3 / 2)}px`,
+            height: `${160 * (3 / 2)}px`,
           }"
         />
       </div>
@@ -41,10 +41,10 @@ const props = defineProps<{
               {{ item.infoSubtext }}
             </div>
           </div>
-          <div class="info-box-summary clamp-6">{{ props.item.summary }}</div>
+          <div class="info-box-summary clamp-8">{{ props.item.summary }}</div>
           <div class="info-box-misc-info">
             <div class="date">{{ props.item.date }}</div>
-            <div class="runtime">{{ props.item.runtime }}</div>
+            <div class="runtime" v-if="props.item.runtime !== '1m'">{{ props.item.runtime }}</div>
             <div class="imdb">
               <font-awesome-icon icon="fa-solid fa-star" size="xs" class="star-rating" />
               {{ props.item.imdbRating }}
@@ -52,15 +52,14 @@ const props = defineProps<{
             <div class="mpaa" v-show="props.item.MPAA !== undefined">
               <span class="age-rating sm">{{ props.item.MPAA }}</span>
             </div>
-            <div class="ends-at">Ends at 6:23pm</div>
           </div>
         </div>
       </div>
     </div>
-    <div class="scroller-item-title clamp-2" :style="{ maxWidth: `${120 - 5}px` }">
+    <div class="scroller-item-title clamp-2" :style="{ maxWidth: `${160 - 5}px` }">
       {{ props.item.title }}
     </div>
-    <div class="scroller-item-subtext clamp" :style="{ maxWidth: `${120 - 5}px` }">
+    <div class="scroller-item-subtext clamp" :style="{ maxWidth: `${160 - 5}px` }">
       {{ props.item.subtext }}
     </div>
   </div>
@@ -75,8 +74,8 @@ const props = defineProps<{
 }
 .play-icon {
   position: absolute;
-  top: 75px;
+  top: 85px;
-  left: 35px;
+  left: 45px;
   width: 35px;
   height: 35px;
   cursor: pointer;
@@ -96,8 +95,8 @@ const props = defineProps<{
   background: rgba(122, 122, 122, 0.2);
 }
 .scroller-item-img:hover .play-icon {
-  top: 100px;
+  top: 50%;
-  left: 55px;
+  left: 50%;
   opacity: 100%;
   transition:
     all var(--hover-animation-speed) ease var(--hover-animation-delay),
@@ -116,7 +115,7 @@ const props = defineProps<{
   transition-duration: 0.3s;
 }
 .scroller-item-img:hover img {
-  transform: scale(1.35) translateX(16px) translateY(23px);
+  transform: scale(1.3) translateX(19px) translateY(28px);
   cursor: pointer;
   transition:
     all var(--hover-animation-speed) ease,
@@ -164,17 +163,17 @@ const props = defineProps<{
   top: 0;
   left: 0;
   z-index: 0;
-  width: 120px;
+  width: 160px;
-  height: 180px;
+  height: 240px;
   visibility: hidden;
   background-color: var(--color-background-grey);
   transition-duration: 0.3s;
 }
 .scroller-item-img:hover .info-box {
   visibility: visible;
-  transform: translateX(162px);
+  transform: translateX(208px);
-  width: 360px;
+  width: 240px;
-  height: 243px;
+  height: 312px;
   z-index: 3;
   transition:
     all var(--hover-animation-speed) ease var(--hover-animation-delay),
@@ -190,8 +189,9 @@ const props = defineProps<{
   flex-direction: column;
   align-items: baseline;
   justify-content: space-between;
-  gap: 2em;
+  gap: 1em;
   min-height: 95%;
+  font-size: 13px;
 }
 .scroller-item-img:hover .info-box-content {
   max-height: 240px;
@@ -212,6 +212,6 @@ const props = defineProps<{
 .info-box-misc-info {
   display: flex;
   justify-content: space-between;
-  min-width: 90%;
+  min-width: 95%;
 }
 </style>