Hide header and footer when scrolling

block-core · Nov 2, 2024 · 2ec67c5 · 2ec67c5
1 parent beb7209
commit 2ec67c5
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 8 deletions.
diff --git a/src/app/components/bookmark/bookmark.component.html b/src/app/components/bookmark/bookmark.component.html
@@ -1,4 +1,4 @@
-<div class="absolute inset-0 flex min-w-0 flex-col overflow-y-auto">
+<div class="flex min-w-0 flex-auto flex-col">
     <!-- Header -->
     <div class="dark relative flex-0 overflow-hidden bg-gray-800 px-4 py-8 sm:p-16">
         <!-- Background -->

diff --git a/src/app/components/explore/explore.component.html b/src/app/components/explore/explore.component.html
@@ -1,4 +1,4 @@
-<div class="absolute inset-0 flex min-w-0 flex-col overflow-y-auto">
+<div class="flex min-w-0 flex-auto flex-col">
     <!-- Header -->
     <div class="dark relative flex-0 overflow-hidden bg-gray-800 px-4 py-8 sm:p-16">
         <!-- Background -->

diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
@@ -566,13 +566,98 @@
                         </button>
                     </mat-menu>
                 </div>
-                <div class="mx-6 mb-6 mt-2 sm:mx-8">
-                    <!-- text -->
-                    {{ eventInput.nativeElement.value }}
-                </div>
-                <div class="relative mb-4">
-                    <!-- image or video -->
+
+                <div
+                *ngFor="
+                    let token of parseContent.parseContent(eventInput.nativeElement.value);
+                    trackBy: trackByFn
+                "
+                class="inline-block break-words whitespace-pre-wrap"
+            >
+
+                    <!-- YouTube Embeds -->
+                    <ng-container *ngIf="token.token === 'youtube'">
+                        <div class="relative mb-4 block">
+                            <iframe
+                                [src]="token.safeWord"
+                                width="560"
+                                height="315"
+                                frameborder="0"
+                                allowfullscreen
+                            ></iframe>
+                        </div>
+                    </ng-container>
+
+                    <!-- Images -->
+                    <ng-container *ngIf="token.token === 'image'">
+                        <div class="relative mb-4 block">
+                            <img
+                                [src]="token.safeWord"
+                                alt="Embedded Image"
+                                style="width: 100%"
+                                class="max-h-140 object-cover"
+                            />
+                        </div>
+                    </ng-container>
+
+                    <!-- Videos -->
+                    <ng-container *ngIf="token.token === 'video'">
+                        <div class="relative mb-4 block">
+                            <video controls style="width: 100%">
+                                <source
+                                    [src]="token.safeWord"
+                                    type="video/mp4"
+                                />
+                                Your browser does not support the video tag.
+                            </video>
+                        </div>
+                    </ng-container>
+
+                    <!-- Audio -->
+                    <ng-container *ngIf="token.token === 'audio'">
+                        <div class="relative mb-4 block">
+                            <audio controls>
+                                <source
+                                    [src]="token.safeWord"
+                                    type="audio/mpeg"
+                                />
+                                Your browser does not support the audio
+                                element.
+                            </audio>
+                        </div>
+                    </ng-container>
+
+                    <!-- Links -->
+                    <ng-container *ngIf="token.token === 'link'">
+                        <div class="mx-6 mb-6 mt-2 sm:mx-8">
+                            <a
+                                class="inline-block break-words break-all text-blue-500 underline"
+                                [href]="token.word"
+                                target="_blank"
+                            >
+                                <span class="inline-block break-words break-all">{{
+                                    token.word
+                                }}</span>
+                            </a>
+                        </div>
+                    </ng-container>
+
+
+                    <!-- Plain Text -->
+                    <ng-container *ngIf="!token.token">
+                        <div class="mx-6 mb-6 mt-2 sm:mx-8">
+                            <span
+                                class="inline-block break-words break-all"
+                                [ngClass]="{'large-font': isSingleEmojiOrWord(token)}"
+                            >
+                                {{ token.trim() }}
+                            </span>
+                        </div>
+                    </ng-container>
                 </div>
+
+
+
                 <div class="mx-3 flex items-center sm:mx-5">
                     <button class="mr-1 px-3" mat-button (click)="toggleLike()">
                         <mat-icon