Skip to content

Commit

Permalink
Визуальное оформление dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
delaynore committed May 13, 2024
1 parent fd90868 commit 1e26671
Show file tree
Hide file tree
Showing 10 changed files with 140 additions and 77 deletions.
1 change: 1 addition & 0 deletions app/Models/Concept.php
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
* @property string $name
* @property string $definition
* @property string $fk_dictionary_id
* @property string $fk_parent_concept_id
*/
class Concept extends Model
{
Expand Down
10 changes: 10 additions & 0 deletions lang/ru/dashboard.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<?php

return [
'sidebar' => [
'menu' => [
'export' => 'Экспорт списка понятий',
'create' => 'Создать новое понятие'
]
]
];
34 changes: 15 additions & 19 deletions resources/views/components/dashboard/sidebar/menu.blade.php
Original file line number Diff line number Diff line change
@@ -1,24 +1,20 @@
<div class="inline-flex rounded-md shadow-sm" role="group">
<a href="{{route('concept.create', ['dictionary' =>$dictionary])}}" class="inline-flex items-center px-2 py-1 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
<svg class="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7.757v8.486M7.757 12h8.486M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
<div class="flex overflow-hidden bg-white border divide-x rounded-lg rtl:flex-row-reverse dark:bg-gray-900 dark:border-gray-700 dark:divide-gray-700">
<a href="{{ route('concept.create', $dictionary) }}" title="{{__('dashboard.sidebar.menu.create')}}" data-tooltip-placement="bottom" data-tooltip-target="tooltip-create-concept" class="hover:text-blue-600 dark:hover:text-blue-500 px-4 py-2 font-medium text-gray-600 transition-colors duration-200 sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
<svg class="w-5 h-5 sm:w-6 sm:h-6" data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>

<button type="button" class="inline-flex items-center px-2 py-1 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2" />
</svg>
</button>
<button type="button" class="inline-flex items-center px-2 py-1 text-sm font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
<svg class="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7.757 12h8.486M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
<a href="{{route('dictionary.export', ['dictionary' =>$dictionary])}}" class="inline-flex items-center px-2 py-1 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
<svg class="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 10V4a1 1 0 0 0-1-1H9.914a1 1 0 0 0-.707.293L5.293 7.207A1 1 0 0 0 5 7.914V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2M10 3v4a1 1 0 0 1-1 1H5m5 6h9m0 0-2-2m2 2-2 2" />
<div id="tooltip-create-concept" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
{{__('dashboard.sidebar.menu.create')}}
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<a href="{{ route('dictionary.export', $dictionary) }}" data-tooltip-placement="bottom" data-tooltip-target="tooltip-export-concepts" title="{{ __('dashboard.sidebar.menu.export') }}" class="hover:text-blue-600 dark:hover:text-blue-500 py-2 font-medium text-gray-600 transition-colors duration-200 sm:px-6 dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">
<svg class="w-5 h-5 sm:w-6 sm:h-6" data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 9.75v6.75m0 0-3-3m3 3 3-3m-8.25 6a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
<!-- concept delete -->
<div id="tooltip-export-concepts" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
{{__('dashboard.sidebar.menu.export')}}
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<aside class="items-center border-r w-full max-w-96 min-w-36 dark:border-gray-600 border-gray-200 pr-4">
<div class="flex justify-center mb-2">
<aside class="items-center border-r w-full max-w-96 min-w-36 dark:border-gray-500 border-gray-300">
<div class="flex justify-center mb-2 py-2 px-4 border-b border-gray-300 dark:border-gray-500">
@if(Auth::check() && Auth::user()->id === $dictionary->user->id)
@include('components.dashboard.sidebar.menu')
@endif
</div>
<div class="mt-1 text-sm text-black max-h-lvh overflow-x-scroll w-full pr-3" id="concept-tree">
<div class="mt-1 text-sm text-black max-h-lvh overflow-x-scroll scroll-smooth w-full px-4" id="concept-tree">
@includeWhen($concepts, 'components.tree-view.tree-view')
</div>
</aside>
41 changes: 29 additions & 12 deletions resources/views/components/dashboard/tabs/tabs.blade.php
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center cursor-pointer dark:text-gray-100">
<li class="me-2">
<a href="{{Route::currentRouteName() == 'concept.show' ? "#" : route('concept.show', ['dictionary' => $dictionary, 'concept' => $concept->id])}}" class="dark:border-gray-700 dark:border-b inline-block p-4 border-b-2 rounded-t-lg hover:text-blue-600 hover:border-blue-400 dark:hover:text-blue-500 dark:hover:border-blue-800">{{__('Понятие')}}</a>
</li>
<li class="me-2">
<a href="{{Route::currentRouteName() == 'concept.examples' ? "#" :route('concept.examples', ['dictionary' => $dictionary, 'concept' => $concept])}}" class="dark:border-gray-700 dark:border-b inline-block p-4 border-b-2 rounded-t-lg hover:text-blue-600 hover:border-blue-400 dark:hover:text-blue-500 dark:hover:border-blue-800">{{ __('Экземпляры')}}</a>
</li>
<li class="me-2">
<a class="inline-block p-4 border-b-2 rounded-t-lg dark:border-gray-700 dark:border-b hover:text-blue-600 hover:border-blue-400 dark:hover:text-blue-500 dark:hover:border-blue-800">{{ __('Вложения')}}</a>
</li>
</ul>
<div class="flex overflow-x-auto whitespace-nowrap border-b dark:border-gray-500 border-gray-300 pt-2">
<a href="{{Route::currentRouteName() == 'concept.show' ? "#" : route('concept.show', ['dictionary' => $dictionary, 'concept' => $concept->id])}}" class="hover:text-blue-600 dark:hover:text-blue-500 inline-flex items-center h-12 px-2 py-2 text-center text-gray-700 {{Route::currentRouteName() == 'concept.show' ? 'border border-b-0 rounded-t-md' : 'bg-transparent border-b'}} border-gray-300 sm:px-4 dark:border-gray-500 -px-1 dark:text-white whitespace-nowrap focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mx-1 sm:w-6 sm:h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
</svg>

<span class="mx-1 text-sm sm:text-base">
{{__('Понятие')}}
</span>
</a>

<a href="{{Route::currentRouteName() == 'concept.examples' ? "#" :route('concept.examples', ['dictionary' => $dictionary, 'concept' => $concept])}}" class="{{Route::currentRouteName() == 'concept.examples' ? 'border border-b-0 rounded-t-md' : 'bg-transparent border-b'}} hover:text-blue-600 dark:hover:text-blue-500 inline-flex items-center h-12 px-2 py-2 text-center text-gray-700 bg-transparent border-b border-gray-300 sm:px-4 dark:border-gray-500 -px-1 dark:text-white whitespace-nowrap cursor-base focus:outline-none hover:border-gray-400 dark:hover:border-gray-300">
<svg class="w-4 h-4 mx-1 sm:w-6 sm:h-6" data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

<span class="mx-1 text-sm sm:text-base">
{{ __('Экземпляры')}}
</span>
</a>

<a class="hover:text-blue-600 dark:hover:text-blue-500 inline-flex items-center h-12 px-2 py-2 text-center text-gray-700 bg-transparent border-b border-gray-300 sm:px-4 dark:border-gray-500 -px-1 dark:text-white whitespace-nowrap cursor-base focus:outline-none hover:border-gray-400 dark:hover:border-gray-300">
<svg class="w-4 h-4 mx-1 sm:w-6 sm:h-6" data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="mx-1 text-sm sm:text-base">
{{ __('Вложения')}}
</span>
</a>
</div>
4 changes: 2 additions & 2 deletions resources/views/components/layout/dashboard.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<x-layout.main>
<x-slot:title>{{ $dictionary->name }}</x-slot:title>
<x-slot name="navigation"></x-slot>
<div class="flex flex-row flex-grow px-4 mt-2">
<div class="flex flex-row flex-grow mt-2">
@include('components.dashboard.sidebar.sidebar')
<section class="flex-grow pl-4 pr-4 w-3/4">
<section class="flex-grow px-4 w-3/4">
{{ $slot }}
</section>
</div>
Expand Down
Loading

0 comments on commit 1e26671

Please sign in to comment.