navbar tailwind

3 months ago · 965346d90d
13 changed files with 47 additions and 24 deletions
--- 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
 }
--- 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
--- a/app/assets/stylesheets/application.turbo.css
+++ b/app/assets/stylesheets/application.turbo.css
@ -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%);
-  }
--- a/app/assets/stylesheets/navbar.css
+++ 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;
+}
--- a/app/assets/stylesheets/application.toastify.css
+++ b/app/assets/stylesheets/application.toastify.css
--- a/app/assets/stylesheets/turbo.css
+++ 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%);
+}
--- 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 }
--- a/app/javascript/controllers/toast_controller.js
+++ b/app/javascript/controllers/toast_controller.js
@ -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"
-  }
-}
--- a/app/views/layouts/_navbar.html.erb
+++ b/app/views/layouts/_navbar.html.erb
@ -0,0 +1,5 @@
+<nav>
+  Navigation2
+  <p>paragraph</p>
+  <i>italic</i>
+</nav>
--- a/app/views/layouts/_notification.html.erb
+++ b/app/views/layouts/_notification.html.erb
@ -1,3 +1,4 @@
+NOTIFICATION
 <% if flash.count.positive? %>
  <script data-turbo-temporary>
    document.addEventListener('turbo:load',(e)=>{
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -1,7 +1,10 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <title><%=Rails.configuration.application_title%></title>
+    <!--TITLE -->
+    <title>
+      <%=Rails.configuration.application_title%>
+    </title>

    <!--META -->
    <%= csrf_meta_tags %>
@ -19,6 +22,7 @@

  <body>

+    <%=render 'layouts/navbar' %>
    <%=render 'layouts/notification' %>

    <main class="m-8 flex flex-col">
--- a/app/views/scores/index.html.erb
+++ b/app/views/scores/index.html.erb
@ -1,7 +1,7 @@
 <div class="w-full bg-cyan-200 p-4">

  <div class="flex justify-between items-center">
-    <h1 class="font-bold text-4xl">Scores</h1>
+    <h1 class="font-bold text-4xl">List of Scores</h1>
    <%= link_to "New score", new_score_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
  </div>