diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index dc1e4440b5..4a3a53d82d 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -32,5 +32,9 @@ jobs: run: docker-compose up -d - name: db:reset run: docker-compose exec -T web rails db:reset + - name: compile css + run: docker-compose exec -T web bundle exec rails css:build + - name: compile js + run: docker-compose exec -T web bundle exec rails javascript:build - name: Test run: docker-compose exec -T web bundle exec rspec spec diff --git a/.github/workflows/rspec.yml b/.github/workflows/rspec.yml index 79c9fd7cf8..687c9a9ef2 100644 --- a/.github/workflows/rspec.yml +++ b/.github/workflows/rspec.yml @@ -60,7 +60,8 @@ jobs: yarn bundle exec rake db:create bundle exec rake db:schema:load - bundle exec rails webpacker:compile + bundle exec rails css:build + bundle exec rails javascript:build - name: Run rspec and upload code coverage env: diff --git a/.gitignore b/.gitignore index ba1eec6e1b..7663e5d221 100644 --- a/.gitignore +++ b/.gitignore @@ -59,3 +59,9 @@ vendor/bundle/ default.nix npm-debug.log + +# Ignore compiled assets +/app/assets/builds/* + +# In case we want to keep something in the compiled assets directory +!/app/assets/builds/.keep diff --git a/Gemfile b/Gemfile index d17a11974d..bed13ef0bd 100644 --- a/Gemfile +++ b/Gemfile @@ -21,6 +21,7 @@ gem "faker" # creates realistic seed data, valuable for staging and demos gem "filterrific" # filtering and sorting of models gem "image_processing", "~> 1.12" # Set of higher-level helper methods for image processing. gem "jbuilder" # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder +gem "jsbundling-rails" gem "lograge" # log less so heroku papertrail quits rate limiting our logs gem "net-smtp", require: false # needed for ruby upgrade to 3.1.0 for some dang reason gem "net-pop" # needed for ruby upgrade to 3.1.0 https://www.ruby-lang.org/en/news/2021/12/25/ruby-3-1-0-released/ @@ -37,9 +38,9 @@ gem "rack-attack" # for blocking & throttling abusive requests gem "request_store" gem "sablon" # Word document templating tool for Case Court Reports gem "scout_apm" +gem "sprockets-rails" # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails] gem "strong_migrations" gem "tzinfo-data", platforms: %i[mingw mswin x64_mingw jruby] # Windows does not include zoneinfo files, so bundle the tzinfo-data gem -gem "webpacker" # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker group :development, :test do gem "bullet" # Detect and fix N+1 queries @@ -76,3 +77,5 @@ group :test do end # gem "pdf-reader", "~> 2.9" + +gem "cssbundling-rails", "~> 1.1" diff --git a/Gemfile.lock b/Gemfile.lock index 137cf9e7d3..54104877cb 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -132,6 +132,8 @@ GEM crack (0.4.5) rexml crass (1.0.6) + cssbundling-rails (1.1.0) + railties (>= 6.0.0) database_cleaner-active_record (2.0.1) activerecord (>= 5.a) database_cleaner-core (~> 2.0.0) @@ -232,6 +234,8 @@ GEM jbuilder (2.11.5) actionview (>= 5.0.0) activesupport (>= 5.0.0) + jsbundling-rails (1.0.2) + railties (>= 6.0.0) jwt (2.3.0) launchy (2.5.0) addressable (~> 2.7) @@ -278,8 +282,6 @@ GEM net-protocol timeout nio4r (2.5.8) - nokogiri (1.13.6-arm64-darwin) - racc (~> 1.4) nokogiri (1.13.6-x86_64-darwin) racc (~> 1.4) nokogiri (1.13.6-x86_64-linux) @@ -314,8 +316,6 @@ GEM rack (2.2.3) rack-attack (6.6.1) rack (>= 1.0, < 3) - rack-proxy (0.7.2) - rack rack-test (1.1.0) rack (>= 1.0, < 3) rails (7.0.3) @@ -403,7 +403,6 @@ GEM childprocess (>= 0.5, < 5.0) rexml (~> 3.2, >= 3.2.5) rubyzip (>= 1.2.2) - semantic_range (3.0.0) shoulda-matchers (5.1.0) activesupport (>= 5.2.0) simplecov (0.21.2) @@ -416,6 +415,13 @@ GEM spring (4.0.0) spring-commands-rspec (1.0.4) spring (>= 0.9.1) + sprockets (4.0.3) + concurrent-ruby (~> 1.0) + rack (> 1, < 3) + sprockets-rails (3.4.2) + actionpack (>= 5.2) + activesupport (>= 5.2) + sprockets (>= 3.0.0) standard (1.5.0) rubocop (= 1.23.0) rubocop-performance (= 1.12.0) @@ -452,11 +458,6 @@ GEM addressable (>= 2.8.0) crack (>= 0.3.2) hashdiff (>= 0.4.0, < 2.0.0) - webpacker (5.4.3) - activesupport (>= 5.2) - rack-proxy (>= 0.6.1) - railties (>= 5.2) - semantic_range (>= 2.3.0) websocket-driver (0.7.5) websocket-extensions (>= 0.1.0) websocket-extensions (0.1.5) @@ -465,9 +466,7 @@ GEM zeitwerk (2.5.4) PLATFORMS - arm64-darwin-21 x86_64-darwin-20 - x86_64-darwin-21 x86_64-linux DEPENDENCIES @@ -483,6 +482,7 @@ DEPENDENCIES capybara-screenshot caxlsx (~> 3.2) caxlsx_rails (~> 0.6.3) + cssbundling-rails (~> 1.1) database_cleaner-active_record delayed_job_active_record devise @@ -495,6 +495,7 @@ DEPENDENCIES httparty image_processing (~> 1.12) jbuilder + jsbundling-rails letter_opener lograge net-imap @@ -523,6 +524,7 @@ DEPENDENCIES simplecov spring spring-commands-rspec + sprockets-rails standard (= 1.5.0) strong_migrations traceroute @@ -531,7 +533,6 @@ DEPENDENCIES web-console (>= 3.3.0) webdrivers webmock - webpacker RUBY VERSION ruby 3.1.0p0 diff --git a/Procfile.dev b/Procfile.dev new file mode 100644 index 0000000000..2b0b260fab --- /dev/null +++ b/Procfile.dev @@ -0,0 +1,3 @@ +web: bin/rails server -p 3000 +js: yarn build --watch +css: yarn build:css --watch diff --git a/README.md b/README.md index b0c522db8a..77443b73e4 100644 --- a/README.md +++ b/README.md @@ -115,9 +115,6 @@ Another option is to install the Chromium browser for your operating system so t requires running local postgres, with a role created for whatever user you're running rails as 1. `bin/rails db:seed:replant` generates test data (can be rerun to regenerate test data) -**Webpacker One Time Setup** -`bundle exec rails webpacker:compile` - ### Platform Specific Installation Instructions - [Docker](doc/DOCKER.md) - [Linux](doc/LINUX_SETUP.md) diff --git a/app/javascript/src/images/.keep b/app/assets/builds/.keep similarity index 100% rename from app/javascript/src/images/.keep rename to app/assets/builds/.keep diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js new file mode 100644 index 0000000000..fc6d1834c6 --- /dev/null +++ b/app/assets/config/manifest.js @@ -0,0 +1,4 @@ +//= link_directory ../builds .css +//= link_directory ../builds .js +//= link_tree ../images +//= link_tree ../fonts diff --git a/app/assets/fonts/fa-solid-900.ttf b/app/assets/fonts/fa-solid-900.ttf new file mode 120000 index 0000000000..cb64da8ecd --- /dev/null +++ b/app/assets/fonts/fa-solid-900.ttf @@ -0,0 +1 @@ +../../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf \ No newline at end of file diff --git a/app/assets/fonts/fa-solid-900.woff2 b/app/assets/fonts/fa-solid-900.woff2 new file mode 120000 index 0000000000..56a15ccb60 --- /dev/null +++ b/app/assets/fonts/fa-solid-900.woff2 @@ -0,0 +1 @@ +../../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2 \ No newline at end of file diff --git a/app/javascript/src/images/android-icon-192x192.png b/app/assets/images/android-icon-192x192.png similarity index 100% rename from app/javascript/src/images/android-icon-192x192.png rename to app/assets/images/android-icon-192x192.png diff --git a/app/javascript/src/images/apple-icon-114x114.png b/app/assets/images/apple-icon-114x114.png similarity index 100% rename from app/javascript/src/images/apple-icon-114x114.png rename to app/assets/images/apple-icon-114x114.png diff --git a/app/javascript/src/images/apple-icon-120x120.png b/app/assets/images/apple-icon-120x120.png similarity index 100% rename from app/javascript/src/images/apple-icon-120x120.png rename to app/assets/images/apple-icon-120x120.png diff --git a/app/javascript/src/images/apple-icon-144x144.png b/app/assets/images/apple-icon-144x144.png similarity index 100% rename from app/javascript/src/images/apple-icon-144x144.png rename to app/assets/images/apple-icon-144x144.png diff --git a/app/javascript/src/images/apple-icon-152x152.png b/app/assets/images/apple-icon-152x152.png similarity index 100% rename from app/javascript/src/images/apple-icon-152x152.png rename to app/assets/images/apple-icon-152x152.png diff --git a/app/javascript/src/images/apple-icon-180x180.png b/app/assets/images/apple-icon-180x180.png similarity index 100% rename from app/javascript/src/images/apple-icon-180x180.png rename to app/assets/images/apple-icon-180x180.png diff --git a/app/javascript/src/images/apple-icon-57x57.png b/app/assets/images/apple-icon-57x57.png similarity index 100% rename from app/javascript/src/images/apple-icon-57x57.png rename to app/assets/images/apple-icon-57x57.png diff --git a/app/javascript/src/images/apple-icon-60x60.png b/app/assets/images/apple-icon-60x60.png similarity index 100% rename from app/javascript/src/images/apple-icon-60x60.png rename to app/assets/images/apple-icon-60x60.png diff --git a/app/javascript/src/images/apple-icon-72x72.png b/app/assets/images/apple-icon-72x72.png similarity index 100% rename from app/javascript/src/images/apple-icon-72x72.png rename to app/assets/images/apple-icon-72x72.png diff --git a/app/javascript/src/images/apple-icon-76x76.png b/app/assets/images/apple-icon-76x76.png similarity index 100% rename from app/javascript/src/images/apple-icon-76x76.png rename to app/assets/images/apple-icon-76x76.png diff --git a/app/javascript/src/images/default-logo.png b/app/assets/images/default-logo.png similarity index 100% rename from app/javascript/src/images/default-logo.png rename to app/assets/images/default-logo.png diff --git a/app/javascript/src/images/default-logo.svg b/app/assets/images/default-logo.svg similarity index 100% rename from app/javascript/src/images/default-logo.svg rename to app/assets/images/default-logo.svg diff --git a/app/javascript/src/images/favicon-16x16.png b/app/assets/images/favicon-16x16.png similarity index 100% rename from app/javascript/src/images/favicon-16x16.png rename to app/assets/images/favicon-16x16.png diff --git a/app/javascript/src/images/favicon-32x32.png b/app/assets/images/favicon-32x32.png similarity index 100% rename from app/javascript/src/images/favicon-32x32.png rename to app/assets/images/favicon-32x32.png diff --git a/app/javascript/src/images/favicon-96x96.png b/app/assets/images/favicon-96x96.png similarity index 100% rename from app/javascript/src/images/favicon-96x96.png rename to app/assets/images/favicon-96x96.png diff --git a/app/javascript/src/images/icon-logo.png b/app/assets/images/icon-logo.png similarity index 100% rename from app/javascript/src/images/icon-logo.png rename to app/assets/images/icon-logo.png diff --git a/app/javascript/src/images/login.jpg b/app/assets/images/login.jpg similarity index 100% rename from app/javascript/src/images/login.jpg rename to app/assets/images/login.jpg diff --git a/app/javascript/src/images/logo.png b/app/assets/images/logo.png similarity index 100% rename from app/javascript/src/images/logo.png rename to app/assets/images/logo.png diff --git a/app/javascript/src/images/ms-icon-144x144.png b/app/assets/images/ms-icon-144x144.png similarity index 100% rename from app/javascript/src/images/ms-icon-144x144.png rename to app/assets/images/ms-icon-144x144.png diff --git a/app/javascript/src/images/rfglogo.png b/app/assets/images/rfglogo.png similarity index 100% rename from app/javascript/src/images/rfglogo.png rename to app/assets/images/rfglogo.png diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss new file mode 100644 index 0000000000..695fc54fb6 --- /dev/null +++ b/app/assets/stylesheets/application.scss @@ -0,0 +1,36 @@ +// links to stylesheets inside node_modules +@use "add2calendar/css/add2calendar"; +@use "bootstrap/scss/bootstrap.scss" with ( + $primary: #00447c +); +@use "bootstrap-datepicker/dist/css/bootstrap-datepicker"; +@use "datatables.net-dt/css/jquery.dataTables"; +@use "@fortawesome/fontawesome-free/scss/fontawesome"; +@use "@fortawesome/fontawesome-free/scss/solid"; +@use "select2/dist/css/select2"; + +// custom css for the app +@use "base/breakpoints"; + +@use "shared/dashboard"; +@use "shared/flashes"; +@use "shared/footer"; +@use "shared/form"; +@use "shared/layout"; +@use "shared/navbar"; +@use "shared/select2_additional_styles"; +@use "shared/sidebar"; +@use "shared/typography"; +@use "shared/utilities"; +@use "shared/noscript"; + +@use "pages/all_casa_admin_dashboard"; +@use "pages/casa_cases"; +@use "pages/case_contacts"; +@use "pages/casa_org"; +@use "pages/court_dates"; +@use "pages/emancipation"; +@use "pages/login"; +@use "pages/password"; +@use "pages/supervisors"; +@use "pages/volunteers"; diff --git a/app/javascript/src/stylesheets/base/breakpoints.scss b/app/assets/stylesheets/base/breakpoints.scss similarity index 100% rename from app/javascript/src/stylesheets/base/breakpoints.scss rename to app/assets/stylesheets/base/breakpoints.scss diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss new file mode 100644 index 0000000000..db380c5fdb --- /dev/null +++ b/app/assets/stylesheets/base/variables.scss @@ -0,0 +1,2 @@ +$primary: #00447c; +$red: #dc3545; diff --git a/app/javascript/src/stylesheets/pages/dashboard.scss b/app/assets/stylesheets/pages/all_casa_admin_dashboard.scss similarity index 100% rename from app/javascript/src/stylesheets/pages/dashboard.scss rename to app/assets/stylesheets/pages/all_casa_admin_dashboard.scss diff --git a/app/javascript/src/stylesheets/pages/casa_cases.scss b/app/assets/stylesheets/pages/casa_cases.scss similarity index 93% rename from app/javascript/src/stylesheets/pages/casa_cases.scss rename to app/assets/stylesheets/pages/casa_cases.scss index 21497aac4c..930e1b9fda 100644 --- a/app/javascript/src/stylesheets/pages/casa_cases.scss +++ b/app/assets/stylesheets/pages/casa_cases.scss @@ -1,3 +1,5 @@ +@use "../base/breakpoints.scss" as screen-sizes; + body.casa_cases { .form-header { h1 { @@ -83,7 +85,7 @@ body.casa_cases { } } -@media only screen and (max-width: $small) { +@media only screen and (max-width: screen-sizes.$small) { body.casa_cases { .court-mandates { textarea, .add-court-mandate { diff --git a/app/javascript/src/stylesheets/pages/casa_org.scss b/app/assets/stylesheets/pages/casa_org.scss similarity index 100% rename from app/javascript/src/stylesheets/pages/casa_org.scss rename to app/assets/stylesheets/pages/casa_org.scss diff --git a/app/javascript/src/stylesheets/pages/case_contacts.scss b/app/assets/stylesheets/pages/case_contacts.scss similarity index 100% rename from app/javascript/src/stylesheets/pages/case_contacts.scss rename to app/assets/stylesheets/pages/case_contacts.scss diff --git a/app/javascript/src/stylesheets/pages/court_dates.scss b/app/assets/stylesheets/pages/court_dates.scss similarity index 100% rename from app/javascript/src/stylesheets/pages/court_dates.scss rename to app/assets/stylesheets/pages/court_dates.scss diff --git a/app/javascript/src/stylesheets/pages/emancipation.scss b/app/assets/stylesheets/pages/emancipation.scss similarity index 100% rename from app/javascript/src/stylesheets/pages/emancipation.scss rename to app/assets/stylesheets/pages/emancipation.scss diff --git a/app/javascript/src/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss similarity index 85% rename from app/javascript/src/stylesheets/pages/login.scss rename to app/assets/stylesheets/pages/login.scss index de61b2a56a..0191146c8d 100644 --- a/app/javascript/src/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -9,7 +9,7 @@ body.devise-sessions-new, body.users-sessions-new, body.devise-passwords-new { aside { background-position: right; - background-image: url("../images/login.jpg"); + background-image: url("login.jpg"); min-height: 700px; background-repeat: no-repeat; background-size: cover; diff --git a/app/javascript/src/stylesheets/pages/password.scss b/app/assets/stylesheets/pages/password.scss similarity index 91% rename from app/javascript/src/stylesheets/pages/password.scss rename to app/assets/stylesheets/pages/password.scss index cced491412..d7a5f143d2 100644 --- a/app/javascript/src/stylesheets/pages/password.scss +++ b/app/assets/stylesheets/pages/password.scss @@ -1,9 +1,11 @@ +@use "../base/variables.scss" as globals; + .password-box { width: 450px; margin: 10% auto; text-align: center; border-radius: 25px; - border: 2px solid $primary; + border: 2px solid globals.$primary; form#edit_user.edit_user div.field { margin: 0 auto; diff --git a/app/javascript/src/stylesheets/pages/supervisors.scss b/app/assets/stylesheets/pages/supervisors.scss similarity index 100% rename from app/javascript/src/stylesheets/pages/supervisors.scss rename to app/assets/stylesheets/pages/supervisors.scss diff --git a/app/javascript/src/stylesheets/pages/volunteers.scss b/app/assets/stylesheets/pages/volunteers.scss similarity index 72% rename from app/javascript/src/stylesheets/pages/volunteers.scss rename to app/assets/stylesheets/pages/volunteers.scss index 09bcf942bf..683a4b7f95 100644 --- a/app/javascript/src/stylesheets/pages/volunteers.scss +++ b/app/assets/stylesheets/pages/volunteers.scss @@ -1,5 +1,7 @@ +@use "../base/breakpoints.scss" as screen-sizes; + body.volunteers { - @media only screen and (max-width: $mobile) { + @media only screen and (max-width: screen-sizes.$mobile) { table#volunteers { tbody tr { padding-bottom: 2.5rem; diff --git a/app/javascript/src/stylesheets/shared/dashboard.scss b/app/assets/stylesheets/shared/dashboard.scss similarity index 100% rename from app/javascript/src/stylesheets/shared/dashboard.scss rename to app/assets/stylesheets/shared/dashboard.scss diff --git a/app/javascript/src/stylesheets/shared/flashes.scss b/app/assets/stylesheets/shared/flashes.scss similarity index 100% rename from app/javascript/src/stylesheets/shared/flashes.scss rename to app/assets/stylesheets/shared/flashes.scss diff --git a/app/javascript/src/stylesheets/shared/footer.scss b/app/assets/stylesheets/shared/footer.scss similarity index 82% rename from app/javascript/src/stylesheets/shared/footer.scss rename to app/assets/stylesheets/shared/footer.scss index 9de10ae92b..57c607b34c 100644 --- a/app/javascript/src/stylesheets/shared/footer.scss +++ b/app/assets/stylesheets/shared/footer.scss @@ -1,7 +1,9 @@ +@use "../base/variables" as globals; + footer { padding: 2rem 0; text-align: center; - background-color: $primary; + background-color: globals.$primary; color: #fff; .default-footer { @@ -9,7 +11,7 @@ footer { color: #fff; } - .rfglogo{ + .rfglogo { max-height: 3em; } } @@ -17,10 +19,9 @@ footer { color:#fff; } - .footer-logos{ + .footer-logos { .rfglink { - - .rfglogo{ + .rfglogo { max-height: 6em; } } diff --git a/app/javascript/src/stylesheets/shared/form.scss b/app/assets/stylesheets/shared/form.scss similarity index 79% rename from app/javascript/src/stylesheets/shared/form.scss rename to app/assets/stylesheets/shared/form.scss index fff833181a..8b383a3093 100644 --- a/app/javascript/src/stylesheets/shared/form.scss +++ b/app/assets/stylesheets/shared/form.scss @@ -1,3 +1,5 @@ +@use "../base/variables.scss" as globals; + form { .field_with_errors { label { @@ -6,7 +8,7 @@ form { } input { - border: 1px solid $red; + border: 1px solid globals.$red; } } diff --git a/app/javascript/src/stylesheets/shared/layout.scss b/app/assets/stylesheets/shared/layout.scss similarity index 86% rename from app/javascript/src/stylesheets/shared/layout.scss rename to app/assets/stylesheets/shared/layout.scss index 39a29c85f0..687c4e9112 100644 --- a/app/javascript/src/stylesheets/shared/layout.scss +++ b/app/assets/stylesheets/shared/layout.scss @@ -1,3 +1,6 @@ +@use "../base/variables.scss" as globals; +@use "../base/breakpoints.scss" as screen-sizes; + body { background-color: #f4f7fa; min-width: 320px; @@ -25,7 +28,7 @@ h5 label { } .fa-car { - color: $primary; + color: globals.$primary; } div.row div.col-sm-12.form-header h1 { @@ -57,7 +60,7 @@ div.row.volunteer-filters { /* As 'mobile-label' class is mobile only, not display them on desktop view */ -@media only screen and (min-width: $mobile) { +@media only screen and (min-width: screen-sizes.$mobile) { table.table { span.mobile-label { display: none; @@ -69,7 +72,7 @@ div.row.volunteer-filters { margin-bottom: 0.5em; } -@media only screen and (max-width: $mobile) { +@media only screen and (max-width: screen-sizes.$mobile) { .login-header { font-size: 0.75em !important; } diff --git a/app/javascript/src/stylesheets/shared/navbar.scss b/app/assets/stylesheets/shared/navbar.scss similarity index 78% rename from app/javascript/src/stylesheets/shared/navbar.scss rename to app/assets/stylesheets/shared/navbar.scss index e20ae6542d..5f0b51ee49 100644 --- a/app/javascript/src/stylesheets/shared/navbar.scss +++ b/app/assets/stylesheets/shared/navbar.scss @@ -1,3 +1,5 @@ +@use "../base/breakpoints.scss" as screen-sizes; + .navbar { color: #fff; background: #00447c; @@ -22,7 +24,7 @@ width: 40px; } -@media only screen and (max-width: $mobile) { +@media only screen and (max-width: screen-sizes.$mobile) { .navbar.mobile { display: flex; position: sticky; diff --git a/app/javascript/src/stylesheets/shared/noscript.css b/app/assets/stylesheets/shared/noscript.css similarity index 100% rename from app/javascript/src/stylesheets/shared/noscript.css rename to app/assets/stylesheets/shared/noscript.css diff --git a/app/javascript/src/stylesheets/shared/select2.scss b/app/assets/stylesheets/shared/select2_additional_styles.scss similarity index 100% rename from app/javascript/src/stylesheets/shared/select2.scss rename to app/assets/stylesheets/shared/select2_additional_styles.scss diff --git a/app/javascript/src/stylesheets/shared/sidebar.scss b/app/assets/stylesheets/shared/sidebar.scss similarity index 91% rename from app/javascript/src/stylesheets/shared/sidebar.scss rename to app/assets/stylesheets/shared/sidebar.scss index 02a8fc888f..c0b18fa4c8 100644 --- a/app/javascript/src/stylesheets/shared/sidebar.scss +++ b/app/assets/stylesheets/shared/sidebar.scss @@ -1,3 +1,6 @@ +@use "../base/variables.scss" as globals; +@use "../base/breakpoints.scss" as screen-sizes; + #wrapper { overflow-x: hidden; } @@ -16,7 +19,7 @@ position: sticky; top: 0; z-index: 10; - background: $primary; + background: globals.$primary; border-bottom: 1px solid #103862; font-size: 1.2rem; padding-bottom: 16px; @@ -42,7 +45,7 @@ } .sidebar-container { - background: $primary; + background: globals.$primary; display: flex; flex-direction: column; justify-content: space-between; @@ -111,7 +114,7 @@ } // Media Queries -@media only screen and (max-width: $mobile) { +@media only screen and (max-width: screen-sizes.$mobile) { .sidebar-wrapper { display: none; width: 100%; diff --git a/app/javascript/src/stylesheets/shared/typography.scss b/app/assets/stylesheets/shared/typography.scss similarity index 100% rename from app/javascript/src/stylesheets/shared/typography.scss rename to app/assets/stylesheets/shared/typography.scss diff --git a/app/javascript/src/stylesheets/shared/utilities.scss b/app/assets/stylesheets/shared/utilities.scss similarity index 82% rename from app/javascript/src/stylesheets/shared/utilities.scss rename to app/assets/stylesheets/shared/utilities.scss index 08f7aed5f6..697738bd87 100644 --- a/app/javascript/src/stylesheets/shared/utilities.scss +++ b/app/assets/stylesheets/shared/utilities.scss @@ -1,3 +1,5 @@ +@use "../base/variables.scss" as globals; + .pull-left { float: left; } @@ -20,7 +22,7 @@ .add-button { color: white; border: none; - background-color: #{$primary}; + background-color: #{globals.$primary}; padding: 0.25em 1.5em; border-radius: 10px; diff --git a/app/javascript/all_casa_admin.js b/app/javascript/all_casa_admin.js new file mode 100644 index 0000000000..26003bdd4b --- /dev/null +++ b/app/javascript/all_casa_admin.js @@ -0,0 +1,5 @@ +import './jQueryGlobalizer.js' + +require('datatables.net-dt')(null, window.jQuery) // First parameter is the global object. Defaults to window if null + +require('./src/all_casa_admin/tables') diff --git a/app/javascript/application.js b/app/javascript/application.js new file mode 100644 index 0000000000..5f56f09396 --- /dev/null +++ b/app/javascript/application.js @@ -0,0 +1,30 @@ +/* global window */ + +import 'bootstrap' +import 'bootstrap-select' +import './jQueryGlobalizer.js' +import './sweet-alert-confirm.js' + +require('select2')(window.jQuery) +require('datatables.net-dt')(null, window.jQuery) // First parameter is the global object. Defaults to window if null + +require('@rails/ujs').start() +require('@rails/activestorage').start() + +require('bootstrap-datepicker') + +require('./src/add_additional_expense') +require('./src/addToCalendarButton') +require('./src/case_contact') +require('./src/case_contact_autosave') +require('./src/case_emancipation') +require('./src/casa_case') +require('./src/dashboard') +require('./src/emancipations') +require('./src/import') +require('./src/password_confirmation') +require('./src/readMore') +require('./src/reports') +require('./src/select') +require('./src/sidebar') +require('./src/tooltip') diff --git a/app/javascript/channels/consumer.js b/app/javascript/channels/consumer.js deleted file mode 100644 index 9f1489fd88..0000000000 --- a/app/javascript/channels/consumer.js +++ /dev/null @@ -1,6 +0,0 @@ -// Action Cable provides the framework to deal with WebSockets in Rails. -// You can generate new channels where WebSocket features live using the `rails generate channel` command. - -import { createConsumer } from '@rails/actioncable' - -export default createConsumer() diff --git a/app/javascript/channels/index.js b/app/javascript/channels/index.js deleted file mode 100644 index 0cfcf74919..0000000000 --- a/app/javascript/channels/index.js +++ /dev/null @@ -1,5 +0,0 @@ -// Load all the channels within this directory and all subdirectories. -// Channel files must be named *_channel.js. - -const channels = require.context('.', true, /_channel\.js$/) -channels.keys().forEach(channels) diff --git a/app/javascript/jQueryGlobalizer.js b/app/javascript/jQueryGlobalizer.js new file mode 100644 index 0000000000..788c0f91f7 --- /dev/null +++ b/app/javascript/jQueryGlobalizer.js @@ -0,0 +1,3 @@ +import jquery from 'jquery' +window.jQuery = jquery +window.$ = jquery diff --git a/app/javascript/packs/all_casa_admin.js b/app/javascript/packs/all_casa_admin.js deleted file mode 100644 index c0512164ef..0000000000 --- a/app/javascript/packs/all_casa_admin.js +++ /dev/null @@ -1,5 +0,0 @@ -require('jquery') -require('datatables.net-dt') -require('datatables.net-dt/css/jquery.dataTables.css') - -require('src/all_casa_admin/tables') diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js deleted file mode 100644 index 5e31ec9b6f..0000000000 --- a/app/javascript/packs/application.js +++ /dev/null @@ -1,47 +0,0 @@ -// This file is automatically compiled by Webpack, along with any other files -// present in this directory. You're encouraged to place your actual application logic in -// a relevant structure within app/javascript and only use these pack files to reference -// that code so it'll be compiled. - -// this is how stylesheets are loaded into the running application - -import 'src/stylesheets/application.scss' - -import 'bootstrap' -import 'bootstrap-select' -import '../sweet-alert-confirm' -require('@rails/ujs').start() -require('@rails/activestorage').start() -require('channels') - -require('jquery') -require('bootstrap-datepicker') -require('datatables.net-dt') -require('datatables.net-dt/css/jquery.dataTables.css') -require('select2') -require('select2/dist/css/select2') - -require('src/addToCalendarButton') -require('src/case_contact') -require('src/case_contact_autosave') -require('src/case_emancipation') -require('src/casa_case') -require('src/emancipations') -require('src/select') -require('src/dashboard') -require('src/sidebar') -require('src/import') -require('src/readMore') -require('src/tooltip') -require('src/password_confirmation') -require('src/reports') -require('src/add_additional_expense') -require('src/require_communication_preference') - -// Uncomment to copy all static images under ../images to the output folder and -// reference them with the image_pack_tag or asset_pack_path helpers in views. -// See app/views/shared/_favicons.html.erb for reference. -// -// NOTE: all image asset url helpers in Rails views must prefix image/$blah with media/src/. -// TODO: figure out why? -const images = require.context('../src/images', true) // eslint-disable-line no-unused-vars diff --git a/app/javascript/src/addToCalendarButton.js b/app/javascript/src/addToCalendarButton.js index 1929b863dd..463e320a99 100644 --- a/app/javascript/src/addToCalendarButton.js +++ b/app/javascript/src/addToCalendarButton.js @@ -1,5 +1,6 @@ -import * as Add2Calendar from 'add2calendar' -import 'add2calendar/css/add2calendar.css' +/* global $ */ + +const Add2Calendar = require('add2calendar') function createCalendarEvents () { const calendarButtons = document.querySelectorAll('div.cal-btn') diff --git a/app/javascript/src/add_additional_expense.js b/app/javascript/src/add_additional_expense.js index 7189fa7530..b23dfa90c9 100644 --- a/app/javascript/src/add_additional_expense.js +++ b/app/javascript/src/add_additional_expense.js @@ -1,3 +1,5 @@ +/* global $ */ + function showAdditionalExpense () { for (let i = 1; i < 10; i++) { if ($(`#case_contact_additional_expenses_attributes_${i}_other_expense_amount`).is(':hidden')) { diff --git a/app/javascript/src/async_notifier.js b/app/javascript/src/async_notifier.js index 21930c53d8..6d9ef227aa 100644 --- a/app/javascript/src/async_notifier.js +++ b/app/javascript/src/async_notifier.js @@ -1,4 +1,4 @@ -const $ = require('jquery') +/* global $ */ module.exports = class Notifier { // @param {object} notificationsElement The notification DOM element as a jQuery object diff --git a/app/javascript/src/casa_case.js b/app/javascript/src/casa_case.js index 18d3ab52ae..18f67e1be6 100644 --- a/app/javascript/src/casa_case.js +++ b/app/javascript/src/casa_case.js @@ -2,8 +2,10 @@ /* global FormData */ /* global DOMParser */ /* global spinner */ +/* global $ */ import Swal from 'sweetalert2' + const CourtOrderList = require('./court_order_list.js') let courtOrders diff --git a/app/javascript/src/case_contact.js b/app/javascript/src/case_contact.js index 016ac8729b..d4d4238cf6 100644 --- a/app/javascript/src/case_contact.js +++ b/app/javascript/src/case_contact.js @@ -1,6 +1,9 @@ +/* global alert */ +/* global window */ +/* global $ */ + import Swal from 'sweetalert2' -/* global alert $ */ window.onload = function () { const milesDriven = document.getElementById('case_contact_miles_driven') if (!milesDriven) return diff --git a/app/javascript/src/case_contact_autosave.js b/app/javascript/src/case_contact_autosave.js index c3a9206131..0dbc41cdde 100644 --- a/app/javascript/src/case_contact_autosave.js +++ b/app/javascript/src/case_contact_autosave.js @@ -1,3 +1,5 @@ +/* global $ */ + $('document').ready(() => { const formId = 'casa-contact-form' diff --git a/app/javascript/src/case_emancipation.js b/app/javascript/src/case_emancipation.js index 44b9a70d8d..6cfd88faf3 100644 --- a/app/javascript/src/case_emancipation.js +++ b/app/javascript/src/case_emancipation.js @@ -1,4 +1,6 @@ /* eslint-env jquery */ +/* global $ */ + const Notifier = require('./async_notifier') const emancipationPage = { diff --git a/app/javascript/src/dashboard.js b/app/javascript/src/dashboard.js index 35d40bedee..706069a8e5 100644 --- a/app/javascript/src/dashboard.js +++ b/app/javascript/src/dashboard.js @@ -1,6 +1,6 @@ -/* global $ */ /* global location */ /* global alert */ +/* global $ */ const defineCaseContactsTable = function () { $('table#case_contacts').DataTable( diff --git a/app/javascript/src/import.js b/app/javascript/src/import.js index e33358a30e..4788a519ee 100644 --- a/app/javascript/src/import.js +++ b/app/javascript/src/import.js @@ -4,6 +4,7 @@ /* global localStorage */ /* global File */ /* global DataTransfer */ +/* global $ */ function dataURItoBlob (dataURI) { // convert base64 to raw binary data held in a string diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js index 3a66f671a6..74cf3cc231 100644 --- a/app/javascript/src/password_confirmation.js +++ b/app/javascript/src/password_confirmation.js @@ -1,7 +1,7 @@ /* eslint-env jquery */ +/* global $ */ import Swal from 'sweetalert2' - import { disableBtn, enableBtn } from './casa_case' const SUBMIT_BUTTON_CLASS = 'submit-password' diff --git a/app/javascript/src/sidebar.js b/app/javascript/src/sidebar.js index ede772ec31..e208db8f4e 100644 --- a/app/javascript/src/sidebar.js +++ b/app/javascript/src/sidebar.js @@ -1,4 +1,5 @@ /* global $ */ + function toggleSidebar () { const isOpen = $('#sidebar-js').hasClass('sidebar-open') if (isOpen) { diff --git a/app/javascript/src/stylesheets/application.scss b/app/javascript/src/stylesheets/application.scss deleted file mode 100644 index ef101891b0..0000000000 --- a/app/javascript/src/stylesheets/application.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import "base/variables"; -@import "base/breakpoints"; - -@import "bootstrap"; -@import "node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker"; -@import "~@fortawesome/fontawesome-free/scss/fontawesome"; -@import "~@fortawesome/fontawesome-free/scss/solid"; - -@import "shared/dashboard"; -@import "shared/flashes"; -@import "shared/footer"; -@import "shared/form"; -@import "shared/layout"; -@import "shared/navbar"; -@import "shared/select2"; -@import "shared/sidebar"; -@import "shared/typography"; -@import "shared/utilities"; -@import "shared/noscript"; - -@import "pages/casa_cases"; -@import "pages/case_contacts"; -@import "pages/casa_org"; -@import "pages/court_dates"; -@import "pages/dashboard"; -@import "pages/emancipation"; -@import "pages/login"; -@import "pages/password"; -@import "pages/supervisors.scss"; -@import "pages/volunteers"; diff --git a/app/javascript/src/stylesheets/base/variables.scss b/app/javascript/src/stylesheets/base/variables.scss deleted file mode 100644 index 25575497ce..0000000000 --- a/app/javascript/src/stylesheets/base/variables.scss +++ /dev/null @@ -1,3 +0,0 @@ -$primary: #00447c; -$red: #dc3545; -$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; \ No newline at end of file diff --git a/app/views/layouts/_login_header.html.erb b/app/views/layouts/_login_header.html.erb index acfc8648db..aea9f35eb8 100644 --- a/app/views/layouts/_login_header.html.erb +++ b/app/views/layouts/_login_header.html.erb @@ -1,7 +1,7 @@
diff --git a/app/views/layouts/_mobile_navbar.html.erb b/app/views/layouts/_mobile_navbar.html.erb index aa8c0d58c2..4098bc3ee4 100644 --- a/app/views/layouts/_mobile_navbar.html.erb +++ b/app/views/layouts/_mobile_navbar.html.erb @@ -1,9 +1,9 @@