diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..c0a9170 Binary files /dev/null and b/.DS_Store differ diff --git a/.github/workflows/ruby.yml b/.github/workflows/ruby.yml index e4379b0..b0d632d 100644 --- a/.github/workflows/ruby.yml +++ b/.github/workflows/ruby.yml @@ -9,7 +9,7 @@ jobs: runs-on: ubuntu-latest services: postgres: - image: postgres:11 + image: postgres:16 ports: - 5432:5432 env: diff --git a/.gitignore b/.gitignore index 4c71036..5778aaf 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,4 @@ /node_modules config/cloudinary.yml/ +/bin/tailwindcss diff --git a/Gemfile b/Gemfile index 22d9ff1..23dde92 100644 --- a/Gemfile +++ b/Gemfile @@ -18,7 +18,7 @@ gem 'pg', '~> 1.1' gem 'puma', '< 7' # Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails] -gem 'jsbundling-rails' +# gem 'jsbundling-rails' # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev] gem 'turbo-rails' @@ -27,7 +27,6 @@ gem 'turbo-rails' gem 'stimulus-rails' # Bundle and process CSS [https://github.com/rails/cssbundling-rails] -gem 'cssbundling-rails' # Build JSON APIs with ease [https://github.com/rails/jbuilder] gem 'jbuilder' @@ -48,7 +47,7 @@ gem 'tzinfo-data', platforms: %i[mingw mswin x64_mingw jruby] gem 'bootsnap', require: false # Use Sass to process CSS -# gem "sassc-rails" +gem 'sassc-rails' # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images] gem 'image_processing', '~> 1.2' @@ -75,6 +74,7 @@ end group :test do # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing] gem 'capybara' + gem 'minitest', '~> 5.0' gem 'selenium-webdriver' gem 'webdrivers' end @@ -83,6 +83,8 @@ gem 'cloudinary' gem 'devise' gem 'pagy', '~> 6.0' gem 'rails_admin', '~> 3.0' -gem 'sassc-rails' -gem 'sass-rails', '~> 6.0' -gem "sassc-rails" + +gem 'tailwindcss-rails', '~> 4.4' +gem 'tailwindcss-ruby', '~> 4.1', '>= 4.1.18' + +gem 'importmap-rails', '~> 2.2' diff --git a/Gemfile.lock b/Gemfile.lock index 56a5911..5b7bc3f 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -79,70 +79,78 @@ GEM addressable (2.8.5) public_suffix (>= 2.0.2, < 6.0) ast (2.4.2) - aws_cf_signer (0.1.3) base64 (0.3.0) bcrypt (3.1.19) - benchmark (0.4.1) - bigdecimal (3.2.3) + benchmark (0.5.0) + bigdecimal (4.0.1) bindex (0.8.1) - bootsnap (1.16.0) + bootsnap (1.22.0) msgpack (~> 1.2) builder (3.3.0) - byebug (11.1.3) - capybara (3.39.2) + byebug (13.0.0) + reline (>= 0.6.0) + capybara (3.40.0) addressable matrix mini_mime (>= 0.1.3) - nokogiri (~> 1.8) + nokogiri (~> 1.11) rack (>= 1.6.0) rack-test (>= 0.6.3) regexp_parser (>= 1.5, < 3.0) xpath (~> 3.2) - cloudinary (1.27.0) - aws_cf_signer - rest-client (>= 2.0.0) - concurrent-ruby (1.3.5) - connection_pool (2.5.4) + cloudinary (2.4.4) + faraday (>= 2.0.1, < 3.0.0) + faraday-follow_redirects (~> 0.5) + faraday-multipart (~> 1.0, >= 1.0.4) + ostruct + concurrent-ruby (1.3.6) + connection_pool (3.0.2) crass (1.0.6) - cssbundling-rails (1.4.1) - railties (>= 6.0.0) csv (3.3.0) - date (3.4.1) - debug (1.9.2) + date (3.5.1) + debug (1.11.1) irb (~> 1.10) reline (>= 0.3.8) - devise (4.9.4) + devise (5.0.0) bcrypt (~> 3.0) orm_adapter (~> 0.1) - railties (>= 4.1.0) + railties (>= 7.0) responders warden (~> 1.2.3) - domain_name (0.5.20190701) - unf (>= 0.0.5, < 1.0.0) drb (2.2.3) - erb (5.0.2) + erb (6.0.1) erubi (1.13.1) + faraday (2.14.1) + faraday-net_http (>= 2.0, < 3.5) + json + logger + faraday-follow_redirects (0.5.0) + faraday (>= 1, < 3) + faraday-multipart (1.2.0) + multipart-post (~> 2.0) + faraday-net_http (3.4.2) + net-http (~> 0.5) ffi (1.15.5) globalid (1.2.1) activesupport (>= 6.1) - http-accept (1.7.0) - http-cookie (1.0.5) - domain_name (~> 0.5) - i18n (1.14.7) + i18n (1.14.8) concurrent-ruby (~> 1.0) - image_processing (1.12.2) - mini_magick (>= 4.9.5, < 5) + image_processing (1.14.0) + mini_magick (>= 4.9.5, < 6) ruby-vips (>= 2.0.17, < 3) - io-console (0.8.1) - irb (1.15.2) + importmap-rails (2.2.3) + actionpack (>= 6.0.0) + activesupport (>= 6.0.0) + railties (>= 6.0.0) + io-console (0.8.2) + irb (1.17.0) pp (>= 0.6.0) + prism (>= 1.3.0) rdoc (>= 4.0.0) reline (>= 0.4.2) - jbuilder (2.12.0) - actionview (>= 5.0.0) - activesupport (>= 5.0.0) - jsbundling-rails (1.1.2) - railties (>= 6.0.0) + jbuilder (2.14.1) + actionview (>= 7.0.0) + activesupport (>= 7.0.0) json (2.7.2) kaminari (1.2.2) activesupport (>= 4.1.0) @@ -158,7 +166,7 @@ GEM kaminari-core (1.2.2) language_server-protocol (3.17.0.3) logger (1.7.0) - loofah (2.24.1) + loofah (2.25.0) crass (~> 1.0.2) nokogiri (>= 1.12.0) mail (2.8.1) @@ -168,14 +176,14 @@ GEM net-smtp marcel (1.0.4) matrix (0.4.2) - mime-types (3.5.0) - mime-types-data (~> 3.2015) - mime-types-data (3.2023.0808) mini_magick (4.12.0) mini_mime (1.1.5) - minitest (5.25.5) + minitest (5.27.0) msgpack (1.7.2) + multipart-post (2.4.1) nested_form (0.3.2) + net-http (0.9.1) + uri (>= 0.11.1) net-imap (0.5.10) date net-protocol @@ -185,36 +193,38 @@ GEM timeout net-smtp (0.5.1) net-protocol - netrc (0.11.0) nio4r (2.7.4) - nokogiri (1.18.9-x86_64-darwin) + nokogiri (1.19.0-x86_64-darwin) racc (~> 1.4) - nokogiri (1.18.9-x86_64-linux-gnu) + nokogiri (1.19.0-x86_64-linux-gnu) racc (~> 1.4) orm_adapter (0.5.0) - pagy (6.0.4) + ostruct (0.6.3) + pagy (6.5.0) parallel (1.26.3) parser (3.3.5.0) ast (~> 2.4.1) racc - pg (1.5.3) - pp (0.6.2) + pg (1.6.3-x86_64-darwin) + pg (1.6.3-x86_64-linux) + pp (0.6.3) prettyprint prettyprint (0.2.0) - psych (5.2.6) + prism (1.9.0) + psych (5.3.1) date stringio public_suffix (5.0.3) - puma (6.4.2) + puma (6.6.1) nio4r (~> 2.0) racc (1.8.1) - rack (3.2.1) + rack (3.2.4) rack-session (2.1.1) base64 (>= 0.1.0) rack (>= 3.0.0) rack-test (2.2.0) rack (>= 1.3) - rackup (2.2.1) + rackup (2.3.1) rack (>= 3) rails (8.0.2.1) actioncable (= 8.0.2.1) @@ -253,24 +263,20 @@ GEM thor (~> 1.0, >= 1.2.2) zeitwerk (~> 2.6) rainbow (3.1.1) - rake (13.3.0) - rdoc (6.14.2) + rake (13.3.1) + rdoc (7.2.0) erb psych (>= 4.0.0) + tsort redis (4.8.1) regexp_parser (2.8.1) - reline (0.6.2) + reline (0.6.3) io-console (~> 0.5) responders (3.1.1) actionpack (>= 5.2) railties (>= 5.2) - rest-client (2.1.0) - http-accept (>= 1.7.0, < 2.0) - http-cookie (>= 1.0.2, < 2.0) - mime-types (>= 1.16, < 4.0) - netrc (~> 0.8) rexml (3.2.6) - rubocop (1.66.1) + rubocop (1.68.0) json (~> 2.3) language_server-protocol (>= 3.17.0) parallel (~> 1.10) @@ -282,7 +288,7 @@ GEM unicode-display_width (>= 2.4.0, < 3.0) rubocop-ast (1.32.3) parser (>= 3.3.1.0) - rubocop-rails (2.26.2) + rubocop-rails (2.29.1) activesupport (>= 4.2.0) rack (>= 1.1) rubocop (>= 1.52.0, < 2.0) @@ -291,8 +297,6 @@ GEM ruby-vips (2.1.4) ffi (~> 1.12) rubyzip (2.3.2) - sass-rails (6.0.0) - sassc-rails (~> 2.1, >= 2.1.1) sassc (2.4.0) ffi (~> 1.9) sassc-rails (2.1.2) @@ -306,30 +310,33 @@ GEM rexml (~> 3.2, >= 3.2.5) rubyzip (>= 1.2.2, < 3.0) websocket (~> 1.0) - sprockets (4.2.0) + sprockets (4.2.2) concurrent-ruby (~> 1.0) + logger rack (>= 2.2.4, < 4) sprockets-rails (3.5.2) actionpack (>= 6.1) activesupport (>= 6.1) sprockets (>= 3.0.0) - stimulus-rails (1.2.2) + stimulus-rails (1.3.4) railties (>= 6.0.0) - stringio (3.1.7) - thor (1.4.0) - tilt (2.2.0) + stringio (3.2.0) + tailwindcss-rails (4.4.0) + railties (>= 7.0.0) + tailwindcss-ruby (~> 4.0) + tailwindcss-ruby (4.1.18-x86_64-darwin) + tailwindcss-ruby (4.1.18-x86_64-linux-gnu) + thor (1.5.0) + tilt (2.7.0) timeout (0.4.3) - turbo-rails (2.0.7) - actionpack (>= 6.0.0) - activejob (>= 6.0.0) - railties (>= 6.0.0) + tsort (0.2.0) + turbo-rails (2.0.23) + actionpack (>= 7.1.0) + railties (>= 7.1.0) tzinfo (2.0.6) concurrent-ruby (~> 1.0) - unf (0.1.4) - unf_ext - unf_ext (0.0.8.2) unicode-display_width (2.6.0) - uri (1.0.3) + uri (1.1.1) useragent (0.16.11) warden (1.2.9) rack (>= 2.0.9) @@ -349,7 +356,7 @@ GEM websocket-extensions (0.1.5) xpath (3.2.0) nokogiri (~> 1.8) - zeitwerk (2.7.3) + zeitwerk (2.7.4) PLATFORMS x86_64-darwin-19 @@ -362,12 +369,12 @@ DEPENDENCIES byebug capybara cloudinary - cssbundling-rails debug devise image_processing (~> 1.2) + importmap-rails (~> 2.2) jbuilder - jsbundling-rails + minitest (~> 5.0) pagy (~> 6.0) pg (~> 1.1) puma (< 7) @@ -376,11 +383,12 @@ DEPENDENCIES redis (~> 4.0) rubocop rubocop-rails - sass-rails (~> 6.0) sassc-rails selenium-webdriver sprockets-rails stimulus-rails + tailwindcss-rails (~> 4.4) + tailwindcss-ruby (~> 4.1, >= 4.1.18) turbo-rails tzinfo-data web-console diff --git a/Procfile.dev b/Procfile.dev index db85284..fb5af56 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,3 +1,2 @@ web: unset PORT && bin/rails server -js: yarn build --watch -css: yarn build:css --watch +css: bin/rails tailwindcss:watch diff --git a/README.md b/README.md index ec67a16..ea5c342 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Adventist Learning Center provides quality education to Syrian and Kurdish Refug - Ruby - Ruby on Rails -- SCSS +- Tailwind - PostgreSQL ## Getting Started diff --git a/app/.DS_Store b/app/.DS_Store new file mode 100644 index 0000000..c074a3c Binary files /dev/null and b/app/.DS_Store differ diff --git a/app/assets/.DS_Store b/app/assets/.DS_Store new file mode 100644 index 0000000..ae309fa Binary files /dev/null and b/app/assets/.DS_Store differ diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index 65b736a..375c0f2 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -1,3 +1,4 @@ //= link_tree ../images //= link_tree ../builds -//= link application.css \ No newline at end of file +//= link_tree ../../javascript .js +//= link_tree ../../../vendor/javascript .js diff --git a/app/assets/images/.DS_Store b/app/assets/images/.DS_Store new file mode 100644 index 0000000..3790bd5 Binary files /dev/null and b/app/assets/images/.DS_Store differ diff --git a/app/assets/images/alc_logo.png b/app/assets/images/alc_logo.png new file mode 100644 index 0000000..4e1d6d0 Binary files /dev/null and b/app/assets/images/alc_logo.png differ diff --git a/app/assets/images/logo.jpg b/app/assets/images/logo.jpg deleted file mode 100644 index 3987e88..0000000 Binary files a/app/assets/images/logo.jpg and /dev/null differ diff --git a/app/assets/stylesheets/_base.scss b/app/assets/stylesheets/_base.scss deleted file mode 100644 index 5bc910d..0000000 --- a/app/assets/stylesheets/_base.scss +++ /dev/null @@ -1,165 +0,0 @@ -html, body, h1, h2, h3, p, ul, ol { - margin: 0; - padding: 0; - border: 0; -} - -body { - background-color: white; - max-width: 85%; - margin: 0 auto; - font-family: Arial, sans-serif; - font-size: $base-font-size; - line-height: 1.5; - overflow-x: hidden; -} - -a { - color: $primary-color; - text-decoration: none; - font-weight: $base-font-weight; - - &:hover { - color: $secondary-color; - } -} - -ul { - list-style: none; -} - -.content-wrapper { - min-height: 80vh; -} - -.about_us { - color: $primary-color; - text-transform: uppercase; - font-weight: $base-font-weight; - font-size: 2rem; - padding: 3rem 0 1rem 0; - text-align: center; -} - -.description { - font-size: 1.25rem; - line-height: 1.75rem; - color: $brown-color; - width: 75%; - margin: 0 auto 1rem auto; -} - -.donate_instructions { - max-width: 60%; - margin: 0.625rem auto 2rem auto; - padding: 4rem; - text-align: left; - background-color: #f5f5f5; - border-radius: 0.5rem; - box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1); - line-height: 2rem; - align-self: center; - - h2 { - font-size: 1.7rem; - margin-bottom: 0.625rem; - } - - p { - font-size: 1.2rem; - margin-bottom: 1.25rem; - } - - ol { - margin-left: 1.25rem; - font-size: 1.2rem; - margin-bottom: 1.25rem; - } - - .click_donate { - margin: 2rem 0 2rem 0; - } - - .donate_method { - border: 1px solid #ddd; - padding: 16px; - border-radius: 8px; - margin-bottom: 16px; - background-color: #f9f9f9; - } -} - -.reg_button { - padding: .5rem .75rem; - border: 2px solid $primary-color; - border-radius: $base-border-radius; - color: $primary-color; - font-size: 1rem; - - &:hover { - border-color: $secondary-color; - color: $secondary-color; - text-decoration: none; - } -} - -#error_explanation { - color: #d9534f; /* Red color for error messages */ - font-size: 1rem; - margin-top: 5px; -} - -form { - max-width: 400px; - margin: 0.625rem auto 2rem auto; - padding: 4rem; - text-align: left; - background-color: #f5f5f5; - border-radius: 0.5rem; - box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1); - line-height: 2rem; - align-self: center; - - .field { - input[type="email"], - input[type="password_confirmation"], - input[type="password"] { - width: 100%; - padding: .8rem; - margin-bottom: 1rem; - border: 1px solid #ccc; - border-radius: $base-border-radius; - box-sizing: border-box; - } - - label { - font-weight: bold; - } - - input:focus { - outline: none; - border-color: $secondary-color; /* Change to your desired focus color */ - } - } -} - -@include breakpoint(tphone){ - .donate_instructions { - max-width: 80%; - padding: 2rem; - text-align: left; - - h2 { - font-size: 1.25rem; - text-align: center; - } - - p { - font-size: 1rem; - } - - ol { - font-size: 1rem; - } - } -} diff --git a/app/assets/stylesheets/_layout.scss b/app/assets/stylesheets/_layout.scss deleted file mode 100644 index be71c2d..0000000 --- a/app/assets/stylesheets/_layout.scss +++ /dev/null @@ -1,136 +0,0 @@ - -.logo-wrapper { - max-width: 30%; -} - -.alc_logo { - width: 250px; - height: 200px; -} - -.cover-image { - position: relative; - display: inline-block; - overflow: hidden; - border-radius: $base-border-radius; - width: 100%; - margin: 0 auto; - - img { - display: block; - width: 100%; - height: auto; - } - - .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.6); /* Adjust the overlay color and opacity */ - display: flex; - align-items: center; - justify-content: center; - } - - .text-content { - text-align: center; - color: white; - padding: 20px; - max-width: 80%; - - h2 { - font-weight: 600; - font-size: 2.25rem; - line-height: 2.5rem; - margin-bottom: 1rem; - } - - h4 { - font-weight: 600; - font-size: 1.25rem; - line-height: 1.75rem; - color: $color-opacity; - } - - a { - font-weight: 500; - font-size: 1rem; - padding: 0.5rem 1.75rem; - text-transform: uppercase; - color: $color-opacity; - border: 2px solid $color-opacity; - border-radius: $base-border-radius; - padding: 1rem 1.8rem; - text-decoration: none; - transition: all 0.3s ease; - - &:hover { - color: white; - background-color: rgba(255, 255, 255, 0.1); - } - } - } -} - -@include breakpoint(phone) { - - .logo-wrapper { - display: flex; - justify-content: center; - align-items: center; - align-content: center; - text-align: center; - } - - .cover-image { - - .text-content { - text-align: center; - color: white; - padding: 20px; - max-width: 70%; - - h2 { - font-weight: 500; - font-size: 1.75rem; - line-height: 2rem; - margin-bottom: 1rem; - } - - h4 { - font-weight: 500; - font-size: 1rem; - line-height: 1rem; - color: $color-opacity; - padding-bottom: 1rem; - } - - } - } -} - -@include breakpoint(tphone) { - - .cover-image { - .text-content { - max-width: 60%; - - h2 { - font-size: 1.5rem; - margin-bottom: 1rem; - } - - h4 { - font-size: .75rem; - } - - a { - font-weight: 500; - font-size: .75rem; - padding: .75rem 1rem; - } - } - } -} diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/_mixins.scss deleted file mode 100644 index eb64168..0000000 --- a/app/assets/stylesheets/_mixins.scss +++ /dev/null @@ -1,28 +0,0 @@ -@mixin breakpoint($point) { - @if $point == tablet { - @media (min-width: 768px) and (max-width: 1124px) { - @content; - } - } @else if $point == phone { - @media (max-width: 767px) { - @content; - } - } @else if $point == tphone { - @media (max-width: 487px) { - @content; - } - } @else if $point == desktop { - @media (min-width: 1125px) { - @content; - } - } -} - -// @mixin btn($left, $top) { -// position: absolute; -// width: 60px; -// height: 60px; -// top: $top; -// left: $left; -// transition-duration: 0.5s; -// } diff --git a/app/assets/stylesheets/_pagy.scss b/app/assets/stylesheets/_pagy.scss deleted file mode 100644 index cad7812..0000000 --- a/app/assets/stylesheets/_pagy.scss +++ /dev/null @@ -1,60 +0,0 @@ -.pagination { - display: flex; - flex-direction: row; - padding: 24px; - border-radius: 6px; - box-shadow: 0px 4px 8px 0px rgba(31, 41, 55, 0.14); - background-color: #fff; - position: relative; - max-width: 30%; - min-width: 30%; - margin: 0 auto; - - span { - padding: 8px 12px; - margin: 0 auto; - color: #333; - border: 1px solid #ddd; - border-radius: 4px; - text-decoration: none; - transition: background-color 0.3s ease; - - &:hover { - background-color: #f4f4f4; - } - - &.active { - background-color: $primary-color; - color: white; - border: none; - - &:hover { - background-color: $secondary-color; - color: white; - border: none; - } - } - } -} - -@include breakpoint(tablet){ - .pagination { - max-width: 70%; - padding: 20px; - - span { - padding: 6px 10px; - } - } -} - -@include breakpoint(phone){ - .pagination { - max-width: 90%; - padding: 16px; - - span { - padding: 4px 8px; - } - } -} diff --git a/app/assets/stylesheets/_show.scss b/app/assets/stylesheets/_show.scss deleted file mode 100644 index 11f5439..0000000 --- a/app/assets/stylesheets/_show.scss +++ /dev/null @@ -1,92 +0,0 @@ -.show_page { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - h1 { - font-size: 2rem; - margin-bottom: 10px; - color: $primary-color; - text-align: center; - } - - .image_wrapper { - margin-bottom: 1rem; - - img { - max-width: 100%; - height: auto; - border-radius: $base-border-radius; - } - } - - - p { - max-width: 75%; - margin: 0 auto; - font-size: 1.25rem; - line-height: 1.75rem; - color: $brown-color; - align-self: flex-start; - } - - .tags { - display: flex; - max-width: 90%; - margin: 1rem auto; - align-items: center; - align-content: center; - justify-content: space-between; - - .tag { - display: inline-block; - background-color: #e5e7eb; - color: $grey-color; - padding: .25rem; - min-width: 200px; - border-radius: 9999px; - border: 1px solid #e5e7eb; - font-size: .875rem; - line-height: 1.25rem; - font-weight: 600; - margin: 0.5rem; - box-sizing: border-box; - text-align: center; - - .unique_id { - font-weight: 900; - } - } - } - - .sponsored_label { - text-align: center; - font-size: 1.1rem; - - .sponsored_st { - font-style: italic; - font-weight: 900; - } - } - - .link_to_donate { - align-self: center; - font-size: 1.1rem; - } -} - - -@include breakpoint(tablet) { - - .tags { - flex-direction: column; - } -} - -@include breakpoint(phone) { - - .tags { - flex-direction: column; - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss deleted file mode 100644 index c12e6cf..0000000 --- a/app/assets/stylesheets/_variables.scss +++ /dev/null @@ -1,8 +0,0 @@ -$primary-color: #067e5b; -$secondary-color: #acc174; -$brown-color: #7b5f37; -$grey-color: #4b5563; -$base-font-size: 16px; -$base-font-weight: 800; -$color-opacity: rgba(255, 255, 255, 0.9); -$base-border-radius: 0.3rem; \ No newline at end of file diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss deleted file mode 100644 index 889bd54..0000000 --- a/app/assets/stylesheets/application.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import 'variables'; -@import 'mixins'; -@import 'base'; -@import 'layout'; -@import 'pagy'; -@import 'show'; -@import 'components/cards'; -@import 'shared/navbar'; -@import 'shared/footer'; -@import 'utilities/responsive'; diff --git a/app/assets/stylesheets/components/_cards.scss b/app/assets/stylesheets/components/_cards.scss deleted file mode 100644 index 248e4c1..0000000 --- a/app/assets/stylesheets/components/_cards.scss +++ /dev/null @@ -1,109 +0,0 @@ -.card-grid { - display: grid; - max-width: 100%; - margin: 0 auto 5rem auto; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - grid-template-rows: auto; - grid-gap: 1.25rem; - border-radius: 0.5rem; - - .card { - display: flex; - flex-direction: column; - background-color: rgba(255, 255, 255, 1.2); - border-radius: 0.5rem; - box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.2); - - - .card_image { - overflow: hidden; - - img { - max-width: 100%; - height: 100%; - display: block; - border-radius: 0.5rem; - object-fit: cover; - } - } - - .card_content { - padding: 1.25rem; - transition: all 0.5s ease; - - &:hover { - box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; - cursor: pointer; - } - - .card_title { - font-size: 1.5rem; - margin-bottom: 0.625rem; - text-transform: uppercase; - font-weight: 800; - color: $primary-color; - } - - p { - font-size: 1.25rem; - margin-bottom: 0; - font-weight: 600; - color: $grey-color; - } - - em { - font-weight: 500; - } - - .unsponsored { - margin: 1.25rem 0; - font-weight: 800; - font-style: italic; - } - - a { - font-weight: 800; - color: $brown-color; - font-size: 1.25rem; - - &:hover { - text-decoration: none; - color: $secondary-color; - } - } - - .check_story { - margin: 1.25rem 0; - } - - .sponsor_student { - padding: .5rem .75rem; - border: 2px solid $primary-color; - color: $primary-color; - border-radius: $base-border-radius; - - &:hover { - border-color: $secondary-color; - text-decoration: none; - } - } - } -} -} - - @supports (font: -apple-system-body) and (-webkit-appearance: none) { - .card-grid { - - .card { - - - .card_image { - - img { - max-width: 100%; - height: 332px; - } - } - } - } -} diff --git a/app/assets/stylesheets/shared/_footer.scss b/app/assets/stylesheets/shared/_footer.scss deleted file mode 100644 index 664067e..0000000 --- a/app/assets/stylesheets/shared/_footer.scss +++ /dev/null @@ -1,79 +0,0 @@ -footer { - hr { - border: none; - height: 1px; - background-color: $secondary-color; - } - - .contacts_wrapper { - display: flex; - justify-content: space-between; - align-items: start; - align-content: center; - width: 100%; - - .contact_details, .follow_social_links { - width: 250px; - } - - .contacts_title { - color: $primary-color; - text-transform: uppercase; - font-weight: $base-font-weight; - font-size: 1rem; - padding: 3rem 0 1rem 0; - text-align: center; - } - - .social_links { - display: flex; - justify-content: space-around; - } - - li { - color: $brown-color; - font-weight: $base-font-weight; - - .social_icons { - width: 25px; - height: 25px; - - } - - p { - text-decoration: none; - } - - a { - color: $brown-color; - } - } - } - - .rights { - text-align: center; - margin: 2rem 0; - } -} - -footer { - @include breakpoint(tablet) { - .contacts_wrapper { - flex-direction: column; - justify-content: center; - align-items: center; - align-content: center; - text-align: center; - } - } - - @include breakpoint(phone) { - .contacts_wrapper { - flex-direction: column; - justify-content: center; - align-items: center; - align-content: center; - text-align: center; - } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/shared/_navbar.scss b/app/assets/stylesheets/shared/_navbar.scss deleted file mode 100644 index 75e6847..0000000 --- a/app/assets/stylesheets/shared/_navbar.scss +++ /dev/null @@ -1,122 +0,0 @@ -header { - nav { - display: flex; - justify-content: space-between; - width: 100%; - - ul { - display: flex; - justify-content: space-between; - align-items: center; - align-content: center; - width: 70%; - - li { - font-size: 1.2rem; - - .donate_button { - padding: .5rem .75rem; - border: 2px solid $primary-color; - border-radius: $base-border-radius; - - &:hover { - border-color: $secondary-color; - color: $secondary-color; - text-decoration: none; - } - } - } - } - - .hamburgers { - align-self: center; - align-items: center; - cursor: pointer; - - .bar1, .bar2, .bar3 { - display: block; - width: 35px; - height: 3px; - margin: 5px auto; - background-color:$primary-color; - transition: 0.4s; - } - - .bar1 { - &.change { - transform: rotate(45deg) translate(8px,3px); - } - } - .bar2 { - &.change { - opacity: 0; - } - } - .bar3 { - &.change { - transform: rotate(-45deg) translate(8px,-3px); - } - } - - } - - .mobile_menu { - position: fixed; - right: 0px; - flex-direction: column; - background-color: #f5f5f5; - border-radius: 0px 0px 0px 20px; - transition: transform 0.3s ease-in; - transform: translate(100%); - z-index: 20; - padding: 2rem 0; - min-width: 28%; - height: 30vh; - - &.change{ - transform: translate(0%); - } - } - } -} - - -@include breakpoint(desktop) { - .hamburgers { - display: none; - } - - .desktop { - display: flex; - } -} - -@include breakpoint(tablet) { - - .hamburgers { - display: block; - } - - .desktop { - display: none; - } - - .mobile_menu { - display: flex; - } -} - -@include breakpoint(phone) { - - .hamburgers { - display: block; - } - - .mobile_menu { - display: flex; - } - - .desktop { - display: none; - } -} diff --git a/app/assets/stylesheets/utilities/_responsive.scss b/app/assets/stylesheets/utilities/_responsive.scss deleted file mode 100644 index adee7e6..0000000 --- a/app/assets/stylesheets/utilities/_responsive.scss +++ /dev/null @@ -1,10 +0,0 @@ -// .hide-on-mobile { -// @include breakpoint(phone) { -// display: none; -// } -// } - -// _utilities/_spacing.scss -.padding { - padding: 1rem; -} diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css new file mode 100644 index 0000000..3b11b86 --- /dev/null +++ b/app/assets/tailwind/application.css @@ -0,0 +1,48 @@ +@import "tailwindcss"; +@source "../../views/**/*.html.erb"; +@source "../../helpers/**/*.rb"; +@source "../../javascript/**/*.js"; + +/* Pagy pagination styles */ +.pagy-nav.pagination { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + font-weight: 500; +} + +.pagy-nav .page { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2.5rem; + height: 2.5rem; + padding: 0 0.75rem; + border-radius: 0.75rem; + transition: all 0.2s ease; + background-color: white; + border: 1px solid #a7f3d0; + color: #047857; +} + +.pagy-nav .page a { + color: inherit; + text-decoration: none; +} + +.pagy-nav .page:hover { + background-color: #d1fae5; + border-color: #6ee7b7; + color: #065f46; +} + +.pagy-nav .page.active { + background-color: #10b981; + color: white; + font-weight: 600; + border: 1px solid #10b981; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); +} diff --git a/app/controllers/students_controller.rb b/app/controllers/students_controller.rb index 3a440a6..977376b 100644 --- a/app/controllers/students_controller.rb +++ b/app/controllers/students_controller.rb @@ -51,8 +51,8 @@ def sponsor_individual_student private def student_params - params.require(:student) - .permit(:name, :description, :age, :grade, :fav_food, :status, - :fav_color, :main_image, :secondary_image, :hobbies) + params + .expect(student: %i[name description age grade fav_food status + fav_color main_image secondary_image hobbies]) end end diff --git a/app/javascript/application.js b/app/javascript/application.js index d933293..059eab2 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -1,3 +1,3 @@ -// Entry point for the build script in your package.json +// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails import "@hotwired/turbo-rails" -import "./controllers" +import "controllers" \ No newline at end of file diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js index 1213e85..57f5e91 100644 --- a/app/javascript/controllers/application.js +++ b/app/javascript/controllers/application.js @@ -6,4 +6,4 @@ const application = Application.start() application.debug = false window.Stimulus = application -export { application } +export { application } \ No newline at end of file diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index fbcecba..fee7d9e 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -1,11 +1,6 @@ -// This file is auto-generated by ./bin/rails stimulus:manifest:update -// Run that command whenever you add a new controller or create them with -// ./bin/rails generate stimulus controllerName - +// Import and register all your controllers from the importmap under controllers/* import { application } from "./application" -import HelloController from "./hello_controller" -application.register("hello", HelloController) - -import MenuToggleController from "./menu_toggle_controller" -application.register("menu-toggle", MenuToggleController) +// Eager load all controllers defined in the import map under controllers/**/*_controller +import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading" +eagerLoadControllersFrom("controllers", application) \ No newline at end of file diff --git a/app/javascript/controllers/menu_toggle_controller.js b/app/javascript/controllers/menu_toggle_controller.js index acd4438..04e064e 100644 --- a/app/javascript/controllers/menu_toggle_controller.js +++ b/app/javascript/controllers/menu_toggle_controller.js @@ -1,13 +1,16 @@ import { Controller } from "@hotwired/stimulus" -// Connects to data-controller="menu-toggle" export default class extends Controller { - static targets = ["menu", "hamburger"]; + static targets = ["menu", "bar1", "bar2", "bar3"] toggleMenu() { - this.menuTarget.classList.toggle("change"); - this.hamburgerTargets.forEach(target => { - target.classList.toggle("change"); - }); + this.menuTarget.classList.toggle("hidden") + + // Animate hamburger to X + this.bar1Target.classList.toggle("rotate-45") + this.bar1Target.classList.toggle("translate-y-2") + this.bar2Target.classList.toggle("opacity-0") + this.bar3Target.classList.toggle("-rotate-45") + this.bar3Target.classList.toggle("-translate-y-2") } -} +} \ No newline at end of file diff --git a/app/views/donations/how_to_donate.html.erb b/app/views/donations/how_to_donate.html.erb index fceb922..62bf559 100644 --- a/app/views/donations/how_to_donate.html.erb +++ b/app/views/donations/how_to_donate.html.erb @@ -1,46 +1,69 @@ -
-