diff --git a/Gemfile.lock b/Gemfile.lock index fa844181..2725295d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -447,6 +447,7 @@ GEM zeitwerk (2.7.3) PLATFORMS + arm64-darwin-22 arm64-darwin-24 x86_64-linux diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index a99b8ce9..73b5e1d3 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -41,3 +41,7 @@ body { background-color: $off-white; } + +a { + text-decoration: none; +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_happy_thing.scss b/app/assets/stylesheets/components/_happy_thing.scss index a09735f7..c9016b6b 100644 --- a/app/assets/stylesheets/components/_happy_thing.scss +++ b/app/assets/stylesheets/components/_happy_thing.scss @@ -2,17 +2,18 @@ @import "mixins/media"; .happy_thing { - // Base display: flex; justify-content: space-between; align-items: center; - gap: $space-s; - + gap: $space-xs; + line-height: 1.1; + color: $sexy_blue; background-color: $color-white; border-radius: $border-radius; box-shadow: $box-shadow; - margin-bottom: $space-m; - padding: $space-xs; + margin-top: $space-s; + margin-bottom: $space-s; + padding: $space-m $space-xs; @include media(tabletAndUp) { padding: $space-xs $space-m; @@ -24,6 +25,51 @@ align-self: flex-start; gap: $space-xs; } + + &:last-child { + margin-bottom: 0; + } +} + +.happy_thing_for_long_title { + @extend .happy_thing; + flex-direction: column !important; +} + +.happy_thing_title { + overflow-wrap: break-word; + min-width: 0; +} + +.happy_thing_metadata_bottom { + display: flex; + justify-content: flex-end; + align-items: flex-end; + align-self: flex-end; + gap: 4px; + line-height: 1; + margin-top: $space-xs; +} + +.happy_thing_metadata_right { + display: flex; + justify-content: flex-end; + align-items: flex-end; + gap: 4px; + line-height: 1; +} + +.happy_thing_photo_emoji { + opacity: 0.7; + font-size: 0.95em; + line-height: 1; + white-space: nowrap; +} + +.happy_thing_date { + font-size: 0.85em; + color: #888; + font-weight: 300; } .pagination { diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss index d25b8d40..7b07a5e6 100644 --- a/app/assets/stylesheets/config/_colors.scss +++ b/app/assets/stylesheets/config/_colors.scss @@ -10,6 +10,7 @@ $cornflowerblue: #6499E9; $colombia_blue: #9EDDFF; $paleturquoise: #A6F6FF; $cute_blue: #BEFFF7; +$sexy_blue: #3498D8; $yellow: #F1C40F; $orange: #ffc229; @@ -31,3 +32,5 @@ $olive: #808000; $lime: #00FF00; $mint: #98FF98; // Mint is calming and fresh. Lavender (E6E6FA) - This shade is often associated with tranquility and calmness $gold: #FDB813; // This color is often associated with sunshine happiness + +$grey: #888; \ No newline at end of file diff --git a/app/assets/stylesheets/layouts/_container.scss b/app/assets/stylesheets/layouts/_container.scss index a80cc3aa..88f8902d 100644 --- a/app/assets/stylesheets/layouts/_container.scss +++ b/app/assets/stylesheets/layouts/_container.scss @@ -14,3 +14,8 @@ max-width: 60rem; } } + +.app-container { + max-width: 480px; + margin: 0 auto; +} \ No newline at end of file diff --git a/app/controllers/happy_things_controller.rb b/app/controllers/happy_things_controller.rb index 24ef8498..1a7fa7c5 100644 --- a/app/controllers/happy_things_controller.rb +++ b/app/controllers/happy_things_controller.rb @@ -22,6 +22,7 @@ def recent_happy_things def show @marker = @happy_thing.geocoded? ? { lat: @happy_thing.latitude, lng: @happy_thing.longitude } : nil + @comment = Comment.new end def new @@ -73,7 +74,6 @@ def calendar end def show_by_date - @comment = Comment.new @date = begin Date.parse(params[:date]) rescue ArgumentError diff --git a/app/helpers/happy_things_helper.rb b/app/helpers/happy_things_helper.rb index 8a2e884f..2b76eec0 100644 --- a/app/helpers/happy_things_helper.rb +++ b/app/helpers/happy_things_helper.rb @@ -14,6 +14,16 @@ def friendly_date(date) end end + def use_long_title_layout?(happy_thing) + base_threshold = 93 + date_string_subtraction = friendly_date(happy_thing.start_time).length + photo_emoji_subtraction = happy_thing.photo.attached? ? 6 : 0 + comments_emoji_subtraction = happy_thing.comments.any? ? 6 : 0 + + threshold = base_threshold - photo_emoji_subtraction - date_string_subtraction - comments_emoji_subtraction + happy_thing.title.length >= threshold + end + def grouped_visibility_options(user) # rubocop:disable Metrics/AbcSize group_options = user.groups.map { |g| ["🌟 #{g.name}", "group_#{g.id}"] } group_member_options = user.groups.flat_map do |group| diff --git a/app/views/dashboards/index.html.erb b/app/views/dashboards/index.html.erb index 0e575266..1ac49a19 100644 --- a/app/views/dashboards/index.html.erb +++ b/app/views/dashboards/index.html.erb @@ -24,7 +24,7 @@

What made you happy

<% @happy_things_of_the_last_two_days.each do |user, happy_things| %> -
<%= user.emoji %> <%= user.first_name %>
+
<%= user.emoji %> <%= user.first_name %>
<% happy_things.each do |happy_thing| %> <%= render 'happy_things/happy_thing', happy_thing: happy_thing %> <% end %> diff --git a/app/views/happy_things/_happy_thing.html.erb b/app/views/happy_things/_happy_thing.html.erb index 728ecdae..4829670e 100644 --- a/app/views/happy_things/_happy_thing.html.erb +++ b/app/views/happy_things/_happy_thing.html.erb @@ -1,20 +1,31 @@ -
- <% if happy_thing.photo.attached? %> - 📸 +<%= link_to happy_thing_path(happy_thing) do %> + <% if use_long_title_layout?(happy_thing) %> +
+
+ <%= happy_thing.title %> +
+
+
+ <%= "📸" if happy_thing.photo.attached? %><%= "📝" if happy_thing.comments.any? %> +
+
+ <%= friendly_date(happy_thing.start_time) %> +
+
+
+ <% else %> +
+
+ <%= happy_thing.title %> +
+
+
+ <%= "📸" if happy_thing.photo.attached? %><%= "📝" if happy_thing.comments.any? %> +
+
+ <%= friendly_date(happy_thing.start_time) %> +
+
+
<% end %> -
- <%= link_to happy_thing.title, happy_thing_path(happy_thing), class: "text-decoration-none" %> -
-
- -
- -
- <%= friendly_date(happy_thing.start_time) %> - <% if happy_thing.user == current_user %> - <%= link_to "⋮", edit_happy_thing_path(happy_thing), class: "btn btn--light edit-link" %> - <% else %> - <%= link_to "⋮", '#', class: "btn btn--light edit-link" %> - <% end %> -
-
+<% end %> diff --git a/app/views/happy_things/show.html.erb b/app/views/happy_things/show.html.erb index af025d73..338aac65 100644 --- a/app/views/happy_things/show.html.erb +++ b/app/views/happy_things/show.html.erb @@ -1,4 +1,4 @@ -
+
<%= link_to sanitize("←"), root_path, class: "btn button--primary m-4" %>

@@ -9,6 +9,38 @@

+ +
+ + <% if @happy_thing.comments.any? %> +
+
Comments:
+ <% @happy_thing.comments.each do |comment| %> +
+

<%= comment.user.first_name %>: <%= comment.content %>

+
+ <% end %> +
+ <% else %> +

No Comments yet.

+ <% end %> + + + Add a comment... + + +
+ + <%= simple_form_for([@happy_thing, @comment], html: { class: 'mt-2' }) do |f| %> +
+ <%= f.input :content, label: false, placeholder: 'Add a comment...', input_html: { class: 'form-control' } %> +
+ <%= f.button :submit, 'Add Comment', class: 'btn btn-sm button--primary mt-2' %> + <% end %> +
+
+ + <% if @marker %>
">
<% end %> + <% if @happy_thing.user == current_user %> + <%= link_to "Edit", edit_happy_thing_path(@happy_thing), class: "btn button--primary float-end"%> + <% end %>
diff --git a/app/views/happy_things/show_by_date.html.erb b/app/views/happy_things/show_by_date.html.erb index e99d596b..06c91769 100644 --- a/app/views/happy_things/show_by_date.html.erb +++ b/app/views/happy_things/show_by_date.html.erb @@ -1,62 +1,24 @@
<%= link_to sanitize("←"), root_path, class: "btn button--primary my-3" %> -

<%= @date.strftime('%B %d, %Y') %>

- <% if @happy_things.any? %> -
    +
    +

    <%= @date.strftime('%B %d, %Y') %>

    + <% if @happy_things.any? %> <% @happy_things.group_by(&:user).each do |user, happy_things| %> -
  • -

    <%= user.emoji %> <%= user.first_name %>

    -
      - <% happy_things.each do |happy_thing| %> -
    1. - <%= happy_thing.title.sub(/\S/, &:upcase) %> - <%= cl_image_tag happy_thing.photo.key, class: "rounded mt-3", height: 200, width: 200, crop: :fill, gravity: :auto if happy_thing.photo.attached? %> - - -
      - - <% if happy_thing.comments.any? %> -
      -
      Comments:
      - <% happy_thing.comments.each do |comment| %> -
      -

      <%= comment.user.first_name %>: <%= comment.content %>

      -
      - <% end %> -
      - <% else %> -

      No Comments yet.

      - <% end %> - - - Add a comment... - - -
      - - <%= simple_form_for([happy_thing, @comment], html: { class: 'mt-2' }) do |f| %> -
      - <%= f.input :content, label: false, placeholder: 'Add a comment...', input_html: { class: 'form-control' } %> -
      - <%= f.button :submit, 'Add Comment', class: 'btn btn-sm button--primary mt-2' %> - <% end %> -
      -
      - -
      2. - <% end %> -
    -
    • +
    <%= user.emoji %> <%= user.first_name %>
    + <% happy_things.each do |happy_thing| %> + <%= render 'happy_things/happy_thing', happy_thing: happy_thing %> + <% end %> <% end %> -
- <% else %> -

No Happy Things found for this date.

- <% end %> + <% else %> +

No Happy Things found for this date.

+ <% end %> +
+
<% if @happy_things.count < 10 %> -
+

Forgot something? Add more Happy Things

<%= simple_form_for(@old_happy_thing, url: happy_things_old_happy_thing_path, method: :post, html: { multipart: true }) do |f| %> <%= f.input :title, label: 'Title', required: true, input_html: {class: 'form-control mt-3 mb-2'} %> @@ -66,6 +28,4 @@ <% end %>
<% end %> - - <%= link_to 'Back to Dashboard', root_path, class: "btn button--primary" %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index b3731188..b4719786 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -19,8 +19,10 @@ - <%= render partial: 'layouts/navbar' if render_navbar? %> - <%= yield %> - <%= render partial: 'layouts/alerts' %> +
+ <%= render partial: 'layouts/navbar' if @render_navbar %> + <%= yield %> + <%= render partial: 'layouts/alerts' %> +
diff --git a/spec/system/happy_things_crud_spec.rb b/spec/system/happy_things_crud_spec.rb index 840bb5ce..02b09162 100644 --- a/spec/system/happy_things_crud_spec.rb +++ b/spec/system/happy_things_crud_spec.rb @@ -55,7 +55,10 @@ it 'updates a happy thing' do expect(page).to have_content(happy_thing.title, wait: 5) - click_link(href: edit_happy_thing_path(happy_thing), match: :first) + click_link(href: happy_thing_path(happy_thing), match: :first) + + expect(page).to have_link(href: edit_happy_thing_path(happy_thing)) + click_link(href: edit_happy_thing_path(happy_thing)) expect(page).to have_selector('h1', text: 'EDIT HAPPY THING', wait: 5) expect(page).to have_current_path(edit_happy_thing_path(happy_thing)) @@ -71,7 +74,10 @@ it 'destroys a happy thing' do expect(page).to have_content(happy_thing.title, wait: 5) - click_link(href: edit_happy_thing_path(happy_thing), match: :first) + click_link(href: happy_thing_path(happy_thing), match: :first) + + expect(page).to have_link(href: edit_happy_thing_path(happy_thing)) + click_link(href: edit_happy_thing_path(happy_thing)) expect(page).to have_selector('h1', text: 'EDIT HAPPY THING', wait: 5) expect(page).to have_current_path(edit_happy_thing_path(happy_thing))