bohoffi

// Mixin generates grid layout styles with a default column count of 12
@mixin create-grid($col-count: 12) {
  display: grid;
  grid-template-columns: repeat($col-count, 1fr);
  gap: 0.5rem;
  
  // child without a `span-` class spans 1 column
  & > *:not([class*='span-']) {
    grid-column: span 1;
  }

bohoffi

type Tuning = string[];

// provide the standard 6-string guitar tuning (high to low)
const standardTuning: Tuning = ['E4', 'B3', 'G3', 'D3', 'A2', 'E2'];

// provide a limit for the fretboard length (24 frets => 0 to 24)
const maxFretLimit: number = 24;

interface FretBoardNote {
  string: number;

bohoffi

<div class="paging">
    <a ng-if="currentPage > 1" href="{{paging.prevLink}}" class="prev-link">{{paging.prevLabel}}</a>
    <span ng-if="currentPage > 1 && currentPage < totalPages" class="sep">{{paging.sep}}</span>
    <a ng-if="currentPage < totalPages" href="{{paging.nextLink}}" class="next-link">{{paging.nextLabel}}</a>
</div>

bohoffi

(function () {
    'use strict';

    angular.module('app.directives', [])
        .directive('paging', PagingDirective);

    function PagingDirective() {
        return {
            restrict: 'EA',
            templateUrl: 'paging.tpl.html',

bohoffi

import {Component, Input, OnInit} from '@angular/core';

@Component({
    selector: 'paging',
    templateUrl: './paging.component.html',
    styleUrls: ['./paging.component.css']
})
export class PagingComponent implements OnInit {

    @Input()

bohoffi

<div>
    <a *ngIf="currentPage > 1" [routerLink]="prevRouterLink" class="prev-link">{{prevLabel}}</a>
    <span *ngIf="currentPage > 1 && currentPage < totalPages" class="sep">{{sep}}</span>
    <a *ngIf="currentPage < totalPages" [routerLink]="nextRouterLink" class="next-link">{{nextLabel}}</a>
</div>

bohoffi

div {
  text-align: center;
  margin-top: 1rem;
}
div a {
  color: #0d47a1;
  text-decoration: none;
}
div a:hover {
  text-decoration: underline;