hotwire-debug 0.1.0 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/README.md +4 -0
- data/lib/hotwire/debug/version.rb +1 -1
- data/vendor/assets/javascripts/hotwire-debug.js +3 -3
- data/vendor/assets/stylesheets/hotwire-debug.scss +26 -28
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 71cb728ec966ea0591ae2b03fe356cacf1ca74f6747ae160ceef218d4d14fe49
|
|
4
|
+
data.tar.gz: 4ac75708ebb69606e685596c49e61351d3ecbb99ea60b61af904bbe6b4d49042
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0a923010b96de7f28058f44b1b969bafdc70b541effbde8bea6c710e69f3fd8151a5c13eb4b05a201f2c82b2288038953206141c80131d04aca3450a8c427cb6
|
|
7
|
+
data.tar.gz: 7cff9b4305e92934af2d4bccc88ac9e903ebcfc2e34e190783b0f57407116905e29e490648b39d0c6e89a58f1442bda1ebf7bd52d1b800b4f17ebf3bac7ab967
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
|
@@ -39,6 +39,10 @@ If your application does not already include stylesheets and javascripts in the
|
|
|
39
39
|
<%= javascript_include_tag 'application', media: 'all' %>
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
+
# Options
|
|
43
|
+
|
|
44
|
+
By default the color-scheme is a Hotwire-inspired teal and yellow. There's an alternate color scheme available. Add `data-hotwire-scheme-dark` to the root element.
|
|
45
|
+
|
|
42
46
|
## Development
|
|
43
47
|
|
|
44
48
|
After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
|
@@ -12,7 +12,7 @@ var turboEvents = [
|
|
|
12
12
|
turboEvents.forEach(function(turboEvent) {
|
|
13
13
|
document.addEventListener(turboEvent, function() {
|
|
14
14
|
if (showChanges()) {
|
|
15
|
-
console.log(turboEvent);
|
|
15
|
+
console.log("⚡️ " + turboEvent);
|
|
16
16
|
handleChange();
|
|
17
17
|
}
|
|
18
18
|
});
|
|
@@ -23,7 +23,7 @@ function showChanges () {
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
function handleChange() {
|
|
26
|
-
document.querySelectorAll('turbo-frame
|
|
26
|
+
document.querySelectorAll('turbo-frame:first-child').forEach(function(target) {
|
|
27
27
|
target.setAttribute('data-turbo-frame-id', target.closest('turbo-frame').id);
|
|
28
28
|
});
|
|
29
29
|
}
|
|
@@ -42,4 +42,4 @@ window.addEventListener("turbo:load", () => {
|
|
|
42
42
|
handleChange();
|
|
43
43
|
});
|
|
44
44
|
}
|
|
45
|
-
});
|
|
45
|
+
});
|
|
@@ -1,67 +1,65 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--color-
|
|
3
|
-
--color-
|
|
4
|
-
--color-pink: rgba(223, 116, 168, 1);
|
|
5
|
-
--color-pink-trans: rgba(223, 116, 168, 0.4);
|
|
6
|
-
--color-yellow: rgba(255, 224, 0, 1);
|
|
2
|
+
--color-highlight: rgba(255, 232, 1, 1);
|
|
3
|
+
--color-main: rgba(95, 206, 214, 1);
|
|
7
4
|
}
|
|
8
|
-
|
|
5
|
+
:root[data-hotwire-scheme-dark] {
|
|
6
|
+
--color-highlight: rgba(200, 200, 200, 1);
|
|
7
|
+
--color-main: rgba(0, 0, 0, 1);
|
|
8
|
+
}
|
|
9
|
+
#hotwire-toggle {
|
|
10
|
+
height: 2rem;
|
|
9
11
|
position: fixed;
|
|
10
|
-
top: 1rem;
|
|
11
12
|
right: 2rem;
|
|
12
|
-
|
|
13
|
+
top: 1rem;
|
|
13
14
|
width: 2rem;
|
|
14
15
|
z-index: 20;
|
|
15
|
-
|
|
16
|
+
|
|
16
17
|
svg path {
|
|
17
|
-
fill: var(--color-
|
|
18
|
+
fill: var(--color-main) !important;
|
|
18
19
|
transition: fill ease-in-out 0.3s;
|
|
19
20
|
}
|
|
20
|
-
&:hover svg
|
|
21
|
-
fill: var(--color-
|
|
21
|
+
&:hover svg {
|
|
22
|
+
fill: var(--color-highlight) !important;
|
|
23
|
+
filter: drop-shadow(0 0 0.5rem var(--color-main));
|
|
22
24
|
}
|
|
23
25
|
}
|
|
24
|
-
|
|
26
|
+
:root[data-hotwire-debug] #hotwire-toggle {
|
|
25
27
|
svg path {
|
|
26
|
-
fill: var(--color-
|
|
27
|
-
stroke: var(--color-pink);
|
|
28
|
+
fill: var(--color-highlight) !important;
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
&:hover {
|
|
31
32
|
svg path {
|
|
32
|
-
stroke-width:
|
|
33
|
+
stroke-width: 0.5rem;
|
|
34
|
+
filter: drop-shadow(0 0 0.5rem var(--color-highlight));
|
|
33
35
|
}
|
|
34
36
|
}
|
|
35
37
|
}
|
|
36
38
|
[data-hotwire-debug] {
|
|
37
39
|
turbo-frame {
|
|
40
|
+
border: 1px solid var(--color-main);
|
|
38
41
|
display: block;
|
|
42
|
+
padding-top: 1rem;
|
|
39
43
|
transition: all ease-in-out 0.3s;
|
|
40
|
-
|
|
41
44
|
&:hover {
|
|
42
45
|
display: block;
|
|
43
46
|
position: relative;
|
|
44
|
-
box-shadow: inset 0 0 3rem var(--color-teal-trans);
|
|
45
47
|
|
|
46
48
|
&:after {
|
|
47
|
-
color:
|
|
49
|
+
color: var(--color-main) !important;
|
|
48
50
|
content: attr(id);
|
|
51
|
+
display: block;
|
|
49
52
|
font-weight: bold;
|
|
50
53
|
position: absolute;
|
|
51
|
-
display: block;
|
|
52
|
-
top: 49%;
|
|
53
54
|
right: 1rem;
|
|
54
|
-
|
|
55
|
-
-moz-transform: translateY(-50%);
|
|
56
|
-
-ms-transform: translateY(-50%);
|
|
57
|
-
transform: translateY(-50%);
|
|
55
|
+
top: 0;
|
|
58
56
|
z-index: 10;
|
|
59
57
|
}
|
|
60
58
|
}
|
|
61
59
|
|
|
62
60
|
& > :not(turbo-frame) {
|
|
63
|
-
animation-name: highlight-frame-change;
|
|
64
61
|
animation-duration: 0.25s;
|
|
62
|
+
animation-name: highlight-frame-change;
|
|
65
63
|
border-radius: 0 1rem 1rem 0;
|
|
66
64
|
}
|
|
67
65
|
}
|
|
@@ -70,10 +68,10 @@ html[data-hotwire-debug] #hotwire-toggle {
|
|
|
70
68
|
box-shadow: unset;
|
|
71
69
|
}
|
|
72
70
|
50% {
|
|
73
|
-
box-shadow:inset 0 0 4rem var(--color-
|
|
71
|
+
box-shadow:inset 0 0 4rem var(--color-main);
|
|
74
72
|
}
|
|
75
73
|
100% {
|
|
76
74
|
box-shadow: unset;
|
|
77
75
|
}
|
|
78
76
|
}
|
|
79
|
-
}
|
|
77
|
+
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: hotwire-debug
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jim Remsik
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2021-01-
|
|
12
|
+
date: 2021-01-12 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: bundler
|