Style order history and pending orders sections

A toggle function was added to the vue component for the collapsible
areas but pagination is still missing.

resources/images/arrow-left-circle-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
+  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
+</svg>

resources/images/arrow-right-circle-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
+  <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
+</svg>

resources/images/caret-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
+  <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
+</svg>

resources/images/cart-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart-fill" viewBox="0 0 16 16">
+  <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+</svg>

resources/images/chevron-compact-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-compact-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.553 6.776a.5.5 0 0 1 .67-.223L8 9.44l5.776-2.888a.5.5 0 1 1 .448.894l-6 3a.5.5 0 0 1-.448 0l-6-3a.5.5 0 0 1-.223-.67z"/>
+</svg>

resources/images/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#425466" class="bi bi-chevron-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+</svg>

resources/images/circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+</svg>

resources/images/plus-square-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
+  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
+</svg>

resources/images/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
+  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+</svg>

resources/js/panel/panel.vue

@@ -26,15 +26,40 @@
 	</section>
 </div>
 <div v-else-if="active === '#orders'" id="main">
-	<div class="actions"><a href="#orders/new">New</a></div>
+	<div class="actions"><a class="new-order" href="#orders/new">New</a></div>
 	<section class="pending-pane">
 	<h4>Pending Orders</h4>
 	<ul>
 		<template v-bind:key='order.id' v-for="order in orders">
-			<li v-if="order.status == 'pending'">{{order.service.name}} - {{order.updated_at}}</li>
+		<div class="pending-item" v-if="order.status == 'pending'">
+			<div class="pending-heading">
+			<li @click="togglePending($event)">{{order.service.name}} ({{order.updated_at}})</li>
+			<img class="chevron" src="../../images/chevron-down.svg" alt="">
+			</div>
+		<div class="pending-content">
+			<p>ID: {{order.id}}<br>URL: {{order.url}}<br>Quantity: {{order.quantity}}<br>Note: {{order.note}}</p>
+		</div>
+		</div>
 		</template>
 	</ul>
 	</section>
+	<section class="history-pane">
+		<h4>Order History</h4>
+	<table>
+		<thead><th>Date</th><th>ID</th><th>Name</th><th>Status</th> <th>Quantity</th></thead>
+		<tbody>
+		<tr @click="toggleOrderItem($event)" v-bind:key='order.id' v-for='order in orders.slice(0, 10)'>
+		<td>{{order.updated_at}}</td>
+		<td>{{order.id}}</td>
+		<td>{{order.service.name}}</td>
+		<td :class="order.status"
+		class="status"><span>{{order.status.charAt(0).toUpperCase() +
+		order.status.slice(1)}}</span></td>
+		<td>{{order.quantity}}</td>
+		</tr>
+		</tbody>
+	</table>
+	</section>
 </div>
 </transition>
 </template>
@@ -42,12 +67,22 @@
 <script>
 import Sidebar from './sidebar.vue'
 
+function togglePending(event) {
+	event.target.parentNode.parentNode.classList.toggle('selected')
+}
+
+function toggleOrderItem(event) {
+	event.target.parentNode.parentNode.classList.toggle('selected')
+}
+
 export default {
 	components: {
 		Sidebar,
 	},
 	data() {
 	return {active: window.location.hash, user: '',
-	token: '', orders: ''}},
+	token: '', orders: ''}
+	},
+	methods: {togglePending, toggleOrderItem}
 }
 </script>

resources/scss/_vars.scss

@@ -13,7 +13,7 @@ $theme-colors: (
 	"brand-orange": #f67602,
 	"grey": #e6ebf1,
 	"light-grey": #e9e9e9,
-	"light2-grey": rgb(190,190,190),
+	"light2-grey": #bebebe,
 	"light3-grey": rgb(245,245,245),
 	"dark-grey": #212121,
 	"faded-text": #425466,
@@ -23,6 +23,7 @@ $theme-colors: (
 	"green": #63b521,
 	"alt-blue-light": #e2f5ff,
 	"alt-blue-medium": #2b96cc,
+	"text-blue-medium": #425466,
 	"alt-red-light": #f3beb8,
 	"alt-red-medium": #f09898,
 );

resources/scss/main.scss

@@ -153,7 +153,7 @@ div.hero-filter {
 div.hero-filter h2 {
 	color: black;
 	opacity: 0.7;
-	width: 10em;
+	max-width: 10em;
 	font-size: 2.4em;
 	position: absolute;
 	top: 3em;
@@ -415,7 +415,7 @@ section.faq-info .collapsibles {
 
 .faq-info .collapsible {
 	text-align: center;
-	width: 25em;
+	width: 20em;
 	&:not(.active) .content {
 		display: none;
 	}
@@ -768,7 +768,7 @@ main.panel {
 	opacity: 0;
 }
 
-.recent-pane {
+.recent-pane, .history-pane{
 	table {
 		border-spacing: 4px;
 		margin: auto;
@@ -805,6 +805,59 @@ main.panel {
 	td.canceled {
 		color: vars.getColor('red-alert');
 	}
+}
+
+.pending-pane {
+	.pending-heading {
+		position: relative;
+		border-bottom: 1px solid vars.getColor('light2-grey');
+		// background-color: vars.getColor('light-grey');
+		&:hover {
+			color: vars.darkenColor('text-blue-medium');
+		}
+	}
 
+	.pending-content {
+		color: grey;
+		height: 0;
+		overflow: hidden;
+	}
+
+	.selected .pending-content {
+		height: fit-content;
+	}
+
+	li {
+		margin: 10px 0;
+		display: inline-block;
+		width: 15em;
+	}
 	
+	img {
+		// border: 2px solid vars.getColor('light2-grey');
+		padding: 4px;
+		// border-radius: 50%;
+		margin-top: 5px;
+		width: 25px;
+		display: inline-block;
+		margin-bottom: 3px;
+		margin-left: 2px;
+		position: absolute;
+	}
+}
+
+.history-pane {
+	table {
+		overflow: scroll;
+	}
+	thead {
+		// display: block;
+	}
+}
+
+.actions {
+	// height: 2em;
+	.new-order {
+		background-color: vars.getColor('light-blue');
+	}
 }