Skip to content

Commit

Permalink
style: optimize Dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@secondnetwork
secondnetwork committed Nov 22, 2023
1 parent 919e83f commit 8e8fc54
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 137 deletions.
225 changes: 100 additions & 125 deletions resources/css/blocks/admin/dashboard.css
View file
Original file line number Diff line number Diff line change
@@ -1,139 +1,114 @@
[class*="kompass-admin-"] {
overflow-y: scroll;
.test {
background-color: antiquewhite;
}
main {
@apply grid transition-all ease-in-out duration-300;
grid-template-columns: 15rem 1fr;
grid-template-rows: 4rem 1fr 4rem;
grid-template-areas: "sidenav header" "sidenav main-content" "sidenav footer";
}

overflow-y: scroll;
.test{background-color: antiquewhite;}
main {
@apply transition-all ease-in-out duration-300 ;
display: grid;
grid-template-columns: 15rem 1fr;
grid-template-rows: 4rem 1fr 4rem;
grid-template-areas: "sidenav header""sidenav main-content""sidenav footer";
}
header {
grid-area: header;
border-bottom: 0.1rem solid #e9ecef;
}

header {
grid-area: header;
border-bottom: .1rem solid #e9ecef;
}
footer {
grid-area: footer;
border-top: 0.1rem solid #e9ecef;
}

footer {
grid-area: footer;
border-top: .1rem solid #e9ecef;
}
.main-content {
grid-area: main-content;
@apply bg-gray-50 px-6 relative;
}

.main-content {
grid-area: main-content;
@apply bg-gray-50 px-6 relative;
}

header,
footer {
@apply z-30;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
background-color: #f8f9fa;
}
header,
footer {
@apply flex items-center justify-between px-6 z-30;
}

.main-content,
header,
footer {
@apply bg-gray-50;
}

.sidenav {
@apply block transition-all ease-in-out duration-500;
position: fixed;
top: 0;
bottom: 0;
width: 15rem;
height: 100%;
border-right: 0.1rem solid #e9ecef;
overflow-y: auto;

.logo {
padding: 1rem 1.6rem;
.favicon-logo {
display: none;
}
}
}
.sidenav a {
display: flex;
padding: 0.35rem 1.5rem;
align-items: center;
@apply text-sm gap-2;
font-weight: 600;
position: relative;

.sidenav {
@apply transition-all ease-in-out duration-500 ;
display: block;
position: fixed;
top: 0;
bottom: 0;
width: 15rem;
height: 100%;
border-right: .1rem solid #e9ecef;
overflow-y: auto;
&.active {
svg {
@apply stroke-brand-500;
}


font-weight: 700;
@apply bg-gradient-to-r from-gray-50 to-gray-100 text-gray-500;


.logo {
padding: 1rem 1.6rem;
.favicon-logo{
display: none;
}
}
&::after {
content: "";
position: absolute;
height: 100%;
width: 0.3rem;
left: 0;
@apply bg-brand-500;
}
}
.sidenav a{
display: flex;
padding: 0.35rem 1.5rem;
align-items: center;
@apply text-sm gap-2;
font-weight: 600;
position: relative;

&.active {
svg {
@apply stroke-brand-500;
}

font-weight: 700;
@apply bg-gradient-to-r from-gray-50 to-gray-100 text-gray-500;

&::after {
content: '';
position: absolute;
height: 100%;
width: 0.3rem;
left: 0;
@apply bg-brand-500;

}
}
}
nav.setting a{
display: flex;
align-items: center;
@apply text-sm py-1;
font-weight: 600;
position: relative;
}

/* // .sidenav {
// grid-area: sidenav;
// background-color: #394263;
// display: flex;
// flex-direction: column;
// height: 100%;
// width: 240px;
// position: fixed;
// overflow-y: auto;
// box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
// z-index: 2; /* Needs to sit above the hamburger menu icon
// transform: translateX(-245px);
// transition: all 0.6s ease-in-out;
// } */
}
nav.setting a {
display: flex;
align-items: center;
@apply text-sm py-1;
font-weight: 600;
position: relative;
}
}
.sideclose{
@apply transition-all ease-in-out duration-500 ;
grid-template-columns: 4.6rem 1fr !important;
.logo{
padding: .5rem !important;
}
.big-logo{
display: none;
}
.favicon-logo{
display: block !important;
}
.sidenav{

width: 4.6rem;
a span{
display: none;
}
.sideclose {
@apply transition-all ease-in-out duration-500;
grid-template-columns: 4.6rem 1fr !important;
.logo {
padding: 0.5rem !important;
}
.big-logo {
display: none;
}
.favicon-logo {
display: block !important;
}
.sidenav {
width: 4.6rem;
a span {
display: none;
}
.sidebarbutton{
@apply text-orange-400 rotate-180;
}
ul div{

text-indent: -9999px;
}

}
}
.sidebarbutton {
@apply text-orange-400 rotate-180;
}
ul div {
text-indent: -9999px;
}
}
1 change: 1 addition & 0 deletions resources/lang/de.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,6 +444,7 @@
"Please provide your name.": "Please provide your name.",
"Poland": "Poland",
"Portugal": "Portugal",
"Post": "Beitrags",
"Posts": "Beiträge",
"Press / to search": "Press / to search",
"Preview": "Preview",
Expand Down
15 changes: 4 additions & 11 deletions resources/views/components/blocksgroup.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,29 +43,22 @@ class="text-xs inline-flex items-center gap-1.5 py-1 px-1 capitalize rounded fon
@svg('tabler-section', 'w-5')
@endif
@endswitch



</span>

<span class="inline-block border-r border-gray-400 w-px h-5 ml-1 mr-2"></span>
<div x-data="click_to_edit()" class="w-11/12 flex items-center">
<a @click.prevent @click="toggleEditingState" x-show="!isEditing"
class="flex items-center select-none cursor-text" x-on:keydown.escape="isEditing = false">

<span class="text-sm font-semibold">{{ $itemblocks->name }}</span>
{{-- <span><x-tabler-edit class="cursor-pointer stroke-current h-6 w-6 text-gray-400 hover:text-blue-500" /></span> --}}
{{-- <span x-show="iconEditing"><x-tabler-edit class="cursor-pointer stroke-current h-5 w-5 text-gray-400 hover:text-blue-500" /></span> --}}
</a>

{{-- <input type="text" value="{{ $itemblocks->name }}" x-show="isEditing"
@click.away="toggleEditingState" @keydown.enter="disableEditing"
@keydown.window.escape="disableEditing" x-ref="input"> --}}


<div x-show=isEditing class="flex items-center" x-data="{ id: '{{ $itemblocks->id }}', name: '{{ $itemblocks->name }}' }">

<input type="text" class="border border-gray-400 px-1 py-1 text-sm font-semibold" x-model="name"
wire:model.lazy="newName" x-ref="input" x-on:keydown.enter="isEditing = false"
x-on:keydown.escape="isEditing = false" {{-- @keydown.window.escape="disableEditing" --}}
x-on:keydown.escape="isEditing = false"
x-on:click.away="isEditing = false" wire:keydown.enter="savename({{ $itemblocks->id }})">
<span wire:click="savename({{ $itemblocks->id }})" x-on:click="isEditing = false">
<x-tabler-square-check class="cursor-pointer stroke-current h-6 w-6 text-green-600" />
Expand Down
2 changes: 1 addition & 1 deletion resources/views/livewire/posts/posts-show.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ class="cursor-pointer grid place-content-center border-2 border-dashed border-gr
<div class="relative flex items-center">

<div class=" flex-auto">
<span class="text-gray-600 text-sm">{{ __('Page title') }}</span>
<span class="text-gray-600 text-sm">{{ __('Post') }} {{ __('Title') }}</span>


<div x-data="click_to_edit()">
Expand Down

0 comments on commit 8e8fc54

Please sign in to comment.