Merge new 404 design into main (#57)

KenniMartinezM · KenniM · web-flow · commit e9162da05888 · 2023-02-23T12:48:33.000-07:00
* 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 &lt;57879404+KenniM@users.noreply.github.com&gt;
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>

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ const bundleJSsrc = () =>`
`39`	`39`
`40`	`40`	`// Bundle a site.js for the 404 error page, excluding 01-nav.js`
`41`	`41`	`const bundleJS404 = () =>{`
`42`		`- return src(['styles/src/js/*.js','!styles/src/js/01-nav.js'])`
	`42`	`+ return src(['styles/src/js/*.js','!styles/src/js/01-nav.js', '!styles/src/js/08-gcx-helios.js'])`
`43`	`43`	`.pipe(concat('site404.js'))`
`44`	`44`	`.pipe(dest('build/js'));`
`45`	`45`	`}`
Original file line number	Diff line number	Diff line change
`@@ -227,3 +227,8 @@ main > .content {`
`227`	`227`	`}`
`228`	`228`	`}`
`229`	`229`
	`230`	`+@media screen and (max-width: 767px) {`
	`231`	`+ article.doc .center{`
	`232`	`+ max-width: 100%!important;`
	`233`	`+ }`
	`234`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -19,8 +19,3 @@ footer .container-fluid {`
`19`	`19`	`.copyright-line {`
`20`	`20`	`font-weight: bold;`
`21`	`21`	`}`
`22`		`-`
`23`		`-.wh_footer.notFound{`
`24`		`- position: fixed;`
`25`		`-}`
`26`		`-`