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>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title><%= content_for(:title) || "Moodie" %></title>
|
<title><%= content_for(:title) || "Moodie" %></title>
|
||||||
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<meta name="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="icon" href="/icon.svg" type="image/svg+xml">
|
||||||
<link rel="apple-touch-icon" href="/icon.png">
|
<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 %>
|
<%# Includes all stylesheet files in app/assets/stylesheets %>
|
||||||
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
||||||
<%= javascript_importmap_tags %>
|
<%= 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">
|
<main data-controller="mood">
|
||||||
<div class="mode">
|
<div class="mode">
|
||||||
<!--img data-mood-target="image" src="<%= @mode %>.jpg"-->
|
<%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
|
||||||
<%= image_tag @mode + ".jpg" %>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="tracker">
|
<div class="tracker">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
|
@ -39,7 +13,7 @@
|
||||||
<div class="week">
|
<div class="week">
|
||||||
<% week.each do |d| %>
|
<% week.each do |d| %>
|
||||||
<% if d[1] %>
|
<% 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 %>
|
<% else %>
|
||||||
<div class="day"></div>
|
<div class="day"></div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue