scenepage stuff

Dankonite · Apr 13, 2024 · 74844cb · 74844cb
1 parent 6051a56
commit 74844cb
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 34 deletions.
diff --git a/ui/v2.5/src/components/ScenePlayer/styles.scss b/ui/v2.5/src/components/ScenePlayer/styles.scss
@@ -594,14 +594,19 @@ $sceneTabWidth: 450px;
     text-decoration: none;
     color: #fff
   }
-
+  
   /* Hide scrollbar for Chrome, Safari and Opera */
 .side-bar::-webkit-scrollbar {
   display: none;
 }
 .the-vert {
   width: calc(80vw);
 }
+@media (min-width: 576px) {
+  .tags-performers {
+    display: flex;
+  }
+}
 .the-vert.expand {
   width: calc(100vw);
 }

diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -628,19 +628,16 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
   function maybeRenderTags() {
     return scene!.tags.length != 0 ? (
       <div
-      className="d-flex flex-wrap justify-content-end align-items-start align-content-start h-fc" 
-      style={{
-        maxWidth: "360px"
-      }}
+      className="d-flex flex-wrap justify-content-start align-items-start align-content-start h-fc" 
       >
         <TagButtons scene={scene!}/>
       </div>
     ) : ("")
   }
   function maybeRenderPerformers() {
     return scene!.performers.length != 0 ? (
-      <div className="d-flex flex-wrap justify-content-end align-content-start" style={{
-      maxWidth: String(scene?.performers.length! > 2 ? "360px" : "480px")
+      <div className="d-flex flex-wrap justify-content-start align-content-start" style={{
+      maxWidth: String(scene?.performers.length! > 2 ? "200px" : "400px")
       }} key={scene!.id}><PerformerButtons scene={scene!}/></div>
     ) : ("")
   }
@@ -719,40 +716,44 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
               <div className="top-row d-flex flex-row justify-content-between">
 
                 <div className="left-side">
-                  <h3>{scene.title}</h3>
+                  <div className="d-flex">
+                    <h3>{scene.title}</h3>
+                    <div className="flex-grow-1"></div>
+                    <div className="d-flex flex-row mb-3" >
+                      <UtilityBar 
+                      scene={scene}
+                      setWideMode={() => setWideMode(!wideMode)}
+                      setEditMode={() => setEditMode(!editMode)}
+                      />
+                    </div>
+                  </div>
                   <div className="studio-row">
-                    <Link to={`studios/${scene.studio?.id}`} className="studio-row d-flex flex-row link">
+                    <Link to={`/studios/${scene.studio?.id}`} className="studio-row d-flex flex-row link">
                         <img src={scene.studio?.image_path ?? ""} style={{height: "3rem", width: "3rem", borderRadius: "999px"}} className="mb-2"></img>
                         <h5 className="ml-2 d-flex align-items-center">{scene.studio?.name}</h5>
                     </Link>
                   </div>
                   <div className="date-row">
                     <h6>{scene.date}</h6>
+                  </div>
                     {file?.width && file?.height && (
                     <h6>
                       <FormattedMessage id="resolution" />:{" "}
                       {TextUtils.resolution(file.width, file.height)}
                     </h6>
                     )}
-                  </div>
-
+                <div className="tags-performers">
+
+                {maybeRenderTags()}
+                {maybeRenderPerformers()}
                 </div>
-
-                <div className="right-side d-flex flex-col"> 
-                  <div className="d-flex flex-row mb-3" >
-                    <UtilityBar 
-                    scene={scene}
-                    setWideMode={() => setWideMode(!wideMode)}
-                    setEditMode={() => setEditMode(!editMode)}
-                    />
-                  </div>
-                  <div className="d-flex flex-row">
-                    {maybeRenderTags()}
-                    {maybeRenderPerformers()}
-                  </div>
-
                 </div>
               </div>
+              <div className="description"> 
+                <span>
+                  {scene.details}
+                </span>
+              </div>
 
             </div>
             : 

diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneRecs.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneRecs.tsx
@@ -208,7 +208,7 @@ export const SceneRecs: React.FC<IProps> = ({
                 </Button>
                 <div className="flex-grow-1"></div>
                 <Button 
-                className={`${isQueue ? "btn-dc" : "btn-secondary"} btn-1l mr-2`}
+                className={`${isQueue ? "btn-dc" : "btn-secondary"} btn-1l`}
                 onClick={() => {
                     setIsMarkers(false)
                     setIsRecommended(false)

diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/TagsButtons.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/TagsButtons.tsx
@@ -33,17 +33,14 @@ export const TagButtons: React.FC<IProps> = ({
             <div className="h-fc" key={tag.id}>
             <Link
             to={`/tags/${tag.id}?sortby=random`}
+            className="mb-2 mr-2 justify-content-center d-flex flex-column w-fc"
             style={{
-                display: "flex",
-                flexDirection: "column",
-                width: "fit-content",
                 padding: "0 .75rem",
                 paddingBottom: "0.25rem",
                 textDecoration: "none",
                 color: "#fff",
                 borderRadius: ".2rem",
                 backgroundColor: "#202020",
-                margin: "0 .2rem .4rem"
             }}
             >
             <span

diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
@@ -13,9 +13,18 @@
     margin-right: .4rem;
   }
 }
-// .card, img, video, .video-js {
-//   filter:blur(20px)
-// }
+
+.scene-card-preview {
+  overflow: hidden;
+}
+
+.card, img, video, .video-js {
+  filter:blur(10px)
+}
+
+.w-fc {
+  width: fit-content;
+}
 .h-fc {
   height: fit-content;
 }
@@ -572,8 +581,9 @@ input[type="range"].blue-slider {
   .edit-buttons-container {
     background-color: $bg-color;
     position: sticky;
-    top: 0;
+    top: 3rem;
     z-index: 3;
+    margin-top: -1rem;
 
     @media (min-width: 575px) and (max-width: 1199px) {
       top: 3rem;