Improve alignment of recording card metadata elements

asciinema · May 20, 2024 · 81c41f7 · 81c41f7
1 parent ce3941b
commit 81c41f7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/assets/css/_recording_card.scss b/assets/css/_recording_card.scss
@@ -88,10 +88,12 @@ div.asciicast-card {
 
     h3 {
       margin: 0 0 6px 0;
-      font-size: 20px;
+      font-size: 18px;
+      display: flex;
 
       .duration {
-        float: right;
+        margin: auto 0 auto auto;
+        padding-left: 1em;
         font-size: 14px;
       }
     }
@@ -104,6 +106,10 @@ div.asciicast-card {
       abbr {
         border-bottom: 0;
       }
+
+      .special-label {
+        float: right;
+      }
     }
   }
 }
diff --git a/lib/asciinema_web/controllers/recording_html/card.html.heex b/lib/asciinema_web/controllers/recording_html/card.html.heex
@@ -14,11 +14,6 @@
   <div class="info">
     <h3>
       <.link href={~p"/a/#{@asciicast}"}><%= title(@asciicast) %></.link>
-      <.visibility_badge
-        :if={assigns[:conn] && owned_by_current_user?(@asciicast, @conn)}
-        visibility={@asciicast.visibility}
-      />
-      <.featured_badge :if={@asciicast.featured} />
       <span class="duration"><%= duration(@asciicast) %></span>
     </h3>
 
@@ -33,6 +28,11 @@
       <%= if !assigns[:no_created_at] do %>
         <%= time_ago_tag(@asciicast.inserted_at) %>
       <% end %>
+      <.visibility_badge
+        :if={assigns[:conn] && owned_by_current_user?(@asciicast, @conn)}
+        visibility={@asciicast.visibility}
+      />
+      <.featured_badge :if={@asciicast.featured} />
     </small>
   </div>
 </div>