beenull/ctrlpanel
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

style: 💄 Styling & added price to cards

Browse source
This commit is contained in:
IceToast 2021-11-25 22:21:06 +01:00
parent 08a26004c3
commit e07ad87ea9
1 changed files with 50 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
resources/views/servers/create.blade.php
View file

@ -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') }}
@ -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>
</li>
<li class="d-flex justify-content-between">
<div>
<i class="fas fa-hdd"></i>
<span class="d-inline-block">
{{ __('Disk') }}
</span>
</div> </div>
<div class="d-flex justify-content-between">
<span class="d-inline-block">{{ __('Disk') }}</span>
<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,28 +222,20 @@
</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> <button type="button" class="mt-2 btn btn-primary"
</div>
<button type="button" class="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>
</div>
</template> </template>
</div> </div>
</div> </div>