Add sidebar

This is pretty much done!

bit-badger-solutions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bit-badger-solutions",
-  "version": "0.0.0",
+  "version": "3.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

bit-badger-solutions/src/app/app.module.ts

@@ -2,14 +2,16 @@ import { BrowserModule } from '@angular/platform-browser'
 import { NgModule } from '@angular/core'
 
 import { AppRoutingModule } from './app-routing.module'
-import { AppComponent } from './app.component'
 import { ApplicationsModule } from './applications/applications.module'
-import { SharedModule } from './shared/shared.module';
-import { HomeComponent } from './pages/home/home.component';
-import { WhyBitBadgerComponent } from './pages/about/why-bit-badger.component';
-import { InformationPublicizingComponent } from './pages/about/information-publicizing.component';
-import { LegacyDataComponent } from './pages/about/legacy-data.component';
-import { ProcessAutomationComponent } from './pages/about/process-automation.component';
+import { SharedModule } from './shared/shared.module'
+import { SidebarModule } from './sidebar/sidebar.module'
+
+import { AppComponent } from './app.component'
+import { HomeComponent } from './pages/home/home.component'
+import { WhyBitBadgerComponent } from './pages/about/why-bit-badger.component'
+import { InformationPublicizingComponent } from './pages/about/information-publicizing.component'
+import { LegacyDataComponent } from './pages/about/legacy-data.component'
+import { ProcessAutomationComponent } from './pages/about/process-automation.component'
 import { WebServicesComponent } from './pages/about/web-services.component'
 
 @NgModule({
@@ -20,13 +22,14 @@ import { WebServicesComponent } from './pages/about/web-services.component'
     InformationPublicizingComponent,
     LegacyDataComponent,
     ProcessAutomationComponent,
-    WebServicesComponent
+    WebServicesComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     ApplicationsModule,
-    SharedModule
+    SharedModule,
+    SidebarModule
   ],
   providers: [],
   bootstrap: [AppComponent]

bit-badger-solutions/src/app/applications/application/application.component.ts

@@ -14,21 +14,6 @@ export class ApplicationComponent implements OnInit {
   /** The app we're displaying */
   application: App
 
-  /** The page title based on this app */
-  pageTitle: string
-
-  /** Whether to link to the app's URL */
-  linkToApp: boolean
-
-  /** Whether to link to an archive URL */
-  linkToArchive: boolean
-
-  /** The link to the screenshot image */
-  imageLink: string
-
-  /** The alt text for the screenshot image */
-  imageAlt: string
-
   constructor(
     private appService: ApplicationService,
     private route: ActivatedRoute
@@ -37,14 +22,32 @@ export class ApplicationComponent implements OnInit {
   ngOnInit() {
     const appId = this.route.snapshot.paramMap.get('appId')
     this.appService.getApp(appId)
-      .subscribe(app => {
-        this.application = app
-        this.pageTitle = `${app.name} « Solutions`
-        this.linkToApp = app.isActive || app.linkInactive
-        this.linkToArchive = !app.isActive && !app.linkInactive && (app.archiveUrl > '')
-        this.imageLink = `/assets/screenshots/${app.id}.png`
-        this.imageAlt = `Screen shot for ${app.name}`
-       })
+      .subscribe(app => this.application = app)
+  }
+  
+  /** The page title based on this app */
+  get pageTitle () {
+     return `${this.application.name} « Solutions`
+  }
+
+  /** Whether to link to the app's URL */
+  get linkToApp () {
+    return this.application.isActive || this.application.linkInactive
+  }
+
+  /** Whether to link to an archive URL */
+  get linkToArchive () {
+    return !this.application.isActive && !this.application.linkInactive && (this.application.archiveUrl > '')
+  }
+
+  /** The link to the screenshot image */
+  get imageLink () {
+    return `/assets/screenshots/${this.application.id}.png`
+  }
+
+  /** The alt text for the screenshot image */
+  get imageAlt () {
+    return `Screen shot for ${this.application.name}`
   }
 
 }

bit-badger-solutions/src/app/pages/home/home.component.html

@@ -56,5 +56,5 @@
       solutions</a>.
     </p>
   </article>
-  <!-- app-sidebar -->
+  <app-sidebar></app-sidebar>
 </div>

bit-badger-solutions/src/app/pages/home/home.component.sass

@@ -0,0 +1,9 @@
+@media all and (min-width: 80rem)
+  .home
+    display: flex
+    flex-flow: row
+    align-items: flex-start
+    justify-content: space-around
+.home-lead
+  font-size: 1.3rem
+  text-align: center

bit-badger-solutions/src/app/shared/header/header.component.html

@@ -11,9 +11,7 @@
   <div class="header-social">
     <a href="https://twitter.com/Bit_Badger" title="Bit_Badger on Twitter">
       <img src="/assets/twitter.png" alt="Twitter">
-    </a>
-    &nbsp; &nbsp;
-    <a href="https://www.facebook.com/bitbadger.solutions" title="Bit Badger Solutions on Facebook">
+    </a>&nbsp; &nbsp;<a href="https://www.facebook.com/bitbadger.solutions" title="Bit Badger Solutions on Facebook">
       <img src="/assets/facebook.png" alt="Facebook">
     </a>
   </div>

bit-badger-solutions/src/app/sidebar/sidebar-app/sidebar-app.component.html

@@ -0,0 +1,10 @@
+<div>
+  <p class="app-sidebar-name">
+    <strong>{{ app.name }}</strong><br>
+    <span *ngIf="!app.noAboutLink">
+      <a routerLink="/solutions/{{ app.id }}" [title]="aboutTitle">About</a> &bull;
+    </span>
+    <a [routerLink]="app.url" [title]="app.name">Visit</a>
+  </p>
+  <p class="app-sidebar-description" [innerHtml]="app.frontPageText"></p>
+</div>

bit-badger-solutions/src/app/sidebar/sidebar-app/sidebar-app.component.sass

@@ -0,0 +1,7 @@
+.app-sidebar-name, .app-sidebar-description
+  margin: 0
+  padding: 0
+.app-sidebar-description
+  font-style: italic
+  color: #555555
+  padding-bottom: .6rem

bit-badger-solutions/src/app/sidebar/sidebar-app/sidebar-app.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit, Input } from '@angular/core'
+
+import { App } from 'src/app/applications/application.types'
+
+@Component({
+  selector: 'app-sidebar-app',
+  templateUrl: './sidebar-app.component.html',
+  styleUrls: ['./sidebar-app.component.sass']
+})
+export class SidebarAppComponent implements OnInit {
+
+  @Input() app: App
+
+  constructor() { }
+
+  ngOnInit() { }
+  
+  /** The title attribute for the About link */
+  get aboutTitle () {
+    return `About ${this.app.name} | Bit Badger Solutions`
+  }
+
+}

bit-badger-solutions/src/app/sidebar/sidebar-category/sidebar-category.component.html

@@ -0,0 +1,4 @@
+<div>
+  <div class="app-sidebar-head">{{ category.name }}</div>
+  <app-sidebar-app *ngFor="let app of apps" [app]="app"></app-sidebar-app>
+</div>

bit-badger-solutions/src/app/sidebar/sidebar-category/sidebar-category.component.sass

@@ -0,0 +1,8 @@
+.app-sidebar-head
+  font-family: "Oswald", "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif
+  font-weight: bold
+  color: maroon
+  margin-bottom: .8rem
+  padding: 3px 12px
+  border-bottom: solid 2px lightgray
+  font-size: 1rem

bit-badger-solutions/src/app/sidebar/sidebar-category/sidebar-category.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, Input } from '@angular/core'
+
+import { ApplicationService } from 'src/app/applications/application.service'
+import { App, Category } from 'src/app/applications/application.types'
+
+@Component({
+  selector: 'app-sidebar-category',
+  templateUrl: './sidebar-category.component.html',
+  styleUrls: ['./sidebar-category.component.sass']
+})
+export class SidebarCategoryComponent implements OnInit {
+
+  @Input() category: Category
+
+  apps: App[]
+
+  constructor(private appService: ApplicationService) { }
+
+  ngOnInit() {
+    this.appService.getApps().subscribe(apps =>
+      this.apps = apps
+        .filter(app => app.isActive && app.categoryId === this.category.id)
+        .sort((a, b) => a.frontPageOrder - b.frontPageOrder))
+  }
+
+}

bit-badger-solutions/src/app/sidebar/sidebar.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { RouterModule } from '@angular/router'
+
+import { SidebarComponent } from './sidebar/sidebar.component'
+import { SidebarAppComponent } from './sidebar-app/sidebar-app.component'
+import { SidebarCategoryComponent } from './sidebar-category/sidebar-category.component'
+
+@NgModule({
+  declarations: [
+    SidebarComponent,
+    SidebarAppComponent,
+    SidebarCategoryComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule
+  ],
+  exports: [
+    SidebarComponent
+  ]
+})
+export class SidebarModule { }

bit-badger-solutions/src/app/sidebar/sidebar/sidebar.component.html

@@ -0,0 +1,5 @@
+<div>
+  <aside class="app-sidebar">
+    <app-sidebar-category *ngFor="let category of cats" [category]="category"></app-sidebar-category>
+  </aside>
+</div>

bit-badger-solutions/src/app/sidebar/sidebar/sidebar.component.sass

@@ -0,0 +1,28 @@
+.app-sidebar
+  text-align: center
+  border-top: dotted 1px lightgray
+  padding-top: 1rem
+  font-size: .9rem
+  display: flex
+  flex-flow: row wrap
+  justify-content: space-around
+.app-sidebar > div
+  width: 20rem
+  padding-bottom: 1rem
+@media all and (min-width: 68rem)
+  .app-sidebar
+    width: 66rem
+    margin: auto
+@media all and (min-width: 80rem)
+  .app-sidebar
+    width: 12rem
+    border-top: none
+    border-left: dotted 1px lightgray
+    padding-top: 0
+    padding-left: 2rem
+    flex-direction: column
+  .app-sidebar > div
+    width: auto
+.app-sidebar a
+  font-size: 10pt
+  font-family: sans-serif

bit-badger-solutions/src/app/sidebar/sidebar/sidebar.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core'
+
+import { Category } from 'src/app/applications/application.types'
+import { ApplicationService } from 'src/app/applications/application.service'
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.sass']
+})
+export class SidebarComponent implements OnInit {
+
+  cats: Category[]
+
+  constructor(private appService: ApplicationService) { }
+
+  ngOnInit() {
+    this.appService.getCategories().subscribe(cats => this.cats = cats)
+  }
+
+}