Merge pull request #5 from javstash/frontend-dev

First incremental change: Switch to javstash theming and add performer to scenecard (with text-truncate)
javstash · Jan 13, 2025 · fd72575 · fd72575
2 parents 4d6633d + 0b58155
commit fd72575
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 50 deletions.
diff --git a/frontend/src/components/editImages/styles.scss b/frontend/src/components/editImages/styles.scss
@@ -11,7 +11,7 @@
     width: 400px;
 
     &:hover {
-      background-color: #394b59;
+      background-color: #1f1a24; // #394b59
     }
   }
 

diff --git a/frontend/src/components/fragments/SceneCardPerformerName.tsx b/frontend/src/components/fragments/SceneCardPerformerName.tsx
@@ -0,0 +1,20 @@
+import { FC } from "react";
+import { PerformerFragment } from "src/graphql";
+
+interface PerformerNameProps {
+  performer: Pick<PerformerFragment, "name" | "disambiguation" | "deleted">;
+}
+
+const SceneCardPerformerName: FC<PerformerNameProps> = ({ performer }) => {
+  return (
+    <>
+      {performer.deleted ? (
+        <del>{performer.name}</del>
+      ) : (
+        <span>{performer.name}</span>
+      )}
+    </>
+  );
+};
+
+export default SceneCardPerformerName;
diff --git a/frontend/src/components/fragments/index.ts b/frontend/src/components/fragments/index.ts
@@ -4,6 +4,7 @@ export { default as Icon } from "./Icon";
 export { default as TagLink } from "./TagLink";
 export { default as SiteLink } from "./SiteLink";
 export { default as PerformerName } from "./PerformerName";
+export { default as SceneCardPerformerName } from "./SceneCardPerformerName";
 export { default as ErrorMessage } from "./ErrorMessage";
 export { default as Help } from "./Help";
 export { default as Tooltip } from "./Tooltip";

diff --git a/frontend/src/components/fragments/styles.scss b/frontend/src/components/fragments/styles.scss
@@ -134,7 +134,7 @@
     width: 100%;
     height: 100%;
     color: var(--bs-gray-400);
-    background-color: #394b59;
+    background-color: #1f1a24; // #394b59
     align-items: center;
     justify-content: center;
     border-radius: 4px;

diff --git a/frontend/src/components/sceneCard/SceneCard.tsx b/frontend/src/components/sceneCard/SceneCard.tsx
@@ -7,15 +7,19 @@ import { Scene, Studio } from "src/graphql";
 import {
   getImage,
   sceneHref,
+  performerHref,
   studioHref,
   formatDuration,
   imageType,
 } from "src/utils";
-import { Icon, Thumbnail } from "src/components/fragments";
+import {
+  Icon,
+  Thumbnail,
+  SceneCardPerformerName,
+} from "src/components/fragments";
 
 type Performance = Pick<
-  Scene,
-  "id" | "title" | "images" | "duration" | "code" | "release_date"
+  Scene, | "id" | "title" | "images" | "duration" | "code" | "release_date" | "performers"
 > & {
   studio?: Pick<Studio, "id" | "name"> | null;
 };
@@ -24,50 +28,69 @@ const CLASSNAME = "SceneCard";
 const CLASSNAME_IMAGE = `${CLASSNAME}-image`;
 const CLASSNAME_BODY = `${CLASSNAME}-body`;
 
