feat(frontend): design updates for responsive titlecards

4 years ago · 31809d952c
parent b92f64fa6e
commit 31809d952c
6 changed files with 114 additions and 25 deletions
--- a/src/components/Discover/index.tsx
+++ b/src/components/Discover/index.tsx
@ -5,6 +5,7 @@ import TitleCard from '../TitleCard';
 import { MediaRequest } from '../../../server/entity/MediaRequest';
 import RequestCard from '../TitleCard/RequestCard';
 import Slider from '../Slider';
+import Link from 'next/link';

 interface MovieDiscoverResult {
  page: number;
@ -36,9 +37,25 @@ const Discover: React.FC = () => {
    <>
      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
        <div className="flex-1 min-w-0">
-          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
-            Recent Requests
-          </h2>
+          <Link href="/requests">
+            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+              <span>Recent Requests</span>
+              <svg
+                className="w-6 h-6 ml-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </a>
+          </Link>
        </div>
      </div>
      <Slider
@ -55,9 +72,25 @@ const Discover: React.FC = () => {
      />
      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
        <div className="flex-1 min-w-0">
-          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
-            Popular Movies
-          </h2>
+          <Link href="/discover/movies">
+            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+              <span>Popular Movies</span>
+              <svg
+                className="w-6 h-6 ml-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </a>
+          </Link>
        </div>
      </div>
      <Slider
@ -81,9 +114,25 @@ const Discover: React.FC = () => {
      />
      <div className="md:flex md:items-center md:justify-between mb-4 mt-4">
        <div className="flex-1 min-w-0">
-          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
-            Popular TV Shows
-          </h2>
+          <Link href="/discover/tv">
+            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+              <span>Popular TV Shows</span>
+              <svg
+                className="w-6 h-6 ml-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </a>
+          </Link>
        </div>
      </div>
      <Slider
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@ -38,6 +38,54 @@ const SidebarLinks: SidebarLinkProps[] = [
    ),
    activeRegExp: /^\/(discover\/?(movies|tv)?)?$/,
  },
+  {
+    href: '/requests',
+    name: 'Requests',
+    svgIcon: (
+      <svg
+        className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+    ),
+    activeRegExp: /^\/requests/,
+  },
+  {
+    href: '/settings',
+    name: 'Settings',
+    svgIcon: (
+      <svg
+        className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+        />
+      </svg>
+    ),
+    activeRegExp: /^\/settings/,
+  },
 ];

 const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@ -235,26 +235,26 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
          <p className="pt-2 text-sm md:text-base">{data.overview}</p>
        </div>
        <div className="w-full md:w-80 mt-8 md:mt-0">
-          <div className="bg-cool-gray-900 rounded-lg shadow border border-cool-gray-700">
-            <div className="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
+          <div className="bg-cool-gray-900 rounded-lg shadow border border-cool-gray-800">
+            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
              <span className="text-sm">Status</span>
              <span className="flex-1 text-right text-cool-gray-400 text-sm">
                {data.status}
              </span>
            </div>
-            <div className="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
+            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
              <span className="text-sm">Revenue</span>
              <span className="flex-1 text-right text-cool-gray-400 text-sm">
                {data.revenue}
              </span>
            </div>
-            <div className="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
+            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
              <span className="text-sm">Budget</span>
              <span className="flex-1 text-right text-cool-gray-400 text-sm">
                {data.budget}
              </span>
            </div>
-            <div className="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
+            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
              <span className="text-sm">Original Language</span>
              <span className="flex-1 text-right text-cool-gray-400 text-sm">
                {data.originalLanguage}
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@ -81,7 +81,7 @@ const Search: React.FC = () => {
          No Results
        </div>
      )}
-      <ul className="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
        {titles?.map((title) => {
          let titleCard: React.ReactNode;

--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@ -15,10 +15,7 @@ const Slider: React.FC<SliderProps> = ({
  isEmpty,
 }) => {
  return (
-    <div
-      className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
-      style={{ height: 295 }}
-    >
+    <div className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4">
      {items?.map((item, index) => (
        <div
          key={`${sliderKey}-${index}`}
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@ -83,12 +83,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
  }

  return (
-    <div
-      style={{
-        width: 180,
-        height: 270,
-      }}
-    >
+    <div className="w-36 sm:w-36 md:w-44">
      <MovieRequestModal
        type="request"
        visible={showRequestModal}