Site Doesn't Work On Mobile

[dartanian300]

On mobile devices (specifically Safari on iOS) there are a few issues:

1. When clicking on a card, the card detail modal does not appear. Instead, the hover state is activated. There is no way to open the card detail modal.
2. The "Show more..." pagination button is sometimes impossible to click. This is due to how close it is to the bottom of the page (it needs some bottom margin). In Safari, tapping towards the bottom of the screen opens the browser bar and covers the button. You cannot scroll down afterwards since there is no margin at the bottom of the page.

The following aren't issues specifically, but some UI/UX feedback:

1. There is no navigation on mobile after leaving the homepage. This is quite annoying because you have to first navigate back to the homepage. It would be useful to implement navigation (such as a hamburger menu) in the header.
2. Adding some margin around the search bar (left/right & top) would help make the page look a little better. Currently the logo covers part of the search bar.

I am a web developer so feel free to ask additional technical questions if you need clarification.

[TakaOtaku]

Hey :)

1. I can't reproduce this with my iPhone, it seems to work for me and my friend.
2. I had a margin once, because I used 100vh which didn't take in consideration the buttons of certain phones. I have implemented it otherwise now and it seemed to work for now, but it seems there are still phones which have a problem with that.

[TakaOtaku]

You can click the profil in the top right to get the navigation, it doubles down as a hamburger menu :D Yeah I am not completely happy with the logo. (Just added it the last update, because I wanted the site to be easily recognizable)

[dartanian300]

Took a look at the mobile modal issue and I think I see what the issue is. On mobile, collectionOnly is set to false while it's set to true on desktop. When it's false, the app does not attempt to open the modal:

full-card.component.ts:

  addCardToDeck() {
    if (this.collectionOnly) {
      this.viewCard.emit(this.card);
      return;
    }
    this.store.dispatch(addCardToDeck({ addCardToDeck: this.card.id }));
  }

It seems this is due to differences in how the 2 views are rendered.

collection-page.component.ts:

    <div class="bg-gradient-to-b from-[#17212f] to-[#08528d] ">
      <div class="hidden md:block">
        <digimon-collection-view
          [collectionOnly]="true"
          [deckView]="false"
        ></digimon-collection-view>
      </div>

      <div class="md:hidden">
        <digimon-filter-and-search></digimon-filter-and-search>
        <digimon-card-list [showCount]="32"></digimon-card-list>
      </div>
    </div>

card-list.component.ts:

...
 <digimon-full-card
          *ngFor="let card of cardsToShow"
          (viewCard)="viewCard($event)"
          [card]="card"
          [collectionMode]="(collectionMode$ | async) ?? false"
          [count]="getCount(card.id)"
          [deckView]="true"
          [deckBuilder]="true"
          class="flex-[1 1 25%] max-w-[25%] scale-95 transition"
        >
        </digimon-full-card>
...

Looks like it's defaulted to false. At least that's what I'm seeing with my limited Angular experience.

[TakaOtaku]

The collection only attribute is used when one should be able to open the modal with a simple click or touch. Because that should add the card to the deck. What should show the Modal either way is a long click or double click :)

[dartanian300]

Ah, I see. Long/double clicks don't seem to work either.

This issue actually also exists on desktop. If you drag in the browser so that it becomes the mobile view you can't open the modal via regular click/tap, long click/tap or double click/tap.

[TakaOtaku]

Most Issues should now be with old phones and iPhones. Otherwise most stuff should work, so I am gonna open a new Ticket.