0ct0pu5/Heimdall
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix: Added nicer tooltips to sidebar

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/css/app.css vendored
View file

File diff suppressed because one or more lines are too long

2
public/js/app.js vendored
View file

File diff suppressed because one or more lines are too long

4
public/mix-manifest.json generated
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"
}

6
resources/assets/js/app.js
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

56
resources/assets/sass/_app.scss
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,29 +276,29 @@ body {
display: none;
z-index: 1;
}
.tooltip {
padding: 25px;
border-radius: 5px;
background: #000000c8;
color: white;
position: absolute;
bottom: 120px;
left: 0;
right: 0;
font-size: 13px;
backdrop-filter: blur(8px);
z-index: 0;
opacity: 0;
transform: translateY(-20px);
transition: all 0.3s;
&.active {
transform: translateY(0);
opacity: 1;
z-index: 4;
}
}
.tooltip {
padding: 25px;
border-radius: 5px;
background: #000000c8;
color: white;
position: absolute;
bottom: 120px;
left: 0;
right: 0;
font-size: 13px;
backdrop-filter: blur(8px);
z-index: 0;
opacity: 0;
transform: translateY(-20px);
transition: all 0.3s;
&.active {
transform: translateY(0);
opacity: 1;
z-index: 4;
}
}
.tile-actions {
position: absolute;
top: 0px;

13
resources/views/layouts/app.blade.php
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>