Skip to content

Commit 4ad210a

Browse files
murrantStyleCIBot
murrant
and
StyleCIBot
authored
Change how menu collapses on smaller screens (librenms#17602)
* Change how menu collapses on smaller screens hide text instead of icons, never hide devices text show first 4 items when enough space and all on a large screen * Update generated assets and fix so the correct tailwind classes are included # Conflicts: # html/build/assets/app-B1DTd3oq.js # html/build/assets/app-BAxy3a9a.js # html/build/assets/app-BqXd_A7J.js # html/build/manifest.json # resources/views/components/logo.blade.php * Apply fixes from StyleCI * move is_svg to component class * Apply fixes from StyleCI --------- Co-authored-by: StyleCI Bot <[email protected]>
1 parent 6abffe1 commit 4ad210a

File tree

7 files changed

+133
-98
lines changed

7 files changed

+133
-98
lines changed

‎app/View/Components/Logo.php‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<?php
2+
3+
namespace App\View\Components;
4+
5+
use App\Facades\LibrenmsConfig;
6+
use Closure;
7+
use Illuminate\Contracts\View\View;
8+
use Illuminate\View\Component;
9+
10+
class Logo extends Component
11+
{
12+
public string $logo_hide_class;
13+
public string $logo_show_class;
14+
public bool $is_svg = false;
15+
public string $image;
16+
17+
public function __construct(
18+
public string $responsive = '',
19+
?string $image = null,
20+
public ?string $text = null,
21+
) {
22+
$this->image ??= (string) LibrenmsConfig::get('title_image');
23+
$this->text ??= LibrenmsConfig::get('project_name');
24+
$this->is_svg = str_ends_with($image, '.svg') && ! str_contains($image, '//');
25+
26+
[$this->logo_hide_class, $this->logo_show_class] = match ($this->responsive) {
27+
'sm' => ['tw:sm:hidden', 'tw:sm:inline-block'],
28+
'md' => ['tw:md:hidden', 'tw:md:inline-block'],
29+
'lg' => ['tw:lg:hidden', 'tw:lg:inline-block'],
30+
'xl' => ['tw:xl:hidden', 'tw:xl:inline-block'],
31+
'2xl' => ['tw:2xl:hidden', 'tw:2xl:inline-block'],
32+
default => ['', ''],
33+
};
34+
}
35+
36+
/**
37+
* Get the view / contents that represent the component.
38+
*/
39+
public function render(): View|Closure|string
40+
{
41+
return view('components.logo');
42+
}
43+
}

‎html/build/assets/app-CVFTjosH.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

html/build/assets/app-B1DTd3oq.js renamed to html/build/assets/app-D8fIM6hs.js

Lines changed: 25 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎html/build/assets/app-Dlgx_pXl.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎html/build/manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@
2020
"src": "html/fonts/glyphicons-halflings-regular.woff2"
2121
},
2222
"resources/js/app.js": {
23-
"file": "assets/app-B1DTd3oq.js",
23+
"file": "assets/app-D8fIM6hs.js",
2424
"name": "app",
2525
"src": "resources/js/app.js",
2626
"isEntry": true,
2727
"css": [
28-
"assets/app-Dlgx_pXl.css"
28+
"assets/app-CVFTjosH.css"
2929
],
3030
"assets": [
3131
"assets/glyphicons-halflings-regular-BUJKDMgK.eot",

‎resources/views/components/logo.blade.php‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
1-
@props([
2-
'responsive' => false, // crop text at given breakpoint sm,md,lg,xl, etc
3-
'image' => LibrenmsConfig::get('title_image'),
4-
'alt' => LibrenmsConfig::get('project_name')
5-
])
6-
71
@if($image)
82
{{-- Include svgs inline so they can use currentColor for light/dark mode, but only if they are hosted on the same server (browser will reject it otherwise) --}}
9-
@if(str_ends_with($image, '.svg') && ! str_contains($image, '//'))
3+
@if($is_svg)
104
<svg {{ $attributes->class(['tw:dark:text-white', 'tw:text-gray-600']) }}>
115
<use href="{{ asset($image) }}"></use>
126
</svg>
137
@else
14-
<img {{ $attributes }} src="{{ asset($image) }}" alt="{{ $alt }}">
8+
<img {{ $attributes }} src="{{ asset($image) }}" alt="{{ $text }}">
159
@endif
1610
@else
17-
<svg {{ $attributes->class(['tw:dark:text-white', 'tw:text-gray-600'])->class($responsive ? ['tw:hidden', "tw:$responsive:inline-block"] : []) }}
11+
<svg {{ $attributes->class(['tw:dark:text-white', 'tw:text-gray-600'])->class($responsive ? ['tw:hidden', $logo_show_class] : []) }}
1812
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 32.275086">
1913
<defs>
2014
<clipPath id="a">
@@ -50,7 +44,7 @@
5044
fill="#db202e"/>
5145
</svg>
5246
@if($responsive)
53-
<svg {{ $attributes->class(['tw:dark:text-white', 'tw:text-gray-600', 'tw:inline-block', "tw:$responsive:hidden"]) }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.558 77.558">
47+
<svg {{ $attributes->class(['tw:dark:text-white', 'tw:text-gray-600', 'tw:inline-block', $logo_hide_class]) }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.558 77.558">
5448
<path
5549
d="m43.334 26.774 7.45 7.45-2.932 2.98-7.45-7.45zM56.96 13.171l7.45 7.45-2.956 2.98-7.45-7.45zm-.48 26.774 7.498 7.45-2.956 2.98-7.691-7.45zM70.107 26.34l7.45 7.451-2.932 2.98-7.45-7.45zm-29.49-5.527 7.498-7.451 2.957 2.956-7.451 7.45zm13.17 13.17 7.451-7.45 2.98 2.932-7.45 7.45zm13.147 13.171 7.45-7.499 2.981 2.957-7.69 7.45zM26.99 34.489l7.451-7.45 2.98 2.932-7.45 7.45zm13.147 13.147 7.499-7.45 2.932 2.931-7.45 7.45zm13.17 13.17 7.451-7.498 2.98 2.956-7.498 7.69z"
5650
fill="currentColor"/>

‎resources/views/layouts/menu.blade.php‎

Lines changed: 58 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<nav class="navbar navbar-default {{ $navbar }} navbar-sticky-top" role="navigation">
2-
<div class="container-fluid">
32
<div class="navbar-header">
43
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
54
<span class="sr-only">{{ __('Toggle navigation') }}</span>
@@ -17,9 +16,9 @@
1716
{{-- Overview --}}
1817
<li class="dropdown">
1918
<a href="{{ url('overview') }}" class="dropdown-toggle" data-hover="dropdown"
20-
data-toggle="dropdown"><i class="fa fa-home fa-fw fa-lg fa-nav-icons hidden-md"
19+
data-toggle="dropdown"><i class="fa fa-home fa-fw fa-lg fa-nav-icons"
2120
aria-hidden="true"></i> <span
22-
class="hidden-sm">{{ __('Overview') }}</span></a>
21+
class="tw:md:hidden tw:2xl:inline-block">{{ __('Overview') }}</span></a>
2322
<ul class="dropdown-menu multi-level" role="menu">
2423
<li class="dropdown-submenu">
2524
<a href="{{ route('overview') }}"><i class="fa fa-tv fa-fw fa-lg" aria-hidden="true"></i> {{ __('Dashboard') }}</a>
@@ -125,8 +124,8 @@ class="hidden-sm">{{ __('Overview') }}</span></a>
125124
{{-- Devices --}}
126125
<li class="dropdown">
127126
<a href="{{ url('devices/') }}" class="dropdown-toggle" data-hover="dropdown"
128-
data-toggle="dropdown"><i class="fa fa-server fa-fw fa-lg fa-nav-icons hidden-md"
129-
aria-hidden="true"></i> <span class="hidden-sm">{{ __('Devices') }}</span></a>
127+
data-toggle="dropdown"><i class="fa fa-server fa-fw fa-lg fa-nav-icons"
128+
aria-hidden="true"></i> <span>{{ __('Devices') }}</span></a>
130129
<ul class="dropdown-menu">
131130
@if($no_devices_added)
132131
<li><a href="#"><i class="fa fa-server fa-fw fa-lg" aria-hidden="true"></i> {{ __('No Devices') }}</a>
@@ -190,9 +189,9 @@ class="fa fa-cog fa-fw fa-lg"></i> {{ __('Virtual Machines') }}</a></li>
190189
{{-- Maps --}}
191190
<li class="dropdown">
192191
<a href="{{ url('services') }}" class="dropdown-toggle" data-hover="dropdown"
193-
data-toggle="dropdown"><i class="fa fa-map fa-fw fa-lg fa-nav-icons hidden-md"
192+
data-toggle="dropdown"><i class="fa fa-map fa-fw fa-lg fa-nav-icons"
194193
aria-hidden="true"></i> <span
195-
class="hidden-sm">{{ __('Maps') }}</span></a>
194+
class="tw:md:hidden tw:lg:inline-block">{{ __('Maps') }}</span></a>
196195
<ul class="dropdown-menu">
197196
<li><a href="{{ url('availability-map') }}"><i class="fa fa-arrow-circle-up fa-fw fa-lg"
198197
aria-hidden="true"></i> {{ __('Availability') }}
@@ -275,49 +274,11 @@ class="hidden-sm">{{ __('Maps') }}</span></a>
275274

276275
</ul>
277276
</li>
278-
{{-- Services --}}
279-
@config('show_services')
280-
<li class="dropdown">
281-
<a href="{{ url('services') }}" class="dropdown-toggle" data-hover="dropdown"
282-
data-toggle="dropdown"><i class="fa fa-cogs fa-fw fa-lg fa-nav-icons hidden-md"
283-
aria-hidden="true"></i> <span
284-
class="hidden-sm">{{ __('Services') }}</span></a>
285-
<ul class="dropdown-menu">
286-
<li><a href="{{ url('services') }}"><i class="fa fa-cogs fa-fw fa-lg" aria-hidden="true"></i> {{ __('All Services') }}</a>
287-
</li>
288-
<li><a href="{{ route('services.templates.index') }}"><span class="fa-stack" aria-hidden="true" style="font-size: 12px">
289-
<i class="fa fa-square fa-stack-2x"></i>
290-
<i class="fa fa-cogs fa-stack-1x fa-inverse"></i>
291-
</span> {{ __('Services Templates') }}</a>
292-
</li>
293-
@if($service_counts['warning'] || $service_counts['critical'])
294-
<li role="presentation" class="divider"></li>
295-
@if($service_counts['warning'])
296-
<li><a href="{{ url('services/state=warning') }}"><i
297-
class="fa fa-bell text-warning fa-fw fa-lg"
298-
aria-hidden="true"></i> {{ __('Warning :service_count', ['service_count' => $service_counts['warning']]) }}
299-
</a></li>
300-
@endif
301-
@if($service_counts['critical'])
302-
<li><a href="{{ url('services/state=critical') }}"><i
303-
class="fa fa-bell text-danger fa-fw fa-lg"
304-
aria-hidden="true"></i> {{ __('Critical :service_count', ['service_count' => $service_counts['critical']]) }}
305-
</a></li>
306-
@endif
307-
@endif
308-
@admin
309-
<li role="presentation" class="divider"></li>
310-
<li><a href="{{ url('addsrv') }}"><i class="fa fa-plus fa-fw fa-lg"
311-
aria-hidden="true"></i> {{ __('Add Service') }}</a></li>
312-
@endadmin
313-
</ul>
314-
</li>
315-
@endconfig
316277
{{-- Ports --}}
317278
<li class="dropdown">
318279
<a href="{{ url('ports') }}" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i
319-
class="fa fa-link fa-fw fa-lg fa-nav-icons hidden-md" aria-hidden="true"></i> <span
320-
class="hidden-sm">{{ __('Ports') }}</span></a>
280+
class="fa fa-link fa-fw fa-lg fa-nav-icons" aria-hidden="true"></i> <span
281+
class="tw:md:hidden tw:lg:inline-block">{{ __('Ports') }}</span></a>
321282
<ul class="dropdown-menu">
322283
<li><a href="{{ url('ports') }}"><i class="fa fa-link fa-fw fa-lg"
323284
aria-hidden="true"></i> {{ __('All Ports') }}</a></li>
@@ -432,8 +393,8 @@ class="fa fa-arrow-circle-o-down fa-fw fa-lg"
432393
{{-- Sensors --}}
433394
<li class="dropdown">
434395
<a href="{{ url('health') }}" class="dropdown-toggle" data-hover="dropdown"
435-
data-toggle="dropdown"><i class="fa fa-heartbeat fa-fw fa-lg fa-nav-icons hidden-md"
436-
aria-hidden="true"></i> <span class="hidden-sm">{{ __('Health') }}</span></a>
396+
data-toggle="dropdown"><i class="fa fa-heartbeat fa-fw fa-lg fa-nav-icons"
397+
aria-hidden="true"></i> <span class="tw:md:hidden tw:lg:inline-block">{{ __('Health') }}</span></a>
437398
<ul class="dropdown-menu">
438399
<li><a href="{{ url('health/metric=mempool') }}"><i class="fas fa-memory fa-fw fa-lg"
439400
aria-hidden="true"></i> {{ __('Memory') }}</a>
@@ -460,23 +421,61 @@ class="fa fa-arrow-circle-o-down fa-fw fa-lg"
460421
@if($wireless_menu->isNotEmpty())
461422
<li class="dropdown">
462423
<a href="{{ url('wireless') }}" class="dropdown-toggle" data-hover="dropdown"
463-
data-toggle="dropdown"><i class="fa fa-wifi fa-fw fa-lg fa-nav-icons hidden-md"
424+
data-toggle="dropdown"><i class="fa fa-wifi fa-fw fa-lg fa-nav-icons"
464425
aria-hidden="true"></i> <span
465-
class="hidden-sm">{{ __('wireless.title') }}</span></a>
426+
class="tw:md:hidden tw:2xl:inline-block">{{ __('wireless.title') }}</span></a>
466427
<ul class="dropdown-menu">
467428
@foreach($wireless_menu as $wireless_menu_entry)
468429
<li><a href="{{ url('wireless/metric=' . $wireless_menu_entry->sensor_class) }}"><i class="fa fa-{{ $wireless_menu_entry->icon() }} fa-fw fa-lg" aria-hidden="true"></i> {{ $wireless_menu_entry->classDescr() }}</a></li>
469430
@endforeach
470431
</ul>
471432
</li>
472433
@endif
434+
{{-- Services --}}
435+
@config('show_services')
436+
<li class="dropdown">
437+
<a href="{{ url('services') }}" class="dropdown-toggle" data-hover="dropdown"
438+
data-toggle="dropdown"><i class="fa fa-cogs fa-fw fa-lg fa-nav-icons"
439+
aria-hidden="true"></i> <span
440+
class="tw:md:hidden tw:2xl:inline-block">{{ __('Services') }}</span></a>
441+
<ul class="dropdown-menu">
442+
<li><a href="{{ url('services') }}"><i class="fa fa-cogs fa-fw fa-lg" aria-hidden="true"></i> {{ __('All Services') }}</a>
443+
</li>
444+
<li><a href="{{ route('services.templates.index') }}"><span class="fa-stack" aria-hidden="true" style="font-size: 12px">
445+
<i class="fa fa-square fa-stack-2x"></i>
446+
<i class="fa fa-cogs fa-stack-1x fa-inverse"></i>
447+
</span> {{ __('Services Templates') }}</a>
448+
</li>
449+
@if($service_counts['warning'] || $service_counts['critical'])
450+
<li role="presentation" class="divider"></li>
451+
@if($service_counts['warning'])
452+
<li><a href="{{ url('services/state=warning') }}"><i
453+
class="fa fa-bell text-warning fa-fw fa-lg"
454+
aria-hidden="true"></i> {{ __('Warning :service_count', ['service_count' => $service_counts['warning']]) }}
455+
</a></li>
456+
@endif
457+
@if($service_counts['critical'])
458+
<li><a href="{{ url('services/state=critical') }}"><i
459+
class="fa fa-bell text-danger fa-fw fa-lg"
460+
aria-hidden="true"></i> {{ __('Critical :service_count', ['service_count' => $service_counts['critical']]) }}
461+
</a></li>
462+
@endif
463+
@endif
464+
@admin
465+
<li role="presentation" class="divider"></li>
466+
<li><a href="{{ url('addsrv') }}"><i class="fa fa-plus fa-fw fa-lg"
467+
aria-hidden="true"></i> {{ __('Add Service') }}</a></li>
468+
@endadmin
469+
</ul>
470+
</li>
471+
@endconfig
473472
{{-- App --}}
474473
@if($app_menu->isNotEmpty())
475474
<li class="dropdown">
476475
<a href="{{ url('apps') }}" class="dropdown-toggle" data-hover="dropdown"
477-
data-toggle="dropdown"><i class="fa fa-tasks fa-fw fa-lg fa-nav-icons hidden-md"
476+
data-toggle="dropdown"><i class="fa fa-tasks fa-fw fa-lg fa-nav-icons"
478477
aria-hidden="true"></i> <span
479-
class="hidden-sm">{{ __('Apps') }}</span></a>
478+
class="tw:md:hidden tw:2xl:inline-block">{{ __('Apps') }}</span></a>
480479
<ul class="dropdown-menu">
481480
<li><a href="{{ url('apps') }}"><i class="fa fa-object-group fa-fw fa-lg"
482481
aria-hidden="true"></i> {{ __('Overview') }}</a></li>
@@ -501,9 +500,9 @@ class="hidden-sm">{{ __('Apps') }}</span></a>
501500
@if($routing_menu)
502501
<li class="dropdown">
503502
<a href="{{ url('routing') }}" class="dropdown-toggle" data-hover="dropdown"
504-
data-toggle="dropdown"><i class="fa fa-random fa-fw fa-lg fa-nav-icons hidden-md"
503+
data-toggle="dropdown"><i class="fa fa-random fa-fw fa-lg fa-nav-icons"
505504
aria-hidden="true"></i> <span
506-
class="hidden-sm">{{ __('Routing') }}</span></a>
505+
class="tw:md:hidden tw:2xl:inline-block">{{ __('Routing') }}</span></a>
507506
<ul class="dropdown-menu">
508507
@foreach($routing_menu as $routing_menu_group)
509508
@if(!$loop->first)
@@ -535,8 +534,8 @@ class="fa fa-exclamation-circle fa-fw fa-lg"
535534
{{-- Alerts --}}
536535
<li class="dropdown">
537536
<a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i
538-
class="fa fa-exclamation-circle text-{{ $alert_menu_class }} fa-fw fa-lg hidden-md"
539-
aria-hidden="true"></i> <span class="hidden-sm">{{ __('Alerts') }}</span></a>
537+
class="fa fa-exclamation-circle fa-col-{{ $alert_menu_class }} fa-fw fa-lg"
538+
aria-hidden="true"></i> <span class="tw:md:hidden tw:2xl:inline-block">{{ __('Alerts') }}</span></a>
540539
<ul class="dropdown-menu">
541540
<li><a href="{{ url('alerts') }}"><i class="fa fa-bell fa-fw fa-lg"
542541
aria-hidden="true"></i> {{ __('Notifications') }}</a></li>
@@ -576,7 +575,7 @@ class="fa fa-exclamation-circle text-{{ $alert_menu_class }} fa-fw fa-lg hidden-
576575
<a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">
577576
<i class="fa fa-user fa-fw fa-lg fa-nav-icons" aria-hidden="true"></i>
578577
<span class="badge badge-navbar-user count-notif {{ $notification_count ? 'badge-danger' : 'badge-default' }}">{{ $notification_count ?: '' }}</span>
579-
<span class="hidden-sm"><small>{{ Auth::user()->username }}</small></span>
578+
<span class="tw:md:hidden tw:2xl:inline-block"><small>{{ Auth::user()->username }}</small></span>
580579
<span class="visible-xs-inline-block">{{ __('User') }}</span>
581580
</a>
582581
<ul class="dropdown-menu">
@@ -651,13 +650,12 @@ class="fa fa-book fa-fw fa-lg" aria-hidden="true"></i> {{ __('API Docs') }}</a>
651650
</li>
652651
<li role="presentation" class="divider" id="countdown_timer_divider" style="display: none"></li>
653652
<li><a href="{{ url('about') }}"><i class="fa-solid fa-circle-info fa-fw fa-lg"
654-
aria-hidden="true"></i> {{ __('About :project_name', ['project_name' => \App\Facades\LibrenmsConfig::get('project_name')]) }}
653+
aria-hidden="true"></i> {{ __('About :project_name', ['project_name' => $project_name]) }}
655654
</a></li>
656655
</ul>
657656
</li>
658657
</ul>
659658
</div>
660-
</div>
661659
</nav>
662660

663661
<script>

0 commit comments

Comments
 (0)