Merge pull request #6 from timschwab/ben

Implemented basic Bootstrap in all active views

client/AddForm.js

@@ -38,14 +38,30 @@ Vue.component('add-form', {
 		}
 	},
 	template: `
-		<div class="add-form">
-			<span>Problem:</span> <input type="text" v-model="problem">
-			<br />
-			<span>Solution:</span> <textarea rows=10 cols=40 v-model="solution"></textarea>
-			<br />
-			<span>Keywords:</span> <input type="text" v-model="keywordString"> {{ keywords }}
-			<br />
-			<input type="button" value="Submit" v-on:click="submit">
+		<div class="add-form form-horizontal">
+			<div class="form-group">
+				<label for="problem" class="control-label col-sm-2">Problem:</label>
+				<div class="col-sm-10">
+					<input class="form-control" id="problem" type="text" v-model="problem">
+				</div>	
+			</div>
+			<div class="form-group">
+				<label for="solution" class="control-label col-sm-2">Solution:</label>
+				<div class="col-sm-10">
+					<textarea class="form-control" id="solution" rows=10 cols=40 v-model="solution"></textarea>
+				</div>
+			</div>
+			<div class="form-group">
+				<label for="keywords" class="control-label col-sm-2">Keywords:</label>
+				<div class="col-sm-10">
+					<input class="form-control" id="keywords" type="text" v-model="keywordString"> {{ keywords }}
+				</div>
+			</div>
+			<div class="form-group">
+				<div class="col-sm-offset-2 col-sm-10">
+					<button class="btn btn-primary" v-on:click="submit">Submit</button>
+				</div>
+			</div>
 			<hr />
 			<div class="md" v-html="markdownPreview"></div>
 		</div>

client/SearchPage.js

@@ -26,12 +26,12 @@ Vue.component('search-page', {
 	template: `
 		<div id="search-page">
 			<div>
-				<p><button v-on:click="$emit('page', 'add')">Add a snippet</button></p>
+				<p><button class="btn btn-primary" v-on:click="$emit('page', 'add')">Add a snippet</button></p>
 			</div>
 			
-			<div>
-				Search query: <br />
-				<input id="query" type="text" v-model="query">
+			<div class="form-group">
+				<label for="query">Search query:</label>
+				<input class="form-control" id="query" type="text" v-model="query">
 			</div>
 			
 			<snippet-preview

client/ViewPage.js

@@ -34,8 +34,8 @@ Vue.component('view-page', {
 		<div id="view-page">
 			<div id="view-links">
 				<p><a href="#" v-on:click="$emit('page', 'search')">Back to search results</a></p>
-				<p><button v-on:click="editSnippet">Edit this snippet</button></p>
-				<p><button v-on:click="deleteSnippet">Delete this snippet</button></p>
+				<p><button class="btn btn-secondary" v-on:click="editSnippet">Edit this snippet</button></p>
+				<p><button class="btn btn-danger" v-on:click="deleteSnippet">Delete this snippet</button></p>
 			</div>
 			<div id="view-results">
 				<p class="problem">{{ snippet.problem }}</p>

client/index.html

@@ -4,6 +4,22 @@
 		<meta charset="UTF-8" />
 		<title>CheatSheet</title>
 
+		<!-- Latest compiled and minified CSS -->
+		<link
+			rel="stylesheet"
+			href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
+		/>
+
+		<!-- jQuery library -->
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+		<!-- Popper JS -->
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
+
+		<!-- Latest compiled JavaScript -->
+		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
+
+		<!-- Custom files -->
 		<link rel="stylesheet" type="text/css" href="style.css" />
 		<script src="App.js"></script>
 	</head>