diff --git a/app/assets/stylesheets/_debug.scss b/app/assets/stylesheets/_debug.scss new file mode 100644 index 0000000..9006de1 --- /dev/null +++ b/app/assets/stylesheets/_debug.scss @@ -0,0 +1,31 @@ +// stolen from https://github.com/guillaumebriday/turbo-frames-debug and slightly modified +// must have TURBO_DEBUG env var set +:root { + --turbo-frame-debug-color: #3B82F6; + --turbo-frame-debug-z-index: 9999; + --turbo-frame-debug-font-size: 0.7rem; + --turbo-frame-debug-border-radius: 0.25rem; +} + +.debug-turbo { + turbo-frame { + border: 1px var(--turbo-frame-debug-color) solid; + display: block; + border-radius: var(--turbo-frame-debug-border-radius); + + &::before { + content: "#" attr(id); + display: inline-block; + position: relative; + top: -1rem; + right: -0.5rem; + color: var(--turbo-frame-debug-color); + font-size: var(--turbo-frame-debug-font-size); + z-index: var(--turbo-frame-debug-z-index); + background-color: #fff; + padding: 0.05rem; + border: 1px var(--turbo-frame-debug-color) solid; + border-radius: var(--turbo-frame-debug-border-radius); + } + } +} diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss index 959ef89..ac80f3d 100644 --- a/app/assets/stylesheets/application.sass.scss +++ b/app/assets/stylesheets/application.sass.scss @@ -27,3 +27,7 @@ // Layouts @import "layouts/container"; @import "layouts/header"; + +// Development helpers: must have env vars set. +// see files and/or application.html.erb +@import "debug"; diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index f63c547..7bb9881 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -16,7 +16,7 @@ <% end %> - + "> <%= render "layouts/navbar" %>
<%= render "layouts/flash" %>