PWA Layout Fixes (#304)

Co-authored-by: Jason Schulz <[email protected]>
AllYourBot · Apr 27, 2024 · 8d608ab · 8d608ab
1 parent dc6413f
commit 8d608ab
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 63 deletions.
diff --git 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
@@ -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
@@ -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
-}
+.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
@@ -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);
   }
-}
+}
+
+/* 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
@@ -1,7 +1,4 @@
 <head>
-  <%= charset_tag('utf-8') %>
-  <%= viewport_tag('width=device-width,initial-scale=1') %>
-
   <title><%= yield(:title) %></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? %> <!-- Hotwire LiveReload -->
 </head>
diff --git 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 %>