chore: Improve menu item styling and spacing in service configuration and index views

This commit is contained in:
Andras Bacsai 2024-05-06 14:30:50 +02:00
parent 662c6f3cc2
commit a54f0ed94d
4 changed files with 4 additions and 4 deletions

View File

@ -3,7 +3,7 @@
<livewire:project.shared.configuration-checker :resource="$application" /> <livewire:project.shared.configuration-checker :resource="$application" />
<livewire:project.application.heading :application="$application" /> <livewire:project.application.heading :application="$application" />
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 pt-6 sm:flex-row"> <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
<div class="flex gap-4 overflow-x-scroll sm:gap-2 sm:flex-col sm:overflow-x-hidden scrollbar whitespace-nowrap"> <div class="flex flex-col items-start gap-2 min-w-fit">
<a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'" <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
@click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a> @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
@if ($application->destination->server->isSwarm()) @if ($application->destination->server->isSwarm())

View File

@ -3,7 +3,7 @@
<livewire:project.shared.configuration-checker :resource="$database" /> <livewire:project.shared.configuration-checker :resource="$database" />
<livewire:project.database.heading :database="$database" /> <livewire:project.database.heading :database="$database" />
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 pt-6 sm:flex-row"> <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
<div class="flex gap-4 overflow-x-scroll sm:gap-2 sm:flex-col sm:overflow-x-hidden scrollbar whitespace-nowrap"> <div class="flex flex-col items-start gap-2 min-w-fit">
<a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'" <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
@click.prevent="activeTab = 'general'; @click.prevent="activeTab = 'general';
window.location.hash = 'general'" window.location.hash = 'general'"

View File

@ -1,7 +1,7 @@
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }"> <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }">
<livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" /> <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
<div class="flex flex-col h-full gap-8 pt-6 sm:flex-row"> <div class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
<div class="flex gap-2 overflow-x-scroll sm:flex-col xl:w-48 sm:overflow-x-hidden scrollbar whitespace-nowrap"> <div class="flex flex-col items-start gap-2 min-w-fit">
<a class="menu-item" <a class="menu-item"
class="{{ request()->routeIs('project.service.configuration') ? 'menu-item-active' : '' }}" class="{{ request()->routeIs('project.service.configuration') ? 'menu-item-active' : '' }}"
href="{{ route('project.service.configuration', [...$parameters, 'stack_service_uuid' => null]) }}"> href="{{ route('project.service.configuration', [...$parameters, 'stack_service_uuid' => null]) }}">