Merge new 404 design into main (#57)

* Initial rebranding styles Changed header and footer background color for both light and dark modes * Initial rebranding styles * Fixing styles The headings should no longer be underlined and cards should now show have black as font color in dark mode * Fixes in links The links and titles should now show properly in cards for both dark and light modes * Rebranding styles This commit includes multiple changes for the rebranding styles, like changing some colors. * The right content bar should now be sticky to the page, making it always available with no need to scroll to the top * Collapse and Expand all buttons has been added for the left navbar * The GCX code component should now take all the entire height from the body space on the website. * The code blocks should no longer have bold font * New 404 docs design This commit includes the new content and style applied to the antora 404 page. * Update 404.hbs This update includes the relative paths used on the live server * Update 404.hbs Changed location to /en/home * 404 footer fix The footer for the 404 page should now be fixed at the bottom of the device * 404 Fixes Fixed 404 design for mobile and error on console fixed * Update 404.hbs Testing permissions * Update 404.hbs Fixed relative paths on 404 page --------- Co-authored-by: Kenni Martínez <57879404+KenniM@users.noreply.github.com>
riptano · Feb 23, 2023 · e9162da · e9162da
1 parent 002e9cd
commit e9162da
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 7 deletions.
diff --git a/gcx/gulpfile.js b/gcx/gulpfile.js
@@ -39,7 +39,7 @@ const bundleJSsrc = () =>
 
 // Bundle a site.js for the 404 error page, excluding 01-nav.js
 const bundleJS404 = () =>{
-    return src(['styles/src/js/*.js','!styles/src/js/01-nav.js'])
+    return src(['styles/src/js/*.js','!styles/src/js/01-nav.js', '!styles/src/js/08-gcx-helios.js'])
     .pipe(concat('site404.js'))
     .pipe(dest('build/js'));
 }

diff --git a/gcx/styles/src/css/helios-gcx-body.css b/gcx/styles/src/css/helios-gcx-body.css
@@ -227,3 +227,8 @@ main > .content {
     }
 }
 
+@media screen and (max-width: 767px) {
+    article.doc .center{
+        max-width: 100%!important;
+    }
+}
diff --git a/gcx/styles/src/css/helios-gcx-footer.css b/gcx/styles/src/css/helios-gcx-footer.css
@@ -19,8 +19,3 @@ footer .container-fluid {
 .copyright-line {
     font-weight: bold;
 }
-
-.wh_footer.notFound{
-    position: fixed;
-}
-
diff --git a/gcx/styles/src/layouts/404.hbs b/gcx/styles/src/layouts/404.hbs
@@ -6,9 +6,10 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="stylesheet" href="/en/home/assets/css/site.css">
   <title>Oops! We can't find that page {{#with site.title}} :: {{this}}{{/with}}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 
-<body class="status-404">
+<body class="article status-404">
   <header class="header">
     <nav class="navbar">
       <div class="navbar-brand">
@@ -166,5 +167,76 @@
         root.classList.add('dark-mode');
       }
     }();
+
+    function isMobile () {
+  // eslint-disable-next-line no-undef
+  if (sessionStorage.desktop) return false
+  // eslint-disable-next-line no-undef
+  else if (localStorage.mobile) return true
+  // eslint-disable-next-line max-len
+  var mobile = ['iphone', 'ipad', 'android', 'blackberry', 'nokia', 'opera mini', 'windows mobile', 'windows phone', 'iemobile']
+  for (var i in mobile) { if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true }
+  return false
+}
+
+window.addEventListener('DOMContentLoaded', (event) => {
+  var theme = window.localStorage.getItem('theme')
+
+  var path = window.location.pathname
+  var page = path.split('/').pop()
+  var name = page.replace('.html', '')
+  console.log(name)
+  const sidebar = document.querySelector('.sidebar')
+  const col = document.getElementById('collapse')
+  var checkbox = document.getElementById('switch')
+  if (theme) {
+    checkbox.checked = true
+  } else {
+    checkbox.checked = false
+  }
+
+  if (name === 'landing' && !isMobile()) {
+    col.checked = true
+    sidebar.classList.add('small-container')
+  }
+
+  var elements = document.body.getElementsByTagName('pre')
+  for (var i = 0; i < elements.length; i++) {
+    for (const child of elements[i].children) {
+      if (child.tagName === 'CODE') {
+        elements[i].classList.add('has-code')
+      }
+    }
+  }
+
+  document.addEventListener('click', function (event) {
+    //No es un clic en el sidebar
+    //if (!event.target.matches('li[data-depth="1"]') && !event.target.matches('.switch')) return;
+    /*    if (event.target.closest('li.nav-item.toggler')) {
+                      console.log(event.target)
+                      event.target.closest('li.nav-item.toggler').classList.toggle('is-active')
+                    }
+                    /*if ((event.target.matches('span.nav-text') ||
+                                event.target.matches('button.nav-item-toggle')) &&
+                            (event.target.offsetParent.matches('li[data-depth="1"]') ||
+                                event.target.offsetParent.matches('li[data-depth="0"]'))) {
+                            event.target.offsetParent.classList.toggle('is-active');
+                        }
+                        if (event.target.matches('li[data-depth="1"]') ||
+                            event.target.matches('li[data-depth="0"]')) {
+                            event.target.classList.toggle('is-active');
+                        }*/
+    if (event.target.matches('.switch')) {
+      var root = document.getElementsByTagName('html')[0]
+      if (event.target.checked) {
+        window.localStorage.setItem('theme', 'dark')
+        root.classList.add('dark-mode')
+      } else {
+        window.localStorage.removeItem('theme')
+        root.classList.remove('dark-mode')
+      }
+    }
+  }, false)
+})
   </script>
 </body>