Vagrantfile

@@ -0,0 +1,13 @@
+Vagrant.configure("2") do |config|
+  config.vm.provider "docker" do |d|
+    d.image = "mysql:8.0.20"
+    config.vm.synced_folder "~/mysql", "/var/lib/mysql", docker_consistancy: "delegated"
+    d.privileged = "true"
+    d.ports = ["3306:3306"]
+    d.env = {
+        "MYSQL_USER":"root",
+        "MYSQL_ALLOW_EMPTY_PASSWORD":"yes",
+        "MYSQL_DATABASE":"crusadetracker"
+    }
+  end
+end

src/main/resources/config/application-dev.yml

@@ -38,8 +38,8 @@ spring:
   datasource:
     type: com.zaxxer.hikari.HikariDataSource
     url: jdbc:mysql://localhost:3306/crusadetracker?useUnicode=true&characterEncoding=utf8&useSSL=false&allowPublicKeyRetrieval=true&useLegacyDatetimeCode=false&serverTimezone=UTC&createDatabaseIfNotExist=true
-    username: crusadetracker
-    password: crusadetracker
+    username: root
+    password:
     hikari:
       poolName: Hikari
       auto-commit: false

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

@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row" (window:resize)="onResize()">
     <div class="col-md-3">
         <span class="hipster img-fluid rounded"></span>
     </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
   ) {}
@@ -35,10 +39,18 @@ export class HomeComponent implements OnInit, OnDestroy {
     this.eventSubscriber = this.eventManager.subscribe('armyListModification', () => this.loadAll());
   }
 
+  onResize(): void {
+    this.responsiveService.getMobileStatus().subscribe(isMobile => {
+      this.isMobile = isMobile;
+    })
+    // this.responsiveService.checkWidth();
+  }
+
   ngOnInit(): void {
     this.loadAll();
     this.registerChangeInArmies();
     this.authSubscription = this.accountService.getAuthenticationState().subscribe(account => (this.account = account));
+    this.onResize();
   }
 
   isAuthenticated(): boolean {

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

@@ -0,0 +1,37 @@
+import {Injectable} from "@angular/core";
+import {Observable, Subject} from "rxjs";
+
+@Injectable()
+export class ResponsiveService {
+  private isMobile = new Subject();
+  public screenWidth: string;
+
+  constructor() {
+    // to remove ts-lint error
+    this.screenWidth = 'sm';
+    this.checkWidth();
+  }
+
+  // tslint:disable-next-line:typedef
+  onMobileChange(status: boolean) {
+    this.isMobile.next(status);
+  }
+
+  // tslint:disable-next-line:typedef
+  getMobileStatus(): Observable<any> {
+    console.log(this.isMobile)
+    return this.isMobile.asObservable();
+  }
+
+  // tslint:disable-next-line:typedef
+  public checkWidth() {
+    // tslint:disable-next-line:prefer-const
+    if (window.innerWidth <= 768) {
+      this.screenWidth = 'sm';
+      this.onMobileChange(true);
+    } else {
+      this.screenWidth = 'lg';
+      this.onMobileChange(false);
+    }
+  }
+}