src/main/webapp/app/app.module.ts

@@ -13,6 +13,7 @@ import { NavbarComponent } from './layouts/navbar/navbar.component';
 import { FooterComponent } from './layouts/footer/footer.component';
 import { PageRibbonComponent } from './layouts/profiles/page-ribbon.component';
 import { ErrorComponent } from './layouts/error/error.component';
+import {ArmyDetailMobileComponent} from "app/entities/army/army-detail-mobile.component";
 
 @NgModule({
   imports: [

src/main/webapp/app/entities/army/army-detail-desktop.component.html

@@ -0,0 +1,114 @@
+<div *ngIf="army">
+    <div class="row justify-content-center">
+        <div class="row justify-content-center">
+            <div class="col-12" align="center">
+                <h2><span>{{ army.armyName }}</span></h2>
+            </div>
+        </div>
+    </div>
+    <jhi-alert-error></jhi-alert-error>
+    <div class="unit">
+        <div class="row">
+            <div class="col-md-3">
+                CRUSADE FORCE NAME:
+            </div>
+            <div class="col-md-6">
+                <span>{{ army.armyName }}</span>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-3">
+                CRUSADE FACTION:
+            </div>
+            <div class="col-md-6">
+                <span>{{ army.armyFaction }}</span>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-3">
+                PLAYER:
+            </div>
+            <div class="col-md-6">
+                <span>{{ army.ownerLogin }}</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-2" style="border: 1px solid black; color: whitesmoke; background-color: #2d2d2d;">BATTLE TALLY</div>
+        <div class="col-md-2" style="border: 1px solid black; color: whitesmoke; background-color: #2d2d2d;">BATTLES WON</div>
+        <div class="col-md-2" style="border: 1px solid black; color: whitesmoke; background-color: #2d2d2d;">REQUISITION POINTS</div>
+        <div class="col-md-2" style="border: 1px solid black; color: whitesmoke; background-color: #2d2d2d;">SUPPLY USED</div>
+        <div class="col-md-2" style="border: 1px solid black; color: whitesmoke; background-color: #2d2d2d;">SUPPLY LIMIT</div>
+        <div class="col-md-2" style="border: 1px solid black; color: whitesmoke; background-color: #2d2d2d;">FORCE POINTS</div>
+    </div>
+    <div class="row">
+        <div class="col-md-2" style="border: 1px solid black;">{{ army.battleTally }}</div>
+        <div class="col-md-2" style="border: 1px solid black;">{{ army.battlesWon }}</div>
+        <div class="col-md-2"  style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">
+            {{ army.requisition }}
+        </div>
+        <div class="col-md-2"  style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">
+            {{calculatePoints(army)}}
+        </div>
+        <div class="col-md-2"  style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">
+            {{ army.armyPowerLevel }}
+        </div>
+        <div class="col-md-2" style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">
+            {{ getForcePoints() }}
+        </div>
+    </div>
+
+    <div class="crusade-cards" style="padding-top: 10px">
+        <div class="row">
+            <div class="col-md-6" style="border: 1px solid black;">CRUSADE CARDS</div>
+            <div class="col-md-2"  style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">POWER RATING</div>
+            <div class="col-md-2"  style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">CRUSADE POINTS</div>
+            <div class="col-md-1" style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">ADD TO FORCE</div>
+        </div>
+    <div *ngFor="let unit of army.units; let rowIndex=index">
+        <div class="row">
+            <div class="col-md-3" style="border: 1px solid black;">Unit {{rowIndex + 1}}:</div>
+            <div class="col-md-3" style="border: 1px solid black; background: whitesmoke; color: #0f0f0f">
+                <a [routerLink]="['/unit-army', unit.id, 'view']"> {{ unit.unitName }}</a>
+            </div>
+            <div class="col-md-2" style="border: 1px solid black; background: whitesmoke; color: #0f0f0f">
+                {{ unit.unitPowerLevel }}
+            </div>
+            <div class="col-md-2" style="border: 1px solid black; background: whitesmoke; color: #0f0f0f">{{unit.crusadePointsUnit}}</div>
+                <button type="add" class="btn btn-success"
+                        (click)="addForceUnit(unit)"
+                >Add</button>
+                <button type="add" class="btn btn-danger"
+                    (click)="removeForceUnit(unit)"
+                >Remove</button>
+        </div>
+    </div>
+    <div class="goals" style="padding-top: 20px">
+        <div class="row">
+            <div class="col-md-10" style="border: 1px solid black;">CRUSADE GOALS, INFORMATION AND NOTABLE VICTORIES</div>
+        </div>
+        <div class="row">
+            <div class="col-md-10" style="border: 1px solid black;">{{army.armyDescription}}</div>
+        </div>
+    </div>
+    <div class="row">
+            <button type="submit"
+                    (click)="previousState()"
+                    class="btn btn-info">
+                <fa-icon icon="arrow-left"></fa-icon>&nbsp;<span>Back</span>
+            </button>
+
+            <button type="button"
+                    [routerLink]="['/army', army.id, 'edit']"
+                    class="btn btn-primary">
+                <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span>Edit</span>
+            </button>
+            <button type="button"
+                    [routerLink]="['/force']"
+                    class="btn btn-success">
+                <span>To Battle!</span>
+            </button>
+    </div>
+</div>
+</div>

src/main/webapp/app/entities/army/army-detail-desktop.component.ts

@@ -0,0 +1,16 @@
+import {Component} from "@angular/core";
+import {ArmyDetailComponent} from "./army-detail.component";
+import {ActivatedRoute} from "@angular/router";
+import {JhiDataUtils} from "ng-jhipster";
+
+@Component({
+  selector: 'jhi-army-detail-desktop',
+  templateUrl: './army-detail-desktop.component.html'
+})
+// @ts-ignore
+export class ArmyDetailDesktopComponent extends ArmyDetailComponent {
+  constructor(protected dataUtils: JhiDataUtils,
+              protected activatedRoute: ActivatedRoute) {
+    super(dataUtils, activatedRoute);
+  }
+}

src/main/webapp/app/entities/army/army-detail-mobile.component.ts

@@ -0,0 +1,16 @@
+import {Component} from "@angular/core";
+import {ArmyDetailComponent} from "./army-detail.component";
+import {ActivatedRoute} from "@angular/router";
+import {JhiDataUtils} from "ng-jhipster";
+
+@Component({
+  selector: 'jhi-army-detail-mobile',
+  templateUrl: './army-detail-mobile.html'
+})
+// @ts-ignore
+export class ArmyDetailMobileComponent extends ArmyDetailComponent {
+  constructor(protected dataUtils: JhiDataUtils,
+              protected activatedRoute: ActivatedRoute) {
+    super(dataUtils, activatedRoute);
+  }
+}

src/main/webapp/app/entities/army/army-detail-mobile.html

@@ -0,0 +1,74 @@
+<div *ngIf="army">
+    <header>
+        <div class="unit">
+            <div class="row justify-content-center">
+<!--                Needs justification fixed and iframe or component-->
+                    <h4><span>{{ army.armyName}}</span></h4>
+            </div>
+            <div class="row">
+                <div class="col-md-3-mobile">Force:</div>
+                <div class="col-md-6-mobile">{{ getForcePoints() }}</div>
+            </div>
+        </div>
+    </header>
+
+    <div class="unit" style="justify-content: center">
+        <div class="row">
+            <div class="col-md-3-mobile">Battles</div>
+            <div class="col-md-6-mobile">{{army.battleTally}}</div>
+        </div>
+        <div class="row">
+            <div class="col-md-3-mobile">Victory</div>
+            <div class="col-md-6-mobile">{{army.battlesWon}}</div>
+        </div>
+        <div class="row">
+            <div class="col-md-3-mobile">RP:</div>
+            <div class="col-md-6-mobile">{{army.requisition}}</div>
+        </div>
+        <div class="row">
+            <div class="col-md-3-mobile">Supply:</div>
+            <div class="col-md-6-mobile">{{ calculatePoints(army) }}</div>
+        </div>
+        <div class="row">
+            <div class="col-md-3-mobile">Limit:</div>
+            <div class="col-md-6-mobile">{{army.armyPowerLevel}}</div>
+        </div>
+    </div>
+
+    <div class="crusade-cards" style="padding-top: 10px">
+        <div class="row" style="justify-content: center">
+            <div class="col-md-6-mobile" style="width: 30%">Name</div>
+            <div class="col-md-6-mobile" style="width: 15%">PL</div>
+            <div class="col-md-6-mobile" style="width: 15%">CP</div>
+            <div class="col-md-6-mobile" style="width: 15%"></div>
+        </div>
+    </div>
+    <div *ngFor="let unit of army.units; let rowIndex=index">
+        <div class="row" style="justify-content: center">
+            <div class="col-md-6-mobile" style="width: 30%">
+                <a [routerLink]="['/unit-army', unit.id, 'view']">{{unit.unitName}}</a></div>
+            <div class="col-md-6-mobile" style="width: 15%">{{unit.unitPowerLevel}}</div>
+            <div class="col-md-6-mobile" style="width: 15%">{{unit.crusadePointsUnit}}</div>
+            <div class="col-md-6-mobile" style="width: 15%; border: transparent">
+                <button type="add" class="btn btn-primary btn-sm" style="width: 100%; height: 100%"
+                        (click)="toggleForceUnit(unit)"
+                        >BTN</button>
+            </div>
+        </div>
+    </div>
+    <div class="row" style="justify-content: center">
+        <button type="button" class="btn btn-danger btn-sm"
+                (click)="clearForce()"
+                >Clear</button>
+        <button type="button"
+                [routerLink]="['/army', army.id, 'edit']"
+                class="btn btn-primary btn-sm">
+            <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span>Edit</span>
+        </button>
+        <button type="button"
+                [routerLink]="['/force']"
+                class="btn btn-success btn-sm">
+            <span>To Battle!</span>
+        </button>
+    </div>
+</div>

src/main/webapp/app/entities/army/army-detail.component.html

@@ -1,113 +1,7 @@
-<div *ngIf="army">
+<div class="desktop-container" *ngIf="!isMobileResolution; else mobileContainer">
-    <div class="row justify-content-center">
+    <jhi-army-detail-desktop></jhi-army-detail-desktop>
-        <div class="row justify-content-center">
-            <div class="col-12" align="center">
-                <h2><span>{{ army.armyName }}</span></h2>
-            </div>
-        </div>
-    </div>
-    <jhi-alert-error></jhi-alert-error>
-    <div class="unit">
-        <div class="row">
-            <div class="col-md-3">
-                CRUSADE FORCE NAME:
-            </div>
-            <div class="col-md-6">
-                <span>{{ army.armyName }}</span>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-3">
-                CRUSADE FACTION:
-            </div>
-            <div class="col-md-6">
-                <span>{{ army.armyFaction }}</span>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-3">
-                PLAYER:
-            </div>
-            <div class="col-md-6">
-                <span>{{ army.ownerLogin }}</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="row">
-        <div class="col-md-2" style="border: 1px solid black; color: whitesmoke; background-color: #2d2d2d;">BATTLE TALLY</div>
-        <div class="col-md-2" style="border: 1px solid black; color: whitesmoke; background-color: #2d2d2d;">BATTLES WON</div>
-        <div class="col-md-2" style="border: 1px solid black; color: whitesmoke; background-color: #2d2d2d;">REQUISITION POINTS</div>
-        <div class="col-md-2" style="border: 1px solid black; color: whitesmoke; background-color: #2d2d2d;">SUPPLY USED</div>
-        <div class="col-md-2" style="border: 1px solid black; color: whitesmoke; background-color: #2d2d2d;">SUPPLY LIMIT</div>
-        <div class="col-md-2" style="border: 1px solid black; color: whitesmoke; background-color: #2d2d2d;">FORCE POINTS</div>
-    </div>
-    <div class="row">
-        <div class="col-md-2" style="border: 1px solid black;">{{ army.battleTally }}</div>
-        <div class="col-md-2" style="border: 1px solid black;">{{ army.battlesWon }}</div>
-        <div class="col-md-2"  style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">
-            {{ army.requisition }}
-        </div>
-        <div class="col-md-2"  style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">
-            {{calculatePoints(army)}}
-        </div>
-        <div class="col-md-2"  style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">
-            {{ army.armyPowerLevel }}
-        </div>
-        <div class="col-md-2" style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">
-            {{ getForcePoints() }}
-        </div>
-    </div>
-
-    <div class="crusade-cards" style="padding-top: 10px">
-        <div class="row">
-            <div class="col-md-6" style="border: 1px solid black;">CRUSADE CARDS</div>
-            <div class="col-md-2"  style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">POWER RATING</div>
-            <div class="col-md-2"  style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">CRUSADE POINTS</div>
-            <div class="col-md-1" style="border: 1px solid black; background: whitesmoke; color: #0f0f0f;">ADD TO FORCE</div>
-        </div>
-    <div *ngFor="let unit of army.units; let rowIndex=index">
-        <div class="row">
-            <div class="col-md-3" style="border: 1px solid black;">Unit {{rowIndex + 1}}:</div>
-            <div class="col-md-3" style="border: 1px solid black; background: whitesmoke; color: #0f0f0f">
-                <a [routerLink]="['/unit-army', unit.id, 'view']"> {{ unit.unitName }}</a>
-            </div>
-            <div class="col-md-2" style="border: 1px solid black; background: whitesmoke; color: #0f0f0f">
-                {{ unit.unitPowerLevel }}
-            </div>
-            <div class="col-md-2" style="border: 1px solid black; background: whitesmoke; color: #0f0f0f">{{unit.crusadePointsUnit}}</div>
-                <button type="add" class="btn btn-success"
-                        (click)="addForceUnit(unit)"
-                >Add</button>
-                <button type="add" class="btn btn-danger"
-                    (click)="removeForceUnit(unit)"
-                >Remove</button>
-        </div>
-    </div>
-    <div class="goals" style="padding-top: 20px">
-        <div class="row">
-            <div class="col-md-10" style="border: 1px solid black;">CRUSADE GOALS, INFORMATION AND NOTABLE VICTORIES</div>
-        </div>
-        <div class="row">
-            <div class="col-md-10" style="border: 1px solid black;">{{army.armyDescription}}</div>
-        </div>
-    </div>
-    <div class="row">
-            <button type="submit"
-                    (click)="previousState()"
-                    class="btn btn-info">
-                <fa-icon icon="arrow-left"></fa-icon>&nbsp;<span>Back</span>
-            </button>
-
-            <button type="button"
-                    [routerLink]="['/army', army.id, 'edit']"
-                    class="btn btn-primary">
-                <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span>Edit</span>
-            </button>
-            <button type="button"
-                    [routerLink]="['/force']"
-                    class="btn btn-success">
-                <span>To Battle!</span>
-            </button>
-    </div>
 </div>
+
+<ng-template #mobileContainer>
+    <jhi-army-detail-mobile></jhi-army-detail-mobile>
+</ng-template>

src/main/webapp/app/entities/army/army-detail.component.ts

@@ -5,10 +5,12 @@ import { LocalStorage } from 'ngx-webstorage';
 
 import { IArmy } from 'app/shared/model/army.model';
 import { UnitArmy } from '../../shared/model/unit-army.model';
+import {DomSanitizer} from "@angular/platform-browser";
+import {ResponsiveService} from "../../responsive.service";
 
 @Component({
   selector: 'jhi-army-detail',
-  templateUrl: './army-detail.component.html',
+  templateUrl: './army-detail.component.html'
 })
 export class ArmyDetailComponent implements OnInit {
   army: IArmy | null = null;
@@ -16,11 +18,16 @@ export class ArmyDetailComponent implements OnInit {
   private forcePoints: number;
   @LocalStorage('forceAddedListStored')
   public forceAddedList: number[];
+  private responsiveService: ResponsiveService = new ResponsiveService();
+  public isMobileResolution: boolean;
 
-  constructor(protected dataUtils: JhiDataUtils, protected activatedRoute: ActivatedRoute) {
+  constructor(protected dataUtils: JhiDataUtils,
+              protected activatedRoute: ActivatedRoute) {
     this.forcePoints = 0;
     const localStorageList = localStorage.getItem('forceAddedListStored');
     this.forceAddedList = localStorageList ? JSON.parse(localStorageList) : [];
+    // this.isMobileResolution = ResponsiveService.getMobileStatus();
+    this.isMobileResolution = this.responsiveService.getMobileStatus();
   }
 
   ngOnInit(): void {
@@ -51,6 +58,14 @@ export class ArmyDetailComponent implements OnInit {
     return total;
   }
 
+  toggleForceUnit(unit: UnitArmy): number {
+    if ( unit?.id && unit?.unitPowerLevel && this.forceAddedList.includes(unit.id)) {
+      return this.removeForceUnit(unit);
+    } else {
+      return this.addForceUnit(unit)
+    }
+  }
+
   addForceUnit(unit: UnitArmy): number {
     if (unit && unit.id && unit.unitPowerLevel && !this.forceAddedList.includes(unit.id)) {
       this.forcePoints = this.forcePoints + unit.unitPowerLevel;
@@ -84,4 +99,10 @@ export class ArmyDetailComponent implements OnInit {
     }
     return false;
   }
+
+  clearForce(): void {
+    localStorage.clear();
+    this.forceAddedList = [];
+    this.forcePoints = 0;
+  }
 }

src/main/webapp/app/entities/army/army.module.ts

@@ -1,17 +1,25 @@
-import { NgModule } from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { CrusadetrackerSharedModule } from 'app/shared/shared.module';
 import { ArmyComponent } from './army.component';
-import { ArmyDetailComponent } from './army-detail.component';
 import { ArmyUpdateComponent } from './army-update.component';
 import { ArmyDeleteDialogComponent } from './army-delete-dialog.component';
-import { armyRoute } from './army.route';
+import { armyRoutes } from './army.route';
 import { forceRoute } from '../force/force.route';
+import {ArmyDetailDesktopComponent} from "./army-detail-desktop.component";
+import {ArmyDetailMobileComponent} from "./army-detail-mobile.component";
+import {ArmyDetailComponent} from "./army-detail.component";
 
 @NgModule({
-  imports: [CrusadetrackerSharedModule, RouterModule.forChild(armyRoute), RouterModule.forChild(forceRoute)],
+  imports: [CrusadetrackerSharedModule, RouterModule.forChild(armyRoutes), RouterModule.forChild(forceRoute)],
-  declarations: [ArmyComponent, ArmyDetailComponent, ArmyUpdateComponent, ArmyDeleteDialogComponent],
+  // @ts-ignore
-  entryComponents: [ArmyDeleteDialogComponent],
+  declarations: [ArmyComponent,
+    ArmyDetailMobileComponent,
+    ArmyDetailComponent,
+    ArmyDetailDesktopComponent,
+    ArmyUpdateComponent,
+    ArmyDeleteDialogComponent],
+  entryComponents: [ArmyDeleteDialogComponent]
 })
 export class CrusadetrackerArmyModule {}

src/main/webapp/app/entities/army/army.route.ts

@@ -12,6 +12,7 @@ import { ArmyComponent } from './army.component';
 import { ArmyDetailComponent } from './army-detail.component';
 import { ArmyUpdateComponent } from './army-update.component';
 import { IUnitArmy } from '../../shared/model/unit-army.model';
+import {ArmyDetailDesktopComponent} from "./army-detail-desktop.component";
 
 @Injectable({ providedIn: 'root' })
 export class ArmyResolve implements Resolve<IArmy> {
@@ -35,7 +36,7 @@ export class ArmyResolve implements Resolve<IArmy> {
   }
 }
 
-export const armyRoute: Routes = [
+export const armyRoutes: Routes = [
   {
     path: '',
     component: ArmyComponent,

src/main/webapp/app/home/home.component.html

@@ -1,9 +1,8 @@
-<div class="row">
+<div class="col-md-3">
-    <div class="col-md-3">
     <span class="hipster img-fluid rounded"></span>
-    </div>
+</div>
 
-    <div class="col-md-9">
+<div class="col-md-9">
     <h1 class="display-4">Warhammer Crusade!</h1>
 
     <p class="lead">This is your homepage</p>
@@ -26,5 +25,4 @@
     <p>
         This is to track progress on a Warhammer 40k Narrative Campaign.
     </p>
-    </div>
 </div>

src/main/webapp/app/home/home.component.ts

@@ -8,21 +8,25 @@ import { IArmy } from '../shared/model/army.model';
 import { HttpResponse } from '@angular/common/http';
 import { ArmyService } from '../entities/army/army.service';
 import { JhiEventManager } from 'ng-jhipster';
+import { ResponsiveService } from "app/responsive.service";
 
 @Component({
   selector: 'jhi-home',
   templateUrl: './home.component.html',
   styleUrls: ['home.scss'],
+  providers: [ResponsiveService]
 })
 export class HomeComponent implements OnInit, OnDestroy {
   account: Account | null = null;
   authSubscription?: Subscription;
   armies?: IArmy[];
   eventSubscriber?: Subscription;
+  private isMobile: Boolean = false;
 
   constructor(
     private accountService: AccountService,
     private loginModalService: LoginModalService,
+    private responsiveService: ResponsiveService,
     protected armyService: ArmyService,
     protected eventManager: JhiEventManager
   ) {}

src/main/webapp/app/responsive.service.ts

@@ -0,0 +1,29 @@
+import {Injectable} from "@angular/core";
+import {Observable, Subject} from "rxjs";
+
+@Injectable()
+export class ResponsiveService {
+  // @ts-ignore
+  private isMobile: boolean;
+
+  constructor() {
+    this.checkWidth();
+  }
+
+  // tslint:disable-next-line:typedef
+  getMobileStatus(): boolean {
+    // console.log(this.isMobile)
+    return this.isMobile;
+  }
+
+  // tslint:disable-next-line:typedef
+  public checkWidth() {
+    console.log(window.innerWidth)
+    // tslint:disable-next-line:prefer-const
+    if (window.innerWidth <= 768) {
+      this.isMobile = true;
+    } else {
+      this.isMobile = false;
+    }
+  }
+}

src/main/webapp/content/scss/global.scss

@@ -192,6 +192,23 @@ entity detail page css
   border: 1px solid black;
 }
 
+.col-md-3-mobile {
+  padding: 2px;
+  margin-left: 15px;
+  width: 60px;
+  background-color: #2d2d2d;
+  color: whitesmoke;
+  border: 1px solid black;
+}
+
+.col-md-6-mobile {
+  padding: 2px;
+  width: 60px;
+  background-color: whitesmoke;
+  color: black;
+  border: 1px solid black;
+}
+
 .unit {
   padding: 8px;
   border-bottom: 1px solid #dddddd;