Style updates.

nulib · Jan 13, 2025 · 7a451b8 · 7a451b8
1 parent c98a400
commit 7a451b8
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 61 deletions.
diff --git a/components/Figure/Figure.styled.ts b/components/Figure/Figure.styled.ts
@@ -88,7 +88,7 @@ const FigureSupplementalInfo = styled("span", {
 
 const FigureTitle = styled("span", {
   marginTop: "$gr3",
-  fontSize: "$gr3",
+  fontSize: "$gr4",
   fontFamily: "$northwesternSansRegular",
   color: "$purple",
   display: "flex",
@@ -120,12 +120,11 @@ const FigureStyled = styled("figure", {
         paddingBottom: "$gr3",
 
         [`& ${FigureTitle}`]: {
-          fontSize: "$5",
-          fontFamily: "$northwesternDisplayBook",
+          fontFamily: "$northwesternSansBold",
         },
 
         [`& ${FigureSupplementalInfo}`]: {
-          fontSize: "$2",
+          fontSize: "$gr2",
         },
       },
     },

diff --git a/components/Heading/Heading.styled.ts b/components/Heading/Heading.styled.ts
@@ -45,10 +45,11 @@ const StyledHeading = styled("h2", {
 
   "&[data-level=h3]": {
     color: "$black50",
-    fontFamily: "$northwesternSansLight",
     fontSize: "$gr6",
     fontWeight: "400",
     marginBottom: "$gr3",
+    fontFamily: "$northwesternDisplayRegular",
+    paddingTop: "0.2em",
   },
 
   "&[data-level=h4]": {

diff --git a/components/Shared/Card.styled.ts b/components/Shared/Card.styled.ts
@@ -18,6 +18,7 @@ const CardStyled = styled("div", {
     fontFamily: "$northwesternSansRegular",
     fontSize: "$gr3",
     lineHeight: "1.47em",
+    color: "$black50",
 
     a: {
       cursor: "pointer",

diff --git a/components/Shared/Card.tsx b/components/Shared/Card.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+
 import { CardStyled } from "@/components/Shared/Card.styled";
 import Figure from "@/components/Figure/Figure";
 import Link from "next/link";

diff --git a/components/Shared/Dialog.styled.ts b/components/Shared/Dialog.styled.ts
@@ -29,7 +29,7 @@ const DialogBody = styled("div", {
   maxHeight: "calc(100% - 3.5rem)",
   minHeight: "calc(100% - 3.5rem)",
   overflow: "scroll",
-  padding: "0 $gr3 $gr3",
+  padding: "$gr3 $gr4 $gr4",
 
   "&:before": {
     position: "absolute",
@@ -44,7 +44,7 @@ const DialogBody = styled("div", {
 const DialogHeader = styled("header", {
   position: "absolute",
   top: "0",
-  padding: "1rem",
+  padding: "$gr4",
   display: "flex",
   width: "100%",
   justifyContent: "space-between",

diff --git a/components/Shared/IIIF/ContentState.styled.tsx b/components/Shared/IIIF/ContentState.styled.tsx
@@ -64,21 +64,27 @@ const StyledIIIFContentStateOptions = styled("div", {
   display: "flex",
   flexDirection: "column",
   gap: "$gr1",
-  padding: "$gr1 $gr2",
 
   label: {
-    display: "inline-flex",
-    fontSize: "$gr2",
+    fontSize: "$gr3",
     gap: "$gr1",
     alignItems: "center",
+    whiteSpace: "nowrap",
 
     em: {
       color: "$black50",
       fontStyle: "normal",
       fontFamily: "$northwesternSansBold",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
     },
   },
 
+  input: {
+    marginRight: "$gr1",
+  },
+
   textarea: {
     height: "$gr6 !important",
     border: "1px solid $black20",
@@ -91,9 +97,35 @@ const StyledIIIFContentStateActiveFile = styled("div", {
   display: "flex",
   alignItems: "center",
   fontFamily: "$northwesternSansBold",
+  gap: "$gr2",
+  fontSize: "$gr3",
+  padding: "0 0 $gr2",
 
-  em: {
-    marginRight: "$gr1",
+  div: {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    gap: "$gr1",
+
+    span: {
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+
+      "&:last-child": {
+        color: "$black50",
+        fontSize: "$gr2",
+        fontFamily: "$northwesternSansRegular",
+      },
+    },
+  },
+
+  img: {
+    objectFit: "cover",
+    borderRadius: "2px",
+    marginTop: "-2px",
+    color: "transparent",
+    backgroundColor: "rgba(0, 0, 0, 0.1)",
   },
 });
 

diff --git a/components/Shared/IIIF/ContentState.tsx b/components/Shared/IIIF/ContentState.tsx
@@ -6,7 +6,7 @@ import {
   StyledIIIFContentStateOptions,
   StyledIIIFContentStateURI,
 } from "./ContentState.styled";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import ActionsDialogAside from "@/components/Work/ActionsDialog/Aside";
 import { ActionsDialogStyled } from "@/components/Work/ActionsDialog/ActionsDialog.styled";
@@ -46,7 +46,7 @@ const IIIFContentState: React.FC<IIIFContentStateProps> = ({
   );
   const activeCanvasThumbnail = activeCanvas?.thumbnail?.[0]?.id;
 
-  const canvasCount = manifest?.items?.length;
+  const canvasCount = Number(manifest?.items?.length);
   const canvasIndex =
     Number(manifest?.items?.findIndex((item) => item.id === activeCanvasId)) +
     1;
@@ -56,6 +56,7 @@ const IIIFContentState: React.FC<IIIFContentStateProps> = ({
     activeCanvas?.items?.[0]?.items?.[0]?.body?.type;
 
   const title = "Share";
+  const currentFileLabel = `${canvasIndex} of ${canvasCount}`;
 
   function handleClick() {
     setIsOpen(true);
@@ -66,7 +67,11 @@ const IIIFContentState: React.FC<IIIFContentStateProps> = ({
   }
 
   const uri = new URL(window.location.href);
-  uri.searchParams.set("iiif-content", encodeContentState(contentState));
+
+  // set the iiif-content query param to the current content state
+  if (isCurrentFileset)
+    uri.searchParams.set("iiif-content", encodeContentState(contentState));
+
   const shareUrl = uri.toString();
 
   function handleIsCurrentFileSetChange(
@@ -77,8 +82,14 @@ const IIIFContentState: React.FC<IIIFContentStateProps> = ({
 
   function handleIsNoteChange(event: React.ChangeEvent<HTMLInputElement>) {
     setIsNote(event.target.checked);
+    // focus on the note textarea
+    if (event.target.checked) noteRef.current?.focus();
   }
 
+  useEffect(() => {
+    if (isNote) noteRef.current?.focus();
+  }, [isNote]);
+
   return (
     <StyledIIIFContentState>
       <StyledIIIFContentStateButton onClick={handleClick}>
@@ -94,20 +105,45 @@ const IIIFContentState: React.FC<IIIFContentStateProps> = ({
         {work && (
           <ActionsDialogStyled>
             <ActionsDialogAside>
-              {work.title && work.thumbnail && (
-                <SharedSocial
-                  title={work.title}
-                  media={work.thumbnail}
-                  description={work.description}
-                />
-              )}
+              <div
+                style={{
+                  padding: "1rem 1rem 0.618rem",
+                  borderRadius: "3px",
+                  background: "#f0f0f0",
+                  marginTop: "1em",
+                }}
+              >
+                <strong
+                  style={{
+                    fontSize: "0.7222rem",
+                    fontWeight: "normal",
+                    marginBottom: "1rem",
+                    display: "block",
+                  }}
+                >
+                  Currently viewing file {currentFileLabel}
+                </strong>
+                <StyledIIIFContentStateActiveFile>
+                  <img
+                    src={activeCanvasThumbnail as string}
+                    style={{
+                      width: "48px",
+                      height: "48px",
+                    }}
+                  />
+                  <div>
+                    <Label label={activeCanvas?.label} />
+                    <span>{activeCanvasResourceType}</span>
+                  </div>
+                </StyledIIIFContentStateActiveFile>
+              </div>
             </ActionsDialogAside>
             <StyledIIIFContentStateInner>
               <Heading
                 as="h3"
                 css={{ margin: "0", fontSize: "1em !important" }}
               >
-                Current Item
+                Link
               </Heading>
               <StyledIIIFContentStateURI>
                 <input value={shareUrl} />
@@ -119,44 +155,23 @@ const IIIFContentState: React.FC<IIIFContentStateProps> = ({
                     type="checkbox"
                     onChange={handleIsCurrentFileSetChange}
                   />
-                  <span>Share active file</span>
-                  <StyledIIIFContentStateActiveFile>
-                    <em>
-                      {canvasIndex} of {canvasCount}
-                    </em>
-                    <Image
-                      alt="Thumbnail of the active canvas"
-                      width={rem}
-                      height={rem}
-                      src={activeCanvasThumbnail as string}
-                      style={{
-                        objectFit: "cover",
-                        borderRadius: "3px",
-                        marginLeft: "0.5em",
-                        marginRight: "0.5em",
-                        marginTop: "-2px",
-                      }}
-                    />
-                    <Label label={activeCanvas?.label} />
-                  </StyledIIIFContentStateActiveFile>
+                  <span>Jump to current file</span>{" "}
+                  <em>({currentFileLabel})</em>
                 </label>
 
-                {isCurrentFileset ? (
-                  ["Video", "Audio"].includes(activeCanvasResourceType) ? (
-                    <label>
-                      <input type="checkbox" />
-                      <span>
-                        Start at <em>5:39</em>
-                      </span>
-                    </label>
-                  ) : (
-                    <label>
-                      <input type="checkbox" />
-                      <span>Share zoom level</span>
-                    </label>
-                  )
-                ) : null}
-
+                {["Video", "Audio"].includes(activeCanvasResourceType) ? (
+                  <label>
+                    <input type="checkbox" />
+                    <span>
+                      Start at <em>5:39</em>
+                    </span>
+                  </label>
+                ) : (
+                  <label>
+                    <input type="checkbox" />
+                    <span>Share zoom level</span>
+                  </label>
+                )}
                 <label>
                   <input type="checkbox" onChange={handleIsNoteChange} />
                   <span>Add note</span>
@@ -165,7 +180,6 @@ const IIIFContentState: React.FC<IIIFContentStateProps> = ({
                   ref={noteRef}
                   style={{ display: isNote ? "block" : "none" }}
                 />
-
                 <div style={{ marginTop: "1em", fontSize: "100% !important" }}>
                   <Button isPrimary isLowercase>
                     Copy Share URL

diff --git a/components/Shared/ReadMore.tsx b/components/Shared/ReadMore.tsx
@@ -11,6 +11,8 @@ const ReadMore: React.FC<ReadMoreProps> = ({ text, words = 15 }) => {
     setIsReadMore(!isReadMore);
   };
 
+  console.log("text", text);
+
   const array = text.split(" ");
   const fragment = array.slice(0, words).join(" ");
 

diff --git a/components/Work/ActionsDialog/ActionsDialog.styled.ts b/components/Work/ActionsDialog/ActionsDialog.styled.ts
@@ -3,7 +3,7 @@ import { styled } from "@/stitches.config";
 /* eslint sort-keys: 0 */
 
 const ActionsDialogAsideStyled = styled("aside", {
-  width: "25%",
+  width: "33.33%",
 
   variants: {
     dialogSize: {

diff --git a/components/Work/ActionsDialog/Aside.tsx b/components/Work/ActionsDialog/Aside.tsx
@@ -25,6 +25,7 @@ const ActionsDialogAside: React.FC<ActionsDialogAsideProps> = ({
         <Card
           title={work.title || ""}
           imageUrl={work.thumbnail || ""}
+          description={work.description[0] || ""}
           supplementalInfo={<WorkType />}
         />
       )}