Skip to content

Commit

Permalink
Merge pull request #34 from drewuse/alignment
Browse files Browse the repository at this point in the history 
Fixed alignment on index and sellForm pages
  • Loading branch information
@KaranErry
KaranErry authored Apr 15, 2019
2 parents 710d808 + 3115765 commit 0bb1eb3
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 132 deletions.
219 changes: 113 additions & 106 deletions views/index.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,118 @@
<br>
<h2>Listings</h2>
<!-- FILTER BY CONDITION Dropdown -->
<div class="dropdown">
<button class="btn dropdown-toggle
{{#if filters.condition}}
btn-success
{{else}}
btn-secondary
{{/if}}" type="button" id="dd-filtercondition" data-toggle="dropdown">
{{#ifEquals filters.condition "New"}}
Filtering by Condition: New
{{/ifEquals}}
{{#ifEquals filters.condition "Used (Very Good)"}}
Filtering by Condition: Used (Very Good)
{{/ifEquals}}
{{#ifEquals filters.condition "Used (Good)"}}
Filtering by Condition: Used (Good)
{{/ifEquals}}
{{#ifEquals filters.condition "Used (Acceptable)"}}
Filtering by Condition: Used (Acceptable)
{{/ifEquals}}
{{#unless filters.condition}}
Filter Book Condition
{{/unless}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelled-by="dd-filtercondition">
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('New');
addFilter('condition', filterVal);
">{{#ifEquals filters.condition "New"}}<i class="fas fa-check"></i>{{/ifEquals}} New</a>
</li>
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('Used (Very Good)');
addFilter('condition', filterVal);
">{{#ifEquals filters.condition "Used (Very Good)"}}<i class="fas fa-check"></i>{{/ifEquals}} Used - Very Good</a>
</li>
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('Used (Good)');
addFilter('condition', filterVal);
">{{#ifEquals filters.condition "Used (Good)"}}<i class="fas fa-check"></i>{{/ifEquals}} Used - Good</a>
</li>
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('Used (Acceptable)');
addFilter('condition', filterVal);
">{{#ifEquals filters.condition "Used (Acceptable)"}}<i class="fas fa-check"></i>{{/ifEquals}} Used - Acceptable</a>
</li>
<div class="dropdown-divider"></div>
<li>
<a class="dropdown-item btn-danger" href="javascript:
addFilter('condition', '');
"><i class="fas fa-times"></i> Reset Filter</a>
</li>
</ul>
</div>
<!-- FILTER BY BOOKTYPE Dropdown -->
<div class="dropdown">
<button class="btn dropdown-toggle
{{#if filters.booktype}}
btn-success
{{else}}
btn-secondary
{{/if}}" type="button" id="dd-filterbooktype" data-toggle="dropdown">
{{#ifEquals filters.booktype "Textbook"}}
Filtering by Type: Textbook
{{/ifEquals}}
{{#ifEquals filters.booktype "Course Required Reading"}}
Filtering by Type: Course Required Reading
{{/ifEquals}}
{{#ifEquals filters.booktype "Non-Textbook"}}
Filtering by Type: Non-Textbook
{{/ifEquals}}
{{#unless filters.booktype}}
Filter Book Type
{{/unless}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelled-by="dd-filterbooktype">
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('Textbook');
addFilter('booktype', filterVal);
">{{#ifEquals filters.booktype "Textbook"}}<i class="fas fa-check"></i>{{/ifEquals}} Textbook</a>
</li>
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('Course Required Reading');
addFilter('booktype', filterVal);
">{{#ifEquals filters.booktype "Course Required Reading"}}<i class="fas fa-check"></i>{{/ifEquals}} Course Required Reading</a>
</li>
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('Non-Textbook');
addFilter('booktype', filterVal);
">{{#ifEquals filters.booktype "Non-Textbook"}}<i class="fas fa-check"></i>{{/ifEquals}} Non-Textbook</a>
</li>
<div class="dropdown-divider"></div>
<li>
<a class="dropdown-item btn-danger" href="javascript:
addFilter('booktype', '');
"><i class="fas fa-times"></i> Reset Filter</a>
</li>
</ul>
<div class="d-flex flex-row">
<!-- FILTER BY CONDITION Dropdown -->
<div class="p-1">
<div class="dropdown">
<button class="btn dropdown-toggle
{{#if filters.condition}}
btn-success
{{else}}
btn-secondary
{{/if}}" type="button" id="dd-filtercondition" data-toggle="dropdown">
{{#ifEquals filters.condition "New"}}
Filtering by Condition: New
{{/ifEquals}}
{{#ifEquals filters.condition "Used (Very Good)"}}
Filtering by Condition: Used (Very Good)
{{/ifEquals}}
{{#ifEquals filters.condition "Used (Good)"}}
Filtering by Condition: Used (Good)
{{/ifEquals}}
{{#ifEquals filters.condition "Used (Acceptable)"}}
Filtering by Condition: Used (Acceptable)
{{/ifEquals}}
{{#unless filters.condition}}
Filter Book Condition
{{/unless}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelled-by="dd-filtercondition">
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('New');
addFilter('condition', filterVal);
">{{#ifEquals filters.condition "New"}}<i class="fas fa-check"></i>{{/ifEquals}} New</a>
</li>
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('Used (Very Good)');
addFilter('condition', filterVal);
">{{#ifEquals filters.condition "Used (Very Good)"}}<i class="fas fa-check"></i>{{/ifEquals}} Used - Very Good</a>
</li>
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('Used (Good)');
addFilter('condition', filterVal);
">{{#ifEquals filters.condition "Used (Good)"}}<i class="fas fa-check"></i>{{/ifEquals}} Used - Good</a>
</li>
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('Used (Acceptable)');
addFilter('condition', filterVal);
">{{#ifEquals filters.condition "Used (Acceptable)"}}<i class="fas fa-check"></i>{{/ifEquals}} Used - Acceptable</a>
</li>
<div class="dropdown-divider"></div>
<li>
<a class="dropdown-item btn-danger" href="javascript:
addFilter('condition', '');
"><i class="fas fa-times"></i> Reset Filter</a>
</li>
</ul>
</div>
</div>

<!-- FILTER BY BOOKTYPE Dropdown -->
<div class="p-1">
<div class="dropdown">
<button class="btn dropdown-toggle
{{#if filters.booktype}}
btn-success
{{else}}
btn-secondary
{{/if}}" type="button" id="dd-filterbooktype" data-toggle="dropdown">
{{#ifEquals filters.booktype "Textbook"}}
Filtering by Type: Textbook
{{/ifEquals}}
{{#ifEquals filters.booktype "Course Required Reading"}}
Filtering by Type: Course Required Reading
{{/ifEquals}}
{{#ifEquals filters.booktype "Non-Textbook"}}
Filtering by Type: Non-Textbook
{{/ifEquals}}
{{#unless filters.booktype}}
Filter Book Type
{{/unless}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelled-by="dd-filterbooktype">
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('Textbook');
addFilter('booktype', filterVal);
">{{#ifEquals filters.booktype "Textbook"}}<i class="fas fa-check"></i>{{/ifEquals}} Textbook</a>
</li>
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('Course Required Reading');
addFilter('booktype', filterVal);
">{{#ifEquals filters.booktype "Course Required Reading"}}<i class="fas fa-check"></i>{{/ifEquals}} Course Required Reading</a>
</li>
<li>
<a class="dropdown-item" href="javascript:
var filterVal = encodeURI('Non-Textbook');
addFilter('booktype', filterVal);
">{{#ifEquals filters.booktype "Non-Textbook"}}<i class="fas fa-check"></i>{{/ifEquals}} Non-Textbook</a>
</li>
<div class="dropdown-divider"></div>
<li>
<a class="dropdown-item btn-danger" href="javascript:
addFilter('booktype', '');
"><i class="fas fa-times"></i> Reset Filter</a>
</li>
</ul>
</div>
</div>
</div>
<!-- LISTING CARDS -->
{{#if currentSession.passport}}
Expand Down
66 changes: 40 additions & 26 deletions views/sellForm.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,55 @@
<br>
<h3>Start Selling</h3>
<form action="/sell/insert" method="post" enctype="multipart/form-data">

<!-- Title Input -->
<div class="input">
<label for="title">Title <span id="asterisk">*</span></label>
<input required type="text" id="title" name="title">
<div class="form-group row">
<label for="title" class="col-sm-2 col-form-label">Title <span id="asterisk">*</span></label>
<div class="col-sm-10">
<input required type="text" id="title" name="title">
</div>
</div>

<!-- Price Input -->
<div class="input">
<label for="content">Price <span id="asterisk">*</span></label>
<input required type="number" id="price" name="price">
<div class="form-group row">
<label for="content" class="col-sm-2 col-form-label">Price <span id="asterisk">*</span></label>
<div class="col-sm-10">
<input required type="number" id="price" name="price">
</div>
</div>

<!-- Image Input -->
<div class="input">
<label for="image">Image <span id="asterisk">*</span></label>
<input required type="file" id="image" name="image">
<div class="form-group row">
<label for="image" class="col-sm-2 col-form-label">Image <span id="asterisk">*</span></label>
<div class="col-sm-10">
<input required type="file" id="image" name="image">
</div>
</div>

<!-- Condition Dropdown -->
<div class="input">
<label for="condition">Book Condition: <span id="asterisk">*</span></label>
<select required class="form-control" id="condition" name="condition">
<option value="">Choose a book condition...</option>
<option value="new">New</option>
<option value="used-vg">Used - Very Good</option>
<option value="used-gd">Used - Good</option>
<option value="used-ac">Used - Acceptable</option>
</select>
<div class="form-group row">
<label for="condition" class="col-sm-2 col-form-label">Book Condition <span id="asterisk">*</span></label>
<div class="col-sm-5">
<select required class="form-control" id="condition" name="condition">
<option value="">Choose a book condition...</option>
<option value="new">New</option>
<option value="used-vg">Used - Very Good</option>
<option value="used-gd">Used - Good</option>
<option value="used-ac">Used - Acceptable</option>
</select>
</div>
</div>
<!-- Book Type Dropdown -->
<div class="input">
<label for="booktype">Book Type: <span id="asterisk">*</span></label>
<select required class="form-control" id="booktype" name="booktype">
<option value="">Choose a book type...</option>
<option value="textbook">Textbook</option>
<option value="course-rr">Required Course Reading (non-textbook)</option>
<option value="other">Other (non-textbook)</option>
</select>
<div class="form-group row">
<label for="booktype" class="col-sm-2 col-form-label">Book Type <span id="asterisk">*</span></label>
<div class="col-sm-5">
<select required class="form-control" id="booktype" name="booktype">
<option value="">Choose a book type...</option>
<option value="textbook">Textbook</option>
<option value="course-rr">Required Course Reading (non-textbook)</option>
<option value="other">Other (non-textbook)</option>
</select>
</div>
</div>
<!-- Item Description Input -->
<div class="input">
Expand Down

0 comments on commit 0bb1eb3

Please sign in to comment.