Merge pull request #887 from basecamp/mobile-metadata

Stack meta info on mobile

app/assets/stylesheets/cards.css

@@ -245,21 +245,10 @@
   }
 
   .card__meta {
-     --border: 1px solid var(--card-color);
+     --meta-border: 1px solid var(--card-color);
 
-    align-items: center;
-    display: flex;
     max-inline-size: 100%;
     min-inline-size: 0;
-  }
-
-  .card__meta-grid {
-    display: grid;
-    grid-template-columns: auto auto;
-    margin-inline-start: var(--inline-space);
-  }
-
-  .card__meta-item {
     text-transform: uppercase;
 
     strong,
@@ -267,27 +256,77 @@
       font-weight: 900;
     }
 
-    &:nth-child(odd) {
-      border-inline-end: var(--border);
-      padding-inline-end: var(--inline-space);
-    }
-
-    &:nth-child(even) {
-      padding-inline-start: var(--inline-space);
-    }
-
-    /* First two */
-    &:nth-child(-n+2) {
-      border-block-end: var(--border);
-      padding-block-end: 0.25ch;
-    }
-
-    /* Last two */
-    &:nth-child(n+3) {
-      padding-block-start: 0.25ch;
+    @media (min-width: 640px) {
+      align-items: center;
+      display: flex;
     }
   }
 
+  .card__meta-grid {
+    column-gap: var(--inline-space);
+    display: grid;
+  }
+
+  .card__meta-grid--author {
+    grid-template-areas:
+      "avatar top"
+      "avatar bottom";
+    grid-template-columns: auto 1fr;
+
+    .card__meta-author { grid-area: avatar; }
+    .card__meta-text--added { grid-area: top; }
+    .card__meta-text--author { grid-area: bottom; }
+
+    @media (min-width: 640px) {
+      border-inline-end: var(--meta-border);
+
+      .card__meta-text {
+        padding-inline-end: var(--inline-space);
+      }
+    }
+  }
+
+  .card__meta-grid--assigned {
+    grid-template-areas:
+      "top avatar"
+      "bottom avatar";
+    grid-template-columns: 1fr auto;
+
+    .card__meta-assignees { grid-area: avatar; }
+    .card__meta-text--updated { grid-area: top; }
+    .card__meta-text--assigned { grid-area: bottom; }
+
+    .card__meta-assignees {
+      display: flex;
+      flex-shrink: 0;
+    }
+
+    @media (min-width: 640px) {
+      .card__meta-text {
+        padding-inline-start: var(--inline-space);
+      }
+    }
+  }
+
+  .card__meta-text--added,
+  .card__meta-text--updated {
+    border-block-end: var(--meta-border);
+  }
+
+  .card__meta-author {
+    griad-area: avatar;
+  }
+
+
+
+
+
+
+
+
+
+
+
   .card__timestamp {
     opacity: 0.66;
   }

app/assets/stylesheets/trays.css

@@ -367,7 +367,7 @@
     .avatar,
     .card__tags,
     .card__meta .btn,
-    .card__meta-item:not(.card__meta-item--updated),
+    .card__meta-text:not(.card__meta-text--updated),
     .card__stages,
     .card__steps,
     .card__closed {
@@ -405,7 +405,7 @@
       z-index: 1;
     }
 
