fix(sticky): move around html to support modals

PRX · Jul 25, 2023 · b26a012 · b26a012
1 parent b7b0a8c
commit b26a012
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 149 deletions.
diff --git a/app/views/episodes/_form.html.erb b/app/views/episodes/_form.html.erb
@@ -15,10 +15,7 @@
       </div>
     </div>
     <div class="col-lg-4 d-grid align-content-start gap-3">
-      <div class="sticky-lg-top">
-        <%= render "form_status", episode: episode, form: form %>
-        <%= render "form_distribution", episode: episode, form: form %>
-      </div>
+      <%= render "form_status", episode: episode, form: form %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/episodes/_form_status.html.erb b/app/views/episodes/_form_status.html.erb
@@ -1,81 +1,85 @@
-<div class="card shadow border-0 mb-4">
-  <div class="card-header-<%= episode_status_class(episode) %>">
-    <h5 class="card-title"><%= t(".title_#{episode.publishing_status_was}") %></h5>
-  </div>
+<div class="sticky-lg-top">
+  <div class="card shadow border-0 mb-4">
+    <div class="card-header-<%= episode_status_class(episode) %>">
+      <h5 class="card-title"><%= t(".title_#{episode.publishing_status_was}") %></h5>
+    </div>
 
-  <div class="card-body row">
-    <div class="col-12 mb-4">
-      <div class="form-floating">
-        <% invalid_class = episode.errors[:base].present? ? "is-invalid" : "" %>
+    <div class="card-body row">
+      <div class="col-12 mb-4">
+        <div class="form-floating">
+          <% invalid_class = episode.errors[:base].present? ? "is-invalid" : "" %>
 
-        <% if episode.publishing_status_was == 'published' %>
-          <%= form.hidden_field :publishing_status, value: "published" %>
-          <div class="form-control d-table <%= invalid_class %>">
-            <p class="d-table-cell align-middle">
-              <%= t("helpers.label.episode.publishing_statuses.published") %>
-            </p>
-          </div>
-        <% else %>
-          <%= form.select :publishing_status, episode_publishing_status_options, {}, class: "form-select #{invalid_class}" %>
-        <% end %>
+          <% if episode.publishing_status_was == 'published' %>
+            <%= form.hidden_field :publishing_status, value: "published" %>
+            <div class="form-control d-table <%= invalid_class %>">
+              <p class="d-table-cell align-middle">
+                <%= t("helpers.label.episode.publishing_statuses.published") %>
+              </p>
+            </div>
+          <% else %>
+            <%= form.select :publishing_status, episode_publishing_status_options, {}, class: "form-select #{invalid_class}" %>
+          <% end %>
 
-        <%= form.label :publishing_status, class: invalid_class %>
+          <%= form.label :publishing_status, class: invalid_class %>
 
-        <% if episode.errors[:base].present? %>
-          <div class="invalid-feedback"><%= episode.errors[:base].to_sentence.capitalize %></div>
-        <% end %>
+          <% if episode.errors[:base].present? %>
+            <div class="invalid-feedback"><%= episode.errors[:base].to_sentence.capitalize %></div>
+          <% end %>
+        </div>
       </div>
-    </div>
 
-    <div class="col-12">
-      <div class="form-floating">
-        <%= form.time_field :released_at, value: episode.published_or_released_date %>
-        <%= form.label :released_at %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= form.time_field :released_at, value: episode.published_or_released_date %>
+          <%= form.label :released_at %>
+        </div>
       </div>
     </div>
-  </div>
 
-  <div class="card-footer d-flex align-items-center justify-content-between">
-    <% if episode.persisted? %>
-      <p class="status-text"><strong><%= t(".updated_at_hint") %></strong> <br><%= l(episode.updated_at) %></p>
+    <div class="card-footer d-flex align-items-center justify-content-between">
+      <% if episode.persisted? %>
+        <p class="status-text flex-fill"><strong><%= t(".updated_at_hint") %></strong> <br><%= l(episode.updated_at) %></p>
 
-      <% if policy(episode).update? %>
-        <div>
-          <%= link_to t(".discard"), edit_episode_path(episode), class: "btn btn-discard-changed invisible", data: {action: "unsaved#discard", unsaved_target: "discard"} %>
+        <% if policy(episode).update? %>
+          <div>
+            <%= link_to t(".discard"), edit_episode_path(episode), class: "btn btn-discard-changed invisible", data: {action: "unsaved#discard", unsaved_target: "discard"} %>
 
-          <div class="btn-group">
-            <% data = {disable_with: t(".updating"), upload_with: t(".uploading")} %>
-            <%= form.submit t(".update"), class: "btn btn-#{episode_status_class(episode)}", data: data %>
+            <div class="btn-group">
+              <% data = {disable_with: t(".updating"), upload_with: t(".uploading")} %>
+              <%= form.submit t(".update"), class: "btn btn-#{episode_status_class(episode)}", data: data %>
 
-            <% if episode.published? || policy(episode).destroy? %>
-              <button type="button" class="btn btn-<%= episode_status_class(episode) %> dropdown-toggle dropdown-toggle-split border-start border-color-white" data-bs-toggle="dropdown" aria-expanded="false">
-                <span class="visually-hidden"><%= t(".toggle_dropdown") %></span>
-              </button>
-              <ul class="dropdown-menu">
-                <% if episode.published? && !episode.published_at_changed? %>
-                  <li><%= link_to t(".unpublish"), episode_path(episode, episode: {publishing_status: "draft"}), method: :put, class: "dropdown-item bg-danger text-white" %></li>
-                <% elsif policy(episode).destroy? %>
-                  <li>
-                    <button type="button" class="dropdown-item bg-danger text-white" data-bs-toggle="modal" data-bs-target="#confirm-destroy">
-                      <%= t(".destroy") %>
-                    </button>
-                  </li>
-                <% end %>
-              </ul>
-            <% end %>
+              <% if episode.published? || policy(episode).destroy? %>
+                <button type="button" class="btn btn-<%= episode_status_class(episode) %> dropdown-toggle dropdown-toggle-split border-start border-color-white" data-bs-toggle="dropdown" aria-expanded="false">
+                  <span class="visually-hidden"><%= t(".toggle_dropdown") %></span>
+                </button>
+                <ul class="dropdown-menu">
+                  <% if episode.published? && !episode.published_at_changed? %>
+                    <li><%= link_to t(".unpublish"), episode_path(episode, episode: {publishing_status: "draft"}), method: :put, class: "dropdown-item bg-danger text-white" %></li>
+                  <% elsif policy(episode).destroy? %>
+                    <li>
+                      <button type="button" class="dropdown-item bg-danger text-white" data-bs-toggle="modal" data-bs-target="#confirm-destroy">
+                        <%= t(".destroy") %>
+                      </button>
+                    </li>
+                  <% end %>
+                </ul>
+              <% end %>
+            </div>
           </div>
-        </div>
-      <% end %>
+        <% end %>
 
-    <% else %>
-      <p class="status-text"><strong><%= t(".new_hint") %></strong></p>
+      <% else %>
+        <p class="status-text"><strong><%= t(".new_hint") %></strong></p>
 
-      <% if policy(episode).create? %>
-        <% data = {disable_with: t(".creating"), upload_with: t(".uploading")} %>
-        <%= form.submit t(".create"), class: "btn btn-warning", data: data %>
+        <% if policy(episode).create? %>
+          <% data = {disable_with: t(".creating"), upload_with: t(".uploading")} %>
+          <%= form.submit t(".create"), class: "btn btn-warning", data: data %>
+        <% end %>
       <% end %>
-    <% end %>
+    </div>
   </div>
+
+  <%= render "form_distribution", episode: episode, form: form %>
 </div>
 
 <div class="modal fade" id="confirm-destroy" tabindex="-1" aria-labelledby="confirm-destroy-title" aria-hidden="true">

diff --git a/app/views/feeds/_form.html.erb b/app/views/feeds/_form.html.erb
@@ -19,12 +19,7 @@
       </div>
     </div>
     <div class="col-lg-4 d-grid align-content-start gap-3">
-
-      <div class="row sticky-lg-top">
-        <div class="col-12">
-          <%= render "form_status", podcast: podcast, feed: feed, form: form %>
-        </div>
-      </div>
+      <%= render "form_status", podcast: podcast, feed: feed, form: form %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/feeds/_form_status.html.erb b/app/views/feeds/_form_status.html.erb
@@ -1,36 +1,40 @@
-<div class="card shadow border-0">
-  <div class="card-header-primary">
-    <h5 class="card-title"><%= t(".title") %></h5>
-  </div>
-  <div class="card-footer d-flex align-items-center">
-    <% if feed.persisted? %>
-      <p class="status-text flex-grow-1"><strong><%= t(".updated_at_hint") %></strong> <br><%= l(feed.updated_at) %></p>
+<div class="sticky-lg-top">
+  <div class="col-12">
+    <div class="card shadow border-0">
+      <div class="card-header-primary">
+        <h5 class="card-title"><%= t(".title") %></h5>
+      </div>
+      <div class="card-footer d-flex align-items-center">
+        <% if feed.persisted? %>
+          <p class="status-text flex-grow-1"><strong><%= t(".updated_at_hint") %></strong> <br><%= l(feed.updated_at) %></p>
 
-      <% if policy(feed).update? %>
-        <%= link_to t(".discard"), podcast_feed_path(podcast, feed), class: "btn btn-discard-changed invisible me-2", data: {action: "unsaved#discard", unsaved_target: "discard"} %>
+          <% if policy(feed).update? %>
+            <%= link_to t(".discard"), podcast_feed_path(podcast, feed), class: "btn btn-discard-changed invisible me-2", data: {action: "unsaved#discard", unsaved_target: "discard"} %>
 
-        <div class="btn-group">
-          <% data = {disable_with: t(".updating"), upload_with: t(".uploading")} %>
-          <%= form.submit t(".update"), class: "btn btn-primary", data: data %>
+            <div class="btn-group">
+              <% data = {disable_with: t(".updating"), upload_with: t(".uploading")} %>
+              <%= form.submit t(".update"), class: "btn btn-primary", data: data %>
 
-          <% if policy(feed).destroy? %>
-            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split border-start border-color-white" data-bs-toggle="dropdown" aria-expanded="false">
-              <span class="visually-hidden"><%= t(".toggle_dropdown") %></span>
-            </button>
-            <ul class="dropdown-menu">
-              <li>
-                <button type="button" class="dropdown-item bg-danger text-white" data-bs-toggle="modal" data-bs-target="#confirm-destroy">
-                  <%= t(".destroy") %>
+              <% if policy(feed).destroy? %>
+                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split border-start border-color-white" data-bs-toggle="dropdown" aria-expanded="false">
+                  <span class="visually-hidden"><%= t(".toggle_dropdown") %></span>
                 </button>
-              </li>
-            </ul>
+                <ul class="dropdown-menu">
+                  <li>
+                    <button type="button" class="dropdown-item bg-danger text-white" data-bs-toggle="modal" data-bs-target="#confirm-destroy">
+                      <%= t(".destroy") %>
+                    </button>
+                  </li>
+                </ul>
+              <% end %>
+            </div>
           <% end %>
-        </div>
-      <% end %>
-    <% else %>
-      <p class="status-text flex-grow-1"><strong><%= t(".new_hint") %></strong></p>
-      <%= form.submit t(".create"), class: "btn btn-primary" %>
-    <% end %>
+        <% else %>
+          <p class="status-text flex-grow-1"><strong><%= t(".new_hint") %></strong></p>
+          <%= form.submit t(".create"), class: "btn btn-primary" %>
+        <% end %>
+      </div>
+    </div>
   </div>
 </div>
 

diff --git a/app/views/podcast_engagement/_form.html.erb b/app/views/podcast_engagement/_form.html.erb
@@ -12,11 +12,7 @@
       </div>
     </div>
     <div class="col-lg-4 d-grid align-content-start gap-3">
-      <div class="row">
-        <div class="col-12">
-          <%= render "form_status", podcast: podcast, form: form %>
-        </div>
-      </div>
+      <%= render "form_status", podcast: podcast, form: form %>
     </div>
   </div>
 

diff --git a/app/views/podcast_engagement/_form_status.html.erb b/app/views/podcast_engagement/_form_status.html.erb
@@ -1,14 +1,18 @@
-<div class="card shadow border-0">
-  <div class="card-header-primary">
-    <h5 class="card-title"><%= t(".title") %></h5>
-  </div>
-  <div class="card-footer d-flex align-items-center">
+<div class="row sticky-lg-top">
+  <div class="col-12">
+    <div class="card shadow border-0">
+      <div class="card-header-primary">
+        <h5 class="card-title"><%= t(".title") %></h5>
+      </div>
+      <div class="card-footer d-flex align-items-center">
 
-    <p class="status-text flex-grow-1"><strong><%= t(".updated_at_hint") %></strong> <br><%= l(podcast.updated_at) %></p>
+        <p class="status-text flex-grow-1"><strong><%= t(".updated_at_hint") %></strong> <br><%= l(podcast.updated_at) %></p>
 
-    <%= link_to t(".discard"), podcast_engagement_path(podcast), class: "btn btn-discard-changed invisible me-2", data: {action: "unsaved#discard", unsaved_target: "discard"} %>
+        <%= link_to t(".discard"), podcast_engagement_path(podcast), class: "btn btn-discard-changed invisible me-2", data: {action: "unsaved#discard", unsaved_target: "discard"} %>
 
