Browse Source

navbar tailwind

main
pvincent 5 months ago
parent
commit
965346d90d
  1. 10
      .vscode/settings.json
  2. 4
      TODO.md
  3. 2
      app/assets/stylesheets/application.tailwind.css
  4. 5
      app/assets/stylesheets/application.turbo.css
  5. 21
      app/assets/stylesheets/navbar.css
  6. 0
      app/assets/stylesheets/toastify.css
  7. 5
      app/assets/stylesheets/turbo.css
  8. 2
      app/javascript/controllers/application.js
  9. 8
      app/javascript/controllers/toast_controller.js
  10. 5
      app/views/layouts/_navbar.html.erb
  11. 1
      app/views/layouts/_notification.html.erb
  12. 6
      app/views/layouts/application.html.erb
  13. 2
      app/views/scores/index.html.erb

10
.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
}

4
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

2
app/assets/stylesheets/application.tailwind.css

@ -10,4 +10,4 @@
}
}
*/
*/

5
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%);
}

21
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;
}

0
app/assets/stylesheets/application.toastify.css → app/assets/stylesheets/toastify.css

5
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%);
}

2
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 }

8
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"
}
}

5
app/views/layouts/_navbar.html.erb

@ -0,0 +1,5 @@
<nav>
Navigation2
<p>paragraph</p>
<i>italic</i>
</nav>

1
app/views/layouts/_notification.html.erb

@ -1,3 +1,4 @@
NOTIFICATION
<% if flash.count.positive? %>
<script data-turbo-temporary>
document.addEventListener('turbo:load',(e)=>{

6
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">

2
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>

Loading…
Cancel
Save