-    .card__meta-item--updated {
+    .card__meta-text--updated {
       border: 0;
       font-size: var(--text-x-small);
       opacity: 0.66;

app/helpers/avatars_helper.rb

@@ -11,10 +11,11 @@ module AvatarsHelper
   end
 
   def avatar_tag(user, hidden_for_screen_reader: false, **options)
-    link_to user_path(user), class: "avatar btn btn--circle", data: { turbo_frame: "_top" },
+    link_to user_path(user), class: class_names("avatar btn btn--circle", options.delete(:class)), data: { turbo_frame: "_top" },
       aria: { hidden: hidden_for_screen_reader, label: user.name },
-      tabindex: hidden_for_screen_reader ? -1 : nil do
-      avatar_image_tag(user, **options)
+      tabindex: hidden_for_screen_reader ? -1 : nil,
+      **options do
+      avatar_image_tag(user)
     end
   end
 

app/views/cards/display/common/_assignees.html.erb

@@ -1,4 +1,4 @@
-<div class="flex" id="<%= dom_id(card, :assignees) %>">
+<div class="display-contents" id="<%= dom_id(card, :assignees) %>">
   <% card.assignees.each do |assignee| %>
     <%= avatar_tag assignee %>
   <% end %>

app/views/cards/display/common/_meta.html.erb

@@ -1,14 +1,23 @@
 <div class="card__meta" id="<%= dom_id(card, :meta) %>">
-  <%= avatar_tag card.creator %>
 
-  <div class="card__meta-grid">
-    <span class="card__meta-item card__meta-item--added overflow-ellipsis">
+  <div class="card__meta-grid card__meta-grid--author">
+    <%= avatar_tag card.creator, class: "card__meta-author" %>
+
+    <span class="card__meta-text card__meta-text--added overflow-ellipsis">
       Added <%= local_datetime_tag(card.created_at, style: :daysago) %>
       <% if card.drafted? %>
         <strong>(Draft)</strong>
       <% end %>
     </span>
-    <span class="card__meta-item card__meta-item--updated overflow-ellipsis">
+
+    <span class="card__meta-text card__meta-text--author overflow-ellipsis">
+      By <strong><%= card.creator.familiar_name %></strong>
+    </span>
+  </div>
+
+  <div class="card__meta-grid card__meta-grid--assigned">
+
+    <span class="card__meta-text card__meta-text--updated overflow-ellipsis">
       <% if card.creating? %>
         &nbsp;
       <% else %>
@@ -16,17 +25,15 @@
         <%= local_datetime_tag(card.last_active_at, style: :daysago) %>
       <% end %>
     </span>
-    <span class="card__meta-item card__meta-item--reported overflow-ellipsis">
-      By <strong><%= card.creator.familiar_name %></strong>
-    </span>
-    <span class="card__meta-item card__meta-item--assigned overflow-ellipsis">
+
+    <span class="card__meta-text card__meta-text--assigned overflow-ellipsis">
       <%= card.assignees.any? ? "Assigned to" : "Not assigned" %>
       <%= card.assignees.map { |assignee| "<strong>#{assignee.familiar_name}</strong>" }.to_sentence.html_safe %>
     </span>
-  </div>
 
-  <div class="margin-inline-start flex-item-no-shrink">
-    <%= yield %>
+    <div class="card__meta-assignees">
+      <%= yield %>
+    </div>
   </div>
 </div>
 

app/views/cards/display/mini/_assignees.html.erb

@@ -1,7 +1,5 @@
 <%= turbo_frame_tag card, :assignees do %>
-  <div class="flex">
-    <% card.assignees.each do |assignee| %>
-      <%= avatar_tag assignee %>
-    <% end %>
-  </div>
+  <% card.assignees.each do |assignee| %>
+    <%= avatar_tag assignee %>
+  <% end %>
 <% end %>

app/views/cards/display/public_preview/_meta.html.erb

@@ -1,28 +1,31 @@
 <div class="card__meta" id="<%= dom_id(card, :meta) %>">
-  <%= avatar_preview_tag card.creator %>
+  <div class="card__meta-grid card__meta-grid--author">
+    <%= avatar_preview_tag card.creator %>
 
-  <div class="card__meta-grid">
-    <span class="card__meta-item card__meta-item--added overflow-ellipsis">
+    <span class="card__meta-text card__meta-text--added overflow-ellipsis">
       Added <%= local_datetime_tag(card.created_at, style: :daysago) %>
       <% if card.drafted? %>
         <strong>(Draft)</strong>
       <% end %>
     </span>
-    <span class="card__meta-item card__meta-item--updated overflow-ellipsis">
-      Updated
-      <%= local_datetime_tag(card.last_active_at, style: :daysago) %>
-    </span>
-    <span class="card__meta-item card__meta-item--reported overflow-ellipsis">
+
+    <span class="card__meta-text card__meta-text--author overflow-ellipsis">
       By <strong><%= card.creator.familiar_name %></strong>
     </span>
-    <span class="card__meta-item card__meta-item--assigned overflow-ellipsis">
-      <%= card.assignees.any? ? "Assigned to" : "Not assigned" %>
-      <%= card.assignees.map { |assignee| "<strong>#{assignee.familiar_name}</strong>" }.to_sentence.html_safe %>
-    </span>
   </div>
 
-  <div class="margin-inline-start flex-item-no-shrink">
-    <div class="flex" id="<%= dom_id(card, :assignees) %>">
+  <div class="card__meta-grid card__meta-grid--assigned">
+    <span class="card__meta-text card__meta-text--updated overflow-ellipsis">
+      Updated
+      <%= local_datetime_tag(card.last_active_at, style: :daysago) %>
+    </span>
+
+    <span class="card__meta-text card__meta-text--assigned overflow-ellipsis">
+      <%= card.assignees.any? ? "Assigned to" : "Not assigned" %>
+      <%= card.assignees.map { |assignee| "<strong>#{assignee.familiar_name}</strong>" }.to_sentence.html_safe %>
+    </span>
+
+    <div class="card__meta-assignees" id="<%= dom_id(card, :assignees) %>">
       <% card.assignees.each do |assignee| %>
         <%= avatar_preview_tag assignee %>
       <% end %>