dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: Improve label positioning in input and checkbox components

Browse Source
This commit is contained in:
Andras Bacsai
2024-09-24 21:04:04 +02:00
parent d6b4e33db3
commit 70dfa101ef
3 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/views/components/forms/checkbox.blade.php
View File

@@ -8,8 +8,8 @@
'hideLabel' => false, 'hideLabel' => false,
]) ])
<div class="flex flex-row items-center gap-4 px-2 py-1 form-control min-w-fit dark:hover:bg-coolgray-100"> <div class="flex flex-row items-center py-1 form-control min-w-fit dark:hover:bg-coolgray-100">
@if(!$hideLabel) @if (!$hideLabel)
<label class="flex gap-4 px-0 min-w-fit label"> <label class="flex gap-4 px-0 min-w-fit label">
<span class="flex gap-2"> <span class="flex gap-2">
@if ($label) @if ($label)

4
resources/views/components/forms/input.blade.php
View File

@@ -3,7 +3,7 @@
'w-full' => !$isMultiline, 'w-full' => !$isMultiline,
])> ])>
@if ($label) @if ($label)
<label class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }} <label class="flex gap-1 items-center mb-1 text-sm font-medium">{{ $label }}
@if ($required) @if ($required)
<x-highlighted text="*" /> <x-highlighted text="*" />
@endif @endif
@@ -16,7 +16,7 @@
<div class="relative" x-data="{ type: 'password' }"> <div class="relative" x-data="{ type: 'password' }">
@if ($allowToPeak) @if ($allowToPeak)
<div x-on:click="changePasswordFieldType" <div x-on:click="changePasswordFieldType"
class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer hover:dark:text-white"> class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer hover:dark:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5" <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />

44
resources/views/components/modal-confirmation.blade.php
View File

