Extend UX improvements on other pages

ram/portal/templates/base.html

@@ -115,6 +115,19 @@
           })
        })()
     </script>
+	<script>
+	  document.addEventListener('DOMContentLoaded', function () {
+		var selectElement = document.getElementById('tabSelector');
+		selectElement.addEventListener('change', function () {
+		  var selectedTabId = this.value;
+		  var tabs = document.querySelectorAll('.tab-pane');
+		  tabs.forEach(function (tab) {
+			tab.classList.remove('show', 'active');
+		  });
+		  document.getElementById(selectedTabId).classList.add('show', 'active');
+		});
+	  });
+	</script>
     {% block extra_head %}
     {{ site_conf.extra_head | safe }}
     {% endblock %}

ram/portal/templates/bookshelf/book.html

@@ -43,10 +43,14 @@
         <section class="py-4 text-start container">
           <div class="row">
             <div class="mx-auto">
-              <nav class="nav nav-tabs flex-column flex-md-row mb-2" id="nav-tab">
+              <nav class="nav nav-tabs d-none d-lg-flex flex-row mb-2" id="nav-tab" role="tablist">
                 <button class="nav-link active" id="nav-summary-tab" data-bs-toggle="tab" data-bs-target="#nav-summary" type="button" role="tab" aria-controls="nav-summary" aria-selected="true">Summary</button>
                 {% if book.notes %}<button class="nav-link" id="nav-notes-tab" data-bs-toggle="tab" data-bs-target="#nav-notes" type="button" role="tab" aria-controls="nav-notes" aria-selected="false">Notes</button>{% endif %}
               </nav>
+              <select class="form-select d-lg-none mb-2" id="tabSelector" aria-label="Tab selector">
+                <option value="nav-summary" selected>Summary</option>
+                {% if book.notes %}<option value="nav-notes">Notes</option>{% endif %}
+              </select>
               <div class="tab-content" id="nav-tabContent">
                 <div class="tab-pane show active" id="nav-summary" role="tabpanel" aria-labelledby="nav-summary-tab">
                   <table class="table table-striped">

ram/portal/templates/consist.html

@@ -16,7 +16,7 @@
         <div id="carouselControls" class="carousel carousel-dark slide" data-bs-ride="carousel">
           <div class="carousel-inner">
             <div class="carousel-item active">
-              <img src="{{ consist.image.url }}" class="d-block w-100 rounded img-thumbnail" alt="...">
+              <img src="{{ consist.image.url }}" class="d-block w-100 rounded img-thumbnail" alt="Consist cover">
             </div>
           </div>
         </div>
@@ -66,10 +66,14 @@
       <section class="py-4 text-start container">
         <div class="row">
           <div class="mx-auto">
-            <nav class="nav nav-tabs flex-column flex-md-row mb-2" id="nav-tab">
+            <nav class="nav nav-tabs d-none d-lg-flex flex-row mb-2" id="nav-tab" role="tablist">
               <button class="nav-link active" id="nav-summary-tab" data-bs-toggle="tab" data-bs-target="#nav-summary" type="button" role="tab" aria-controls="nav-summary" aria-selected="true">Summary</button>
               {% if consist.notes %}<button class="nav-link" id="nav-notes-tab" data-bs-toggle="tab" data-bs-target="#nav-notes" type="button" role="tab" aria-controls="nav-notes" aria-selected="false">Notes</button>{% endif %}
             </nav>
+            <select class="form-select d-lg-none mb-2" id="tabSelector" aria-label="Tab selector">
+              <option value="nav-summary" selected>Summary</option>
+              {% if consist.notes %}<option value="nav-notes">Notes</option>{% endif %}
+            </select>
             <div class="tab-content" id="nav-tabContent">
               <div class="tab-pane show active" id="nav-summary" role="tabpanel" aria-labelledby="nav-summary-tab">
                 <table class="table table-striped">

ram/portal/templates/rollingstock.html

@@ -259,7 +259,7 @@
                       {% if company.logo %}
                       <tr>
                         <th class="w-33" scope="row">Logo</th>
-                        <td><img clas="logo-xl" src="{{ company.logo.url }}" alt="{{ company }} logo"></td>
+                        <td><img class="logo-xl" src="{{ company.logo.url }}" alt="{{ company }} logo"></td>
                       </tr>
                       {% endif %}
                       <tr>
@@ -356,7 +356,7 @@
                   <table class="table table-striped">
                     <thead>
                       <tr>
-                        <th colspan="2" scope="row">Journal</th>
+                        <th scope="row">Journal</th>
                       </tr>
                     </thead>
                     <tbody class="table-group-divider">
@@ -387,17 +387,4 @@
             </div>
           </div>
         </section>
-		<script>
-		  document.addEventListener('DOMContentLoaded', function () {
-			var selectElement = document.getElementById('tabSelector');
-			selectElement.addEventListener('change', function () {
-			  var selectedTabId = this.value;
-			  var tabs = document.querySelectorAll('.tab-pane');
-			  tabs.forEach(function (tab) {
-				tab.classList.remove('show', 'active');
-			  });
-			  document.getElementById(selectedTabId).classList.add('show', 'active');
-			});
-		  });
-		</script>
         {% endblock %}