From 21b93880c8e99c8aa1687524e5402de59c5fa10f Mon Sep 17 00:00:00 2001 From: darkelfe14728 Date: Sun, 24 May 2020 18:34:39 +0200 Subject: [PATCH] Fix message dialog (js) + add header menu --- .idea/sshConfigs.xml | 1 + assets/css/app.scss | 30 ----------------------------- assets/css/base/fonts.scss | 12 ++++++++++++ assets/css/components/messages.scss | 3 +++ assets/css/header.scss | 13 ------------- assets/css/layouts/header.scss | 20 +++++++++++++++++++ assets/css/layouts/page.scss | 12 ++++++++++++ assets/css/main.scss | 8 ++++++++ assets/js/main.js | 6 ++++++ assets/js/{app.js => messages.js} | 5 ++--- package.json | 1 + symfony.lock | 2 +- templates/base.html.twig | 19 +++++++++++++----- webpack.config.js | 9 ++++++++- yarn.lock | 5 +++++ 15 files changed, 93 insertions(+), 53 deletions(-) delete mode 100644 assets/css/app.scss create mode 100644 assets/css/base/fonts.scss create mode 100644 assets/css/components/messages.scss delete mode 100644 assets/css/header.scss create mode 100644 assets/css/layouts/header.scss create mode 100644 assets/css/layouts/page.scss create mode 100644 assets/css/main.scss create mode 100644 assets/js/main.js rename assets/js/{app.js => messages.js} (68%) diff --git a/.idea/sshConfigs.xml b/.idea/sshConfigs.xml index 6f9427c..f34483b 100644 --- a/.idea/sshConfigs.xml +++ b/.idea/sshConfigs.xml @@ -4,6 +4,7 @@ + \ No newline at end of file diff --git a/assets/css/app.scss b/assets/css/app.scss deleted file mode 100644 index ed1a532..0000000 --- a/assets/css/app.scss +++ /dev/null @@ -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"; \ No newline at end of file diff --git a/assets/css/base/fonts.scss b/assets/css/base/fonts.scss new file mode 100644 index 0000000..ab13deb --- /dev/null +++ b/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'); +} \ No newline at end of file diff --git a/assets/css/components/messages.scss b/assets/css/components/messages.scss new file mode 100644 index 0000000..bed6fb2 --- /dev/null +++ b/assets/css/components/messages.scss @@ -0,0 +1,3 @@ +#messages { + display: none; +} \ No newline at end of file diff --git a/assets/css/header.scss b/assets/css/header.scss deleted file mode 100644 index acc9cf0..0000000 --- a/assets/css/header.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/assets/css/layouts/header.scss b/assets/css/layouts/header.scss new file mode 100644 index 0000000..a1191ac --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/css/layouts/page.scss b/assets/css/layouts/page.scss new file mode 100644 index 0000000..8459bbf --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/css/main.scss b/assets/css/main.scss new file mode 100644 index 0000000..a3042b3 --- /dev/null +++ b/assets/css/main.scss @@ -0,0 +1,8 @@ +@import "~bootstrap/scss/bootstrap"; + +@import "base/fonts"; + +@import "components/messages"; + +@import "layouts/page"; +@import "layouts/header"; \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..7f26dbd --- /dev/null +++ b/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'); \ No newline at end of file diff --git a/assets/js/app.js b/assets/js/messages.js similarity index 68% rename from assets/js/app.js rename to assets/js/messages.js index 2aa285a..dc4e680 100644 --- a/assets/js/app.js +++ b/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 */ diff --git a/package.json b/package.json index d7bbcce..a03ffd5 100644 --- a/package.json +++ b/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" } diff --git a/symfony.lock b/symfony.lock index 379adca..4360c41 100644 --- a/symfony.lock +++ b/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", diff --git a/templates/base.html.twig b/templates/base.html.twig index c5ab31e..e19457d 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -8,7 +8,7 @@ {% block stylesheets %} - {{ encore_entry_link_tags('app') }} + {{ encore_entry_link_tags('main') }} {% endblock %} @@ -16,11 +16,20 @@ -
+
+ {% block body %}{% endblock %} @@ -41,7 +50,7 @@ {% block javascripts %} - {{ encore_entry_script_tags('app') }} + {{ encore_entry_script_tags('main') }} {% endblock %} diff --git a/webpack.config.js b/webpack.config.js index 1b68c7b..3a126bc 100644 --- a/webpack.config.js +++ b/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') diff --git a/yarn.lock b/yarn.lock index 5f841ee..96864ba 100644 --- a/yarn.lock +++ b/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"