Ионная сетка, задающая количество элементов в строке для любого размера устройства - PullRequest
Новая
       24

Ионная сетка, задающая количество элементов в строке для любого размера устройства

0 голосов
/ 27 ноября 2018

Мне нужно исправить проект, который не принадлежит мне.

На странице есть элементы.

Эти элементы должны быть в виде сетки.

Пользователь может настроить приложения, задав количество элементов в строке.

Но мы должны учитывать, что даже на больших устройствах, например на планшете, количество элементов должно быть таким же, как на установленном.

Это код, который мы в настоящее время используем для отображения элементов.

Как вы можете видеть в настоящее время, мы используем "col-3 col-sm-2" в showgrid.html

Как может бытьвыполняется независимо от размера, количество элементов в строке остается неизменным.

Несколько советов?

home.html 

<ion-content>
  <ion-searchbar animated="true" placeholder="Cerca" debounce="500" [(ngModel)]="searchText" (ionCancel)="searchResults[target] = []" (ionInput)="getItems($event)" (keyup.enter)="search(searchText)"></ion-searchbar>
  <ion-grid>
      <show-grid [simplifiedInterface]="simplifiedInterface" [infiniteScroll]="true" (infiniteEvent)="$event.waitFor(doInfinite())" (showTap)="goToDetail($event)" [shows]="searchResults[target] && searchResults[target].length > 0 ? searchResults[target] : toplist[target]"></show-grid>
  </ion-grid>
</ion-content>

home.css 

#searchButton {
    margin-top: 30px;
    width: 100%;
}

#inputTitle {
    margin-left: 0;
    padding: 0;
}

ion-scroll[scrollX] {
  white-space: nowrap;
  .scroll-item {
    display: inline-block;
  }
}

#sliderBox {
  padding-left: 1px;
  padding-right: 1px;
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .searchbar-input {
    font-size: 45px !important;
  }

  .searchbar-search-icon {
    display: none;
  }

  .listTitle {
    font-size: 40px !important;
  }
}

showgrid.html 

<div *ngIf="simplifiedInterface === false; else simplifiedTemplate">
    <ion-row>

      <ion-col class="gridCol" *ngFor="let item of shows" col-3 col-sm-2>
        <div class="fill-image-grid poster" (tap)="onTapEventEmitter(item)" (press)="toastService.showTextToast(item.title)">
          <img img-preload="{{item.poster_path}}" alt="{{item.title}}"/>
        </div>
      </ion-col>

    </ion-row>

    <div *ngIf="infiniteScroll === true">
        <ion-infinite-scroll (ionInfinite)="onIonInfiniteEventEmitter($event)">
          <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll>
    </div>
</div>

<ng-template #simplifiedTemplate>
  <ion-row>
          <ion-col col-12>
              <ion-list>
                  <button ion-item *ngFor="let item of shows" (click)="onTapEventEmitter(item)">
                    <h3 class="listTitle">{{item.title}}</h3>
                  </button>
              </ion-list>

              <div *ngIf="infiniteScroll === true">
                  <ion-infinite-scroll (ionInfinite)="onIonInfiniteEventEmitter($event)">
                    <ion-infinite-scroll-content></ion-infinite-scroll-content>
                  </ion-infinite-scroll>
              </div>

          </ion-col>

    </ion-row>

  </ng-template>

showgrid.css 

.fill-image-grid {
    height: 100%;
    overflow: hidden;
}

.fill-image-grid img {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
    display: block;
}

.poster {
    width: 100%;
    height: 100%;
}

.gridCol {
    padding: 1px;
}

.listTitle {
    font-size: 16px !important;
}

showgrid.ts 

import { Component, Input, Output, EventEmitter} from '@angular/core';
import { Show } from '../../models/show';

import { ToastService } from '../../services/toast.service';

@Component({
  selector: 'show-grid',
  templateUrl: 'showgrid.html',
  providers: [ToastService]
})
export class ShowgridComponent {

  rows: number[];
  _shows: Show[];
  _simplifiedInterface: boolean;
  _infiniteScroll: boolean;

  constructor(public toastService: ToastService) {
  }

  // Handle inputs
  @Input()
  set shows(shows: Show[]) {
    this._shows = shows;
  }
  get shows() { return this._shows; }

  @Input()
  set simplifiedInterface(simplifiedInterface: boolean) {
    this._simplifiedInterface = simplifiedInterface;
  }
  get simplifiedInterface() { return this._simplifiedInterface; }

  @Input()
  set infiniteScroll(infiniteScroll: boolean) {
    this._infiniteScroll = infiniteScroll;
  }
  get infiniteScroll() { return this._infiniteScroll; }

  // Handle events
  @Output() showTap = new EventEmitter<Show>();
  onTapEventEmitter(item: Show) {
      this.showTap.emit(item);
  }

  @Output() infiniteEvent = new EventEmitter<Event>();
  onIonInfiniteEventEmitter(event: Event) {
    this.infiniteEvent.emit(event);
  }



}
...