diff --git a/postrify-frontend/src/app/components/header/header.component.ts b/postrify-frontend/src/app/components/header/header.component.ts index 913c1b4..3eb8ffd 100644 --- 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 index edfb6fa..5a7972b 100644 --- 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" - > - + - + > } `, @@ -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 {