feat(tabs): fixed add feed button + tab style adjustment

PRX · Jul 20, 2023 · d791689 · d791689
1 parent d072e17
commit d791689
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 21 deletions.
diff --git a/app/assets/stylesheets/shared/button.scss b/app/assets/stylesheets/shared/button.scss
@@ -16,17 +16,8 @@
   }
 }
 
-.btn-secondary-link {
-  transition: background-color 0.1s linear 0ms;
-  margin: 1rem 0.5rem;
-  padding: 0.5rem;
-  border: 1px dashed rgba(0, 0, 0, 0.12);
-  width: calc(100% - 1rem);
-  color: $primary;
-
-  &:hover {
-    color: $link-hover-color;
-  }
+.prx-fixed-btn-container {
+  margin-bottom: 5rem;
 }
 
 .btn-icon {

diff --git a/app/assets/stylesheets/shared/tabs.scss b/app/assets/stylesheets/shared/tabs.scss
@@ -48,13 +48,18 @@
 }
 
 .prx-tab {
-  &:is(.nav-link, .nav-link.disable, .nav-link.active) {
+  &:is(.nav-link, .nav-link.disable) {
     border-inline-start-width: map-get($spacers, 1);
     background-color: rgba(var(--prx-tab-bg-rgb), var(--prx-tab-bg-opacity));
   }
 
+  &:is(.nav-link.active) {
+    border-inline-start-width: map-get($spacers, 1);
+    background-color: $white;
+  }
+
   &.active {
-    --prx-tab-bg-opacity: 0;
+    background-color: $white;
   }
 
   &:hover:not(.active) {

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -16,9 +16,9 @@ def tab_link_to(*args, &block)
 
     # add our tab classes
     if html_options[:class].present?
-      html_options[:class] += " prx-tab | nav-link"
+      html_options[:class] += " prx-tab nav-link"
     else
-      html_options[:class] = "prx-tab | nav-link"
+      html_options[:class] = "prx-tab nav-link"
     end
 
     # add aria current page

diff --git a/app/views/feeds/_tabs.html.erb b/app/views/feeds/_tabs.html.erb
@@ -1,5 +1,5 @@
 <% content_for :tabs do %>
-  <div class="list-group d-flex col">
+  <div class="list-group d-flex col prx-fixed-btn-container">
     <% @feeds.each do |feed| %>
       <% if feed.default? %>
         <%= tab_link_to "Default Feed", podcast_feed_path(@podcast, feed) %>
@@ -11,7 +11,8 @@
     <% if feed.new_record? %>
       <%= tab_link_to "New Feed", new_podcast_feed_path(podcast), active: true %>
     <% end %>
-
-    <%= link_to "Add a Feed", new_podcast_feed_path(podcast), class: "btn btn-secondary-link" %>
+  </div>
+  <div class="fixed-bottom col-sm-12 col-md-3 col-xl-2">
+    <%= link_to "Add a Feed", new_podcast_feed_path(podcast), class: "btn btn-success d-flex sticky-md-bottom m-4 shadow" %>
   </div>
 <% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -25,7 +25,7 @@
       <div class="prx-main container-fluid flex-grow-1">
         <div class="row">
           <aside class="prx-tabs d-flex flex-column justify-content-between col-sm-12 col-md-3 col-xl-2">
-            <nav class="prx-tabs-nav nav nav-tabs flex-column bg-white sticky-md-top">
+            <nav class="prx-tabs-nav nav nav-tabs flex-column sticky-md-top">
               <%= yield :tabs %>
             </nav>
             <% if content_for? :actions %>

diff --git a/app/views/podcasts/_form.html.erb b/app/views/podcasts/_form.html.erb
@@ -15,7 +15,7 @@
         <div class="col-12">
           <%= render "form_status", podcast: podcast, form: form %>
         </div>
-      </div>  
+      </div>
     </div>
   </div>
 <% end %>
diff --git a/app/views/podcasts/_form_main.html.erb b/app/views/podcasts/_form_main.html.erb
@@ -172,4 +172,4 @@
 
 <div class="col-12 mb-4">
   <%= render "form_feed_image", podcast: podcast, form: form %>
-</div>
+</div>