The html of the book detail page is important for laying out the page properly. This consists primarily of wrapping contents in a <div id="book_detail">
and adding the appropriate ids to the books components as shown below in the code snippet.
<div id="book_detail">
<h3 id="bookTitle"><!-- TODO: Add Book Title--></h3>
<img id="bookImage" src="<!--TODO: Add book cover image link-->" >
<a id="epubLink" href="<!--TODO: Add epub link-->" ></a>
<a id="mobiLink" href="<!--TODO: Add mobi link-->" ></a>
<!--TODO: Add Book description, links to chapters, other book data-->
</div>
For the list view, we are using javascript to loop thru the books using a books array object.
Go to the Javascript section for the Book List page and add the new Book to the bottom of the array. Javascript will take care of the presentation and styling.
<script>
new Vue({
el: '#app',
data: {
books: [
{
title: 'Otolaryngology/Head and Neck Surgery Combat Casualty Care in Operation Iraqi Freedom and Operation Enduring Freedom',
imageUrl: 'FileDownloadpublic.aspx?docid=1a85b02b-c395-4642-bf9e-c8a844897ac8',
link: 'bookDetail.aspx?id=d86a2495-e997-4bf1-b2a5-b9d167ea8cc7',
year: 2015,
description: 'This book will impart lessons learned in the treatment thousands of head and neck injuries among service members and civilians in OEF/OIF. Topics covered are principles and demographics of head and neck surgery, military-unique issues and mass casualties, ballistics of injury, effects of weapons and body armor, pathophysiology, emergency management including maintaining airway and hemorrhage control, and techniques of acute and delayed surgery for blunt and penetrating injury, including preoperative planning, imaging and exploration, and procedures to repair soft tissue, vascular, craniofacial skeletal, laryngotracheal, pharyngoesophageal, mandibular, otologic, and nasal trauma.'
},
{
title: 'Add Book Title',
imageUrl: 'Add Book ImageUrl',
link: 'Add Book link',
year: year,
description: 'Add detail description'
}
</script>