refs #2935 Improved tag ID generation for tabs

orchidsoftware · Jan 26, 2025 · 589178f · 589178f
1 parent 73566fc
commit 589178f
Showing 1 changed file with 24 additions and 30 deletions.
diff --git a/resources/views/layouts/tabs.blade.php b/resources/views/layouts/tabs.blade.php
@@ -1,4 +1,5 @@
 <div
+    class="mb-3"
     data-controller="tabs"
     data-tabs-slug="{{$templateSlug}}"
     data-tabs-active-tab="{{$activeTab}}"
@@ -7,44 +8,37 @@
         <ul class="nav nav-tabs nav-tabs-scroll-bar" role="tablist">
             @foreach($manyForms as $name => $tab)
                 <li class="nav-item" role="presentation">
-                    <a class="nav-link
-                        @if ($activeTab === $name)
-                            active
-                        @elseif($loop->first && is_null($activeTab))
-                            active
-                        @endif"
-                       data-action="tabs#setActiveTab"
-                       data-bs-target="#tab-{{\Illuminate\Support\Str::slug($name)}}"
-                       id="button-tab-{{\Illuminate\Support\Str::slug($name)}}"
-                       aria-selected="false"
-                       role="tab"
-                       data-bs-toggle="tab">
+                    <a
+                        @class([
+                            'nav-link',
+                            'active' => $activeTab === $name || ($loop->first && is_null($activeTab))
+                        ])
+                        data-action="tabs#setActiveTab"
+                        data-bs-target="#tab-{{sha1($templateSlug.$name)}}"
+                        id="button-tab-{{sha1($templateSlug.$name)}}"
+                        aria-selected="false"
+                        role="tab"
+                        data-bs-toggle="tab">
                         {!! $name !!}
                     </a>
                 </li>
             @endforeach
         </ul>
     </div>
 
-    <!-- main content -->
-    <section class="mb-3">
-        <div class="no-border-xs">
-            <div class="tab-content">
-                @foreach($manyForms as $name => $forms)
-                    <div role="tabpanel" class="tab-pane
-                        @if ($activeTab === $name)
-                            active
-                        @elseif($loop->first && is_null($activeTab))
-                            active
-                        @endif"
-                         id="tab-{{\Illuminate\Support\Str::slug($name)}}">
-                            @foreach($forms as $form)
-                                {!! $form !!}
-                            @endforeach
-                    </div>
+    <section class="tab-content">
+        @foreach($manyForms as $name => $forms)
+            <div role="tabpanel"
+                 id="tab-{{sha1($templateSlug.$name)}}"
+                 @class([
+                    'tab-pane',
+                    'active' => $activeTab === $name || ($loop->first && is_null($activeTab))
+                 ])
+            >
+                @foreach($forms as $form)
+                    {!! $form !!}
                 @endforeach
             </div>
-        </div>
+        @endforeach
     </section>
-    <!-- / main content -->
 </div>