Adjust application layout for turbo native

blackcandy-org · Feb 28, 2022 · f0a4779 · f0a4779
1 parent 306f21f
commit f0a4779
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 27 deletions.
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -77,4 +77,12 @@ def shelf_grid_tag(**options, &block)
 
     tag.div(**tag_options, &block)
   end
+
+  def page_title_tag(title)
+    content_for :title, title
+  end
+
+  def turbo_native?
+    request.user_agent.to_s.match?(/Turbo Native/)
+  end
 end
diff --git a/app/views/albums/index.html.erb b/app/views/albums/index.html.erb
@@ -1,3 +1,5 @@
+<% page_title_tag t('label.albums') %>
+
 <% if @albums.empty? %>
   <div class='u-mt-wide'>
     <%= empty_alert_tag has_icon: true, has_overlay: false %>

diff --git a/app/views/artists/index.html.erb b/app/views/artists/index.html.erb
@@ -1,3 +1,5 @@
+<% page_title_tag t('label.artists') %>
+
 <% if @artists.empty? %>
   <div class='u-mt-wide'>
     <%= empty_alert_tag has_icon: true, has_overlay: false %>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,31 +1,40 @@
 <% content_for :body do %>
-  <div class='o-flex u-vw-100 u-vh-100'>
-    <aside id='js-sidebar' class='o-flex__item o-flex__item--shrink-0 o-flex o-flex--column-reverse c-sidebar' data-turbo-permanent>
-      <div class='o-flex__item o-flex__item--shrink-0'>
-        <%= render 'shared/player' %>
-      </div>
-      <div class='o-flex__item o-flex__item--grow-1 u-h-0'>
-        <%= turbo_frame_tag 'turbo-playlist', src: current_playlist_songs_path(init: true), class: 'u-h-100 o-flex o-flex--column' %>
-      </div>
-    </aside>
-    <div class='o-flex__item o-flex__item--grow-1 u-overflow-auto' data-test-id='main_content'>
-      <div>
-        <header class='c-nav c-nav--primary o-grid o-grid--align-items-center u-position-sticky-top' cols='7'>
-          <div id='turbo-flash' class='c-flash'>
-            <%= render 'shared/flash' %>
-          </div>
-          <%= render 'shared/search_bar' %>
-          <%= render 'shared/nav_bar' %>
-        </header>
-        <main class='u-p-large'>
-          <%= yield %>
-        </main>
-        <footer class='u-display-none u-display-block@extra-small u-position-fixed-bottom'>
-          <%= render 'shared/mini_player' %>
-        </footer>
+  <% if turbo_native? %>
+    <div id='turbo-flash' class='c-flash'>
+      <%= render 'shared/flash' %>
+    </div>
+    <main class='u-p-large'>
+      <%= yield %>
+    </main>
+  <% else %>
+    <div class='o-flex u-vw-100 u-vh-100'>
+      <aside id='js-sidebar' class='o-flex__item o-flex__item--shrink-0 o-flex o-flex--column-reverse c-sidebar' data-turbo-permanent>
+        <div class='o-flex__item o-flex__item--shrink-0'>
+          <%= render 'shared/player' %>
+        </div>
+        <div class='o-flex__item o-flex__item--grow-1 u-h-0'>
+          <%= turbo_frame_tag 'turbo-playlist', src: current_playlist_songs_path(init: true), class: 'u-h-100 o-flex o-flex--column' %>
+        </div>
+      </aside>
+      <div class='o-flex__item o-flex__item--grow-1 u-overflow-auto' data-test-id='main_content'>
+        <div>
+          <header class='c-nav c-nav--primary o-grid o-grid--align-items-center u-position-sticky-top' cols='7'>
+            <div id='turbo-flash' class='c-flash'>
+              <%= render 'shared/flash' %>
+            </div>
+            <%= render 'shared/search_bar' %>
+            <%= render 'shared/nav_bar' %>
+          </header>
+          <main class='u-p-large'>
+            <%= yield %>
+          </main>
+          <footer class='u-display-none u-display-block@extra-small u-position-fixed-bottom'>
+            <%= render 'shared/mini_player' %>
+          </footer>
+        </div>
       </div>
     </div>
-  </div>
+  <% end %>
 
   <div id='js-overlay' class='c-overlay c-overlay--fixed c-overlay--blur u-display-none'></div>
   <div id='js-global-loader' class='c-overlay c-overlay--fixed c-overlay--blur u-display-none' data-controller='loader' data-loader-target='indicator' data-test-id='global_loader'>

diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
@@ -3,14 +3,14 @@
   <head>
     <meta charset='utf-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
-    <title>Black Candy</title>
+    <title><%= content_for?(:title) ? yield(:title) : "Black Candy" %></title>
     <%= csrf_meta_tags %>
     <%= favicon_link_tag 'link_icon.png', type: 'image/png' %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
   </head>
 
-  <body class='u-overflow-hidden'>
+  <body class="<%= 'u-overflow-hidden' unless turbo_native? %>">
     <%= content_for?(:body) ? yield(:body) : yield %>
     <%= render 'shared/icons' %>
   </body>

diff --git a/app/views/settings/show.html.erb b/app/views/settings/show.html.erb
@@ -1,3 +1,5 @@
+<% page_title_tag t('label.settings') %>
+
 <div class='o-container o-container--extra-narrow'>
   <%= render partial: 'users/settings/form', locals: { user: @user } %>
   <% if is_admin? %>

diff --git a/app/views/songs/index.html.erb b/app/views/songs/index.html.erb
@@ -1,3 +1,5 @@
+<% page_title_tag t('label.songs') %>
+
 <% if @songs.empty? %>
   <div class='u-mt-wide'>
     <%= empty_alert_tag has_icon: true, has_overlay: false %>