Add a menu system to all pages

- Uses jquery popper lib and bootstrap
pascalchevrel · Oct 8, 2024 · 5d7a267 · 5d7a267
1 parent 66e8924
commit 5d7a267
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 38 deletions.
diff --git a/app/controllers/release.php b/app/controllers/release.php
@@ -16,8 +16,16 @@
 $upcoming_releases = (new Data())->getFutureReleases();
 $owners = (new Data())->getOwners();
 
+$css_page_id = match (true) {
+    $requested_version_int === NIGHTLY => 'release_nightly',
+    $requested_version_int === BETA    => 'release_beta',
+    $requested_version_int === RELEASE => 'release_current',
+    $requested_version_int < RELEASE   => 'release_past',
+    default                            => 'release_future',
+};
+
 $template_data = [
-    'css_page_id'      => 'release',
+    'css_page_id'      => $css_page_id,
     'page_title'       => 'Milestones and key data for Firefox ' . $requested_version_int,
     'release'          => $requested_version_int,
     'release_owner'    => $owners[$requested_version] ?? 'TBD',

diff --git a/app/models/beta.php b/app/models/beta.php
@@ -3,11 +3,8 @@
 declare(strict_types=1);
 
 use ReleaseInsights\{Beta, Bugzilla, Json, Utils, URL};
-use ReleaseInsights\Debug as D;
 
 $beta = new Beta();
-D::dump($beta);
-
 
 $uplift_counter = 0;
 $bug_list_details = [];

diff --git a/app/models/nightly.php b/app/models/nightly.php
@@ -177,7 +177,6 @@
     'OOM | small',
 ];
 
