Improve mobile version to show only Generate button by default and a button to expand

Author: Cellule

src/UserInput.module.css

@@ -81,9 +81,12 @@
   cursor: pointer;
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .buttonPrimary {
+  composes: button;
   color: #fff;
   background: linear-gradient(to bottom, #d35400, #c0392b);
   border: none;
@@ -107,28 +110,19 @@
 
 .buttonOutline {
   background: rgba(44, 62, 80, 0.4);
-}
-
-.buttonOutlinePrimary {
   color: #fff;
   border-color: rgba(255, 255, 255, 0.3);
 }
 
-.buttonOutlinePrimary:hover {
+.buttonOutline:hover {
   color: #fff;
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.5);
 }
 
-.buttonOutlineSecondary {
-  color: #fff;
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.buttonOutlineSecondary:hover {
-  color: #fff;
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.5);
+.buttonSecondary {
+  composes: button;
+  composes: buttonOutline;
 }
 
 .button:disabled {
@@ -147,8 +141,62 @@
   font-size: 0.9rem;
 }
 
+.optionsContainer {
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  overflow: hidden;
+}
+
+.secondaryButtons {
+  composes: buttonGroup;
+  /* The transition doesn't work as good because of the display: none on the buttons */
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  margin-top: 0;
+}
+
 @media (max-width: 768px) {
   .buttonGroup {
     grid-template-columns: 1fr;
   }
+
+  .secondaryButtons.collapsed {
+    max-height: 0;
+    opacity: 0;
+
+    * {
+      /* Hide all buttons otherwise they'll be clickable but not visible */
+      display: none;
+    }
+  }
+
+  .secondaryButtons.expanded {
+    max-height: 1000px;
+    opacity: 1;
+  }
+
+  .optionsContainer.collapsed {
+    max-height: 0;
+    opacity: 0;
+  }
+
+  .optionsContainer.expanded {
+    max-height: 1000px;
+    opacity: 1;
+  }
+
+  .expandButton {
+    display: block;
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+}
+
+@media (min-width: 769px) {
+  .optionsContainer {
+    max-height: none;
+    opacity: 1;
+  }
+
+  .expandButton {
+    display: none;
+  }
 }

src/UserInput.tsx

@@ -2,6 +2,7 @@ import copy from "copy-to-clipboard";
 import jsoncrush from "jsoncrush";
 import { getNpcOptionsValues, Npc, NpcGenerateOptions } from "npc-generator";
 import { Component } from "react";
+import { cs } from "./core/classSet";
 import styles from "./UserInput.module.css";
 
 const { alignments, occupations, classes, genders, plothooks, professions, races } = getNpcOptionsValues();
@@ -15,6 +16,7 @@ interface IProps {
 interface IState {
   npcOptions: NpcGenerateOptions;
   wasCopiedToClipboard?: boolean;
+  isExpanded: boolean;
 }
 
 type UserOption = {
@@ -104,9 +106,21 @@ export default class UserInput extends Component<IProps, IState> {
     super(props);
     this.state = {
       npcOptions: {},
+      isExpanded: localStorage.getItem("isExpanded") === "true",
     };
   }
 
+  toggleExpand = () => {
+    this.setState(
+      (prevState) => ({
+        isExpanded: !prevState.isExpanded,
+      }),
+      () => {
+        localStorage.setItem("isExpanded", this.state.isExpanded.toString());
+      },
+    );
+  };
+
   onSubmit = (event: React.FormEvent) => {
     event.preventDefault();
     this.props.generate(this.state.npcOptions);
@@ -181,7 +195,7 @@ export default class UserInput extends Component<IProps, IState> {
       return (
         <button
           type="button"
-          className={`${styles.button} ${styles.buttonOutline} ${styles.buttonOutlinePrimary}`}
+          className={styles.buttonSecondary}
           title="Copied to clipboard"
           data-test="copy-button"
           onBlur={this.handleCopyBlur}
@@ -194,7 +208,7 @@ export default class UserInput extends Component<IProps, IState> {
     return (
       <button
         type="button"
-        className={`${styles.button} ${styles.buttonOutline} ${styles.buttonOutlineSecondary}`}
+        className={styles.buttonSecondary}
         title="Copy character to clipboard"
         data-test="copy-button"
         onClick={this.copyNpcToClipboard}
@@ -205,6 +219,8 @@ export default class UserInput extends Component<IProps, IState> {
   }
 
   render() {
+    const { isExpanded } = this.state;
+
     const npcOptions = userOptions.map((userOption) => {
       const enable = !(userOption.condition && !userOption.condition(this.state.npcOptions));
 
@@ -263,25 +279,26 @@ export default class UserInput extends Component<IProps, IState> {
 
     return (
       <form onSubmit={this.onSubmit}>
-        {npcOptions}
+        <div className={cs(styles.optionsContainer, isExpanded ? styles.expanded : styles.collapsed)}>{npcOptions}</div>
         <div className={styles.buttonGroup}>
-          <button type="submit" className={`${styles.button} ${styles.buttonPrimary}`} data-test="generate-button">
+          <button type="submit" className={styles.buttonPrimary} data-test="generate-button">
             Generate
           </button>
-          {this.renderCopyToClipboardButton()}
-          <button type="button" className={`${styles.button} ${styles.buttonOutline} ${styles.buttonOutlineSecondary}`} onClick={this.downloadTxtFile}>
-            Download
-          </button>
-          <button type="button" className={`${styles.button} ${styles.buttonOutline} ${styles.buttonOutlineSecondary}`} onClick={this.props.onToggleHistory}>
-            History
+          <div className={cs(styles.secondaryButtons, isExpanded ? styles.expanded : styles.collapsed)}>
+            {this.renderCopyToClipboardButton()}
+            <button type="button" className={styles.buttonSecondary} onClick={this.downloadTxtFile}>
+              Download
+            </button>
+            <button type="button" className={styles.buttonSecondary} onClick={this.props.onToggleHistory}>
+              History
+            </button>
+            <a className={cs(styles.buttonSecondary, styles.bookmarkButton)} href={npcDataUrl.toString()} data-test="bookmark-button">
+              🔗 Bookmark
+            </a>
+          </div>
+          <button type="button" className={cs(styles.buttonSecondary, styles.expandButton)} onClick={this.toggleExpand}>
+            {isExpanded ? "Hide Options ▲" : "Show Options ▼"}
           </button>
-          <a
-            className={`${styles.button} ${styles.buttonOutline} ${styles.buttonOutlineSecondary} ${styles.bookmarkButton}`}
-            href={npcDataUrl.toString()}
-            data-test="bookmark-button"
-          >
-            🔗 Bookmark
-          </a>
         </div>
       </form>
     );

src/core/classSet.ts

@@ -0,0 +1,22 @@
+export type IClassValue = string | undefined | null | false | [string?, boolean?] | { [className: string]: boolean | null | undefined | number };
+
+/**
+ * Combines class names into a single string.
+ * @param args - The class names to combine.
+ * @returns A string of combined class names.
+ */
+export function cs(...args: IClassValue[]): string {
+  return args
+    .map((v) => {
+      if (Array.isArray(v)) {
+        return v[1] ? v[0] : undefined;
+      }
+      if (v && typeof v === "object") {
+        return cs(...Object.keys(v).filter((c) => !!v[c]));
+      }
+      return v;
+    })
+    .filter(Boolean)
+    .join(" ");
+}
+export const classSet = cs;