-const SceneCard: FC<{ scene: Performance }> = ({ scene }) => (
-  <Card className={CLASSNAME}>
-    <Card.Body className={CLASSNAME_BODY}>
-      <Link className={CLASSNAME_IMAGE} to={sceneHref(scene)}>
-        <Thumbnail
-          alt={scene.title}
-          className={imageType(scene.images[0])}
-          image={getImage(scene.images, "landscape")}
-          size={300}
-        />
-      </Link>
-    </Card.Body>
-    <Card.Footer>
-      <div className="d-flex">
+const SceneCard: FC<{ scene: Performance }> = ({ scene }) => {
+  const performers = scene.performers
+    .map((performance) => {
+      const { performer } = performance;
+      return (
         <Link
-          className="text-truncate w-100"
-          to={sceneHref(scene)}
-          title={scene.title ?? ""}
+          key={performer.id}
+          to={performerHref(performer)}
+          className="scene-performer"
         >
-          <h6 className="text-truncate">{scene.title}</h6>
+          <SceneCardPerformerName performer={performer} />
         </Link>
-      </div>
-      <div className="text-muted">
-        <Link className="text-truncate w-100" to={sceneHref(scene)}>
-          <strong>{scene.code}</strong>
+      );
+    })
+    .map((p, index) => (index % 2 === 2 ? [" ", p] : p));
+
+  return (
+    <Card className={CLASSNAME}>
+      <Card.Body className={CLASSNAME_BODY}>
+        <Link className={CLASSNAME_IMAGE} to={sceneHref(scene)}>
+          <Thumbnail
+            alt={scene.title}
+            className={imageType(scene.images[0])}
+            image={getImage(scene.images, "landscape")}
+            size={300}
+          />
         </Link>
-        <span className="text-muted float-end">
-          {scene.duration ? formatDuration(scene.duration) : ""}
-        </span>
-      </div>
-      <div className="text-muted">
-        {scene.studio && (
+      </Card.Body>
+      <Card.Footer>
+        <div className="d-flex">
           <Link
-            to={studioHref(scene.studio)}
-            className="float-end text-truncate SceneCard-studio-name"
+            className="text-truncate w-100"
+            to={sceneHref(scene)}
+            title={scene.title ?? ""}
           >
-            <Icon icon={faVideo} className="me-1" />
-            {scene.studio.name}
+            <h6 className="text-truncate">{scene.title}</h6>
           </Link>
-        )}
-        <strong>{scene.release_date}</strong>
-      </div>
-    </Card.Footer>
-  </Card>
-);
-
+        </div>
+        <div className="text-truncate w-100 scene-performers me-auto">
+          <strong>{performers}</strong>
+        </div>
+        <div className="text-muted">
+          <Link className="text-truncate w-100" to={sceneHref(scene)}>
+            <strong>{scene.code}</strong>
+          </Link>
+          {scene.studio && (
+            <Link
+              to={studioHref(scene.studio)}
+              className="float-end text-truncate SceneCard-studio-name"
+            >
+              <Icon icon={faVideo} className="me-1" />
+              {scene.studio.name}
+            </Link>
+          )}
+        </div>
+        <div className="text-muted">
+          <strong>{scene.release_date}</strong>
+          <span className="text-muted float-end">
+            {scene.duration ? formatDuration(scene.duration) : ""}
+          </span>
+        </div>
+      </Card.Footer>
+    </Card>
+  );
+};
 export default SceneCard;
diff --git a/frontend/src/styles/theme.scss b/frontend/src/styles/theme.scss
@@ -3,11 +3,11 @@
 
 // 2. Include any default variable overrides here
 $primary: #137cbd;
-$secondary: #394b59;
+$secondary: #1f1a24; // #394b59
 $success: #0f9960;
 $warning: #d9822b;
 $danger: #db3737;
-$dark: #394b59;
+$dark: #1f1a24; // #394b59
 $text-color: #f5f8fa;
 $muted-gray: #bfccd6;
 $text-muted: $muted-gray;
@@ -79,9 +79,9 @@ $textfield-bg: rgba(16 22 26 / 30%);
   --bs-success: #{$success};
   --bs-warning: #{$warning};
   --bs-danger: #{$danger};
-  --bs-body-bg: #202b33;
+  --bs-body-bg: #292929; // #202b33
   --bs-dark: #{$dark};
-  --bs-dark-rgb: 57, 75, 89;
+  --bs-dark-rgb: 31, 26, 36; // 57, 75, 89;
 }
 
 body {
@@ -256,7 +256,7 @@ hr {
   &-header,
   &-body,
   &-footer {
-    background-color: #30404d;
+    background-color: #423d46; // #30404d
     border-color: transparent;
     color: $text-color;
   }
@@ -267,7 +267,7 @@ hr {
 }
 
 .card {
-  background-color: #30404d;
+  background-color: #423d46; // #30404d
   border: none;
   border-radius: 3px;
   box-shadow: