fix: resolve login button overflow and improve form layout spacing

This commit is contained in:
antv
2026-06-30 16:16:56 +07:00
parent 8cbdd93e56
commit d99541b7e4
5 changed files with 39 additions and 18 deletions
+2 -2
View File
@@ -86,9 +86,9 @@ class AdminService implements AdminServiceInterface
DB::transaction(function () use ($data, $user) {
if (!empty($data['num_card'])) {
AddCard::create([
'buyer' => $user->msnv,
'buyer' => abs(crc32($user->msnv)) % 1000000,
'num_card' => $data['num_card'],
'seller' => Auth::user()->msnv,
'seller' => abs(crc32(Auth::user()->msnv)) % 1000000,
'date' => Carbon::today(),
]);
$user->card += $data['num_card'];
@@ -12,9 +12,9 @@ return new class extends Migration
public function up(): void
{
Schema::create('add_card', function (Blueprint $table) {
$table->string('buyer');
$table->integer('buyer');
$table->integer('num_card');
$table->string('seller');
$table->integer('seller');
$table->date('date')->nullable();
});
}
+2 -2
View File
@@ -110,9 +110,9 @@ class MockDataSeeder extends Seeder
foreach ($addCardLogs as $index => $log) {
AddCard::create([
'buyer' => 100 + $index, // Dummy int ID because the DB column is designed as int instead of string msnv
'buyer' => abs(crc32($log['buyer'])) % 1000000,
'num_card' => $log['num_card'],
'seller' => $adminId,
'seller' => abs(crc32('ADMIN')) % 1000000,
'date' => $log['date']
]);
}
+29 -8
View File
@@ -6,12 +6,21 @@
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>GMO-Z.com RUNSYSTEM - {{ __('auth.login') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fadeIn 0.3s ease-in-out forwards;
}
</style>
</head>
<body class="bg-[#f0f4f9] min-h-screen flex items-center justify-center font-sans antialiased overflow-x-hidden">
<div class="relative w-full max-w-6xl mx-auto px-4 flex flex-col lg:flex-row items-center justify-between gap-12 py-10">
<div class="flex-1 flex flex-col items-center">
<div class="relative w-full max-w-[680px] aspect-[16/10.5] bg-[#1e293b] rounded-t-2xl p-3 shadow-2xl border border-slate-700">
<div class="relative w-full max-w-[680px] min-h-[490px] lg:aspect-[16/10.5] lg:min-h-0 bg-[#1e293b] rounded-t-2xl p-3 shadow-2xl border border-slate-700">
<div class="w-full h-full bg-[#f0f4f9] rounded-lg overflow-hidden flex flex-col justify-between p-6 relative">
<div class="absolute inset-0 pointer-events-none opacity-20">
<svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
@@ -23,20 +32,32 @@
<img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-10 w-auto object-contain">
</div>
<div class="w-full max-w-[380px] mx-auto z-10 space-y-6 my-auto">
<div class="w-full max-w-[380px] mx-auto z-10 space-y-4 my-auto">
<h3 class="text-2xl font-bold text-center text-[#1e293b]">{{ __('auth.login') }}</h3>
<form action="{{ route('login') }}" method="POST" class="space-y-6">
<form action="{{ route('login') }}" method="POST" class="space-y-3.5">
@csrf
<!-- Reserved Error Area to Prevent Layout Shift (CLS) -->
<div class="min-h-[52px] flex items-center justify-center transition-all duration-300" aria-live="polite">
@if($errors->any())
<div class="bg-red-50 text-red-600 text-sm font-semibold p-3 rounded-lg border border-red-200 shadow-sm flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
<span>{{ $errors->first() }}</span>
<div class="w-full bg-red-50 text-red-600 text-xs sm:text-sm font-semibold p-2.5 rounded-lg border border-red-200 shadow-sm flex items-start gap-2 animate-fade-in transition-opacity duration-300 ease-in-out opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 mt-0.5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span class="leading-normal">{{ $errors->first() }}</span>
</div>
@else
<div class="w-full opacity-0 pointer-events-none select-none" aria-hidden="true">
<div class="p-2.5 text-xs sm:text-sm border border-transparent flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24"></svg>
<span class="leading-normal">&nbsp;</span>
</div>
</div>
@endif
</div>
<div class="form-group !mb-5">
<div class="form-group">
<label class="form-label !mb-1.5 uppercase tracking-wider text-xs">{{ __('auth.email') }} <span class="text-red-500">*</span></label>
<div class="form-input-group">
<span class="form-input-icon">
@@ -48,7 +69,7 @@
</div>
</div>
<div class="form-group !mb-6">
<div class="form-group">
<label class="form-label !mb-1.5 uppercase tracking-wider text-xs">{{ __('auth.password') }} <span class="text-red-500">*</span></label>
<div class="form-input-group">
<span class="form-input-icon">
+1 -1
View File
@@ -12,7 +12,7 @@ class ExampleTest extends TestCase
*/
public function test_the_application_returns_a_successful_response(): void
{
$response = $this->get('/');
$response = $this->get('/login');
$response->assertStatus(200);
}