From 965346d90d82b3188608d423489354af368e8ae7 Mon Sep 17 00:00:00 2001 From: pvincent Date: Thu, 20 Jun 2024 16:31:20 +0400 Subject: [PATCH] navbar tailwind --- .vscode/settings.json | 10 ++++----- TODO.md | 4 ++-- .../stylesheets/application.tailwind.css | 2 +- app/assets/stylesheets/application.turbo.css | 5 ----- app/assets/stylesheets/navbar.css | 21 +++++++++++++++++++ ...{application.toastify.css => toastify.css} | 0 app/assets/stylesheets/turbo.css | 5 +++++ app/javascript/controllers/application.js | 2 +- .../controllers/toast_controller.js | 8 ------- app/views/layouts/_navbar.html.erb | 5 +++++ app/views/layouts/_notification.html.erb | 1 + app/views/layouts/application.html.erb | 6 +++++- app/views/scores/index.html.erb | 2 +- 13 files changed, 47 insertions(+), 24 deletions(-) delete mode 100644 app/assets/stylesheets/application.turbo.css create mode 100644 app/assets/stylesheets/navbar.css rename app/assets/stylesheets/{application.toastify.css => toastify.css} (100%) create mode 100644 app/assets/stylesheets/turbo.css delete mode 100644 app/javascript/controllers/toast_controller.js create mode 100644 app/views/layouts/_navbar.html.erb diff --git a/.vscode/settings.json b/.vscode/settings.json index c21a09d..78ebefe 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,21 +2,18 @@ // All of these settings are scoped only to the Ruby language "[ruby]": { "editor.defaultFormatter": "Shopify.ruby-lsp", // Use the Ruby LSP as the default formatter - "editor.formatOnSave": true, // Format files automatically when saving - "editor.tabSize": 2, // Use 2 spaces for indentation - "editor.insertSpaces": true, // Use spaces and not tabs for indentantion "editor.semanticHighlighting.enabled": true, // Enable semantic highlighting "editor.formatOnType": true // Enable formatting while typing }, "[erb]": { "editor.defaultFormatter": "aliariff.vscode-erb-beautify", - "editor.formatOnSave": true }, "emmet.includeLanguages": { "erb": "html" }, "files.associations": { - "*.html.erb": "erb" + "*.html.erb": "erb", + "*.tailwind.css": "tailwindcss" }, "vscode-erb-beautify.keepBlankLines": 1, "inlineFold.regex": "(class=|className=|class:\\s*)(({(`|))|(['\"`]))(.*?)(\\2|(\\4)})", // inline AlpineJs `class: ` @@ -32,4 +29,7 @@ }, // --------------------------------------------------------- "terminal.integrated.shellIntegration.enabled": false, + "editor.formatOnSave": true, + "editor.tabSize": 2, // Use 2 spaces for indentation + "editor.insertSpaces": true, // Use spaces and not tabs for indentantion } \ No newline at end of file diff --git a/TODO.md b/TODO.md index 859d248..265edbf 100644 --- a/TODO.md +++ b/TODO.md @@ -1,8 +1,6 @@ TODO ==== -* [ ] Flash message - * [ ] https://reinteractive.com/articles/how-to-create-flash-messages-in-Rails-7 * [ ] Tailwind * [ ] copy TailAdmin (or WindMill) layout * [ ] https://demo.tailadmin.com/crm @@ -26,6 +24,8 @@ TODO New Notes --------- +* [x] Flash message + * [x] https://reinteractive.com/articles/how-to-create-flash-messages-in-Rails-7 * [x] Minitest * [x] Formatter * [x] wrap warning containing \n diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index 8666d2f..08d74a7 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -10,4 +10,4 @@ } } -*/ +*/ \ No newline at end of file diff --git a/app/assets/stylesheets/application.turbo.css b/app/assets/stylesheets/application.turbo.css deleted file mode 100644 index e0f9d73..0000000 --- a/app/assets/stylesheets/application.turbo.css +++ /dev/null @@ -1,5 +0,0 @@ -.turbo-progress-bar { - height: 10px; - background: rgb(0,0,0); - background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,192,250,1) 35%, rgba(0,32,249,1) 100%); - } \ No newline at end of file diff --git a/app/assets/stylesheets/navbar.css b/app/assets/stylesheets/navbar.css new file mode 100644 index 0000000..6894899 --- /dev/null +++ b/app/assets/stylesheets/navbar.css @@ -0,0 +1,21 @@ +nav { + background-color: black; + color: azure; + + p { + background-color: aqua; + } + + + p:hover { + background-color: blueviolet; + } + + &:hover p { + background-color: yellow; + } +} + +p { + background-color: red; +} \ No newline at end of file diff --git a/app/assets/stylesheets/application.toastify.css b/app/assets/stylesheets/toastify.css similarity index 100% rename from app/assets/stylesheets/application.toastify.css rename to app/assets/stylesheets/toastify.css diff --git a/app/assets/stylesheets/turbo.css b/app/assets/stylesheets/turbo.css new file mode 100644 index 0000000..19bee8d --- /dev/null +++ b/app/assets/stylesheets/turbo.css @@ -0,0 +1,5 @@ +.turbo-progress-bar { + height: 10px; + background: rgb(0, 0, 0); + background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 192, 250, 1) 35%, rgba(0, 32, 249, 1) 100%); +} \ No newline at end of file diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js index c84f770..2d5a73e 100644 --- a/app/javascript/controllers/application.js +++ b/app/javascript/controllers/application.js @@ -4,6 +4,6 @@ const application = Application.start() // Configure Stimulus development experience application.debug = true -window.Stimulus = application +window.Stimulus = application export { application } diff --git a/app/javascript/controllers/toast_controller.js b/app/javascript/controllers/toast_controller.js deleted file mode 100644 index b2dda29..0000000 --- a/app/javascript/controllers/toast_controller.js +++ /dev/null @@ -1,8 +0,0 @@ -import { Controller } from "@hotwired/stimulus" - -export default class extends Controller { - connect() { - console.log('toast.js: ', this.element) - this.element.textContent = "Toast #1" - } -} diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb new file mode 100644 index 0000000..160a104 --- /dev/null +++ b/app/views/layouts/_navbar.html.erb @@ -0,0 +1,5 @@ + diff --git a/app/views/layouts/_notification.html.erb b/app/views/layouts/_notification.html.erb index 4edb1bb..ce3535b 100644 --- a/app/views/layouts/_notification.html.erb +++ b/app/views/layouts/_notification.html.erb @@ -1,3 +1,4 @@ +NOTIFICATION <% if flash.count.positive? %>