diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index f710851..01b25c1 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -8,6 +8,27 @@ import Turbolinks from "turbolinks" import * as ActiveStorage from "@rails/activestorage" import "channels" +import '../src/application.scss' + +import 'bootstrap'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import "@fortawesome/fontawesome-free/js/all.min"; +import "@fortawesome/fontawesome-free/css/all.min"; +import "moment"; +import "select2"; + +window.jQuery = $; +window.$ = $; + Rails.start() Turbolinks.start() ActiveStorage.start() + +$(document).ready(function () { + $('#toggleSideNav').on('click', function () { + $('#sidenav').toggleClass('active'); + }); + +}); + +import "controllers" diff --git a/app/javascript/src/application.scss b/app/javascript/src/application.scss index f5b5997..278b453 100644 --- a/app/javascript/src/application.scss +++ b/app/javascript/src/application.scss @@ -1,9 +1,2 @@ @import "~bootstrap/scss/bootstrap"; @import "./application/sidenav"; - -.main-layout { - padding-bottom: 10px !important; - position: absolute; - right: 0 !important; - top: 0 !important; -} diff --git a/app/javascript/src/application/sidenav.scss b/app/javascript/src/application/sidenav.scss index a21d2cc..b65f07d 100644 --- a/app/javascript/src/application/sidenav.scss +++ b/app/javascript/src/application/sidenav.scss @@ -1,13 +1,136 @@ .sidenav { - font-feature-settings: 'liga'; - height: 100%; - height: -moz-calc(100%); + background-color: #ff4d4d; left: 0 !important; position: fixed; padding-top: 120px; margin-top: 0; - overflow: auto; + height: 100%; text-rendering: optimizeLegibility; - width: inherit; top: 0; + transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665); + transform-origin: center left; /* Set the transformed position of sidebar to center left side. */ +} + +.wrapper { + height: 100% !important; + align-items: stretch; + background-color: #d9d9d9; + display: flex; + padding-bottom: 10px; + perspective: 1500px; +} + +#sidenav.active { + min-width: 80px; + max-width: 80px; + text-align: center; +} + +/* Toggling the sidebar header content, hide the big heading [h3] and showing the small heading [strong] and vice versa*/ +#sidenav .sidenav-header strong { + display: none; +} + +#sidenav.active .sidenav-header h3 { + display: none; +} + +#sidenav.active .sidenav-header strong { + display: block; +} + +#sidenav ul li a { + text-align: left; +} + +#sidenav.active ul li a { + padding: 20px 10px; + text-align: center; + font-size: 0.85em; +} + +#sidenav.active ul li a i { + margin-right: 0; + display: block; + font-size: 1.8em; + margin-bottom: 5px; +} + +/* Same dropdown links padding*/ +#sidenav.active ul ul a { + padding: 10px !important; +} + +/* Changing the arrow position to bottom center position, + translateX(50%) works with right: 50% + to accurately center the arrow */ +#sidenav.active .dropdown-toggle::after { + top: auto; + bottom: 10px; + right: 50%; + -webkit-transform: translateX(50%); + -ms-transform: translateX(50%); + transform: translateX(50%); +} + +@media (max-width: 768px) { + /* 80px and its content aligned to centre. Pushing it off the screen with the + negative left margin + */ + #sidenav.active { + min-width: 80px; + max-width: 80px; + text-align: center; + margin-left: -80px !important; + } + + + /* Reappearing the sidenav on toggle button click */ + #sidenav { + margin-left: 0; + } + + + /* Toggling the sidenav header content, + hide the big heading [h3] and showing the small heading [strong] and vice versa + */ + #sidenav .sidenav-header strong { + display: none; + } + #sidenav.active .sidenav-header h3 { + display: none; + } + #sidenav.active .sidenav-header strong { + display: block; + } + + /* Downsize the navigation links font size */ + #sidenav.active ul li a { + padding: 20px 10px; + font-size: 0.85em; + } + + #sidenav.active ul li a i { + margin-right: 0; + display: block; + font-size: 1.8em; + margin-bottom: 5px; + } + + /* Adjust the dropdown links padding*/ + #sidenav.active ul ul a { + padding: 10px !important; + } + + /* Changing the arrow position to bottom center position, + translateX(50%) works with right: 50% + to accurately center the arrow */ + .dropdown-toggle::after { + top: auto; + bottom: 10px; + right: 50%; + -webkit-transform: translateX(50%); + -ms-transform: translateX(50%); + transform: translateX(50%); + } } diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index f23aa25..f2d7a62 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,16 +1,26 @@ - + CdaoPjet <%= csrf_meta_tags %> <%= csp_meta_tag %> - <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> + <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> - - <%= yield %> + +
+
+ <%= render(SidenavComponent.new(current_user: { username: "admin", email: "admin@admin.com"}))%> +
+ +
+
+ <%= yield %> +
+
+
diff --git a/config/webpack/environment.js b/config/webpack/environment.js index d16d9af..d104e33 100644 --- a/config/webpack/environment.js +++ b/config/webpack/environment.js @@ -1,3 +1,10 @@ const { environment } = require('@rails/webpacker') +const webpack = require("webpack") + +environment.plugins.append("Provide", new webpack.ProvidePlugin({ + $: 'jquery', + jQuery: 'jquery', + Popper: ['popper.js', 'default'] +})) module.exports = environment diff --git a/package.json b/package.json index 1e9c41b..46dc96d 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,20 @@ "name": "cdao-pjet", "private": true, "dependencies": { + "@fortawesome/fontawesome-free": "^5.15.4", + "@popperjs/core": "^2.11.2", "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "5.4.3", + "bootstrap": "^5.1.3", + "flatpickr": "^4.6.9", + "font-awesome": "^4.7.0", + "jquery": "^3.6.0", + "moment": "^2.29.1", + "popper.js": "^1.16.1", + "select2": "^4.1.0-rc.0", + "stimulus": "^3.0.1", "stimulus_reflex": "3.4.1", "turbolinks": "^5.2.0", "webpack": "^4.46.0", diff --git a/yarn.lock b/yarn.lock index 6fb8ce1..aa64a4d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -893,11 +893,26 @@ resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7" integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw== +"@fortawesome/fontawesome-free@^5.15.4": + version "5.15.4" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz#ecda5712b61ac852c760d8b3c79c96adca5554e5" + integrity sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg== + "@gar/promisify@^1.0.1": version "1.1.2" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210" integrity sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw== +"@hotwired/stimulus-webpack-helpers@^1.0.0": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@hotwired/stimulus-webpack-helpers/-/stimulus-webpack-helpers-1.0.1.tgz#4cd74487adeca576c9865ac2b9fe5cb20cef16dd" + integrity sha512-wa/zupVG0eWxRYJjC1IiPBdt3Lruv0RqGN+/DTMmUWUyMAEB27KXmVY6a8YpUVTM7QwVuaLNGW4EqDgrS2upXQ== + +"@hotwired/stimulus@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.0.1.tgz#141f15645acaa3b133b7c247cad58ae252ffae85" + integrity sha512-oHsJhgY2cip+K2ED7vKUNd2P+BEswVhrCYcJ802DSsblJFv7mPFVk3cQKvm2vHgHeDVdnj7oOKrBbzp1u8D+KA== + "@npmcli/fs@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-1.0.0.tgz#589612cfad3a6ea0feafcb901d29c63fd52db09f" @@ -914,6 +929,11 @@ mkdirp "^1.0.4" rimraf "^3.0.2" +"@popperjs/core@^2.11.2": + version "2.11.2" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9" + integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA== + "@rails/actioncable@>= 6.0": version "7.0.1" resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.0.1.tgz#8f383b672e142d009f89b725d49b0832d99da74a" @@ -1517,6 +1537,11 @@ boolbase@^1.0.0, boolbase@~1.0.0: resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= +bootstrap@^5.1.3: + version "5.1.3" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34" + integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" @@ -2925,6 +2950,11 @@ findup-sync@^3.0.0: micromatch "^3.0.4" resolve-dir "^1.0.1" +flatpickr@^4.6.9: + version "4.6.9" + resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.9.tgz#9a13383e8a6814bda5d232eae3fcdccb97dc1499" + integrity sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw== + flatted@^3.2.2: version "3.2.4" resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.4.tgz#28d9969ea90661b5134259f312ab6aa7929ac5e2" @@ -2948,6 +2978,11 @@ follow-redirects@^1.0.0: resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685" integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ== +font-awesome@^4.7.0: + version "4.7.0" + resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133" + integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM= + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -3817,6 +3852,11 @@ jest-worker@^26.5.0: merge-stream "^2.0.0" supports-color "^7.0.0" +jquery@^3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470" + integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw== + js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -4243,6 +4283,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== +moment@^2.29.1: + version "2.29.1" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" + integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== + morphdom@^2.6.1: version "2.6.1" resolved "https://registry.yarnpkg.com/morphdom/-/morphdom-2.6.1.tgz#e868e24f989fa3183004b159aed643e628b4306e" @@ -4791,6 +4836,11 @@ pnp-webpack-plugin@^1.7.0: dependencies: ts-pnp "^1.1.6" +popper.js@^1.16.1: + version "1.16.1" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" + integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ== + portfinder@^1.0.26: version "1.0.28" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778" @@ -5897,6 +5947,11 @@ select-hose@^2.0.0: resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo= +select2@^4.1.0-rc.0: + version "4.1.0-rc.0" + resolved "https://registry.yarnpkg.com/select2/-/select2-4.1.0-rc.0.tgz#ba3cd3901dda0155e1c0219ab41b74ba51ea22d8" + integrity sha512-Hr9TdhyHCZUtwznEH2CBf7967mEM0idtJ5nMtjvk3Up5tPukOLXbHUNmh10oRfeNIhj+3GD3niu+g6sVK+gK0A== + selfsigned@^1.10.8: version "1.10.11" resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.11.tgz#24929cd906fe0f44b6d01fb23999a739537acbe9" @@ -6227,6 +6282,14 @@ static-extend@^0.1.1: resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow= +stimulus@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/stimulus/-/stimulus-3.0.1.tgz#370e3054eb3b8068904af1888949821255d375d3" + integrity sha512-73uZG5E5bwH7W2BldieTXg4yJuEmOfIHgtO/aqwU0JkWNjwY75ZaoOAD2EEPvi5AK43N9adEeOQOmlgWf59HOg== + dependencies: + "@hotwired/stimulus" "^3.0.1" + "@hotwired/stimulus-webpack-helpers" "^1.0.0" + stimulus_reflex@3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/stimulus_reflex/-/stimulus_reflex-3.4.1.tgz#2606aee3b2911b5939d68f65a75262fe3c626204"