restyle TeamPanel and Calendar

cutt/analysis.py

@@ -344,6 +344,7 @@ def last_submissions(
                     times[r.time.date()] = {}
                 times[r.time.date()][r.user] = (
                     times[r.time.date()].get(r.user, "")
+                    + " "
                     + translate_tablename[survey.__tablename__]
                 )
         return times

frontend/src/Calendar.tsx

@@ -55,16 +55,35 @@ const Calendar = ({ playerId }: { playerId: number }) => {
   // Render month navigation
   const renderMonthNavigation = () => {
     return (
-      <div className="month-navigation">
-        <button onClick={handlePrevMonth}>&lt;</button>
-        <span>
-          <button onClick={() => setSelectedDate(new Date())}>📅</button>
+      <div className="field has-addons">
+        <p className="control">
+          <button
+            className="button is-light is-size-7-mobile"
+            onClick={handlePrevMonth}
+          >
+            &lt;
+          </button>
+        </p>
+        <p className="control">
+          <button
+            className="button is-light is-size-7-mobile"
+            onClick={() => setSelectedDate(new Date())}
+          >
+            📅{" "}
             {selectedDate.toLocaleString("default", {
               month: "long",
               year: "numeric",
             })}
-        </span>
-        <button onClick={handleNextMonth}>&gt;</button>
+          </button>
+        </p>
+        <p className="control">
+          <button
+            className="button is-light is-size-7-mobile"
+            onClick={handleNextMonth}
+          >
+            &gt;
+          </button>
+        </p>
       </div>
     );
   };
@@ -89,11 +108,14 @@ const Calendar = ({ playerId }: { playerId: number }) => {
       const date = new Date(0);
       date.setDate(i + 5);
       days.push(
-        <div key={"weekday_" + i} className="weekday">
+        <button
+          key={"weekday_" + i}
+          className="button is-size-7-mobile is-white is-static"
+        >
           {date.toLocaleString("default", {
             weekday: "narrow",
           })}
-        </div>
+        </button>
       );
     }
 
@@ -109,34 +131,34 @@ const Calendar = ({ playerId }: { playerId: number }) => {
       const todaysEvents = getEventsForDay(date);
 
       days.push(
-        <div
+        <button
           key={date.getDate()}
           className={
-            "day" +
+            "cell button is-size-7-mobile" +
             (date.toDateString() === selectedDate.toDateString()
-              ? " selected-day"
+              ? " is-focused is-active is-primary is-light"
+              : " is-white") +
+            (date.toDateString() === new Date().toDateString()
+              ? " is-danger has-text-weight-extrabold"
+              : "") +
+            (todaysEvents ? " is-warning is-light" : "") +
+            (todaysEvents && playerId in todaysEvents
+              ? " is-hovered has-text-weight-semibold"
               : "")
           }
           onClick={() => handleDayClick(date)}
-        >
-          <div
-            className={
-              "day-circle" +
-              (date.toDateString() === new Date().toDateString()
-                ? " today"
-                : "") +
-              (todaysEvents ? " has-event" : "") +
-              (todaysEvents && playerId in todaysEvents ? " active-player" : "")
-            }
         >
           {day}
-          </div>
-        </div>
+        </button>
       );
       day++;
     }
 
-    return <div className="calendar">{days}</div>;
+    return (
+      <div className="fixed-grid has-7-cols">
+        <div className="grid is-gap-0.5">{days}</div>
+      </div>
+    );
   };
 
   // Render events for the selected day
@@ -144,29 +166,38 @@ const Calendar = ({ playerId }: { playerId: number }) => {
     const eventsForDay = getEventsForDay(selectedDate);
     return (
       <div className="events">
-        {eventsForDay && (
-          <ul>
-            {Object.entries(eventsForDay).map(([id, sub]) => {
+        {eventsForDay &&
+          Object.entries(eventsForDay).map(([id, sub]) => {
             const name = players?.find((p) => p.id === Number(id));
             return (
-                <li key={id}>
-                  {name !== undefined ? name.display_name : ""}:{" "}
-                  <span style={{ letterSpacing: 8 }}>{sub}</span>
-                </li>
+              <p className="field">
+                <div className="control" key={id}>
+                  <div className="tags are-medium has-addons">
+                    <span className="tag is-warning is-size-7-mobile">
+                      {name !== undefined ? name.display_name : ""}
+                    </span>
+                    <span className="tag is-primary is-light is-size-7-mobile">
+                      {sub}
+                    </span>
+                  </div>
+                </div>
+              </p>
             );
           })}
-          </ul>
-        )}
       </div>
     );
   };
 
   return (
-    <div className="calendar-container">
-      <h2>Latest Submissions</h2>
+    <div className="block is-size-7-mobile">
+      <h2 className="title is-4">Latest Submissions</h2>
+      <div className="columns is-6">
+        <div className="column" style={{ maxWidth: 600 }}>
           {renderMonthNavigation()}
           {renderCalendar()}
-      {renderEvents()}
+        </div>
+        <div className="column is-narrow">{renderEvents()}</div>
+      </div>
     </div>
   );
 };

frontend/src/TeamPanel.tsx

@@ -70,29 +70,21 @@ const TeamPanel = () => {
       (team) => team.id == teams?.activeTeam
     )[0];
     return (
-      <div className="team-panel">
-        <h1>{activeTeam.name}</h1>
-        <div>
-          <input type="text" value={activeTeam.location || ""} disabled />
-          <br />
-          <input type="text" value={activeTeam.country || ""} disabled />
-          <hr style={{ width: "100%" }} />
-
-          <h2>players</h2>
+      <section className="section">
+        <h1 className="title">{activeTeam.name}</h1>
+        <h2 className="subtitle">
+          {activeTeam.location}, {activeTeam.country}
+        </h2>
+        <div className="box">
+          <h2 className="title is-4">Players</h2>
           {players ? (
-            <div
-              style={{
-                display: "flex",
-                flexWrap: "wrap",
-                justifyContent: "center",
-              }}
-            >
+            <div className="buttons">
               {players.map((p) => (
                 <button
                   className={
-                    "team-player " +
+                    "button is-primary is-light " +
                     p.gender +
-                    (p.id === player.id ? " active-player" : "")
+                    (p.id === player.id ? " is-focused is-active" : "")
                   }
                   key={p.id}
                   onClick={() => {
@@ -104,7 +96,7 @@ const TeamPanel = () => {
                 </button>
               ))}
               <button
-                className="team-player new-player"
+                className="button is-success is-light new-player"
                 key="add-player"
                 onClick={() => {
                   setPlayer(newPlayerTemplate);
@@ -117,12 +109,14 @@ const TeamPanel = () => {
           ) : (
             <span className="loader" />
           )}
-          <hr style={{ width: "100%" }} />
+        </div>
 
-          <form className="new-player-inputs" onSubmit={handleSubmit}>
-            <div>
-              <label>name</label>
+        <form className="container block" onSubmit={handleSubmit}>
+          <div className="field">
+            <label className="label">name</label>
+            <div className="control">
               <input
+                className="input"
                 type="text"
                 required
                 value={player.display_name}
@@ -138,9 +132,12 @@ const TeamPanel = () => {
                 }}
               />
             </div>
-            <div>
-              <label>username</label>
+          </div>
+          <div className="field">
+            <label className="label">username</label>
+            <div className="control">
               <input
+                className="input"
                 type="text"
                 required
                 disabled={player.id !== 0}
@@ -151,8 +148,11 @@ const TeamPanel = () => {
                 }}
               />
             </div>
-            <div>
-              <label>gender</label>
+          </div>
+          <div className="field">
+            <label className="label">gender</label>
+            <div className="control">
+              <div className="select">
                 <select
                   name="gender"
                   value={player.gender}
@@ -166,9 +166,13 @@ const TeamPanel = () => {
                   <option value="mmp">MMP</option>
                 </select>
               </div>
-            <div>
-              <label>number (optional)</label>
+            </div>
+          </div>
+          <div className="field">
+            <label className="label">number (optional)</label>
+            <div className="control">
               <input
+                className="input"
                 type="text"
                 value={player.number || ""}
                 onChange={(e) => {
@@ -177,9 +181,12 @@ const TeamPanel = () => {
                 }}
               />
             </div>
-            <div>
-              <label>email (optional)</label>
+          </div>
+          <div className="field">
+            <label className="label">email (optional)</label>
+            <div className="control">
               <input
+                className="input"
                 type="email"
                 value={player.email || ""}
                 onChange={(e) => {
@@ -188,36 +195,33 @@ const TeamPanel = () => {
                 }}
               />
             </div>
-            <div style={{ margin: "auto" }}>
             {error?.message && (
-                <span
-                  style={{
-                    color: error.ok ? "green" : "red",
-                  }}
-                >
+              <p className={"help" + (error.ok ? " is-success" : " is-danger")}>
                 {error.message}
-                </span>
+              </p>
             )}
           </div>
-            <div style={{ margin: "auto" }}>
-              <button className="team-player new-player">
+          <div className="field is-grouped">
+            <button
+              className={
+                "button is-light" +
+                (player.id === 0 ? " is-success" : " is-link")
+              }
+            >
               {player.id === 0 ? "add player" : "modify player"}
             </button>
-            </div>
             {player.id !== 0 && (
-              <div style={{ margin: "auto" }}>
               <button
-                  className="team-player disable-player"
+                className="button is-danger is-light"
                 onClick={handleDisable}
               >
                 remove player
               </button>
-              </div>
             )}
+          </div>
         </form>
-        </div>
         <Calendar playerId={player.id} />
-      </div>
+      </section>
     );
   } else <span className="loader" />;
 };