From 8d608aba6677561cbc5b2c8e202fda88d765e39a Mon Sep 17 00:00:00 2001 From: Jason Schulz Date: Sat, 27 Apr 2024 12:12:17 -0400 Subject: [PATCH] PWA Layout Fixes (#304) Co-authored-by: Jason Schulz --- Gemfile | 3 + Gemfile.lock | 11 +++ .../stylesheets/application.tailwind.css | 81 +++++++++++-------- .../stylesheets/includes/daisyui_tooltip.css | 47 +++++++---- app/views/application/_head.html.erb | 4 +- .../application/head/_meta_tags.html.erb | 1 + app/views/layouts/application.html.erb | 11 +-- app/views/layouts/public.html.erb | 2 +- config/environments/development.rb | 2 + 9 files changed, 99 insertions(+), 63 deletions(-) diff --git a/Gemfile b/Gemfile index 8e5154dc5..acf7d7de3 100644 --- a/Gemfile +++ b/Gemfile @@ -80,6 +80,9 @@ group :development do gem "pgreset" gem "htmlbeautifier" + + # https://github.com/kirillplatonov/hotwire-livereload + gem "hotwire-livereload", "~> 1.3" end group :test do diff --git a/Gemfile.lock b/Gemfile.lock index d50c3eec6..b2ff5aeab 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -119,6 +119,10 @@ GEM ffi (1.16.3) globalid (1.2.1) activesupport (>= 6.1) + hotwire-livereload (1.3.2) + actioncable (>= 6.0.0) + listen (>= 3.0.0) + railties (>= 6.0.0) htmlbeautifier (1.4.2) i18n (1.14.4) concurrent-ruby (~> 1.0) @@ -136,6 +140,9 @@ GEM json (2.7.1) language_server-protocol (3.17.0.3) lint_roller (1.1.0) + listen (3.9.0) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) loofah (2.22.0) crass (~> 1.0.2) nokogiri (>= 1.12.0) @@ -233,6 +240,9 @@ GEM zeitwerk (~> 2.6) rainbow (3.1.1) rake (13.1.0) + rb-fsevent (0.11.2) + rb-inotify (0.10.1) + ffi (~> 1.0) rdoc (6.6.2) psych (>= 4.0.0) redcarpet (3.6.0) @@ -359,6 +369,7 @@ DEPENDENCIES byebug capybara debug + hotwire-livereload (~> 1.3) htmlbeautifier image_processing (~> 1.2) importmap-rails diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index aee0697be..109445cd8 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -2,27 +2,24 @@ @tailwind components; @tailwind utilities; - /* Make clickable elements push inward */ -.menu li>:not(ul):not(.menu-title):not(details).active, -.menu li>:not(ul):not(.menu-title):not(details):active, -.menu li>details>summary:active { - background-color: var(--fallback-bc,oklch(var(--bc)/.1)) !important; +.menu li > :not(ul):not(.menu-title):not(details).active, +.menu li > :not(ul):not(.menu-title):not(details):active, +.menu li > details > summary:active { + background-color: var(--fallback-bc, oklch(var(--bc) / 0.1)) !important; color: inherit !important; - @apply scale-98 ease-in-out duration-300 + @apply scale-98 ease-in-out duration-300; } - .cursor-pointer:active { - @apply scale-98 ease-in-out duration-300 + @apply scale-98 ease-in-out duration-300; } .icon.cursor-pointer:active { - @apply scale-90 ease-in-out duration-300 + @apply scale-90 ease-in-out duration-300; } - /* Parent utility classes which activate children */ /* If we supported 3rd party tailwind plugins we could stop declaring them individually: @@ -34,67 +31,66 @@ .relationship .relationship\:flex, .relationship.relationship\:flex { - @apply !flex + @apply !flex; } .relationship .relationship\:visible, .relationship.relationship\:visible { - @apply !visible + @apply !visible; } .relationship .relationship\:text-white, .relationship.relationship\:text-white { - @apply !text-white + @apply !text-white; } .relationship .relationship\:bg-gray-700, .relationship.relationship\:bg-gray-700 { - @apply bg-gray-700 + @apply bg-gray-700; } .relationship .relationship\:bg-gray-200, .relationship.relationship\:bg-gray-200 { - @apply bg-gray-200 + @apply bg-gray-200; } @media (prefers-color-scheme: dark) { .relationship .dark\:relationship\:bg-gray-700, .relationship.dark\:relationship\:bg-gray-700 { - @apply bg-gray-700 + @apply bg-gray-700; } } .relationship .relationship\:hidden, .relationship.relationship\:hidden { - @apply !hidden + @apply !hidden; } .relationship .relationship\:pl-4, .relationship.relationship\:pl-4 { - @apply !pl-4 + @apply !pl-4; } .nav-closed .nav-closed\:hidden { - @apply hidden + @apply hidden; } .nav-closed .nav-closed\:z-auto { - @apply z-auto + @apply z-auto; } .nav-closed .nav-closed\:relative { - @apply relative + @apply relative; } .show-previews .show-previews\:preview-container { - @apply !flex + @apply !flex; } .show-previews .show-previews\:pt-24 { - @apply pt-24 + @apply pt-24; } - /* Override the style change that chrome brings when it autofills fields */ input:-webkit-autofill, @@ -116,7 +112,8 @@ input:focus { } @keyframes blink { - 0%, 40% { + 0%, + 40% { opacity: 0; } 100% { @@ -129,11 +126,13 @@ input:focus { } @keyframes breathe { - 0%, 80%, 100% { - transform: scale(1) + 0%, + 80%, + 100% { + transform: scale(1); } 40% { - transform: scale(1.3) + transform: scale(1.3); } } @@ -145,14 +144,26 @@ input:focus { /* Prose styling */ -.prose :where(pre):not(:where([class~=not-prose] *)) { - @apply mx-0 mt-5 mb-3 +.prose :where(pre):not(:where([class~='not-prose'] *)) { + @apply mx-0 mt-5 mb-3; } -.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)) { - @apply mt-0 +.prose :where(.prose > :first-child):not(:where([class~='not-prose'] *)) { + @apply mt-0; } -.prose :where(p):not(:where([class~=not-prose] *)) { - @apply mb-3 -} \ No newline at end of file +.prose :where(p):not(:where([class~='not-prose'] *)) { + @apply mb-3; +} + +@layer base { + html { + @apply h-full overscroll-none; + } + body { + @apply h-full font-sans text-gray-950 dark:text-gray-100 flex overflow-y-auto; + -webkit-overflow-scrolling: touch; + min-height: -webkit-fill-available; + padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); + } +} diff --git a/app/assets/stylesheets/includes/daisyui_tooltip.css b/app/assets/stylesheets/includes/daisyui_tooltip.css index 79d1392da..2087c7897 100644 --- a/app/assets/stylesheets/includes/daisyui_tooltip.css +++ b/app/assets/stylesheets/includes/daisyui_tooltip.css @@ -1,6 +1,8 @@ /* DaisyUI tooltip overrides */ -*, ::before, ::after { +*, +::before, +::after { --tooltip-tail: 7px; --tooltip-tail-offset: calc(100% + 6px - var(--tooltip-tail)); --tooltip-offset: calc(100% + 7px + var(--tooltip-tail, 0px)); @@ -11,7 +13,7 @@ .tooltip-bottom:before { padding: 0.4rem 0.7rem; - box-shadow: 0px 0px 0px 1px #28282A; + box-shadow: 0px 0px 0px 1px #28282a; z-index: 8; pointer-events: none; } @@ -35,7 +37,7 @@ .tooltip-top:before { padding: 0.4rem 0.7rem; - box-shadow: 0px 0px 0px 1px #28282A; + box-shadow: 0px 0px 0px 1px #28282a; z-index: 8; pointer-events: none; } @@ -59,7 +61,7 @@ .tooltip-right:before { padding: 0.4rem 0.7rem; - box-shadow: 0px 0px 0px 1px #28282A; + box-shadow: 0px 0px 0px 1px #28282a; z-index: 8; pointer-events: none; } @@ -83,7 +85,7 @@ .tooltip-left:before { padding: 0.4rem 0.7rem; - box-shadow: 0px 0px 0px 1px #28282A; + box-shadow: 0px 0px 0px 1px #28282a; z-index: 8; pointer-events: none; } @@ -124,20 +126,21 @@ } @keyframes slide-in { - 0%, 20% { - transform: translateX(100%); - opacity: 0; + 0%, + 20% { + transform: translateX(100%); + opacity: 0; } 80% { - transform: translateX(-10%); - opacity: 1; + transform: translateX(-10%); + opacity: 1; } 90% { - transform: translateX(8%); + transform: translateX(8%); } 95% { - transform: translateX(-5%); - opacity: 1; + transform: translateX(-5%); + opacity: 1; } 100% { transform: translateX(0); @@ -173,14 +176,14 @@ dialog button:focus-visible { /* Code overrides — undoing */ -.prose :where(code):not(:where([class~=not-prose] *,pre *)) { +.prose :where(code):not(:where([class~='not-prose'] *, pre *)) { padding: 0; border-radius: 0; background-color: transparent; } -.prose :where(code):not(pre code):not(:where([class~=not-prose] *)):before, -.prose :where(code):not(pre code):not(:where([class~=not-prose] *)):after { +.prose :where(code):not(pre code):not(:where([class~='not-prose'] *)):before, +.prose :where(code):not(pre code):not(:where([class~='not-prose'] *)):after { content: '`'; display: inline-block; } @@ -194,4 +197,14 @@ dialog button:focus-visible { :root .prose { --tw-prose-body: rgb(236, 236, 236); } -} \ No newline at end of file +} + +/* show only on touch devices */ +@media (hover: none), (hover: on-demand), (-moz-touch-enabled: 1), (pointer: coarse) { + .tooltip:hover:after, + .tooltip:hover:active:before, + .tooltip:hover:active:after, + .tooltip:hover:before { + display: none; + } +} diff --git a/app/views/application/_head.html.erb b/app/views/application/_head.html.erb index 5f6d11698..593ba4734 100644 --- a/app/views/application/_head.html.erb +++ b/app/views/application/_head.html.erb @@ -1,7 +1,4 @@ - <%= charset_tag('utf-8') %> - <%= viewport_tag('width=device-width,initial-scale=1') %> - <%= yield(:title) %> <%= capybara_lockstep if defined?(Capybara::Lockstep) %> @@ -28,4 +25,5 @@ <%= render 'application/head/favicons' %> <%= render 'application/head/meta_tags' %> <%= content_for :head %> + <%= hotwire_livereload_tags if Rails.env.development? %> \ No newline at end of file diff --git a/app/views/application/head/_meta_tags.html.erb b/app/views/application/head/_meta_tags.html.erb index 7039d7c5a..8596fa22e 100644 --- a/app/views/application/head/_meta_tags.html.erb +++ b/app/views/application/head/_meta_tags.html.erb @@ -4,5 +4,6 @@ <%= meta_tag('apple-mobile-web-app-capable','yes') %> <%= meta_tag('apple-mobile-web-app-status-bar-style','default') %> <%= meta_tag('apple-touch-fullscreen','yes') %> + <%= meta_tag('viewport', 'width=device-width, initial-scale=1, viewport-fit=cover') %> <% end %> <%= yield :meta_tags %> \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 9e4c4b8c2..ae433e6b3 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -4,9 +4,6 @@ <%= render "head" %>