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) =>