From 5431b5be4056fef411fc5411bc72b672617d298c Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Fri, 14 Jan 2022 16:43:45 +0100 Subject: [PATCH] Tried simplifying and spliting some of Movie component. Simplified sidebar element to use props. Replaced icons with feather icons. Description gets it's own component & tries it best at figuring out if description should be truncated or not. Now it adds a element at bottom of body with the same description and compares the height to default truncated text. If the dummy element is taller we show the truncate button. --- index.html | 40 ---- src/components/Movie.vue | 247 ++++++++++--------------- src/components/ui/MovieDescription.vue | 123 ++++++++++++ src/components/ui/MovieDetail.vue | 52 ++++++ src/components/ui/sidebarListElem.vue | 148 +++++---------- src/icons/IconArrowDown.vue | 16 ++ src/icons/IconInfo.vue | 19 ++ src/icons/IconMagnet.vue | 37 ++++ src/icons/IconMail.vue | 18 ++ src/icons/IconProfile.vue | 1 - src/icons/IconThumbsDown.vue | 17 ++ src/icons/IconThumbsUp.vue | 17 ++ 12 files changed, 442 insertions(+), 293 deletions(-) create mode 100644 src/components/ui/MovieDescription.vue create mode 100644 src/components/ui/MovieDetail.vue create mode 100644 src/icons/IconArrowDown.vue create mode 100644 src/icons/IconInfo.vue create mode 100644 src/icons/IconMagnet.vue create mode 100644 src/icons/IconMail.vue create mode 100644 src/icons/IconThumbsDown.vue create mode 100644 src/icons/IconThumbsUp.vue diff --git a/index.html b/index.html index 8066fe4..ed06c63 100644 --- a/index.html +++ b/index.html @@ -14,16 +14,6 @@ - - Top Rated - - - - - - Search - - Login @@ -32,40 +22,10 @@ Password - - Email - - Github - - Favorite - - - - Unmatched - - - - - Sent - - - - Matched - - - - - Does not exsits - - - - Exsists - - Info diff --git a/src/components/Movie.vue b/src/components/Movie.vue index 9578eb4..ee82864 100644 --- a/src/components/Movie.vue +++ b/src/components/Movie.vue @@ -23,41 +23,54 @@
- - Not yet in plex + + + + {{ !matched ? "Not yet in plex" : "Already in plex 🎉" }} - - Request to be downloaded? + + + + {{ + !requested + ? "Request to be downloaded?" + : "Requested to be downloaded" + }} Watch in plex now! + + + {{ showCast ? "Hide cast" : "Show cast" }} + + + Search for torrents + {{ numberOfTorrentResults || 123 }} - + + See more info
@@ -78,55 +91,43 @@
-
- {{ - movie.overview - }} - -
-
+
+ +
-
-

Release Date

- {{ movie.year }} -
- -
-

Rating

- {{ movie.rating }} -
- -
-

Seasons

- {{ movie.seasons }} -
- -
-

Genres

- {{ movie.genres.join(", ") }} -
- -
-

Production status

- {{ movie.production_status }} -
- -
-

Runtime

- {{ movie.runtime[0] }} minutes -
+ + + + + +
@@ -135,14 +136,16 @@
-

Cast

- + + +
@@ -161,9 +164,17 @@ + + diff --git a/src/components/ui/MovieDetail.vue b/src/components/ui/MovieDetail.vue new file mode 100644 index 0000000..c6aebfd --- /dev/null +++ b/src/components/ui/MovieDetail.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/src/components/ui/sidebarListElem.vue b/src/components/ui/sidebarListElem.vue index cddee5e..99256a6 100644 --- a/src/components/ui/sidebarListElem.vue +++ b/src/components/ui/sidebarListElem.vue @@ -1,76 +1,25 @@ diff --git a/src/icons/IconArrowDown.vue b/src/icons/IconArrowDown.vue new file mode 100644 index 0000000..cbd15dd --- /dev/null +++ b/src/icons/IconArrowDown.vue @@ -0,0 +1,16 @@ + diff --git a/src/icons/IconInfo.vue b/src/icons/IconInfo.vue new file mode 100644 index 0000000..7a5b4b4 --- /dev/null +++ b/src/icons/IconInfo.vue @@ -0,0 +1,19 @@ + diff --git a/src/icons/IconMagnet.vue b/src/icons/IconMagnet.vue new file mode 100644 index 0000000..9d6ed1e --- /dev/null +++ b/src/icons/IconMagnet.vue @@ -0,0 +1,37 @@ + diff --git a/src/icons/IconMail.vue b/src/icons/IconMail.vue new file mode 100644 index 0000000..246af6b --- /dev/null +++ b/src/icons/IconMail.vue @@ -0,0 +1,18 @@ + diff --git a/src/icons/IconProfile.vue b/src/icons/IconProfile.vue index 3c72d4f..bd7b241 100644 --- a/src/icons/IconProfile.vue +++ b/src/icons/IconProfile.vue @@ -9,7 +9,6 @@ stroke-width="1" stroke-linecap="round" stroke-linejoin="round" - style="transition: stroke-width 0.5s ease" > diff --git a/src/icons/IconThumbsDown.vue b/src/icons/IconThumbsDown.vue new file mode 100644 index 0000000..0e0e0b9 --- /dev/null +++ b/src/icons/IconThumbsDown.vue @@ -0,0 +1,17 @@ + diff --git a/src/icons/IconThumbsUp.vue b/src/icons/IconThumbsUp.vue new file mode 100644 index 0000000..134b61e --- /dev/null +++ b/src/icons/IconThumbsUp.vue @@ -0,0 +1,17 @@ +