-\ReleaseInsights\Debug::dump($top_sigs);
 $top_sigs_worth_a_bug = [];
 foreach ($top_sigs as $k => $values) {
     foreach ($values as $target) {

diff --git a/app/views/templates/base.html.twig b/app/views/templates/base.html.twig
@@ -7,7 +7,7 @@
     <link rel="alternate" type="application/rss+xml" title="Feed to get alerted of Firefox releases" href="/rss/">
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" media="screen">
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap-icons.css" media="screen">
-    <link rel="stylesheet" href="/style/base.css?version=41" type="text/css" media="all">
+    <link rel="stylesheet" href="/style/base.css?version=42" type="text/css" media="all">
 {% if branch != '' %}
     <link rel="icon" type="image/svg+xml" href="/assets/img/site_icon_dev.svg">
 {% else %}
@@ -36,11 +36,12 @@
     <div class="position-absolute top-0 start-50 translate-middle-x font-monospace fw-bold text-dark bg-warning bg-gradient mt-1 w-75 text-center">This is a staging environment for <a href="https://whattrainisitnow.com"  class="link-primary bg-warning">whattrainisitnow.com</a></div>
     {% endif %}
 
-    {% if css_page_id != 'homepage' %}
-    <nav class="nav"><a href="/"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 576 512"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"/></svg></a></nav>
-    {% endif %}
+    {% include 'menu.html.twig' %}
     {% block header %}{% endblock %}
     {% block main   %}{% endblock %}
+    <script src="/assets/jquery/jquery.slim.min.js"></script>
+    <script src="/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
     {% block footer %}{% endblock %}
+
   </body>
-</html>
+</html>
diff --git a/app/views/templates/beta.html.twig b/app/views/templates/beta.html.twig
@@ -164,9 +164,6 @@
 </div>
 {% endfor %}
 
-
-<script src="/assets/jquery/jquery.slim.min.js"></script>
-<script src="/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
 <script nonce="{{constant('NONCE')}}">
 $(document).ready(function() {
     $(document).on("click", "table thead tr th", function() {

diff --git a/app/views/templates/calendar.html.twig b/app/views/templates/calendar.html.twig
@@ -126,8 +126,6 @@
   </tbody>
 </table>
 </details>
-    <script src="/assets/jquery/jquery.slim.min.js"></script>
-    <script src="/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
 
 {% endblock %}
 

diff --git a/app/views/templates/future_release.html.twig b/app/views/templates/future_release.html.twig
@@ -383,8 +383,6 @@
 
 {% endif %}
   {{ fallback_content|raw }}
-    <script src="/assets/jquery/jquery.slim.min.js"></script>
-    <script src="/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
 {% endblock %}
 
 {% block footer %}

diff --git a/app/views/templates/menu.html.twig b/app/views/templates/menu.html.twig
@@ -0,0 +1,42 @@
+<nav class="nav navbar dropdown">
+    <button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="32" height="32" fill="white" fill-opacity="context-fill-opacity">
+          <path d="m13.375 4.25-10.75 0a.625.625 0 0 1 0-1.25l10.75 0a.625.625 0 0 1 0 1.25z"/>
+          <path d="m13.375 8.25-10.75 0a.625.625 0 0 1 0-1.25l10.75 0a.625.625 0 0 1 0 1.25z"/>
+          <path d="m13.375 12.25-10.75 0a.625.625 0 0 1 0-1.25l10.75 0a.625.625 0 0 1 0 1.25z"/>
+        </svg>
+    </button>
+    {% if css_page_id == 'homepage' %}
+        {% set active_home = 'active' %}
+    {% elseif css_page_id == 'release_current' %}
+        {% set active_rel_release = 'active' %}
+    {% elseif css_page_id == 'release_beta' %}
+        {% set active_rel_beta = 'active' %}
+    {% elseif css_page_id == 'release_nightly' %}
+        {% set active_rel_nightly = 'active' %}
+    {% elseif css_page_id == 'release_esr' %}
+        {% set active_rel_esr = 'active' %}
+    {% elseif css_page_id == 'nightly' %}
+        {% set active_nightly = 'active' %}
+    {% elseif css_page_id == 'beta' %}
+        {% set active_beta = 'active' %}
+    {% elseif css_page_id == 'calendar_main' %}
+        {% set active_calendar = 'active' %}
+    {% elseif css_page_id == 'about' %}
+        {% set active_about = 'active' %}
+    {% endif %}
+
+    <ul class="dropdown-menu">
+        <li><a class="dropdown-item {{ active_home }}" href="/">Home</a></li>
+        <li class="dropdown-header fs-6 border-bottom border-1 border-secondary-subtle text-info-emphasis pb-0 fst-italic">Trains</li>
+        <li><a class="dropdown-item fxt-ps-2 {{ active_rel_release }}" href="/release/?version=release">Release</a></li>
+        <li><a class="dropdown-item fxt-ps-2 {{ active_rel_beta }}" href="/release/?version=beta">Beta</a></li>
+        <li><a class="dropdown-item fxt-ps-2 {{ active_rel_nightly }}" href="/release/?version=nightly">Nightly</a></li>
+        <li><a class="dropdown-item fxt-ps-2 {{ active_rel_esr }}" href="/release/?version=esr">ESR</a></li>
+        <li class="dropdown-header fs-6 border-bottom border-1 border-secondary-subtle text-info-emphasis pb-0 fst-italic">Bug landings and crashes</li>
+        <li><a class="dropdown-item fxt-ps-2 {{ active_nightly }}" href="/nightly/">In Nightly</a></li>
+        <li><a class="dropdown-item fxt-ps-2 {{ active_beta }}" href="/beta/">In Beta</a></li>
+        <li><a class="dropdown-item {{ active_calendar }}" href="/calendar/">Calendar</a></li>
+        <li><a class="dropdown-item {{ active_about }}" href="/about/">About</a></li>
+    </ul>
+</nav>
diff --git a/app/views/templates/nightly.html.twig b/app/views/templates/nightly.html.twig
@@ -206,9 +206,6 @@
 {% else %}
 <p>No Nightly build released yet today</p>
 {% endfor %}
-
-    <script src="/assets/jquery/jquery.slim.min.js"></script>
-    <script src="/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
     <script nonce="{{constant('NONCE')}}">
     $(document).ready(function() {
         $(document).on("click", "table thead tr th", function() {

diff --git a/app/views/templates/overview.html.twig b/app/views/templates/overview.html.twig
@@ -10,8 +10,6 @@
 {% set tooltip_defaults = ' data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" ' %}
 
 {% block header %}
-  <a href="/about" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Get the list of views and APIs available in this application."><span class="information bi bi-info-square-fill fs-2"></span></a>
-
   <h1 class="text-center fw-bold">Firefox Trains</h1>
 {% endblock %}
 
@@ -102,8 +100,6 @@
     <h4 class="text-center mt-4">Next merge day: {{ nightly_cycle_dates.merge_day|format_date(pattern='MMMM d', locale='en') }}</h4>
   {% endif %}
 
-    <script src="/assets/jquery/jquery.slim.min.js"></script>
-    <script src="/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
 {% endblock %}
 
 {% block footer %}

diff --git a/app/views/templates/past_release.html.twig b/app/views/templates/past_release.html.twig
@@ -215,8 +215,6 @@
 
 {% block footer %}
   {% include 'footer_UTC_warning.html.twig' %}
-  <script src="/assets/jquery/jquery.slim.min.js"></script>
-  <script src="/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
   <script nonce="{{constant('NONCE')}}">
   $(function () {
     $('[data-bs-toggle="tooltip"]').tooltip()

diff --git a/public/assets/img/menu.svg b/public/assets/img/menu.svg
diff --git a/public/style/base.css b/public/style/base.css
@@ -100,8 +100,7 @@ h1, h2, h3 {
 }
 
 /* Milestones caption on top of list */
-#release caption,
-#release_esr caption {
+body[id^='release_'] caption {
     caption-side: top;
 }
 
@@ -127,8 +126,7 @@ h1, h2, h3 {
     width: 6em;
 }
 
-#release .table td,
-#release_esr .table td {
+body[id^='release_']  .table td {
     text-align: right;
     white-space: nowrap;
     width: 9em;
@@ -142,7 +140,7 @@ h1, h2, h3 {
     text-align: center;
 }
 
-#release .table th details p {
+body[id^='release_'] .table th details p {
     padding: 0.5rem;
     margin: 0.5em;
     border-left: 3px solid lightgray;
@@ -151,15 +149,15 @@ h1, h2, h3 {
 }
 
 /* hide working days when <details> tag not popen */
-#release th:has(details) + td small {
+body[id^='release_']:not(#release_esr) th:has(details) + td small {
     display:none;
 }
 
-#release th:has(details[open]) + td small {
+body[id^='release_']:not(#release_esr) th:has(details[open]) + td small {
     display: inline;
 }
 
-#release .table th summary::marker {
+body[id^='release_']:not(#release_esr) .table th summary::marker {
     color: lightgray;
     font-size:  small;
 }
@@ -198,13 +196,13 @@ h1, h2, h3 {
     }
 
     /* Split the Last uplift tag on mobile */
-    #release .table th small span::before{
+    body[id^='release_']:not(#release_esr) .table th small span::before{
         content: "\a";
         white-space: pre;
     }
 
     /* limit horizontal scroll */
-    #release .table td {
+    body[id^='release_']:not(#release_esr) .table td {
         text-wrap: auto;
     }
 
@@ -370,4 +368,15 @@ footer {
 .w-10 {
     width: 10%;
     outline-right: 10px solid red;
-}
+}
+
+/* Global dropdown menu spacing utility */
+.fxt-ps-2 {
+    padding-left: 2rem;
+}
+
+/* hover effect on the menu icon */
+nav svg:hover {
+    fill: #0d6efd   ;
+}
+
diff --git a/tests/Functional/pages.php b/tests/Functional/pages.php
@@ -14,7 +14,7 @@
     ['nightly/', 200, '', 'id="nightly"'],
     ['calendar/', 200, '', 'id="calendar_main"'],
     ['calendar/monthly/', 200, '', 'id="calendar_monthly"'],
-    ['release/', 200, 'Release Owner', 'id="release"'],
+    ['release/', 200, 'Release Owner', 'id="release_beta"'],
     ['release/?version=beta', 200, '', '<meta http-equiv="refresh" content="7200">'], // Auto-refresh the Future Release page every 2 hours
     ['release/?version=94', 200, '<td title="Tuesday, September 7, 2021">September 7</td>', ''], // Test Nightly start date is correct
     ['', 200, 'Firefox Trains', '<meta http-equiv="refresh" content="21600">'], // Auto-refresh the Home page every 6 hours