From f79d5d4724a2da402572071fcb5dbb4e0e46fd5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kip.pe>
Date: Fri, 11 Aug 2023 14:17:12 +0200
Subject: [PATCH] Use select element instead of tabs on mobile

---
 app/views/services/chat/show.html.erb     | 29 ++++++++++++++++++-----
 app/views/services/mastodon/show.html.erb | 15 +++++++++++-
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/app/views/services/chat/show.html.erb b/app/views/services/chat/show.html.erb
index 98b0895..5f65971 100644
--- a/app/views/services/chat/show.html.erb
+++ b/app/views/services/chat/show.html.erb
@@ -48,7 +48,19 @@
          data-tabs-active-tab-class="-mb-px border-gray-200 border-l border-t border-r rounded-t text-indigo-600 hover:text-indigo-600"
          data-tabs-inactive-tab-class="text-gray-500 hover:text-gray-700"
          class="mb-12">
-      <ul class="list-reset flex mb-8 border-gray-200 border-b">
+      <select data-action="tabs#change" data-tabs-target="select"
+              class="block w-full mb-8 sm:hidden">
+        <optgroup label="Mobile">
+          <option>Android</option>
+          <option>iOS</option>
+        </optgroup>
+        <optgroup label="Desktop">
+          <option>Linux</option>
+          <option>Windows</option>
+          <option>macOS</option>
+        </optgroup>
+      </select>
+      <ul class="hidden sm:flex list-reset mb-8 border-gray-200 border-b">
         <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
           <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
             Android
@@ -81,7 +93,8 @@
         <!-- </li> -->
       </ul>
 
-      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+      <div id="apps-android" class="hidden grid grid-cols-1 gap-6"
+           data-tabs-target="panel">
         <%= render AppInfoComponent.new(
           name: "Conversations",
           description: "The gold standard for Jabber on mobile devices",
@@ -93,7 +106,8 @@
           ]
         ) %>
       </div>
-      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+      <div id="apps-ios" class="hidden grid grid-cols-1 gap-6"
+           data-tabs-target="panel">
         <%= render AppInfoComponent.new(
           name: "Siskin IM",
           description: "Lightweight and powerful chat app for iPhone and iPad",
@@ -114,7 +128,8 @@
           ]
         ) %>
       </div>
-      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+      <div id="apps-linux" class="hidden grid grid-cols-1 gap-6"
+           data-tabs-target="panel">
         <%= render AppInfoComponent.new(
           name: "Dino",
           description: "A modern and simple chat app for Linux (good for GNOME)",
@@ -141,7 +156,8 @@
           ]
         ) %>
       </div>
-      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+      <div id="apps-windows" class="hidden grid grid-cols-1 gap-6"
+           data-tabs-target="panel">
         <%= render AppInfoComponent.new(
           name: "Gajim",
           description: "A fully-featured chat app for Linux and Windows",
@@ -153,7 +169,8 @@
           ]
         ) %>
       </div>
-      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+      <div id="apps-mac" class="hidden grid grid-cols-1 gap-6"
+           data-tabs-target="panel">
         <%= render AppInfoComponent.new(
           name: "Beagle IM",
           description: "Lightweight and powerful chat app for macOS",
diff --git a/app/views/services/mastodon/show.html.erb b/app/views/services/mastodon/show.html.erb
index 8193a01..d6cc0f8 100644
--- a/app/views/services/mastodon/show.html.erb
+++ b/app/views/services/mastodon/show.html.erb
@@ -46,7 +46,20 @@
          data-tabs-active-tab-class="-mb-px border-gray-200 border-l border-t border-r rounded-t text-indigo-600 hover:text-indigo-600"
          data-tabs-inactive-tab-class="text-gray-500 hover:text-gray-700"
          class="mb-12">
-      <ul class="list-reset flex mb-8 border-gray-200 border-b">
+      <select data-action="tabs#change" data-tabs-target="select"
+              class="block w-full mb-8 sm:hidden">
+        <option>Web</option>
+        <optgroup label="Mobile">
+          <option>Android</option>
+          <option>iOS</option>
+        </optgroup>
+        <optgroup label="Desktop">
+          <option>Linux</option>
+          <option>Windows</option>
+          <option>macOS</option>
+        </optgroup>
+      </select>
+      <ul class="hidden sm:flex list-reset mb-8 border-gray-200 border-b">
         <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
           <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
             Web