From 07b228e6b094c327f9474119e77166e1da33a4ad Mon Sep 17 00:00:00 2001
From: "Justin Craig-Kuhn (JCK)" <jcraigk@gmail.com>
Date: Thu, 10 Oct 2024 21:34:44 -0700
Subject: [PATCH] Date formatting

---
 app/javascript/components/Show.jsx                     | 4 ++--
 app/javascript/components/Shows.jsx                    | 4 ++--
 app/javascript/components/Tracks.jsx                   | 4 ++--
 app/javascript/components/controls/ShowContextMenu.jsx | 4 ++--
 app/javascript/stylesheets/content.css.scss            | 2 ++
 app/javascript/stylesheets/layout.css.scss             | 2 +-
 6 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/javascript/components/Show.jsx b/app/javascript/components/Show.jsx
index aa6c0172..24e865db 100644
--- a/app/javascript/components/Show.jsx
+++ b/app/javascript/components/Show.jsx
@@ -94,7 +94,7 @@ const Show = ({ trackSlug }) => {
         {formatDurationShow(show.duration)}
       </div>
 
-      <hr />
+      <hr className="sidebar-hr" />
 
       <div className="sidebar-control-container">
         <div className="hidden-phone">
@@ -105,7 +105,7 @@ const Show = ({ trackSlug }) => {
 
       <div className="hidden-mobile">
         <TagBadges tags={show.tags} parentId={show.date} />
-        <hr />
+        <hr className="sidebar-hr" />
         <Link to={`/${show.previous_show_date}`}>
           <FontAwesomeIcon icon={faCircleChevronLeft} className="mr-1" />
           Previous show
diff --git a/app/javascript/components/Shows.jsx b/app/javascript/components/Shows.jsx
index ec0d961e..2e001b0c 100644
--- a/app/javascript/components/Shows.jsx
+++ b/app/javascript/components/Shows.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useOutletContext, useNavigate } from "react-router-dom";
-import { formatDurationShow, formatDate } from "./helpers/utils";
+import { formatDurationShow, formatDateMed } from "./helpers/utils";
 import TagBadges from "./controls/TagBadges";
 import LikeButton from "./controls/LikeButton";
 import ShowContextMenu from "./controls/ShowContextMenu";
@@ -47,7 +47,7 @@ const Shows = ({ shows, numbering = false, tourHeaders = false }) => {
                 {numbering && <span className="leftside-numbering">#{index + 1}</span>}
                 <span className="leftside-primary">
                   <CoverArt coverArtUrls={show.cover_art_urls} />
-                  {formatDate(show.date)}
+                  {formatDateMed(show.date)}
                 </span>
                 <span className="leftside-secondary">{show.venue.name}</span>
                 <span className="leftside-tertiary">
diff --git a/app/javascript/components/Tracks.jsx b/app/javascript/components/Tracks.jsx
index c35f91c8..51f146c5 100644
--- a/app/javascript/components/Tracks.jsx
+++ b/app/javascript/components/Tracks.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useOutletContext, Link } from "react-router-dom";
-import { formatDurationTrack, formatDurationShow, formatDate, truncate } from "./helpers/utils";
+import { formatDurationTrack, formatDurationShow, formatDateMed, truncate } from "./helpers/utils";
 import TagBadges from "./controls/TagBadges";
 import HighlightedText from "./controls/HighlightedText";
 import LikeButton from "./controls/LikeButton";
@@ -99,7 +99,7 @@ const Tracks = ({ tracks, viewStyle, numbering = false, omitSecondary = false, h
                                 to={`/${track.show_date}/${track.slug}`}
                                 onClick={(e) => e.stopPropagation()}
                               >
-                                {formatDate(track.show_date)}
+                                {formatDateMed(track.show_date)}
                               </Link>
                             </span>{" "}
                           </>
diff --git a/app/javascript/components/controls/ShowContextMenu.jsx b/app/javascript/components/controls/ShowContextMenu.jsx
index 5131cb69..1b180760 100644
--- a/app/javascript/components/controls/ShowContextMenu.jsx
+++ b/app/javascript/components/controls/ShowContextMenu.jsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect } from "react";
 import { Link, useOutletContext } from "react-router-dom";
-import { formatDate } from "../helpers/utils";
+import { formatDateMed } from "../helpers/utils";
 import { useFeedback } from "./FeedbackContext";
 import LikeButton from "./LikeButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -36,7 +36,7 @@ const ShowContextMenu = ({ show, adjacentLinks = true }) => {
     const modalContent = (
       <>
         <h2 className="title">Taper Notes</h2>
-        <h3 className="subtitle">{formatDate(show.date)} &bull; {formatDate(show.venue_name)}</h3>
+        <h3 className="subtitle">{formatDateMed(show.date)} &bull; {show.venue_name}</h3>
         <p dangerouslySetInnerHTML={{ __html: (show.taper_notes || "").replace(/\n/g, "<br />") }}></p>
       </>
     );
diff --git a/app/javascript/stylesheets/content.css.scss b/app/javascript/stylesheets/content.css.scss
index 61a81ba9..16e89e66 100644
--- a/app/javascript/stylesheets/content.css.scss
+++ b/app/javascript/stylesheets/content.css.scss
@@ -83,6 +83,8 @@
   position: relative;
   top: -3px;
   margin-right: 0.1rem;
+  display: inline-block;
+  width: 3.8rem;
 
   &:hover {
     text-decoration: underline;
diff --git a/app/javascript/stylesheets/layout.css.scss b/app/javascript/stylesheets/layout.css.scss
index 4da71b65..4fb69149 100644
--- a/app/javascript/stylesheets/layout.css.scss
+++ b/app/javascript/stylesheets/layout.css.scss
@@ -203,7 +203,7 @@ main {
         flex: 0;
       }
 
-      hr {
+      .sidebar-hr {
         display: none;
       }