Merge 12cb659 into 048e81f

.stylelintrc

@@ -2,7 +2,6 @@
   "extends": "stylelint-config-standard-scss",
   "rules": {
     "selector-class-pattern": null,
-    "selector-pseudo-element-colon-notation": "single",
     "custom-property-empty-line-before": null,
     "at-rule-empty-line-before": null,
     "value-keyword-case": ["lower", { "ignoreKeywords": ["BlinkMacSystemFont"] }],

Gemfile

@@ -89,7 +89,7 @@ end
 
 group :test do
   # Adds support for Capybara system testing and selenium driver
-  gem "capybara", "~> 3.36.0"
+  gem "capybara", "~> 3.37.0"
   gem "cuprite", git: "https://github.com/rubycdp/cuprite", branch: "master"
   gem "webmock", "~> 3.14.0", require: false
   gem "simplecov", "~> 0.21.2", require: false

Gemfile.lock

@@ -95,7 +95,7 @@ GEM
     bullet (7.0.0)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.11)
-    capybara (3.36.0)
+    capybara (3.37.1)
       addressable
       matrix
       mini_mime (>= 0.1.3)
@@ -322,7 +322,7 @@ DEPENDENCIES
   brakeman (~> 5.1.2)
   browser (~> 2.6.1)
   bullet (~> 7.0.0)
-  capybara (~> 3.36.0)
+  capybara (~> 3.37.0)
   carrierwave (~> 2.2.0)
   cssbundling-rails (~> 1.1.0)
   cuprite!

app/assets/stylesheets/components/_dropdown.scss

@@ -1,15 +1,44 @@
 @use "../tools/functions" as *;
 
 .c-dropdown {
-  cursor: pointer;
+  display: inline-block;
   position: relative;
 }
 
+.c-dropdown > summary {
+  display: inline-block;
+  cursor: pointer;
+  list-style: none;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+}
+
+.c-dropdown[open] > summary {
+  &::before {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    display: block;
+    cursor: default;
+    content: "";
+    background: transparent;
+  }
+}
+
+.c-dropdown:not([open]) > *:not(summary) {
+  display: none;
+}
+
 .c-dropdown__list {
   position: absolute;
   right: 0;
   top: 0;
-  z-index: 1;
+  z-index: 101;
   min-width: 100px;
   background: var(--dropdown-bg-color);
   border-radius: border-radius("medium");
@@ -33,13 +62,8 @@ a.c-dropdown__item {
   color: var(--dropdown-color);
 }
 
-form.c-dropdown__item {
-  padding: 0;
-}
-
 form.c-dropdown__item input[type="submit"],
 form.c-dropdown__item button[type="submit"] {
-  padding: spacing("narrow");
   width: 100%;
   background: var(--dropdown-bg-color);
   border: none;

app/assets/stylesheets/components/_nav.scss

@@ -6,13 +6,18 @@
 }
 
 .c-nav--primary {
-  background: var(--nav-primary-bg-color);
-}
+  position: relative;
 
-@supports (-webkit-backdrop-filter: initial) or (backdrop-filter: initial) {
-  .c-nav--primary {
-    background: var(--nav-backdrop-bg-color);
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
+    z-index: -1;
+    background: var(--nav-primary-bg-color);
   }
 }

app/assets/stylesheets/generic/_box_sizing.scss

@@ -3,7 +3,7 @@ html {
 }
 
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: inherit;
 }

app/assets/stylesheets/settings/_theme.scss

@@ -102,7 +102,7 @@
 
   /* Nav */
   --nav-shadow: 0 1px 0 #{color.change($grey-light, $alpha: 0.12)}, 0 1px 3px #{color.change($grey-light, $alpha: 0.15)};
-  --nav-primary-bg-color: #{color.change($white, $alpha: 0.97)};
+  --nav-primary-bg-color: #{color.change($white, $alpha: 0.9)};
   --nav-backdrop-bg-color: #{color.change($white, $alpha: 0.88)};
 
   /* Player */
@@ -221,7 +221,7 @@
 
   /* Nav */
   --nav-shadow: 0 1px 0 #{color.change($black-dark, $alpha: 0.12)}, 0 1px 3px #{color.change($black-dark, $alpha: 0.15)};
-  --nav-primary-bg-color: #{color.change($black-light, $alpha: 0.97)};
+  --nav-primary-bg-color: #{color.change($black-light, $alpha: 0.9)};
   --nav-backdrop-bg-color: #{color.change($black-light, $alpha: 0.88)};
 
   /* Player */

app/javascript/controllers/index.js

@@ -6,8 +6,6 @@ import { application } from './application'
 
 import DialogController from './dialog_controller.js'
 
-import DropdownController from './dropdown_controller.js'
-
 import FlashController from './flash_controller.js'
 
 import FormController from './form_controller.js'
@@ -32,8 +30,6 @@ import ThemeController from './theme_controller.js'
 
 application.register('dialog', DialogController)
 
-application.register('dropdown', DropdownController)
-
 application.register('flash', FlashController)
 
 application.register('form', FormController)

app/views/current_playlist/songs/show.html.erb

@@ -7,12 +7,12 @@
         <span id='<%= dom_id(@playlist, :songs_count) %>'><%= @playlist.songs.count %></span>
         <span><%= t('label.tracks') %></span>
       </p>
-      <div data-controller='dropdown' class='c-dropdown' data-test-id='playlist_menu'>
-        <span data-action='click->dropdown#show'><%= icon_tag 'more-vertical', title: t('label.more') %></span>
-        <div data-dropdown-target='list' class='u-display-none c-dropdown__list'>
+      <details class='c-dropdown' data-test-id='playlist_menu'>
+        <summary><%= icon_tag 'more-vertical', title: t('label.more') %></summary>
+        <div class='c-dropdown__list'>
           <%= button_to t('label.clear'), current_playlist_songs_path(clear_all: true), method: :delete, form_class: 'c-dropdown__item u-cursor-pointer', form: { data: { action: 'turbo:submit-end->playlist-songs#clear' } } %>
         </div>
-      </div>
+      </details>
     </div>
     <%= render partial: 'playlists/songs/list', locals: { playlist: @playlist, songs: @songs, pagy: @pagy } %>
   <% end %>

app/views/layouts/application.html.erb

@@ -9,16 +9,18 @@
       <%= 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 class='o-flex'>
+      <aside id='js-sidebar' class='o-flex__item o-flex__item--shrink-0 c-sidebar' data-turbo-permanent>
+        <div class='o-flex o-flex--column-reverse u-position-sticky-top u-overflow-auto u-vh-100'>
+          <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>
         </div>
       </aside>
-      <div class='o-flex__item o-flex__item--grow-1 u-overflow-auto' data-test-id='main_content'>
+      <div class='o-flex__item o-flex__item--grow-1' >
         <div>
           <header class='c-nav c-nav--primary u-position-sticky-top'>
             <div id='turbo-flash' class='c-flash'>

app/views/layouts/base.html.erb

@@ -10,7 +10,7 @@
     <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
   </head>
 
-  <body class="<%= 'u-overflow-hidden' unless turbo_native? %>">
+  <body>
     <%= content_for?(:body) ? yield(:body) : yield %>
     <%= render 'shared/icons' %>
   </body>

app/views/playlists/songs/_song.html.erb

@@ -8,12 +8,12 @@
         </div>
         <div class='u-text-monospace u-mr-narrow'><%= format_duration(song.duration) %></div>
     <% end %>
-    <div data-controller='dropdown' class='c-dropdown' data-test-id='playlist_song_menu'>
-      <span data-action='click->dropdown#show'><%= icon_tag 'more-vertical', size: 'small', title: t('label.more') %></span>
-      <div data-dropdown-target='list' class='u-display-none c-dropdown__list'>
+    <details class='c-dropdown' data-test-id='playlist_song_menu'>
+      <summary><%= icon_tag 'more-vertical', size: 'small', title: t('label.more') %></summary>
+      <div class='c-dropdown__list'>
         <%= link_to t('text.add_to_playlist'), dialog_playlists_path(song_id: song.id), data: { turbo_frame: 'turbo-dialog' }, class: 'c-dropdown__item' %>
         <%= button_to t('label.delete'), playlist_songs_path(playlist, song_id: song.id), method: :delete, form_class: 'c-dropdown__item', form: { 'data-submit-end-action' => 'delete' } %>
       </div>
