hotwire-debug 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|