isaacclad/ladill-transfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make launcher scroll affordance visible on open.
Deploy Ladill Transfer / deploy (push) Successful in 27s
Details

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-29 13:52:26 +00:00
co-authored by Cursor
parent d4795cff3c
commit 5177360395
2 changed files with 80 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+57 -7
View File
@@ -199,36 +199,86 @@ html.qr-mobile-page body {
}
}
/* Ladill app launcher — cap at 6 rows (18 apps), always-visible scroll indicator */
/* Ladill app launcher — cap at 6 rows (18 apps), always-visible scroll cues */
.ladill-launcher-apps-wrap {
position: relative;
}
.ladill-launcher-apps {
max-height: calc(6 * 5.25rem + 5 * 0.25rem);
overflow-y: scroll;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgb(148 163 184) rgb(241 245 249);
scrollbar-color: rgb(100 116 139) rgb(226 232 240);
margin-right: -0.25rem;
padding-right: 0.25rem;
}
/* Clip the last visible row so the next row peeks — scroll is obvious without hovering. */
.ladill-launcher-apps--peek {
max-height: calc(6 * 5.25rem + 5 * 0.25rem - 1.75rem);
}
.ladill-launcher-apps::-webkit-scrollbar {
-webkit-appearance: none;
width: 8px;
width: 10px;
}
.ladill-launcher-apps::-webkit-scrollbar-track {
background: rgb(241 245 249);
background: rgb(226 232 240);
border-radius: 9999px;
}
.ladill-launcher-apps::-webkit-scrollbar-thumb {
background-color: rgb(148 163 184);
background-color: rgb(100 116 139);
border-radius: 9999px;
min-height: 2.5rem;
border: 2px solid rgb(241 245 249);
border: 2px solid rgb(226 232 240);
background-clip: padding-box;
}
.ladill-launcher-apps::-webkit-scrollbar-thumb:hover {
background-color: rgb(100 116 139);
background-color: rgb(71 85 105);
}
/* Always-visible rail — does not rely on OS overlay scrollbars. */
.ladill-launcher-scroll-rail {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 10px;
border-radius: 9999px;
background: rgb(226 232 240);
pointer-events: none;
}
.ladill-launcher-scroll-fade {
position: absolute;
left: 0;
right: 12px;
bottom: 0;
height: 2.25rem;
background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255));
pointer-events: none;
}
.ladill-launcher-scroll-more {
position: absolute;
left: 50%;
bottom: 0.125rem;
z-index: 1;
display: flex;
height: 1.25rem;
width: 1.25rem;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
align-items: center;
justify-content: center;
border-radius: 9999px;
background: rgb(255 255 255);
color: rgb(100 116 139);
box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
pointer-events: none;
}
resources/views/partials/launcher.blade.php
+23 -11
View File
@@ -10,6 +10,7 @@
config('ladill_launcher.apps', []),
fn (array $app) => parse_url($app['url'], PHP_URL_HOST) !== $selfHost
));
$launcherOverflows = count($launcherApps) > 18;
@endphp
@if (! empty($launcherApps))
<div class="relative" x-data="{ appsOpen: false }" @click.outside="appsOpen = false" @keydown.escape.window="appsOpen = false">
@@ -37,18 +38,29 @@
'bottom-full left-0 mb-2' => $sidebar,
])>
<p class="px-1 pb-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">All apps</p>
<div class="ladill-launcher-apps">
<div class="grid grid-cols-3 gap-1">
@foreach ($launcherApps as $app)
<a href="{{ $app['url'] }}"
class="flex min-h-[5.25rem] flex-col items-center justify-center gap-1.5 rounded-xl px-2 py-3 text-center transition hover:bg-indigo-50">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100">
<img src="{{ asset('images/launcher-icons/'.$app['icon']) }}?v={{ @filemtime(public_path('images/launcher-icons/'.$app['icon'])) ?: '1' }}" alt="" class="h-5 w-5 object-contain" width="20" height="20">
</span>
<span class="text-[11px] font-medium leading-tight text-slate-700">{{ $app['name'] }}</span>
</a>
@endforeach
<div @class(['ladill-launcher-apps-wrap' => $launcherOverflows])>
<div @class(['ladill-launcher-apps', 'ladill-launcher-apps--peek' => $launcherOverflows])>
<div class="grid grid-cols-3 gap-1">
@foreach ($launcherApps as $app)
<a href="{{ $app['url'] }}"
class="flex min-h-[5.25rem] flex-col items-center justify-center gap-1.5 rounded-xl px-2 py-3 text-center transition hover:bg-indigo-50">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100">
<img src="{{ asset('images/launcher-icons/'.$app['icon']) }}?v={{ @filemtime(public_path('images/launcher-icons/'.$app['icon'])) ?: '1' }}" alt="" class="h-5 w-5 object-contain" width="20" height="20">
</span>
<span class="text-[11px] font-medium leading-tight text-slate-700">{{ $app['name'] }}</span>
</a>
@endforeach
</div>
</div>
@if ($launcherOverflows)
<div class="ladill-launcher-scroll-rail" aria-hidden="true"></div>
<div class="ladill-launcher-scroll-fade" aria-hidden="true"></div>
<div class="ladill-launcher-scroll-more" aria-hidden="true">
<svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
</svg>
</div>
@endif
</div>
</div>
</div>