-    </div>
+    </details>
   </div>
 </li>

app/views/playlists/songs/show.html.erb

@@ -14,19 +14,20 @@
             <%= button_to t('label.play_all'), play_playlist_songs_path(@playlist), form_class: 'c-button c-button--primary', form: { 'data-turbo-frame' => 'turbo-playlist' } %>
           <% end %>
           <%= link_to t('label.edit'), edit_playlist_path(@playlist), data: { turbo_frame: 'turbo-dialog' }, class: 'c-button c-button--secondary' %>
-          <div data-controller='dropdown' class='c-dropdown u-display-inline-block' data-test-id='playlist_menu'>
-            <span data-action='click->dropdown#show'>
-              <button class='c-button c-button--secondary'>
+
+          <details class='c-dropdown' data-test-id='playlist_menu'>
+            <summary>
+              <span class='c-button c-button--secondary'>
                 <%= icon_tag 'more-horizontal', size: 'narrow', title: t('label.more') %>
-              </button>
-            </span>
-            <div data-dropdown-target='list' class='u-display-none c-dropdown__list c-dropdown__list--left'>
+              </span>
+            </summary>
+            <div class='c-dropdown__list c-dropdown__list--left''>
               <% unless @songs.blank? %>
                 <%= button_to t('label.clear'), playlist_songs_path(@playlist, clear_all: true), method: :delete, form_class: 'c-dropdown__item' %>
               <% end %>
               <%= button_to t('label.delete'), playlist_path(@playlist), method: :delete, form_class: 'c-dropdown__item'  %>
             </div>
-          </div>
+          </details>
         </div>
       </div>
     </div>

app/views/shared/_search_bar.html.erb

@@ -13,14 +13,14 @@
   <% end %>
 
   <div class='o-grid__item o-grid__item--justify-end' span@medium='7-7' span='6-7'>
-    <div data-controller='dropdown' class='c-dropdown' data-test-id='search_bar_menu'>
-      <span data-action='click->dropdown#show'><%= avatar_tag Current.user %></span>
-      <div data-dropdown-target='list' class='u-display-none c-dropdown__list'>
+    <details class='c-dropdown' data-test-id='search_bar_menu'>
+      <summary><%= avatar_tag Current.user %></summary>
+      <div class='c-dropdown__list'>
         <%= link_to t('label.settings'), setting_path, class: 'c-dropdown__item' %>
         <%= link_to t('label.manage_users'), users_path, class: 'c-dropdown__item' if is_admin? %>
         <%= link_to t('label.update_profile'), edit_user_path(Current.user), class: 'c-dropdown__item' %>
         <%= button_to t('label.logout'), session_path, method: :delete, form_class: 'c-dropdown__item' %>
       </div>
-    </div>
+    </details>
   </div>
 </div>

test/system/albums_test.rb

@@ -20,7 +20,7 @@ class AlbumsSystemTest < ApplicationSystemTestCase
 
   test "show next page albums when scroll to the bottom" do
     visit albums_url
-    find(:test_id, "main_content").scroll_to :bottom
+    scroll_to :bottom
 
     assert_selector(:test_id, "album_card", count: Pagy::DEFAULT[:items] * 2)
   end

test/system/artists_test.rb

@@ -20,7 +20,7 @@ class ArtistsSystemTest < ApplicationSystemTestCase
 
   test "show next page artists when scroll to the bottom" do
     visit artists_url
-    find(:test_id, "main_content").scroll_to :bottom
+    scroll_to :bottom
 
     assert_selector(:test_id, "artist_card", count: Pagy::DEFAULT[:items] * 2)
   end

test/system/songs_test.rb

@@ -27,7 +27,7 @@ class SongsSystemTest < ApplicationSystemTestCase
 
   test "show next page songs when scroll to the bottom" do
     visit songs_url
-    find(:test_id, "main_content").scroll_to :bottom
+    scroll_to :bottom
 
     assert_selector(:test_id, "song_item", count: Pagy::DEFAULT[:items] * 2)
   end