Fix message dialog (js) + add header menu

.idea/sshConfigs.xml

@@ -4,6 +4,7 @@
     <configs>
       <sshConfig authType="PASSWORD" host="giftopic.fr" id="818b2043-4522-45d1-a6aa-6e33d67df9a2" port="4352" customName="giftopic-dev" nameFormat="CUSTOM" username="giftopic-dev" />
       <sshConfig authType="PASSWORD" host="giftopic.fr" id="8723ba75-f241-4c47-b5e4-bb4d58cd78d4" port="4351" nameFormat="DESCRIPTIVE" username="database" />
+      <sshConfig authType="PASSWORD" host="giftopic.fr" id="5170af19-1f09-4309-be27-9e349cd19dbf" port="4352" customName="giftopic-dev" nameFormat="CUSTOM" username="giftopic-dev" />
     </configs>
   </component>
 </project>

assets/css/app.scss

@@ -1,30 +0,0 @@
-@import "~bootstrap/scss/bootstrap";
-
-@font-face {
-    font-family: Gabriola;
-    font-style: normal;
-    font-weight: normal;
-    src: local('Gabriola'), url('/build/static/fonts/gabriola.woff') format('woff');
-}
-@font-face {
-    font-family: BlackChancery;
-    font-style: normal;
-    font-weight: normal;
-    src: local('BlackChancery'), url('/build/static/fonts/black_chancery.ttf') format('truetype');
-}
-
-#messages {
-    display: none;
-}
-
-body {
-    font-family: Gabriola, sans-serif;
-    font-size: 1.5rem;
-    margin : 120px 5px 0 5px;
-}
-.ui-widget {
-    font-family: Gabriola, sans-serif;
-    font-size: 1.5rem;
-}
-
-@import "header";

assets/css/base/fonts.scss

@@ -0,0 +1,12 @@
+@font-face {
+  font-family: Gabriola;
+  font-style: normal;
+  font-weight: normal;
+  src: local('Gabriola'), url('/build/static/fonts/gabriola.woff') format('woff');
+}
+@font-face {
+  font-family: BlackChancery;
+  font-style: normal;
+  font-weight: normal;
+  src: local('BlackChancery'), url('/build/static/fonts/black_chancery.ttf') format('truetype');
+}

assets/css/components/messages.scss

@@ -0,0 +1,3 @@
+#messages {
+  display: none;
+}

assets/css/header.scss

@@ -1,13 +0,0 @@
-header {
-    position   : fixed;
-    top        : 0;
-    left       : 0;
-    width      : 100%;
-    background : rgba(255, 255, 255, 1);
-}
-
-#logo {
-    font-family : BlackChancery, sans-serif;
-    font-size   : 3em;
-    margin-left: 10px;
-}

assets/css/layouts/header.scss

@@ -0,0 +1,20 @@
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(255, 255, 255, 1);
+  padding: 5px 10px 0 10px;
+
+  display: flex;
+  justify-content: space-between;
+
+  nav a {
+    margin: 0 5px;
+  }
+}
+
+#logo {
+  font-family: BlackChancery, sans-serif;
+  font-size: 2em;
+}

assets/css/layouts/page.scss

@@ -0,0 +1,12 @@
+%font {
+  font-family: Gabriola, sans-serif;
+  font-size: 1.5rem;
+}
+
+body {
+  @extend %font;
+  margin: 80px 5px 0 5px;       // Vertical translation for the fixed header
+}
+.ui-widget {
+  @extend %font;
+}

assets/css/main.scss

@@ -0,0 +1,8 @@
+@import "~bootstrap/scss/bootstrap";
+
+@import "base/fonts";
+
+@import "components/messages";
+
+@import "layouts/page";
+@import "layouts/header";

assets/js/main.js

@@ -0,0 +1,6 @@
+require('bootstrap/dist/js/bootstrap.bundle.min');
+
+require('@fortawesome/fontawesome-free/css/all.min.css');
+
+require('../css/main.scss');
+require('../js/messages.js');

assets/js/messages.js

@@ -1,7 +1,6 @@
-require('../css/app.scss');
-
 const $ = require('jquery');
-require('jquery-ui');
+require('jquery-ui-css/all.css');
+require('jquery-ui/dialog');
 
 $(function () {
     /* Messages */

package.json

@@ -18,6 +18,7 @@
         "build": "encore production --progress"
     },
     "dependencies": {
+        "@fortawesome/fontawesome-free": "^5.13.0",
         "jquery": "^3.5.1",
         "jquery-ui": "^1.12.1"
     }

symfony.lock

@@ -525,7 +525,7 @@
         },
         "files": [
             "assets/css/app.css",
-            "assets/js/app.js",
+            "assets/js/main.js",
             "config/packages/assets.yaml",
             "config/packages/prod/webpack_encore.yaml",
             "config/packages/test/webpack_encore.yaml",

templates/base.html.twig

@@ -8,7 +8,7 @@
 
     <!-- STYLESHEET -->
     {% block stylesheets %}
-        {{ encore_entry_link_tags('app') }}
+        {{ encore_entry_link_tags('main') }}
     {% endblock %}
 </head>
 <body>
@@ -16,11 +16,20 @@
         <div id="logo">
             Giftopic
         </div>
-        <div>
+        <nav>
+            <a href="{{ path('app_site_index') }}" class="fas fa-home"></a>
             {% if app.user %}
-                {{ app.user.username }}, <a href="{{ path('app_security_sign_out') }}">{% trans from 'security' %}sign.out{% endtrans %}</a>
+                <div class="dropdown">
+                    <button type="button" id="menu_username" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ app.user.username }}</button>
+                    <div class="dropdown-menu" aria-labelledby="menu_username">
+                        <a href="{{ path('app_security_sign_out') }}" class="dropdown-item">{% trans from 'security' %}sign.out{% endtrans %}</a>
+                    </div>
+                </div>
+            {% else %}
+                {#                    <li><a href="{{ path('app_security_sign_up') }}">{% trans from 'security' %}sign.up{% endtrans %}</a></li>#}
+                <a href="{{ path('app_security_sign_in') }}">{% trans from 'security' %}sign.in{% endtrans %}</a>
             {% endif %}
-        </div>
+        </nav>
     </header>
 
     {% block body %}{% endblock %}
@@ -41,7 +50,7 @@
 
     <!-- JAVASCRIPT -->
     {% block javascripts %}
-        {{ encore_entry_script_tags('app') }}
+        {{ encore_entry_script_tags('main') }}
     {% endblock %}
 </body>
 </html>

webpack.config.js

@@ -27,6 +27,13 @@ Encore
         },
     ))
 
+    .addAliases(
+        {
+            'jquery-ui':     'jquery-ui/ui/widgets',
+            'jquery-ui-css': 'jquery-ui/../../themes/base',
+        },
+    )
+
     /*
      * ENTRY CONFIG
      *
@@ -36,7 +43,7 @@ Encore
      * Each entry will result in one JavaScript file (e.g. app.js)
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
-    .addEntry('app', './assets/js/app.js')
+    .addEntry('main', './assets/js/main.js')
     //.addEntry('page1', './assets/js/page1.js')
     //.addEntry('page2', './assets/js/page2.js')
 

yarn.lock

@@ -743,6 +743,11 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-free@^5.13.0":
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.0.tgz#fcb113d1aca4b471b709e8c9c168674fbd6e06d9"
+  integrity sha512-xKOeQEl5O47GPZYIMToj6uuA2syyFlq9EMSl2ui0uytjY9xbe8XS0pexNWmxrdcCyNGyDmLyYw5FtKsalBUeOg==
+
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"