redux-app-examples/src/angular/gladiators/view/mainPage/mainPage.component.html

Examples of redux-app with Angular and React.

<div class="page">
    <div class="row">

        <!-- top fighters list -->
        <div *ngIf="vm.topGladiators.length" class="col-2 text-center" style="overflow: hidden">
            <h5>Top Fighters</h5>
            <div class="list-group">
                <gladiator-thumbnail *ngFor="let gladiator of vm.topGladiators" [gladiator]="gladiator" (click)="vm.goToGladiatorPage(gladiator)"
                    class="m-2">
                </gladiator-thumbnail>
            </div>
        </div>
        <div *ngIf="!vm.topGladiators.length" class="col-2"></div>

        <div class="col-10 page">

            <!-- buttons -->
            <div class="row mb-2" style="height: 8%">
                <div class="col d-flex justify-content-end">
                    <button class="btn btn-info" (click)="vm.newGladiator()">New Gladiator</button>
                </div>
            </div>
            <div class="row" style="height: 8%">
                <div class="col d-flex justify-content-end">
                    <button class="btn btn-info" (click)="vm.generateGladiators()">Generate 5 Gladiators</button>
                </div>
            </div>

            <!-- enter the arena -->
            <div class="row" style="height: 64%">
                <img src="../../assets/img/coliseum.png" class="coliseum" (click)="vm.toTheArena()" title="Enter the arena">
            </div>

            <!-- all gladiators list -->
            <div class="row" style="height: 20%">
                <div class="gladiators-list-container">
                    <ul class="list-inline gladiators-list mb-0">
                        <li *ngFor="let gladiator of vm.gladiatorsList.items" class="list-inline-item" (click)="vm.goToGladiatorPage(gladiator)">{{gladiator.name}}</li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>