linuxserver/Heimdall
1
0
Fork 0
mirror of https://github.com/linuxserver/Heimdall.git synced 2025-11-29 03:29:50 +09:00
Code Issues Actions 1 Packages Projects Releases 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
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", "/css/app.css": "/css/app.css?id=bd6300f4053e161d18e8",
"/js/app.js": "/js/app.js?id=a6c1d3a18516685e7b15" "/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') $(this).siblings('.tooltip').removeClass('active')
$('.refresh', this).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 () { $('#search-container').on('input', 'input[name=q]', function () {
const search = this.value const search = this.value

56
resources/assets/sass/_app.scss
View File

@@ -195,11 +195,25 @@ body {
line-height: 50px; line-height: 50px;
color: white; color: white;
margin-top: 1px; margin-top: 1px;
position: relative;
img { img {
width: 26px; width: 26px;
height: 26px; height: 26px;
margin-top: 12px; 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; display: none;
z-index: 1; z-index: 1;
} }
}
.tooltip { .tooltip {
padding: 25px; padding: 25px;
border-radius: 5px; border-radius: 5px;
background: #000000c8; background: #000000c8;
color: white; color: white;
position: absolute; position: absolute;
bottom: 120px; bottom: 120px;
left: 0; left: 0;
right: 0; right: 0;
font-size: 13px; font-size: 13px;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
z-index: 0; z-index: 0;
opacity: 0; opacity: 0;
transform: translateY(-20px); transform: translateY(-20px);
transition: all 0.3s; transition: all 0.3s;
&.active { &.active {
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
z-index: 4; z-index: 4;
}
} }
} }
.tile-actions { .tile-actions {
position: absolute; position: absolute;
top: 0px; top: 0px;

13
resources/views/layouts/app.blade.php
View File

@@ -98,16 +98,17 @@
@if(Route::is('dash') || Route::is('tags.show')) @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 @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) @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 @endif
<a id="items" class="config" href="{{ route('items.index', []) }}" title="Items"><i class="fas fa-list"></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', []) }}" title="Tags"><i class="fas fa-tag"></i></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', []) }}" title="Settings"><i class="fas fa-cogs"></i></a> <a id="settings" class="config" href="{{ route('settings.index', []) }}"><i class="fas fa-cogs"></i><div class="tooltip left">Settings</div></a>
</div> </div>
</main> </main>