diff --git a/resources/images/arrow-left-circle-fill.svg b/resources/images/arrow-left-circle-fill.svg
new file mode 100644
index 0000000..2eebe62
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/images/arrow-right-circle-fill.svg b/resources/images/arrow-right-circle-fill.svg
new file mode 100644
index 0000000..336a34e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/images/caret-down.svg b/resources/images/caret-down.svg
new file mode 100644
index 0000000..026b0ff
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/images/cart-fill.svg b/resources/images/cart-fill.svg
new file mode 100644
index 0000000..a2b95bf
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/images/chevron-compact-down.svg b/resources/images/chevron-compact-down.svg
new file mode 100644
index 0000000..fb1767e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/images/chevron-down.svg b/resources/images/chevron-down.svg
new file mode 100644
index 0000000..0f92df2
--- /dev/null
+++ b/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>
diff --git a/resources/images/circle.svg b/resources/images/circle.svg
new file mode 100644
index 0000000..442a14e
--- /dev/null
+++ b/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>
diff --git a/resources/images/plus-square-fill.svg b/resources/images/plus-square-fill.svg
new file mode 100644
index 0000000..0d5e15c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/images/plus.svg b/resources/images/plus.svg
new file mode 100644
index 0000000..5b088c0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/js/panel/panel.vue b/resources/js/panel/panel.vue
index c1ab6ab..b34bfd4 100644
--- a/resources/js/panel/panel.vue
+++ b/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>
diff --git a/resources/scss/_vars.scss b/resources/scss/_vars.scss
index b4a22e8..fe504d5 100644
--- a/resources/scss/_vars.scss
+++ b/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,
);
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index aac9836..c98a514 100644
--- a/resources/scss/main.scss
+++ b/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');
+ }
}