feat(front): enhance welcome page style and command

MesseBasseProduction · Sep 18, 2022 · a61111f · a61111f
1 parent 1e1b155
commit a61111f
Show file tree

Hide file tree

Showing 25 changed files with 208 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 # BeerCrackerz
 
-The website for beer lover, to share the best spot to crack a beer, or to easily refill this beverage of the gods!
+The website for beer lover, to share the best spots to crack a beer, or to easily refill this beverage of gods!
 Soon enough an alpha will be open for you to test this !
 
-https://github.com/pointhi/leaflet-color-markers
+[LeafletJs](https://leafletjs.com/)
 
-https://leafletjs.com/
+[Leaflet-MarkerCluster](https://github.com/Leaflet/Leaflet.markercluster)
 
-https://www.svgrepo.com/svg/287438/info
+[Leaflet-Color-Markers](https://github.com/pointhi/leaflet-color-markers)
 
-https://github.com/Leaflet/Leaflet.markercluster 
+[SVGRepo](https://www.svgrepo.com/)
diff --git a/back/app/templates/welcome.html b/back/app/templates/welcome.html
@@ -43,10 +43,21 @@
   <!-- Twitter card meta -->
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content="Beer Crackerz" />
-  <meta name="twitter:description" content="The website for beer lover, to share the best spot to crack a beer, or to easily refill this beverage of the gods!" />
+  <meta name="twitter:description" content="The website for beer lover, to share the best spots to crack a beer, or to easily refill this beverage of gods!" />
   <meta name="twitter:image:src" content="{% static 'img/logo-social.png' %}" />
 </head>
 <body class="login">
+  <div id="page-header" class="page-header">
+    <h1>BeerCrackerz</h1>
+    <p><i>The website for beer lover, to share the best spots to crack a beer, or to easily refill this beverage of gods!</i></p>
+  </div>
+  <nav>
+    <div class="cmd-bar">
+      <div class="cmd-wrapper">
+        <img src="{% static 'img/logo/center.svg' %}" alt="center-on" id="center-on">
+      </div>
+    </div>
+  </nav>
   <main id="beer-crakerz-map" class="beer-crakerz-map"></main>
   <div id="zoom-slider" class="zoom-slider">
     <p id="zoom-more">&plus;</p>
@@ -65,14 +76,15 @@ <h2><i>{LOGIN_SUBTITLE}</i></h2>
       <p id="login-error" class="login-error">{LOGIN_HIDDEN_ERROR}</p>
       <label>{LOGIN_USERNAME_LABEL}</label>
       <input id="username" type="text">
-      <label>{LOGIN_USERNAME_PASSWORD} <a href="#" id="forgot-password" alt="forgot-password">{LOGIN_FORGOT_PASSWORD}</a></label>
+      <label>{LOGIN_USERNAME_PASSWORD}</label>
       <input id="password" type="password">
       <button id="login-submit">{LOGIN_BUTTON}</button>
       <p><i>{LOGIN_NOT_REGISTERED} <a href="#" id="register-aside" alt="register">{LOGIN_REGISTER}</a></i></p>
+      <p><i>{LOGIN_FORGOT_PASSWORD} <a href="#" id="forgot-password" alt="forgot-password">{LOGIN_PASSWORD_RESET}</a></i></p>
     </main>
     <footer>
       <a href="https://messe-basse-production.com" target="_blank" rel="noopener noreferrer" alt="software-editor-website">Messe Basse Production</a>
-      <p>2022 - GPL-3.0</p>
+      <p>2022 – GPL-3.0</p>
     </footer>
   </aside>
   <!-- Leaflet script -->

diff --git a/front/doc/BeerCrackerz.html b/front/doc/BeerCrackerz.html
@@ -4757,7 +4757,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BeerCrack
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sat Sep 17 2022 20:45:52 GMT+0200 (Central European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sun Sep 18 2022 11:21:42 GMT+0200 (Central European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/front/doc/BeerCrackerz.js.html b/front/doc/BeerCrackerz.js.html
@@ -1283,7 +1283,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BeerCrack
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sat Sep 17 2022 20:45:52 GMT+0200 (Central European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sun Sep 18 2022 11:21:42 GMT+0200 (Central European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/front/doc/BeerCrackerzAuth.html b/front/doc/BeerCrackerzAuth.html
@@ -756,7 +756,7 @@ <h5 class="subsection-title">Properties:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line833">line 833</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line835">line 835</a>
     </li></ul></dd>
 
 
@@ -866,7 +866,7 @@ <h5 class="subsection-title">Properties:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line843">line 843</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line845">line 845</a>
     </li></ul></dd>
 
 
@@ -976,7 +976,7 @@ <h5 class="subsection-title">Properties:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line863">line 863</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line865">line 865</a>
     </li></ul></dd>
 
 
@@ -1086,7 +1086,7 @@ <h5 class="subsection-title">Properties:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line853">line 853</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line855">line 855</a>
     </li></ul></dd>
 
 
@@ -1382,7 +1382,7 @@ <h6>Properties</h6>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line690">line 690</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line692">line 692</a>
     </li></ul></dd>
 
 
@@ -1506,7 +1506,7 @@ <h4 class="name" id="._drawUserMarker"><span class="type-signature">(private, st
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line666">line 666</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line668">line 668</a>
     </li></ul></dd>
 
 
@@ -1607,7 +1607,7 @@ <h4 class="name" id="._handleLoginAside"><span class="type-signature">(private,
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line427">line 427</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line428">line 428</a>
     </li></ul></dd>
 
 
@@ -1708,7 +1708,7 @@ <h4 class="name" id="._handleRegisterAside"><span class="type-signature">(privat
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line509">line 509</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line511">line 511</a>
     </li></ul></dd>
 
 
@@ -1810,7 +1810,7 @@ <h4 class="name" id="._handleResetPasswordAside"><span class="type-signature">(p
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line594">line 594</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line596">line 596</a>
     </li></ul></dd>
 
 
@@ -2385,7 +2385,7 @@ <h4 class="name" id="._initMarkers"><span class="type-signature">(async, private
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line248">line 248</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line247">line 247</a>
     </li></ul></dd>
 
 
@@ -2557,7 +2557,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line339">line 339</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line340">line 340</a>
     </li></ul></dd>
 
 
@@ -2679,7 +2679,7 @@ <h4 class="name" id="._loadForgotPasswordAside"><span class="type-signature">(pr
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line408">line 408</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line409">line 409</a>
     </li></ul></dd>
 
 
@@ -2779,7 +2779,7 @@ <h4 class="name" id="._loadLoginAside"><span class="type-signature">(private, st
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line370">line 370</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line371">line 371</a>
     </li></ul></dd>
 
 
@@ -2879,7 +2879,7 @@ <h4 class="name" id="._loadRegisterAside"><span class="type-signature">(private,
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line389">line 389</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line390">line 390</a>
     </li></ul></dd>
 
 
@@ -3193,7 +3193,7 @@ <h6>Properties</h6>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line738">line 738</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line740">line 740</a>
     </li></ul></dd>
 
 
@@ -3388,7 +3388,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line797">line 797</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line799">line 799</a>
     </li></ul></dd>
 
 
@@ -3489,7 +3489,7 @@ <h4 class="name" id="._toggleAside"><span class="type-signature">(private, stati
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line311">line 311</a>
+        <a href="BeerCrackerzAuth.js.html">BeerCrackerzAuth.js</a>, <a href="BeerCrackerzAuth.js.html#line310">line 310</a>
     </li></ul></dd>
 
 
@@ -3541,7 +3541,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BeerCrack
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sat Sep 17 2022 20:45:52 GMT+0200 (Central European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sun Sep 18 2022 11:21:42 GMT+0200 (Central European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/front/doc/BeerCrackerzAuth.js.html b/front/doc/BeerCrackerzAuth.js.html
@@ -251,13 +251,8 @@ <h1 class="page-title">Source: BeerCrackerzAuth.js</h1>
         // Constrain pan to the map bounds
         this._map.panInsideBounds(Utils.MAP_BOUNDS, { animate: true });
       });
-      // Map events
-      this._map.on('zoomstart', () => {
-        this._isZooming = true;
-      });
+      // Auto hide labels if zoom level is too high (and restore it when needed)
       this._map.on('zoomend', () => {
-        this._isZooming = false;
-        // Auto hide labels if zoom level is too high (and restore it when needed)
         if (this._map.getZoom() &lt; 15) {
           this._setMarkerLabels(this._marks.spot, false);
           this._setMarkerLabels(this._marks.shop, false);
@@ -268,6 +263,10 @@ <h1 class="page-title">Source: BeerCrackerzAuth.js</h1>
           this._setMarkerLabels(this._marks.bar, true);
         }
       });
+      // Center on command
+      document.getElementById('center-on').addEventListener('click', () => {
+        this._map.flyTo([this._user.lat, this._user.lng], 18);
+      });
       resolve();
     });
   }
@@ -350,16 +349,18 @@ <h1 class="page-title">Source: BeerCrackerzAuth.js</h1>
    * &lt;/blockquote>
    **/
   _toggleAside() {
-    if (this._isAsideExpanded === true) {
+    if (this._isAsideExpanded === true) { // Collapsing aside
       this._isAsideExpanded = false;
       document.documentElement.style.setProperty('--aside-offset', '-40rem');
       document.getElementById('aside-expander-icon').src = '/static/img/logo/left.svg';
+      document.getElementById('page-header').classList.add('visible');
       setTimeout(() => document.getElementById('aside-expander').style.left = '-5rem', 300);
-    } else {
+    } else { // Expanding aside
       this._isAsideExpanded = true;
       document.documentElement.style.setProperty('--aside-offset', '0rem');
       document.getElementById('aside-expander-icon').src = '/static/img/logo/right.svg';
       document.getElementById('aside-expander').style.left = '0';
+      document.getElementById('page-header').classList.remove('visible');
     }
   }
 
@@ -473,10 +474,11 @@ <h1 class="page-title">Source: BeerCrackerzAuth.js</h1>
     Utils.replaceString(aside, '{LOGIN_HIDDEN_ERROR}', this.nls.login('hiddenError'));
     Utils.replaceString(aside, '{LOGIN_USERNAME_LABEL}', this.nls.login('username'));
     Utils.replaceString(aside, '{LOGIN_USERNAME_PASSWORD}', this.nls.login('password'));
-    Utils.replaceString(aside, '{LOGIN_FORGOT_PASSWORD}', this.nls.login('forgot'));
     Utils.replaceString(aside, '{LOGIN_BUTTON}', this.nls.login('login'));
     Utils.replaceString(aside, '{LOGIN_NOT_REGISTERED}', this.nls.login('notRegistered'));
     Utils.replaceString(aside, '{LOGIN_REGISTER}', this.nls.login('register'));
+    Utils.replaceString(aside, '{LOGIN_FORGOT_PASSWORD}', this.nls.login('forgot'));
+    Utils.replaceString(aside, '{LOGIN_PASSWORD_RESET}', this.nls.login('reset'));
 
     const error = document.getElementById('login-error');
     const username = document.getElementById('username');
@@ -913,7 +915,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BeerCrack
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sat Sep 17 2022 20:45:52 GMT+0200 (Central European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sun Sep 18 2022 11:21:42 GMT+0200 (Central European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/front/doc/Kom.html b/front/doc/Kom.html
@@ -2303,7 +2303,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BeerCrack
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sat Sep 17 2022 20:45:52 GMT+0200 (Central European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sun Sep 18 2022 11:21:42 GMT+0200 (Central European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/front/doc/index.html b/front/doc/index.html
@@ -44,12 +44,12 @@ <h3> </h3>
 
     <section>
         <article><h1>BeerCrackerz</h1>
-<p>The website for beer lover, to share the best spot to crack a beer, or to easily refill this beverage of the gods!
+<p>The website for beer lover, to share the best spots to crack a beer, or to easily refill this beverage of gods!
 Soon enough an alpha will be open for you to test this !</p>
-<p>https://github.com/pointhi/leaflet-color-markers</p>
-<p>https://leafletjs.com/</p>
-<p>https://www.svgrepo.com/svg/287438/info</p>
-<p>https://github.com/Leaflet/Leaflet.markercluster</p></article>
+<p><a href="https://leafletjs.com/">LeafletJs</a></p>
+<p><a href="https://github.com/Leaflet/Leaflet.markercluster">Leaflet-MarkerCluster</a></p>
+<p><a href="https://github.com/pointhi/leaflet-color-markers">Leaflet-Color-Markers</a></p>
+<p><a href="https://www.svgrepo.com/">SVGRepo</a></p></article>
     </section>
 
 
@@ -66,7 +66,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BeerCrack
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sat Sep 17 2022 20:45:52 GMT+0200 (Central European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sun Sep 18 2022 11:21:42 GMT+0200 (Central European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/front/doc/js_core_Kom.js.html b/front/doc/js_core_Kom.js.html
@@ -471,7 +471,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BeerCrack
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sat Sep 17 2022 20:45:52 GMT+0200 (Central European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sun Sep 18 2022 11:21:42 GMT+0200 (Central European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/front/doc/js_utils_Utils.js.html b/front/doc/js_utils_Utils.js.html
@@ -261,7 +261,7 @@ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BeerCrack
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sat Sep 17 2022 20:45:52 GMT+0200 (Central European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Sun Sep 18 2022 11:21:42 GMT+0200 (Central European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>