move head tags from index to layout
This commit is contained in:
parent
2653930993
commit
ac5faa4475
3 changed files with 19 additions and 28 deletions
12
app/javascript/controllers/mood_controller.js
Normal file
12
app/javascript/controllers/mood_controller.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { Controller } from '@hotwired/stimulus'
|
||||
|
||||
export default class extends Controller {
|
||||
static targets = [ "image", "info" ]
|
||||
|
||||
updateDayInfo(event) {
|
||||
const image = this.imageTarget;
|
||||
const infoDay = this.infoTarget;
|
||||
image.src = event.target.dataset.image;
|
||||
infoDay.textContent = event.target.dataset.day;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title><%= content_for(:title) || "Moodie" %></title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
|
|
@ -17,6 +18,10 @@
|
|||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/icon.png">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Delius&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
|
||||
<%# Includes all stylesheet files in app/assets/stylesheets %>
|
||||
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
||||
<%= javascript_importmap_tags %>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,6 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Delius&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
|
||||
<script type="module">
|
||||
import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
|
||||
window.Stimulus = Application.start()
|
||||
|
||||
Stimulus.register("mood", class extends Controller {
|
||||
static targets = [ "image", "info" ]
|
||||
|
||||
updateDayInfo(event) {
|
||||
const image = this.imageTarget;
|
||||
const infoDay = this.infoTarget;
|
||||
image.src = event.target.dataset.mode + ".jpg"
|
||||
infoDay.textContent = event.target.dataset.day;
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<main data-controller="mood">
|
||||
<div class="mode">
|
||||
<!--img data-mood-target="image" src="<%= @mode %>.jpg"-->
|
||||
<%= image_tag @mode + ".jpg" %>
|
||||
<%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
|
||||
</div>
|
||||
<div class="tracker">
|
||||
<div class="title">
|
||||
|
|
@ -39,7 +13,7 @@
|
|||
<div class="week">
|
||||
<% week.each do |d| %>
|
||||
<% if d[1] %>
|
||||
<div data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
|
||||
<div data-image="<%= asset_path(d[1] + ".jpg") %>" data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
|
||||
<% else %>
|
||||
<div class="day"></div>
|
||||
<% end %>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue