diff --git a/Gemfile b/Gemfile index 3499654..920e533 100644 --- a/Gemfile +++ b/Gemfile @@ -5,10 +5,6 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" } gem 'rails', '~> 6.0.3', '>= 6.0.3.4' # Use Puma as the app server gem 'puma', '~> 4.1' -# Use SCSS for stylesheets -gem 'sass-rails', '>= 6' -# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker -#gem 'webpacker', '~> 4.0' # Allows custom JS build tasks to integrate with the asset pipeline gem 'cssbundling-rails' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index 7a24c74..bff5c5b 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -1,4 +1,3 @@ //= link_tree ../images +//= link_tree ../../javascript .js //= link_tree ../builds -//= link admin.css -//= link legacy.css diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss deleted file mode 100644 index c9a4f40..0000000 --- a/app/assets/stylesheets/admin.scss +++ /dev/null @@ -1,25 +0,0 @@ -@import "legacy/variables"; - -body#admin-panel { - #wrapper { - > header { - background: $color-red-bright; - background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%), - url('/img/bg-1.jpg'); - } - } - - #main-nav { - ul { - grid-template-columns: repeat(4, 1fr); - - li { - a { - &.active { - border-bottom: 2px solid $color-red-bright; - } - } - } - } - } -} diff --git a/app/assets/stylesheets/legacy.css b/app/assets/stylesheets/legacy.css deleted file mode 100644 index 33063ee..0000000 --- a/app/assets/stylesheets/legacy.css +++ /dev/null @@ -1,15 +0,0 @@ -/* - * This is a manifest file that'll be compiled into legacy.css, which will include all the files - * listed below. - * - * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's - * vendor/assets/stylesheets directory can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS - * files in this directory. Styles in this file should be added after the last require_* statement. - * It is generally better to create a new file per style scope. - * - *= require_tree ./legacy/ - *= require_self - */ diff --git a/app/assets/stylesheets/legacy.sass.scss b/app/assets/stylesheets/legacy.sass.scss new file mode 100644 index 0000000..04739eb --- /dev/null +++ b/app/assets/stylesheets/legacy.sass.scss @@ -0,0 +1,2 @@ +@import "legacy/layout"; +@import "legacy/main_nav"; diff --git a/app/assets/stylesheets/legacy/layout.scss b/app/assets/stylesheets/legacy/_layout.scss similarity index 83% rename from app/assets/stylesheets/legacy/layout.scss rename to app/assets/stylesheets/legacy/_layout.scss index e2de21c..a9575aa 100644 --- a/app/assets/stylesheets/legacy/layout.scss +++ b/app/assets/stylesheets/legacy/_layout.scss @@ -55,6 +55,30 @@ } } +body#admin-panel { + #wrapper { + > header { + background: $color-red-bright; + background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%), + url('/img/bg-1.jpg'); + } + } + + #main-nav { + ul { + grid-template-columns: repeat(4, 1fr); + + li { + a { + &.active { + border-bottom: 2px solid $color-red-bright; + } + } + } + } + } +} + .flash-msg { width: 100%; text-align: center; diff --git a/app/assets/stylesheets/legacy/main_nav.scss b/app/assets/stylesheets/legacy/_main_nav.scss similarity index 100% rename from app/assets/stylesheets/legacy/main_nav.scss rename to app/assets/stylesheets/legacy/_main_nav.scss diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb index 2604405..205a84b 100644 --- a/app/views/layouts/admin.html.erb +++ b/app/views/layouts/admin.html.erb @@ -6,9 +6,8 @@ <%= csp_meta_tag %> - <%= stylesheet_link_tag 'admin', media: 'all', 'data-turbolinks-track': 'reload' %> - <%= stylesheet_link_tag 'legacy', media: 'all', 'data-turbolinks-track': 'reload' %> - <%= stylesheet_link_tag 'application' %> + <%= stylesheet_link_tag 'legacy', "data-turbo-track": "reload" %> + <%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index bf9a23b..1a54fbe 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -6,8 +6,8 @@ <%= csp_meta_tag %> - <%= stylesheet_link_tag 'legacy', media: 'all', 'data-turbolinks-track': 'reload' %> - <%= stylesheet_link_tag 'application' %> + <%= stylesheet_link_tag 'legacy', "data-turbo-track": "reload" %> + <%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
diff --git a/app/views/layouts/signup.html.erb b/app/views/layouts/signup.html.erb index 0c746dc..9ba7b7c 100644 --- a/app/views/layouts/signup.html.erb +++ b/app/views/layouts/signup.html.erb @@ -6,8 +6,8 @@ <%= csp_meta_tag %> - <%= stylesheet_link_tag 'legacy', media: 'all', 'data-turbolinks-track': 'reload' %> - <%= stylesheet_link_tag 'application' %> + <%= stylesheet_link_tag 'legacy', "data-turbo-track": "reload" %> + <%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
diff --git a/package.json b/package.json index 5c44c57..54cddfc 100644 --- a/package.json +++ b/package.json @@ -14,12 +14,15 @@ "postcss-preset-env": "^7.3.1", "tailwindcss": "^3.0.22", "turbolinks": "^5.2.0" + "sass": "^1.49.7", }, "version": "0.2.0", "devDependencies": { "webpack-dev-server": "^3.11.0" }, "scripts": { - "build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css" + "build:css:sass": "sass ./app/assets/stylesheets/legacy.sass.scss ./app/assets/builds/legacy.css --no-source-map --load-path=node_modules", + "build:css:tailwind": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css", + "build:css": "yarn run build:css:sass && yarn run build:css:tailwind" } }