style: 💄 checkout payment method list

This commit is contained in:
IceToast 2023-03-27 23:59:24 +02:00 committed by IceToast
parent 5b44df24ab
commit 11a12bb48b
12 changed files with 94 additions and 34 deletions

2
package-lock.json generated
View file

@ -1,5 +1,5 @@
{
"name": "controlpanel",
"name": "controllpanelgg",
"lockfileVersion": 2,
"requires": true,
"packages": {

View file

@ -2,7 +2,9 @@
"private": true,
"scripts": {
"development": "vite",
"production": "vite build"
"production": "vite build",
"dev:default": "vite --config themes/default/vite.config.js",
"build:default": "vite build --config themes/default/vite.config.js"
},
"devDependencies": {
"axios": "^0.25",

1
public/build/assets/app-0fd5dfcd.js vendored Normal file
View file

@ -0,0 +1 @@
require("./adminlte");require("./slim.kickstart.min");require("./bootstrap");

File diff suppressed because one or more lines are too long

View file

@ -1,7 +1,12 @@
{
"themes/default/js/app.js": {
"file": "assets/app-0fd5dfcd.js",
"isEntry": true,
"src": "themes/default/js/app.js"
},
"themes/default/sass/app.scss": {
"file": "assets/app-bac23d88.css",
"src": "themes/default/sass/app.scss",
"isEntry": true
"file": "assets/app-26e8174e.css",
"isEntry": true,
"src": "themes/default/sass/app.scss"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 52 KiB

View file

@ -5,3 +5,67 @@
@import "../css/stylesheet.css";
@import "../css/adminlte.min.css";
@import "../css/slim.min.css";
.gateway-container {
background-color: #ffffff;
}
.checkout-gateway-radio {
// make the radio button clickable
cursor: pointer;
// center the radio button
display: flex;
justify-content: center;
align-items: center;
}
.checkout-gateway-radio-input {
// make radio button square and show a checkmark instead of a circle when selected
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border: 1px solid #d2d6de;
height: 20px;
width: 20px;
border-radius: 4px;
position: relative;
cursor: pointer;
outline: none;
// center the thing
margin: 0 auto;
&:checked {
background-color: #fff;
border: 1px solid #d2d6de;
height: 20px;
width: 20px;
border-radius: 0;
position: relative;
cursor: pointer;
outline: none;
&:after {
content: "";
position: absolute;
top: 0px;
left: 7px;
width: 5px;
height: 16px;
border: solid #3d6efe;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
}
.checkout-gateway-label {
// make the label clickable
cursor: pointer;
// center the label
display: flex;
justify-content: start;
align-items: center;
margin: 2px 0;
}

View file

@ -40,7 +40,7 @@
</noscript>
<script src="{{ asset('js/app.js') }}"></script>
<!-- tinymce -->
<script src={{ asset('plugins/tinymce/js/tinymce/tinymce.min.js') }}></script>
<script src="{{ asset('plugins/tinymce/js/tinymce/tinymce.min.js') }}"></script>
@vite('themes/default/sass/app.scss')
</head>

View file

@ -79,22 +79,18 @@
<div class="col-6">
@if (!$productIsFree)
<p class="lead">{{ __('Payment Methods') }}:</p>
<div class="d-flex flex-wrap flex-direction-row">
<div class="rounded pl-3 py-2 gateway-container" style="max-width: 50%;">
@foreach ($paymentGateways as $gateway)
<div class="ml-2">
<span data-toggle="popover" data-trigger="hover" data-placement="bottom"
data-content="{{ $gateway->name }}"> <label class="text-center"
for="{{ $gateway->name }}">
<img class="mb-3" height="50" src="{{ $gateway->image }}">
</br>
<input x-on:click="console.log(payment_method)"
x-model="payment_method" type="radio"
id="{{ $gateway->name }}" value="{{ $gateway->name }}">
</input>
</label>
</span>
<div class="row ">
<div class="col-sm-10 checkout-gateway-label">
<label for="{{ $gateway->name }}">
<img height="40" src="{{ $gateway->image }}"></label>
</div>
<div class="col-sm-2 checkout-gateway-radio">
<input class="checkout-gateway-radio-input" x-model="payment_method"
type="radio" id="{{ $gateway->name }}"
value="{{ $gateway->name }}">
</div>
</div>
@endforeach
</div>

View file

@ -2,19 +2,12 @@ import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";
export default defineConfig({
plugins: [
laravel({
input: [
"themes/default/sass/app.scss",
"themes/default/js/app.js"
],
input: ["themes/default/sass/app.scss", "themes/default/js/app.js"],
buildDirectory: "build",
}),
{
name: "blade",
handleHotUpdate({ file, server }) {
@ -29,9 +22,8 @@ export default defineConfig({
],
resolve: {
alias: {
'@': '/themes/default/js',
'~bootstrap': path.resolve('node_modules/bootstrap'),
}
"@": "/themes/default/js",
"~bootstrap": path.resolve("node_modules/bootstrap"),
},
},
});