Skip to content

Instantly share code, notes, and snippets.

@jocafi

jocafi/index.html

Created January 18, 2019 14:22
Show Gist options
  • Save jocafi/a446ecdcb3e961e99673352832ecd7d9 to your computer and use it in GitHub Desktop.
Save jocafi/a446ecdcb3e961e99673352832ecd7d9 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap Starter Template
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Bootstrap Starter Template</title>
</head>
<body>
<h1 class="display-1 text-center">Bootstrap Template</h1>
<div class="container mt-5">
<form [formGroup]="resourceForm" (submit)="submitForm()">
<div class="card">
<div class="card-header">
New Entry
</div>
<div class="card-body">
<div class="form-row">
<!-- type -->
<div class="form-group col-md-2">
<label for="type">Type</label>
<select name="type" id="type" formControlName="type" class="form-control">
<option value="income">Income</option>
<option value="outcome">Outcome</option>
</select>
<app-form-field-error [form-control]="resourceForm.get('type')"></app-form-field-error>
</div>
<!-- name -->
<div class="form-group col-md-5">
<label for="name">Entry name</label>
<input type="text" class="form-control" id="name" formControlName="name">
<app-form-field-error [form-control]="resourceForm.get('name')"></app-form-field-error>
</div>
<!-- amount -->
<div class="form-group col-md-3">
<label for="amount">Value</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">€</div>
</div>
<input [imask]="imaskConfig" type="text" class="form-control text-right" id="amount" formControlName="amount">
</div>
<app-form-field-error [form-control]="resourceForm.get('amount')"></app-form-field-error>
</div>
<!-- date -->
<div class="form-group col-md-2">
<label for="date">Date</label>
<div class="input-group date-filter-group">
<input class="form-control inp-date-filter" placeholder="tt.mm.jjjj"
name="date" id="date" [(ngModel)]="dateFilter" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" click="d.toggle()" type="button"></button>
</div>
</div>
<app-form-field-error [form-control]="resourceForm.get('date')"></app-form-field-error>
</div>
</div>
<div class="form-row">
<!-- paid -->
<div class="form-group col-md-2">
<label for="status">Status</label>
<div class="btn-group" id="status">
<label (click)="resourceForm.get('paid').setValue(true)" [class.active]="resourceForm.get('paid').value == true"
class="btn btn-outline-info">
Paid
</label>
<label (click)="resourceForm.get('paid').setValue(false)" [class.active]="resourceForm.get('paid').value == false"
class="btn btn-outline-info">
Pending
</label>
</div>
<app-form-field-error [form-control]="resourceForm.get('paid')"></app-form-field-error>
</div>
<!-- categoryId -->
<div class="form-group col-md-3">
<label for="categoryId">Category</label>
<select name="categoryId" id="categoryId" formControlName="categoryId" class="form-control">
<option value="Entertainment">Entertainment</option>
<option value="Car">Car</option>
<option value="Health">Health</option>
<option value="Supermarket">Supermarket</option>
</select>
<app-form-field-error [form-control]="resourceForm.get('categoryId')"></app-form-field-error>
</div>
<!-- description -->
<div class="form-group col-md-7">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" formControlName="description">
<app-form-field-error [form-control]="resourceForm.get('description')"></app-form-field-error>
</div>
</div>
</div>
</div>
<app-server-error-messages [server-error-messages]="serverErrorMessages"></app-server-error-messages>
<button [disabled]="submittingForm || resourceForm.invalid" type="submit" class="btn btn-primary btn-lg float-right mt-3">
Save
</button>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
Raw
styles.css
button.calendar, button.calendar:active {
width: 2.75rem;
min-width: 2.75rem;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEUSURBVEiJ7ZQxToVAEIY/YCHGxN6XGOIpnpaEsBSeQC9ArZbm9TZ6ADyBNzAhQGGl8Riv4BLAWAgmkpBYkH1b8FWT2WK/zJ8ZJ4qiI6XUI3ANnGKWBnht2/ZBDRK3hgVGNsCd7/ui+JkEIrKtqurLpEWaphd933+IyI3LEIdpCYCiKD6HcuOa/nwOa0ScJEnk0BJg0UTUWJRl6RxCYEzEmomsIlPU3IPW+grIAbquy+q6fluy/28RIBeRMwDXdXMgXLj/B2uimRXpui4D9sBeRLKl+1N+L+t6RwbWrZliTTTr1oxYtzVWiTQAcRxvTX+eJMnlUDaO1vpZRO5NS0x48sIwfPc87xg4B04MCzQi8hIEwe4bl1DnFMCN2zsAAAAASUVORK5CYII=') !important;
background-repeat: no-repeat;
background-size: 23px;
background-position: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment