css ribbons + meta spacing changes (#738)

* merge tags column into puzzle name; bit of CSS * re-add missing filter * add color sidebars & separate top-level meta rounds * hide meta tags * add color gradients on top of round * prettier * remove varying font sizes for meta names * spin tags out to its own column again; show meta tags if puzzle has 2+ metas; address comments * hide meta tags * prettier
cardinalitypuzzles · Jan 9, 2024 · 7cb3263 · 7cb3263
1 parent e77c31a
commit 7cb3263
Show file tree

Hide file tree

Showing 6 changed files with 202 additions and 131 deletions.
diff --git a/cardboard/static/style.css b/cardboard/static/style.css
@@ -71,6 +71,22 @@ body {
   border-color: var(--table-row-danger-border);
 }
 
+#app .table.table-sm thead th {
+  border-bottom: none;
+}
+
+#app .table-top-colorbar {
+  height: 4px;
+  padding: 0rem;
+  border: none;
+}
+
+#app .table-side-colorbar {
+  width: 4px;
+  padding: 0rem;
+  border: none;
+}
+
 .bootstrap-dark a {
   color: #007bff;
 }

diff --git a/hunts/src/HuntViewMain.js b/hunts/src/HuntViewMain.js
@@ -73,7 +73,8 @@ export const HuntViewMain = (props) => {
       <SiteHeader />
       <div
         style={{
-          margin: "0 20px",
+          margin: "0px auto",
+          maxWidth: "1600px",
         }}
       >
         <Alert
@@ -108,9 +109,7 @@ export const HuntViewMain = (props) => {
                   id={id}
                   puzzleId={null}
                   key={name}
-                  onDelete={() =>
-                    dispatch(toggleFilterTag({ name, color, id }))
-                  }
+                  onClick={() => dispatch(toggleFilterTag({ name, color, id }))}
                 />
               );
             })}

diff --git a/hunts/src/NameCell.js b/hunts/src/NameCell.js
@@ -1,19 +1,17 @@
 import React from "react";
 import Badge from "react-bootstrap/Badge";
 import { useSelector, useDispatch } from "react-redux";
-import { faEdit, faTrashAlt } from "@fortawesome/free-regular-svg-icons";
+import { faTrashAlt } from "@fortawesome/free-regular-svg-icons";
+import { faWrench, faTag } from "@fortawesome/free-solid-svg-icons";
 import { showModal } from "./modalSlice";
+import TagCell from "./TagCell";
 import ClickableIcon from "./ClickableIcon";
 import { toggleCollapsed } from "./collapsedPuzzlesSlice";
 import { IconChevronDown, IconChevronRight } from "@tabler/icons";
 
 const useToggleRowExpandedProps = (row) => {
   const dispatch = useDispatch();
-  const originalProps = row.getToggleRowExpandedProps({
-    style: {
-      paddingLeft: `${row.depth * 2}rem`,
-    },
-  });
+  const originalProps = row.getToggleRowExpandedProps({});
 
   return {
     ...originalProps,
@@ -29,69 +27,113 @@ export default function NameCell({ row, value }) {
   const [uiHovered, setUiHovered] = React.useState(false);
   const toggleRowExpandedProps = useToggleRowExpandedProps(row);
   const dispatch = useDispatch();
+
+  const nameText = (
+    <span>
+      <b>{value}</b>
+    </span>
+  );
+
   return (
     <div
-      onMouseEnter={() => {
-        setUiHovered(true);
-      }}
-      onMouseLeave={() => {
-        setUiHovered(false);
+      style={{
+        paddingLeft: `${row.depth * 2}rem`,
       }}
     >
-      {row.canExpand ? (
-        <span {...toggleRowExpandedProps}>
-          {row.isExpanded ? <IconChevronDown /> : <IconChevronRight />}
-          <b>{value}</b>
-        </span>
-      ) : (
-        <span style={{ paddingLeft: `${row.depth * 2}rem` }}>
-          <b>{value}</b>
-        </span>
-      )}{" "}
-      {row.values.is_meta ? (
-        <>
-          <Badge variant="dark">META</Badge>{" "}
-        </>
-      ) : null}
       <div
+        onMouseEnter={() => {
+          setUiHovered(true);
+        }}
+        onMouseLeave={() => {
+          setUiHovered(false);
+        }}
         style={{
-          display: "inline-block",
-          visibility: uiHovered ? "visible" : "hidden",
+          marginBottom: "3px",
         }}
       >
-        <ClickableIcon
-          icon={faEdit}
-          onClick={() =>
-            dispatch(
-              showModal({
-                type: "EDIT_PUZZLE",
-                props: {
-                  huntId,
-                  puzzleId: row.values.id,
-                  name: row.values.name,
-                  url: row.values.url,
-                  isMeta: row.values.is_meta,
-                  hasChannels: !!row.original.chat_room?.text_channel_url,
-                },
-              })
-            )
-          }
-        />{" "}
-        <ClickableIcon
-          icon={faTrashAlt}
-          onClick={() =>
-            dispatch(
-              showModal({
-                type: "DELETE_PUZZLE",
-                props: {
-                  huntId,
-                  puzzleId: row.values.id,
-                  puzzleName: value,
-                },
-              })
-            )
-          }
-        />
+        {row.canExpand ? (
+          <span {...toggleRowExpandedProps}>
+            {row.isExpanded ? <IconChevronDown /> : <IconChevronRight />}
+            {nameText}
+          </span>
+        ) : (
+          <span>{nameText}</span>
+        )}{" "}
+        {row.values.is_meta ? (
+          <>
+            <Badge variant="dark">META</Badge>{" "}
+          </>
+        ) : null}
+        <div
+          style={{
+            display: "inline-block",
+            visibility: uiHovered ? "visible" : "hidden",
+          }}
+        >
+          <ClickableIcon
+            icon={faWrench}
+            onClick={() =>
+              dispatch(
+                showModal({
+                  type: "EDIT_PUZZLE",
+                  props: {
+                    huntId,
+                    puzzleId: row.values.id,
+                    name: row.values.name,
+                    url: row.values.url,
+                    isMeta: row.values.is_meta,
+                    hasChannels: !!row.original.chat_room?.text_channel_url,
+                  },
+                })
+              )
+            }
+          />{" "}
+          <ClickableIcon
+            icon={faTag}
+            onClick={() =>
+              dispatch(
+                showModal({
+                  type: "EDIT_TAGS",
+                  props: {
+                    huntId,
+                    puzzleId: row.values.id,
+                    puzzleName: row.values.name,
+                  },
+                })
+              )
+            }
+          />{" "}
+          <ClickableIcon
+            icon={faTag}
+            onClick={() =>
+              dispatch(
+                showModal({
+                  type: "EDIT_TAGS",
+                  props: {
+                    huntId,
+                    puzzleId: row.values.id,
+                    puzzleName: row.values.name,
+                  },
+                })
+              )
+            }
+          />{" "}
+          <ClickableIcon
+            icon={faTrashAlt}
+            onClick={() =>
+              dispatch(
+                showModal({
+                  type: "DELETE_PUZZLE",
+                  props: {
+                    huntId,
+                    puzzleId: row.values.id,
+                    puzzleName: value,
+                  },
+                })
+              )
+            }
+          />
+        </div>
       </div>
     </div>
   );

diff --git a/hunts/src/TagCell.js b/hunts/src/TagCell.js
@@ -1,18 +1,23 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { showModal } from "./modalSlice";
 import { toggleFilterTag } from "./filterSlice";
 import TagPill from "./TagPill";
-import ClickableIcon from "./ClickableIcon";
 
 function TagCell({ row }) {
   const dispatch = useDispatch();
   const { id: huntId } = useSelector((state) => state.hunt);
   const puzzleId = row.original.id;
+
+  const shouldShowMetaTags =
+    row.original.tags.filter((t) => t.is_meta).length > 1;
+  const tagsToShow = shouldShowMetaTags
+    ? row.original.tags
+    : row.original.tags.filter((t) => !t.is_meta);
+
   return (
     <>
-      {row.original.tags.map(({ name, color, id }) => (
+      {tagsToShow.map(({ name, color, id }) => (
         <TagPill
           name={name}
           color={color}
@@ -22,21 +27,6 @@ function TagCell({ row }) {
           onClick={() => dispatch(toggleFilterTag({ name, color, id }))}
         />
       ))}{" "}
-      <ClickableIcon
-        icon={faPlus}
-        onClick={() =>
-          dispatch(
-            showModal({
-              type: "EDIT_TAGS",
-              props: {
-                huntId,
-                puzzleId: row.values.id,
-                puzzleName: row.values.name,
-              },
-            })
-          )
-        }
-      />
     </>
   );
 }

diff --git a/hunts/src/TagPill.js b/hunts/src/TagPill.js
@@ -13,7 +13,6 @@ function TagPill({
   selected = false,
   faded = false,
   editable = true,
-  onDelete = null,
   onClick = null,
 }) {
   const { id: huntId } = useSelector((state) => state.hunt);
@@ -32,30 +31,6 @@ function TagPill({
   return (
     <Badge pill variant={color} key={name} onClick={onClick} style={style}>
       {name}
-      {onDelete || editable ? (
-        <span
-          onClick={
-            onDelete ||
-            ((e) => {
-              e.stopPropagation();
-              dispatch(deletePuzzleTag({ puzzleId, tagId: id })).then(
-                (action) => {
-                  if (action.payload && action.payload.is_meta) {
-                    // Deleting meta tags may affect the state of other puzzles
-                    // (specifically their feeders)
-                    // So just trigger a full fetch here.
-                    // Alternatively we could try to duplicate the logic on the client
-                    dispatch(fetchPuzzles(huntId));
-                  }
-                }
-              );
-            })
-          }
-          style={{ marginLeft: "5px", cursor: "pointer" }}
-        >
-          <FontAwesomeIcon icon={faTimes} />
-        </span>
-      ) : null}
     </Badge>
   );
 }