Moved from Tailwind to Boostrap

This commit is contained in:
amikhaylov
2026-05-19 17:26:27 +03:00
parent 299464efc1
commit 34807e5a99
59 changed files with 491 additions and 4737 deletions
+163
View File
@@ -0,0 +1,163 @@
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<!-- Кнопка назад -->
<div class="mb-3">
<a href="{{ route('places.index') }}" class="text-decoration-none text-dark fw-bold">
Назад к списку
</a>
</div>
<div class="card shadow-none">
<div class="card-header fw-bold">
Добавить новую локацию
</div>
<div class="card-body p-4">
<form method="POST" action="{{ route('places.store') }}">
@csrf
<!-- Название -->
<div class="mb-4">
<label for="name" class="form-label fw-bold">Название места</label>
<input type="text" name="name" id="name"
class="form-control @error('name') is-invalid @enderror"
value="{{ old('name') }}" required placeholder="Например: Главный офис">
@error('name')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<!-- Адрес -->
<div class="mb-4">
<label for="address" class="form-label fw-bold">Полный адрес</label>
<input type="text" name="address" id="address"
class="form-control @error('address') is-invalid @enderror"
value="{{ old('address') }}" placeholder="Улица, дом, город">
@error('address')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="mb-4">
<label for="phone" class="form-label fw-bold">Телефон</label>
<input type="text" name="phone" id="phone"
class="form-control @error('phone') is-invalid @enderror"
value="{{ old('phone') }}" placeholder="Телефон">
@error('phone')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="mb-4">
<label for="url" class="form-label fw-bold">URL</label>
<input type="text" name="url" id="url"
class="form-control @error('url') is-invalid @enderror"
value="{{ old('url') }}" placeholder="Адрес сайта">
@error('url')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<!-- GPS Координаты -->
<div class="col-md-6 mb-4">
<label for="coordinates" class="form-label fw-bold">GPS Координаты</label>
<div class="input-group">
<span class="input-group-text">
<svg xmlns="http://w3.org" width="16" height="16" fill="currentColor" class="bi bi-pin-map" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M3.1 11.2a.5.5 0 0 1 .4-.2H6a.5.5 0 0 1 0 1H3.75L1.5 15h13l-2.25-3H10a.5.5 0 0 1 0-1h2.5a.5.5 0 0 1 .4.2l3 4a.5.5 0 0 1-.4.8H.5a.5.5 0 0 1-.4-.8z"/>
<path fill-rule="evenodd" d="M8 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 4"/>
</svg>
</span>
<input type="text" name="gps" id="gps"
class="form-control @error('gps') is-invalid @enderror"
value="{{ old('gps') }}" placeholder="55.7558, 37.6173">
</div>
@error('gps')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<!-- Описание (необязательно) -->
<div class="mb-4">
<label for="description" class="form-label fw-bold">Описание</label>
<textarea name="description" id="description" rows="3"
class="form-control @error('description') is-invalid @enderror"
placeholder="Дополнительная информация">{{ old('description') }}</textarea>
</div>
@if ($errors->any())
<div class="alert alert-danger border-2 shadow-none mb-4">
<div class="fw-bold mb-2">При заполнении формы возникли ошибки:</div>
<ul class="mb-0">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="d-grid">
<button type="submit" class="btn btn-secondary">
Сохранить локацию
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
const phoneInput = document.getElementById('phone');
phoneInput.addEventListener('input', function (e) {
let input = e.target.value.replace(/\D/g, ''); // Удаляем всё, кроме цифр
// Если первая цифра 8 или 7, убираем её для единообразия
if (input.startsWith('7') || input.startsWith('8')) {
input = input.substring(1);
}
let result = '+7';
if (input.length > 0) {
result += ' (' + input.substring(0, 3);
}
if (input.length >= 4) {
result += ') ' + input.substring(3, 6);
}
if (input.length >= 7) {
result += '-' + input.substring(6, 8);
}
if (input.length >= 9) {
result += '-' + input.substring(8, 10);
}
e.target.value = result;
});
// Блокируем удаление префикса +7
phoneInput.addEventListener('keydown', function(e) {
if (e.target.selectionStart < 3 && (e.key === 'Backspace' || e.key === 'Delete')) {
e.preventDefault();
}
});
});
const coordsInput = document.getElementById('gps');
coordsInput.addEventListener('input', function(e) {
// Разрешаем только цифры, точку, запятую, минус и пробел
e.target.value = e.target.value.replace(/[^0-9.,\- ]/g, '');
});
</script>
@endpush
+73 -64
View File
@@ -1,3 +1,4 @@
@extends('layouts.app')
@push('scripts')
<script>
/**
@@ -12,70 +13,78 @@
};
</script>
@endpush
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Концертные площадки') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
<!-- Сюда вставляйте вашу таблицу или данные -->
<div class="p-6 text-gray-900">
<table class="min-w-full border">
<thead>
<tr class="bg-gray-100">
<th class="border p-2">ID</th>
<th class="border p-2">Название</th>
<th class="border p-2">Адрес</th>
<th class="border p-2 w-48">Телефон</th>
<th class="border p-2 ">Карта</th>
</tr>
</thead>
<tbody>
@foreach($places as $place)
<tr>
<td class="border p-2">{{ $place->id }}</td>
<td class="border p-2">
<a class="text-indigo-600 hover:text-indigo-900 transition-colors"
href="{{ $place->url }}">{{ $place->name }}</a>
</td>
<td class="border p-2">{{ $place->address }}</td>
<td class="border p-2">{{ $place->phone }}</td>
<td class="p-2 border text-center w-12">
<a href="#" title="Показать на карте"
class="text-gray-500 hover:text-blue-600 transition-colors flex items-center justify-center"
onclick="openMap('map', {{ $place->id }}); return false;">
<svg class="size-6 w-5 h-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
</svg>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="mt-4 flex justify-start pagination-wrapper">
{{ $places->links() }}
</div>
</div>
</div>
</div>
@section('content')
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Список локаций</h2>
<a href="{{ route('places.create') }}" class="btn btn-primary">Добавить место</a>
</div>
</div>
</x-app-layout>
@if(session('success'))
<div class="alert alert-success border-2 fw-bold mb-4" style="border-color: #0f5132 !important;">
{{ session('success') }}
</div>
@endif
<div class="table-responsive">
@if(session('success'))
<div class="alert alert-success border-2 fw-bold mb-4" style="border-color: #0f5132 !important;">
{{ session('success') }}
</div>
@endif
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th>ID</th>
<th>Название</th>
<th>Адрес</th>
<th>Телефон</th>
<th>Карта</th>
<th>Действия</th>
</tr>
</thead>
<tbody>
@forelse($places as $place)
<tr class="align-middle">
<td>{{ $place->id }}</td>
<td><a class="text-indigo-600 hover:text-indigo-900 transition-colors"
href="{{ $place->url }}">{{ $place->name }}</a></td>
<td>{{ $place->address ?? '—' }}</td>
<td>{{ $place->phone }}</td>
<td class="text-center">
<a href="#" title="Показать на карте"
class="text-gray-500 hover:text-blue-600 transition-colors flex items-center justify-center"
onclick="openMap('map', {{ $place->id }}); return false;">
<svg xmlns="http://w3.org" width="24" height="24" fill="currentColor" class="bi bi-geo-alt-fill me-2" viewBox="0 0 16 16">
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/>
</svg>
</a>
</td>
<td>
<div class="d-flex justify-left gap-2">
<a href="#" class="btn btn-outline-secondary">Редактировать</a>
<form action="{{ route('places.delete', $place->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Удалить эту локацию?')">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-outline-danger">Удалить</button>
</form>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="5" class="text-center py-4 text-muted">
Локаций пока нет.
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<style>
/* Прямая правка стилей без компиляции Tailwind */
nav[role="navigation"] div,
nav[role="navigation"] a,
nav[role="navigation"] span {
background-color: white !important;
color: #374151 !important; /* Серый текст */
border-color: #e5e7eb !important; /* Светлая рамка */
}
</style>
<div class="d-flex justify-left mt-4">
{{ $places->links() }}
</div>
</div>
@endsection
@@ -0,0 +1,81 @@
@push('scripts')
<script>
/**
* Открывает всплывающее окно для локации
*/
const openMap = (name, id, width = 640, height = 480) => {
const url = `/${name}/index/id/${id}`;
const windowName = `${name}_window_${id}`;
const features = `width=${width},height=${height},scrollbars=yes,resizable=yes`;
window.open(url, windowName, features);
};
</script>
@endpush
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Концертные площадки') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
<!-- Сюда вставляйте вашу таблицу или данные -->
<div class="p-6 text-gray-900">
<table class="min-w-full border">
<thead>
<tr class="bg-gray-100">
<th class="border p-2">ID</th>
<th class="border p-2">Название</th>
<th class="border p-2">Адрес</th>
<th class="border p-2 w-48">Телефон</th>
<th class="border p-2 ">Карта</th>
</tr>
</thead>
<tbody>
@foreach($places as $place)
<tr>
<td class="border p-2">{{ $place->id }}</td>
<td class="border p-2">
<a class="text-indigo-600 hover:text-indigo-900 transition-colors"
href="{{ $place->url }}">{{ $place->name }}</a>
</td>
<td class="border p-2">{{ $place->address }}</td>
<td class="border p-2">{{ $place->phone }}</td>
<td class="p-2 border text-center w-12">
<a href="#" title="Показать на карте"
class="text-gray-500 hover:text-blue-600 transition-colors flex items-center justify-center"
onclick="openMap('map', {{ $place->id }}); return false;">
<svg class="size-6 w-5 h-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
</svg>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="mt-4 flex justify-start pagination-wrapper">
{{ $places->links() }}
</div>
</div>
</div>
</div>
</div>
</div>
</x-app-layout>
<style>
/* Прямая правка стилей без компиляции Tailwind */
nav[role="navigation"] div,
nav[role="navigation"] a,
nav[role="navigation"] span {
background-color: white !important;
color: #374151 !important; /* Серый текст */
border-color: #e5e7eb !important; /* Светлая рамка */
}
</style>