-    <% data = {disable_with: t(".updating"), upload_with: t(".uploading")} %>
-    <%= form.submit t(".update"), class: "btn btn-primary", data: data %>
+        <% data = {disable_with: t(".updating"), upload_with: t(".uploading")} %>
+        <%= form.submit t(".update"), class: "btn btn-primary", data: data %>
+      </div>
+    </div>
   </div>
-</div>
+</div>
diff --git a/app/views/podcasts/_form.html.erb b/app/views/podcasts/_form.html.erb
@@ -11,11 +11,7 @@
       </div>
     </div>
     <div class="col-lg-4 d-grid align-content-start gap-3">
-      <div class="row mb-4 sticky-lg-top">
-        <div class="col-12">
-          <%= render "form_status", podcast: podcast, form: form %>
-        </div>
-      </div>
+      <%= render "form_status", podcast: podcast, form: form %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/podcasts/_form_status.html.erb b/app/views/podcasts/_form_status.html.erb
@@ -1,39 +1,43 @@
-<div class="card shadow border-0">
-  <div class="card-header-primary">
-    <h5 class="card-title"><%= t(".title") %></h5>
-  </div>
-  <div class="card-footer d-flex align-items-center">
-    <% if podcast.persisted? %>
-      <p class="status-text flex-grow-1"><strong><%= t(".updated_at_hint") %></strong> <br><%= l(podcast.updated_at) %></p>
+<div class="row mb-4 sticky-lg-top">
+  <div class="col-12">
+    <div class="card shadow border-0">
+      <div class="card-header-primary">
+        <h5 class="card-title"><%= t(".title") %></h5>
+      </div>
+      <div class="card-footer d-flex align-items-center">
+        <% if podcast.persisted? %>
+          <p class="status-text flex-grow-1"><strong><%= t(".updated_at_hint") %></strong> <br><%= l(podcast.updated_at) %></p>
 
-      <% if policy(podcast).update? %>
-        <% data = {action: "unsaved#discard", unsaved_target: "discard"} %>
-        <%= link_to t(".discard"), edit_podcast_path(podcast), class: "btn btn-discard-changed invisible me-2", data: data %>
+          <% if policy(podcast).update? %>
+            <% data = {action: "unsaved#discard", unsaved_target: "discard"} %>
+            <%= link_to t(".discard"), edit_podcast_path(podcast), class: "btn btn-discard-changed invisible me-2", data: data %>
 
-        <div class="btn-group">
-          <% data = {disable_with: t(".updating"), upload_with: t(".uploading")} %>
-          <%= form.submit t(".update"), class: "btn btn-primary", data: data %>
+            <div class="btn-group">
+              <% data = {disable_with: t(".updating"), upload_with: t(".uploading")} %>
+              <%= form.submit t(".update"), class: "btn btn-primary", data: data %>
 
-          <% if policy(podcast).destroy? %>
-            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split border-start border-color-white" data-bs-toggle="dropdown" aria-expanded="false">
-              <span class="visually-hidden"><%= t(".toggle_dropdown") %></span>
-            </button>
-            <ul class="dropdown-menu">
-              <li>
-                <button type="button" class="dropdown-item bg-danger text-white" data-bs-toggle="modal" data-bs-target="#confirm-destroy">
-                  <%= t(".destroy") %>
+              <% if policy(podcast).destroy? %>
+                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split border-start border-color-white" data-bs-toggle="dropdown" aria-expanded="false">
+                  <span class="visually-hidden"><%= t(".toggle_dropdown") %></span>
                 </button>
-              </li>
-            </ul>
+                <ul class="dropdown-menu">
+                  <li>
+                    <button type="button" class="dropdown-item bg-danger text-white" data-bs-toggle="modal" data-bs-target="#confirm-destroy">
+                      <%= t(".destroy") %>
+                    </button>
+                  </li>
+                </ul>
+              <% end %>
+            </div>
           <% end %>
-        </div>
-      <% end %>
-    <% else %>
-      <p class="status-text flex-grow-1"><strong><%= t(".new_hint") %></strong></p>
+        <% else %>
+          <p class="status-text flex-grow-1"><strong><%= t(".new_hint") %></strong></p>
 
-      <% data = {disable_with: t(".creating"), upload_with: t(".uploading")} %>
-      <%= form.submit t(".create"), class: "btn btn-primary", data: data %>
-    <% end %>
+          <% data = {disable_with: t(".creating"), upload_with: t(".uploading")} %>
+          <%= form.submit t(".create"), class: "btn btn-primary", data: data %>
+        <% end %>
+      </div>
+    </div>
   </div>
 </div>