Merge pull request #41 from jorbush/safari-ios-bug

Fixing Safari ios bug
jorbush · Nov 13, 2024 · 2b28144 · 2b28144
2 parents 7e48629 + 236cec0
commit 2b28144
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/postrify-frontend/src/app/components/header/header.component.ts b/postrify-frontend/src/app/components/header/header.component.ts
@@ -249,6 +249,21 @@ import { UserImageService } from '../../services/user-image.service';
         border: 2px solid var(--border-color);
         margin-right: 0.5rem;
       }
+
+      @supports (-webkit-touch-callout: none) {
+        .toggle-container {
+          display: -webkit-flex;
+          display: flex;
+          -webkit-flex: 1;
+          flex: 1;
+        }
+        .current-photo,
+        .settings-button {
+          margin: 0rem;
+          margin-left: 1.5rem;
+          padding: 0rem;
+        }
+      }
     `,
   ],
 })

diff --git a/postrify-frontend/src/app/components/home/home.component.ts b/postrify-frontend/src/app/components/home/home.component.ts
@@ -73,9 +73,7 @@ import { UserImageService } from '../../services/user-image.service';
           class="floating-button"
           (click)="createPost()"
           aria-label="Create new post"
-        >
-          +
-        </button>
+        ></button>
       }
     </div>
   `,
@@ -124,8 +122,6 @@ import { UserImageService } from '../../services/user-image.service';
       position: fixed;
       bottom: 30px;
       right: 30px;
-      width: 60px;
-      height: 60px;
       background-color: var(--primary-color);
       color: white;
       border: none;
@@ -134,6 +130,27 @@ import { UserImageService } from '../../services/user-image.service';
       cursor: pointer;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
       transition: background-color 0.3s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 60px;
+      min-height: 60px;
+      max-width: 60px;
+      width: auto;
+      height: auto;
+      aspect-ratio: 1;
+      overflow: hidden;
+    }
+
+    .floating-button::before {
+      content: '+';
+    }
+
+    @supports (-webkit-touch-callout: none) {
+      .floating-button::before {
+        display: inline-block;
+        transform: translateY(-7%);
+      }
     }
 
     .floating-button:hover {