Fix: Added nicer tooltips to sidebar

This commit is contained in:
Chris Hunt
2022-11-23 09:29:52 +00:00
parent 966027faf5
commit ffc736ada6
6 changed files with 52 additions and 31 deletions

2
public/css/app.css vendored

File diff suppressed because one or more lines are too long

2
public/js/app.js vendored

File diff suppressed because one or more lines are too long

View File

@@ -1,4 +1,4 @@
{
"/css/app.css": "/css/app.css?id=52588253d9a6d5c5e6a1",
"/js/app.js": "/js/app.js?id=a6c1d3a18516685e7b15"
"/css/app.css": "/css/app.css?id=bd6300f4053e161d18e8",
"/js/app.js": "/js/app.js?id=c15b7d6018358ee45de9"
}

View File

@@ -152,6 +152,12 @@ $.when( $.ready ).then(function() {
$(this).siblings('.tooltip').removeClass('active')
$('.refresh', this).removeClass('active')
})
$('#config-buttons').on('mouseenter', 'a', function () {
$('.tooltip', this).addClass('active');
}).on('mouseleave', 'a', function () {
$('.tooltip', this).removeClass('active');
})
$('#search-container').on('input', 'input[name=q]', function () {
const search = this.value

View File

@@ -195,11 +195,25 @@ body {
line-height: 50px;
color: white;
margin-top: 1px;
position: relative;
img {
width: 26px;
height: 26px;
margin-top: 12px;
}
.tooltip {
bottom: 50%;
left: auto;
right: 55px;
padding: 10px 15px;
line-height: 1.2;
transform: translate(-20px, 50%);
white-space: nowrap;
&.active {
transform: translate(0, 50%);
}
}
}
}
@@ -262,8 +276,8 @@ body {
display: none;
z-index: 1;
}
.tooltip {
}
.tooltip {
padding: 25px;
border-radius: 5px;
background: #000000c8;
@@ -283,8 +297,8 @@ body {
opacity: 1;
z-index: 4;
}
}
}
.tile-actions {
position: absolute;
top: 0px;

View File

@@ -98,16 +98,17 @@
@if(Route::is('dash') || Route::is('tags.show'))
<a id="config-button" class="config" href="" title="Configuration"><i class="fas fa-exchange"></i></a>
<a id="config-button" class="config" href=""><i class="fas fa-exchange"></i><div class="tooltip left">Reorder and pin items</div></a>
@endif
<a id="dash" class="config" href="{{ route('dash', []) }}" title="Dashboard"><i class="fas fa-th"></i></a>
<a id="dash" class="config" href="{{ route('dash', []) }}"><i class="fas fa-th"></i><div class="tooltip left">Dashboard</div></a>
@if($current_user->id === 1)
<a id="users" class="config" href="{{ route('users.index', []) }}" title="Users"><i class="fas fa-user"></i></a>
<a id="users" class="config" href="{{ route('users.index', []) }}"><i class="fas fa-user"></i><div class="tooltip left">Users</div></a>
@endif
<a id="items" class="config" href="{{ route('items.index', []) }}" title="Items"><i class="fas fa-list"></i></a>
<a id="folder" class="config" href="{{ route('tags.index', []) }}" title="Tags"><i class="fas fa-tag"></i></a>
<a id="settings" class="config" href="{{ route('settings.index', []) }}" title="Settings"><i class="fas fa-cogs"></i></a>
<a id="items" class="config" href="{{ route('items.index', []) }}"><i class="fas fa-list"></i><div class="tooltip left">List and edit all items</div></a>
<a id="folder" class="config" href="{{ route('tags.index', []) }}"><i class="fas fa-tag"></i><div class="tooltip left">List and edit all tags</div></a>
<a id="settings" class="config" href="{{ route('settings.index', []) }}"><i class="fas fa-cogs"></i><div class="tooltip left">Settings</div></a>
</div>
</main>