style: 💄 Styling & added price to cards
This commit is contained in:
parent
08a26004c3
commit
e07ad87ea9
|
@ -28,7 +28,7 @@
|
||||||
<!-- FORM -->
|
<!-- FORM -->
|
||||||
<form action="{{ route('servers.store') }}" method="post" class="row justify-content-center">
|
<form action="{{ route('servers.store') }}" method="post" class="row justify-content-center">
|
||||||
@csrf
|
@csrf
|
||||||
<div class="col-md-6">
|
<div class="col-xl-6 col-lg-8 col-md-8 col-sm-10">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div class="card-title"><i class="fas fa-cogs mr-2"></i>{{ __('Server configuration') }}
|
<div class="card-title"><i class="fas fa-cogs mr-2"></i>{{ __('Server configuration') }}
|
||||||
|
@ -148,17 +148,17 @@
|
||||||
|
|
||||||
|
|
||||||
<!-- <div class="form-group">
|
<!-- <div class="form-group">
|
||||||
<label for="product">{{ __('Resources') }}</label>
|
<label for="product">{{ __('Resources') }}</label>
|
||||||
<select name="product" required id="product" :disabled="!fetchedProducts"
|
<select name="product" required id="product" :disabled="!fetchedProducts"
|
||||||
x-model="selectedProduct" @change="updateSelectedObjects()" class="custom-select">
|
x-model="selectedProduct" @change="updateSelectedObjects()" class="custom-select">
|
||||||
<option x-text="getProductInputText()" disabled selected hidden value="null"></option>
|
<option x-text="getProductInputText()" disabled selected hidden value="null"></option>
|
||||||
<template x-for="product in products" :key="product.id">
|
<template x-for="product in products" :key="product.id">
|
||||||
<option :disabled="product.minimum_credits > user.credits"
|
<option :disabled="product.minimum_credits > user.credits"
|
||||||
x-text="getProductOptionText(product)" :value="product.id">
|
x-text="getProductOptionText(product)" :value="product.id">
|
||||||
</option>
|
</option>
|
||||||
</template>
|
</template>
|
||||||
</select>
|
</select>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -169,7 +169,7 @@
|
||||||
<!-- <div class="row"><label for="product">{{ __('Resources') }}</label></div> -->
|
<!-- <div class="row"><label for="product">{{ __('Resources') }}</label></div> -->
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<template x-for="product in products" :key="product.id">
|
<template x-for="product in products" :key="product.id">
|
||||||
<div class="card col-2 mr-2 ml-2 ">
|
<div class="card col-xl-2 col-lg-3 col-md-4 col-sm-10 mr-2 ml-2 ">
|
||||||
<div class="card-body d-flex flex-column">
|
<div class="card-body d-flex flex-column">
|
||||||
<h4 class="card-title" x-text="product.name"></h4>
|
<h4 class="card-title" x-text="product.name"></h4>
|
||||||
<div class="mt-2">
|
<div class="mt-2">
|
||||||
|
@ -177,33 +177,43 @@
|
||||||
<p class="card-text text-muted mb-1">Resource Data:</p>
|
<p class="card-text text-muted mb-1">Resource Data:</p>
|
||||||
<ul class="pl-0">
|
<ul class="pl-0">
|
||||||
<li class="d-flex justify-content-between">
|
<li class="d-flex justify-content-between">
|
||||||
<span class="d-inline-block">{{ __('CPU') }}</span>
|
<span class="d-inline-block"><i class="fas fa-microchip"></i>
|
||||||
|
{{ __('CPU') }}</span>
|
||||||
<span class=" d-inline-block" x-text="product.cpu + ' %'"></span>
|
<span class=" d-inline-block" x-text="product.cpu + ' %'"></span>
|
||||||
</li>
|
</li>
|
||||||
<div class="d-flex justify-content-between">
|
<li class="d-flex justify-content-between">
|
||||||
<span class="d-inline-block">{{ __('Memory') }}</span>
|
<span class="d-inline-block"><i class="fas fa-memory"></i>
|
||||||
|
{{ __('Memory') }}</span>
|
||||||
<span class=" d-inline-block"
|
<span class=" d-inline-block"
|
||||||
x-text="product.memory + ' {{ __('MB') }}'"></span>
|
x-text="product.memory + ' {{ __('MB') }}'"></span>
|
||||||
</div>
|
</li>
|
||||||
<div class="d-flex justify-content-between">
|
<li class="d-flex justify-content-between">
|
||||||
<span class="d-inline-block">{{ __('Disk') }}</span>
|
<div>
|
||||||
|
<i class="fas fa-hdd"></i>
|
||||||
|
<span class="d-inline-block">
|
||||||
|
{{ __('Disk') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<span class="d-inline-block"
|
<span class="d-inline-block"
|
||||||
x-text="product.disk + ' {{ __('MB') }}'"></span>
|
x-text="product.disk + ' {{ __('MB') }}'"></span>
|
||||||
</div>
|
</li>
|
||||||
<div class="d-flex justify-content-between">
|
<li class="d-flex justify-content-between">
|
||||||
<span class="d-inline-block">{{ __('Backups') }}</span>
|
<span class="d-inline-block"><i class="fas fa-save"></i>
|
||||||
|
{{ __('Backups') }}</span>
|
||||||
<span class=" d-inline-block" x-text="product.backups"></span>
|
<span class=" d-inline-block" x-text="product.backups"></span>
|
||||||
</div>
|
</li>
|
||||||
<div class="d-flex justify-content-between">
|
<li class="d-flex justify-content-between">
|
||||||
<span class="d-inline-block">{{ __('MySQL') }}
|
<span class="d-inline-block"><i class="fas fa-database"></i>
|
||||||
|
{{ __('MySQL') }}
|
||||||
{{ __('Databases') }}</span>
|
{{ __('Databases') }}</span>
|
||||||
<span class="d-inline-block" x-text="product.databases"></span>
|
<span class="d-inline-block" x-text="product.databases"></span>
|
||||||
</div>
|
</li>
|
||||||
<div class="d-flex justify-content-between">
|
<li class="d-flex justify-content-between">
|
||||||
<span class="d-inline-block">{{ __('Allocations') }}
|
<span class="d-inline-block"><i class="fas fa-network-wired"></i>
|
||||||
|
{{ __('Allocations') }}
|
||||||
({{ __('ports') }})</span>
|
({{ __('ports') }})</span>
|
||||||
<span class="d-inline-block" x-text="product.allocations"></span>
|
<span class="d-inline-block" x-text="product.allocations"></span>
|
||||||
</div>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-2 mb-2">
|
<div class="mt-2 mb-2">
|
||||||
|
@ -212,34 +222,26 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row flex mb-3 mt-auto">
|
<div class="mt-auto border rounded border-secondary">
|
||||||
<div class="col-auto my-auto">
|
<div class="d-flex justify-content-between p-2">
|
||||||
Price:
|
<span class="d-inline-block">
|
||||||
</div>
|
{{ __('Price') }}:
|
||||||
<div class="col-auto">
|
|
||||||
<div class="text-muted">per Hour</div>
|
|
||||||
<span class="d-inline-block"
|
|
||||||
x-text=" Math.round((product.price/30/24) * 100) / 100 + ' Credits'"></span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<div class="text-muted">per Month
|
|
||||||
</div>
|
|
||||||
<span class="d-inline-block" x-text="product.price + ' Credits'">
|
|
||||||
</span>
|
</span>
|
||||||
|
<span class="d-inline-block" x-text="product.price + ' Credits'"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-primary"
|
|
||||||
|
<button type="button" class="mt-2 btn btn-primary"
|
||||||
:disabled="product.minimum_credits > user.credits">Create Server</button>
|
:disabled="product.minimum_credits > user.credits">Create Server</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
<!-- END FORM -->
|
<!-- END FORM -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
Loading…
Reference in a new issue