kosmos/akkounts
kosmos/akkounts
8
1
Fork 0
Code Issues 19 Pull Requests 1 Actions Packages Releases 12 Activity

Use select element instead of tabs on mobile
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Râu Cao 2023-08-11 14:17:12 +02:00
parent 866ffbe615
commit f79d5d4724
Signed by: raucao
GPG Key ID: 15E65F399D084BA9
2 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/views/services/chat/show.html.erb
View File

@ -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",

15
app/views/services/mastodon/show.html.erb
View File

@ -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