Merge pull request #2309 from basecamp/mobile/prepare-webviews-2

Mobile/prepare webviews 2

Author: adjogima

app/assets/images/funnel.svg

@@ -1,6 +1,12 @@
 @layer reset, base, components, modules, utilities, native, platform;
 
 :root {
+  /* Insets - The mobile apps may inject their own custom insets based on native elements on screen, like a floating navigation */
+  --custom-safe-inset-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px));
+  --custom-safe-inset-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px));
+  --custom-safe-inset-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px));
+  --custom-safe-inset-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px));
+
   /* Spacing */
   --inline-space: 1ch;
   --inline-space-half: calc(var(--inline-space) / 2);

app/assets/stylesheets/_global.css

@@ -3,5 +3,12 @@
     .hide-on-android {
       display: none;
     }
+
+    /* Filters
+    /* ------------------------------------------------------------------------ */
+
+    .filters {
+      --text-x-small: 1rem;
+    }
   }
 }

app/assets/stylesheets/android.css

@@ -107,11 +107,6 @@
     > * {
       grid-area: 1/1;
     }
-
-    @media (max-width: 639px) {
-      --btn-size: 3em;
-      --icon-size: 75%;
-    }
   }
 
   /* Make a normal button circular on mobile */
@@ -125,7 +120,7 @@
       inline-size: var(--btn-size);
 
       kbd,
-      span:last-of-type {
+      span:last-of-type:not(.icon) {
         display: none;
       }
     }
@@ -224,17 +219,15 @@
   .btn--back {
     --btn-border-size: 0;
 
-    font-size: var(--text-medium);
-
     @media (max-width: 639px) {
-      padding: 0.5em;
-
       strong, kbd {
         display: none;
       }
     }
 
     @media (min-width: 640px) {
+      font-size: var(--text-medium);
+
       .icon--arrow-left {
         display: none;
       }

app/assets/stylesheets/buttons.css

@@ -232,7 +232,7 @@
     overflow-y: auto;
 
     .is-expanded & {
-      padding: var(--column-padding);
+      padding: var(--column-padding) var(--column-padding) calc(var(--column-padding) + var(--custom-safe-inset-bottom));
 
       /* Use the rest of the column height for scrolling */
       @media (max-width: 639px) {

app/assets/stylesheets/card-columns.css

@@ -220,14 +220,14 @@
   .events__column-header {
     background-color: var(--color-canvas);
     grid-row-start: 1;
-    inset-block-start: calc(var(--block-space) * -1);
-    margin-block-end: var(--events-gap);
-    padding-block: calc(var(--events-gap) * 3) var(--events-gap);
+    inset-block-start: var(--custom-safe-inset-top);
+    margin-block: calc(var(--events-gap) * 2) var(--events-gap);
+    padding-block: var(--events-gap);
     position: sticky;
     z-index: var(--z-events-column-header);
 
     @media (max-width: 639px) {
-      margin-inline: calc(var(--main-padding) * -1);
+      margin-inline: calc(var(--main-padding) * -0.5);
       padding-inline: var(--main-padding);
     }
   }
@@ -239,12 +239,16 @@
   }
 
   .events__maximize-button {
-    inset: calc(var(--events-gap) * 3) 0 auto auto;
+    inset: 50% var(--events-gap) auto auto;
     outline-offset: -2px;
     position: absolute;
-    transform: translateY(-10%);
+    transform: translateY(-50%);
     z-index: 1;
 
+    @media (max-width: 639px) {
+      inset-inline-end: 0;
+    }
+
     @media (any-hover: hover ) {
       opacity: 0;
 

app/assets/stylesheets/events.css

@@ -0,0 +1,13 @@
+@layer components {
+  .expandable-on-native {
+    body:not([data-platform~=native]) & {
+      &::details-content {
+        display: contents;
+      }
+
+      summary {
+        display: none;
+      }
+    }
+  }
+}

app/assets/stylesheets/expandable.css

@@ -13,7 +13,7 @@
       "menu menu menu"
       "actions-start title actions-end";
     max-inline-size: 100dvw;
-    padding-block: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--block-space-half);
+    padding-block: calc(var(--block-space-half) + var(--custom-safe-inset-top)) var(--block-space-half);
     padding-inline: var(--main-padding);
     position: relative;
     z-index: var(--z-nav);

app/assets/stylesheets/header.css

@@ -1,7 +1,27 @@
 @layer platform {
+  :root:has([data-platform~=ios]) {
+    &[data-text-size=xsmall] { font-size: 14px; }
+    &[data-text-size=small] { font-size: 15px; }
+    &[data-text-size=medium] { font-size: 16px; }
+    &[data-text-size=large] { font-size: 17px; }
+    &[data-text-size=xlarge] { font-size: 19px; }
+    &[data-text-size=xxlarge] { font-size: 21px; }
+    &[data-text-size=xxxlarge] { font-size: 23px; }
+  }
+
   [data-platform~=ios] {
     .hide-on-ios {
       display: none;
     }
+
+    /* Events
+    /* ------------------------------------------------------------------------ */
+
+    .events__column-header {
+      -webkit-backdrop-filter: blur(16px);
+      backdrop-filter: blur(16px);
+      background-color: oklch(from var(--color-canvas) l c h / 0.5);
+      border-radius: 10em;
+    }
   }
 }

app/assets/stylesheets/ios.css

@@ -6,6 +6,13 @@
     &.public {
       grid-template-rows: auto 1fr auto;
     }
+
+    &.compact-on-touch {
+      @media (any-hover: none) {
+        grid-template-rows: auto 1fr auto;
+        min-height: unset;
+      }
+    }
   }
 
   /* Required for the card column page on mobile, but not needed otherwise */
@@ -23,8 +30,8 @@
     margin-inline: auto;
     max-inline-size: 100dvw;
     padding-inline:
-      calc(var(--main-padding) + env(safe-area-inset-left))
-      calc(var(--main-padding) + env(safe-area-inset-right));
+      calc(var(--main-padding) + var(--custom-safe-inset-left))
+      calc(var(--main-padding) + var(--custom-safe-inset-right));
     text-align: center;
   }