calendar link on sidebar, make leave streak button sit better

leafo · Jan 17, 2024 · 7b8a5c1 · 7b8a5c1
1 parent 05a54bc
commit 7b8a5c1
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/static/scss/main/view_streak.scss b/static/scss/main/view_streak.scss
@@ -153,9 +153,19 @@
         .button {
             display: block;
             width: 100%;
+            &.calendar_button {
+                display: flex;
+                gap: 10px;
+                align-items: center;
+                justify-content: center;
+            }
         }
     }
 
+    .calendar_link {
+        margin-top: 10px;
+    }
+
     .submit_sub {
         color: body_color_light();
         font-size: 16px;
@@ -169,6 +179,10 @@
         margin-bottom: 20px;
     }
 
+    .edit_membership {
+        margin: 10px 0;
+    }
+
     .countdown {
         margin-bottom: 20px;
     }

diff --git a/views/view_streak.moon b/views/view_streak.moon
@@ -76,6 +76,16 @@ class ViewStreak extends require "widgets.page"
   render_streak_units: =>
     widget StreakUnits
 
+    if @current_user
+      -- to prevent bots from crawling every date
+      p class: "calendar_link", ->
+        a {
+          class: "button outline_button calendar_button"
+          href: @url_for("streak.calendar", id: @streak.id, slug: @streak\slug!)
+        }, ->
+          @icon "calendar", 18
+          text "Calendar"
+
   render_side_column: =>
     @render_countdown!
 
@@ -132,10 +142,11 @@ class ViewStreak extends require "widgets.page"
     @render_streak_units!
 
     if @streak_user
-      button {
-        onclick: "$(this).next('dialog')[0].showModal()"
-        class: "textlike"
-      }, "Leave streak..."
+      p class: "edit_membership", ->
+        button {
+          onclick: "document.querySelector('dialog.leave_streak_dialog').showModal()"
+          class: "textlike"
+        }, "Leave streak..."
 
       dialog class: "lightbox leave_streak_dialog", ->
         h2 "Leave Streak"

diff --git a/widgets/icons.moon b/widgets/icons.moon
@@ -24,6 +24,19 @@ class Icons
       }
       path: [[<polyline points="15 10 20 15 15 20"></polyline><path d="M4 4v7a4 4 0 0 0 4 4h12"></path>]]
     }
+
+    calendar: {
+      width: 24
+      height: 24
+      svg_opts: {
+        "stroke-linecap": "round"
+        "stroke-linejoin": "round"
+        "stroke-width": "2"
+        fill: "none"
+        stroke: "currentColor"
+      }
+      path: [[<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line>]]
+    }
   }
 
   icon: (name, width, opts) =>