Make UI more scalable

resources/js/panel/panel.vue

@@ -70,7 +70,7 @@ export default {
 	token: '', orders: '', loading: true}
 	},
 	methods: {},
-	beforeCreate() {
+	created() {
 		fetch("/panel/services", {
 			method: 'GET',
 			headers: {'Content-Type': 'application/json',

resources/js/panel/service-pane.vue

@@ -1,9 +1,9 @@
 <template>
 <section class="services-pane youtube" >
 	<h4>{{site.charAt(0).toUpperCase() + site.slice(1)}}</h4>
-	<ul :key="service.id" v-for="service in filter(site)">
+	<ul :key="service.id" v-for="service in filter">
 		<li><span>{{service.name}}</span><span>{{service.price}}</span><span>{{service.minimum.toLocaleString('en')}}</span><span>{{service.maximum.toLocaleString('en')}}</span>
-<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">
+<svg @click="$emit('select', service)" 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>
 		</li>
@@ -12,16 +12,17 @@
 </template>
 
 <script>
-function filter(site) {
-	if (!this.services) {return}
+function filter() {
+	if (!this.services || !this.site) {return}
 
-	return this.services.filter(function(s) {
-		return s.site == site
+	return this.services.filter((s) => {
+		return s.site == this.site
 	})
 }
 
 export default {
 	props: ['services', 'site'],
-	methods: {filter}
+	emits: ['select'],
+	computed: {filter}
 }
 </script>

resources/js/panel/services.vue

@@ -8,15 +8,16 @@
 	</div>
 	<div class="services-legend"><h5>Name</h5>
 <h5>Credits per 1000</h5><h5>Min Qt.</h5><h5>Max Qt.</h5></div>
-<ServicePane :site="'youtube'" :services="services"></ServicePane>
-<ServicePane :site="'instagram'" :services="services"></ServicePane>
-<ServicePane :site="'twitter'" :services="services"></ServicePane>
-<ServicePane :site="'tiktok'" :services="services"></ServicePane>
-<div id="overlay">
-	<img class="cancel icon" src="../../images/cancel-icon2.svg" alt=""/>
+<ServicePane :site="'youtube'" :services="services" @select="select"></ServicePane>
+<ServicePane :site="'instagram'" :services="services" @select="select"></ServicePane>
+<ServicePane :site="'twitter'" :services="services" @select="select"></ServicePane>
+<ServicePane :site="'tiktok'" :services="services" @select="select"></ServicePane>
+<div id="overlay" v-if="selected">
 	<div class="overlay-item">
+	<img @click="selected = null" class="cancel icon" src="../../images/cancel-icon2.svg" alt=""/>
 		<img class="icon" src="../../images/youtube-icon.svg" alt="">
 		<h3>Location Targeted Views</h3>
+		<h4>Cost: 50</h4>
 		<h4>Quantity</h4>
 		<div><input required type="number"><span> / 10000</span></div> 
 		<h4>Location</h4>
@@ -38,10 +39,13 @@
 <script>
 import ServicePane from './service-pane.vue'
 
+function select(service) {
+	this.selected = service
+}
 
 export default {
 	data() {
-		return {servicePane: true, services: ''}
+		return {servicePane: true, services: null, selected: null }
 	},
 	components: {ServicePane},
 	props: ['token'],
@@ -55,5 +59,6 @@ export default {
 			response.json().then(data => {this.services = data})
 		})
 	},
+	methods: {select}
 }
 </script>

resources/scss/main.scss

@@ -687,26 +687,27 @@ div.register-area.active {
 }
 
 main.panel {
-	min-height: 750px;
-	height: 90vh;
+	// min-height: 750px;
+	height: 100vh;
 	// max-height: 100vh;
 	background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);
 }
 
 #panel {
 	top: 50px;
-	padding: 10px;
+	padding: 0 5%;
 	margin: auto;
 	position: relative;
-	max-width: 450px;
-	height: 600px;
+	max-width: 800px;
+	height: 90%;
 	display: flex;
 	gap: 10px;
 }
 
 #sidebar {
 	position: relative;
-	width: 35px;
+	width: 6%;
+	max-width: 55px;
 	height: 50%;
 	color: white;
 	background: transparent;
@@ -719,23 +720,22 @@ main.panel {
 	}
 
 	svg {
-		width: 35px;
+		width: 100%;
 		height: 35px;
 		color: white;
 	}
+
 	a.selected svg {
 		color: vars.getColor("brand-orange");
 	}
 }
 
 #panel #main {
-	height: 100%;
 	background: white;
 	width: 100%;
 	flex-shrink: 1;
 	margin-left: auto;
 	position: relative;
-	// opacity: 1;
 	@include vars.hovering3;
 	transition: opacity 0.5s ease;
 	vertical-align: middle;
@@ -980,7 +980,7 @@ main.panel {
 	margin-top: 20px;
 	border-top: 1px solid darkgrey;
 	border-bottom: 1px solid darkgrey;
-	height: 2em;
+	min-height: 2em;
 	background-color: rgb(239, 239, 239);
 	color: rgb(118, 118, 118);
 	padding-right: 30px;
@@ -1071,12 +1071,11 @@ main.panel {
 	top: 0;
 
 	.overlay-item {
-		transform: translateY(-50px);
 		width: 20em;
-		height: 20em;
+		min-height: 20em;
 		background: white;
 		margin: auto;
-		margin-top: 25%;
+		margin-top: 20%;
 		opacity: 1;
 		border-radius: 4px;
 		padding: 5px;
@@ -1111,9 +1110,10 @@ main.panel {
 	}
 
 	.cancel {
+		position: absolute;
 		width: 30px;
-		margin-right: 10px;
-		margin-top: 10px;
+		right: 10px;
+		top: 10px;
 	}
 
 	button {

resources/views/master.blade.php

@@ -44,6 +44,7 @@ spellcheck='false'>
 		</ul>
 	</div>
 	@yield('content')
+@section('footer')
 	<footer class='footer text-center'>
 		<div class='foot-links'>
 			<a href="/terms">Terms & Policy</a>
@@ -52,5 +53,6 @@ spellcheck='false'>
 		</div>
 		<small>©Copyright 2021 Trendplays Network, Inc.</small>
 	</footer>
+@show
 	@yield('scripts')
 </body>

resources/views/panel.blade.php

@@ -15,6 +15,8 @@
 	</div>
 	</main>
 @endsection
+@section('footer')
+@endsection
 
 @section('scripts')
 	@parent