@@ -139,7 +139,7 @@
@endif @endif
@else @else
@if ($buttonFullWidth) @if ($buttonFullWidth)
<x-forms.button @click="modalOpen=true" class="flex w-full gap-2" wire:target> <x-forms.button @click="modalOpen=true" class="flex gap-2 w-full" wire:target>
{{ $buttonTitle }} {{ $buttonTitle }}
</x-forms.button> </x-forms.button>
@else @else
@@ -162,17 +162,17 @@
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95" x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
class="relative w-full py-6 border rounded min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300"> class="relative w-full py-6 border rounded min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
<div class="flex items-center justify-between pb-3"> <div class="flex justify-between items-center pb-3">
<h3 class="text-2xl font-bold pr-8">{{ $title }}</h3> <h3 class="pr-8 text-2xl font-bold">{{ $title }}</h3>
<button @click="modalOpen = false; resetModal()" <button @click="modalOpen = false; resetModal()"
class="absolute top-2 right-2 flex items-center justify-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300"> class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"> stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
</div> </div>
<div class="relative w-auto pb-8"> <div class="relative pb-8 w-auto">
@if (!empty($checkboxes)) @if (!empty($checkboxes))
<!-- Step 1: Select actions --> <!-- Step 1: Select actions -->
<div x-show="step === 1"> <div x-show="step === 1">
@@ -180,9 +180,9 @@
<h4>Actions</h4> <h4>Actions</h4>
</div> </div>
@foreach ($checkboxes as $index => $checkbox) @foreach ($checkboxes as $index => $checkbox)
<div class="flex items-center justify-between mb-2"> <div class="flex justify-between items-center mb-2">
<label for="{{ $checkbox['id'] }}" <label for="{{ $checkbox['id'] }}"
class="text-sm leading-5 text-gray-700 dark:text-gray-300 flex-grow pr-4"> class="flex-grow pr-4 text-sm leading-5 text-gray-700 dark:text-gray-300">
{{ $checkbox['label'] }} {{ $checkbox['label'] }}
</label> </label>
<x-forms.checkbox :id="$checkbox['id']" :wire:model="$checkbox['id']" <x-forms.checkbox :id="$checkbox['id']" :wire:model="$checkbox['id']"
@@ -196,7 +196,7 @@
<!-- Step 2: Confirm deletion --> <!-- Step 2: Confirm deletion -->
<div x-show="step === 2"> <div x-show="step === 2">
<div class="bg-error border-l-4 border-red-500 text-white p-4 mb-4" role="alert"> <div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
<p class="font-bold">Warning</p> <p class="font-bold">Warning</p>
<p>This operation is permanent and cannot be undone. Please think again before proceeding! <p>This operation is permanent and cannot be undone. Please think again before proceeding!
</p> </p>
@@ -205,7 +205,7 @@
<ul class="mb-4 space-y-2"> <ul class="mb-4 space-y-2">
@foreach ($actions as $action) @foreach ($actions as $action)
<li class="flex items-center text-red-500"> <li class="flex items-center text-red-500">
<svg class="w-5 h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" <svg class="flex-shrink-0 mr-2 w-5 h-5" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path> d="M6 18L18 6M6 6l12 12"></path>
@@ -216,7 +216,7 @@
@foreach ($checkboxes as $checkbox) @foreach ($checkboxes as $checkbox)
<template x-if="selectedActions.includes('{{ $checkbox['id'] }}')"> <template x-if="selectedActions.includes('{{ $checkbox['id'] }}')">
<li class="flex items-center text-red-500"> <li class="flex items-center text-red-500">
<svg class="w-5 h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" <svg class="flex-shrink-0 mr-2 w-5 h-5" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path> d="M6 18L18 6M6 6l12 12"></path>
@@ -228,16 +228,16 @@
</ul> </ul>
@if ($confirmWithText) @if ($confirmWithText)
<div class="mb-4"> <div class="mb-4">
<h4 class="text-lg font-semibold mb-2">Confirm Actions</h4> <h4 class="mb-2 text-lg font-semibold">Confirm Actions</h4>
<p class="text-sm mb-2">{{ $confirmationLabel }}</p> <p class="mb-2 text-sm">{{ $confirmationLabel }}</p>
<div class="relative mb-2"> <div class="relative mb-2">
<input type="text" x-model="confirmationText" <input type="text" x-model="confirmationText"
class="w-full p-2 pr-10 rounded text-black input cursor-text" readonly> class="p-2 pr-10 w-full text-black rounded cursor-text input" readonly>
<button @click="copyConfirmationText()" <button @click="copyConfirmationText()"
class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700" class="absolute right-2 top-1/2 text-gray-500 transform -translate-y-1/2 hover:text-gray-700"
title="Copy confirmation text" x-ref="copyButton"> title="Copy confirmation text" x-ref="copyButton">
<template x-if="!copied"> <template x-if="!copied">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20"
fill="currentColor"> fill="currentColor">
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" /> <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
<path <path
@@ -245,7 +245,7 @@
</svg> </svg>
</template> </template>
<template x-if="copied"> <template x-if="copied">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500" <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500"
viewBox="0 0 20 20" fill="currentColor"> viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" <path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
@@ -256,18 +256,18 @@
</div> </div>
<label for="userConfirmationText" <label for="userConfirmationText"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mt-4"> class="block mt-4 text-sm font-medium text-gray-700 dark:text-gray-300">
{{ $shortConfirmationLabel }} {{ $shortConfirmationLabel }}
</label> </label>
<input type="text" x-model="userConfirmationText" <input type="text" x-model="userConfirmationText"
class="w-full p-2 rounded text-black input mt-1"> class="p-2 mt-1 w-full text-black rounded input">
</div> </div>
@endif @endif
</div> </div>
<!-- Step 3: Password confirmation --> <!-- Step 3: Password confirmation -->
<div x-show="step === 3 && confirmWithPassword"> <div x-show="step === 3 && confirmWithPassword">
<div class="bg-error border-l-4 border-red-500 text-white p-4 mb-4" role="alert"> <div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
<p class="font-bold">Final Confirmation</p> <p class="font-bold">Final Confirmation</p>
<p>Please enter your password to confirm this destructive action.</p> <p>Please enter your password to confirm this destructive action.</p>
</div> </div>
@@ -276,11 +276,11 @@
class="block text-sm font-medium text-gray-700 dark:text-gray-300"> class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Your Password Your Password
</label> </label>
<input type="password" id="password-confirm" x-model="password" class="input w-full" <input type="password" id="password-confirm" x-model="password" class="w-full input"
placeholder="Enter your password"> placeholder="Enter your password">
<p x-show="passwordError" x-text="passwordError" class="text-red-500 text-sm mt-1"></p> <p x-show="passwordError" x-text="passwordError" class="mt-1 text-sm text-red-500"></p>
@error('password') @error('password')
<p class="text-red-500 text-sm mt-1">{{ $message }}</p> <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
@enderror @enderror
</div> </div>
</div> </div>