style: 💄 checkout payment method list
This commit is contained in:
parent
5b44df24ab
commit
11a12bb48b
2
package-lock.json
generated
2
package-lock.json
generated
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "controlpanel",
|
"name": "controllpanelgg",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
|
|
|
@ -2,7 +2,9 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"development": "vite",
|
"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": {
|
"devDependencies": {
|
||||||
"axios": "^0.25",
|
"axios": "^0.25",
|
||||||
|
|
1
public/build/assets/app-0fd5dfcd.js
vendored
Normal file
1
public/build/assets/app-0fd5dfcd.js
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
require("./adminlte");require("./slim.kickstart.min");require("./bootstrap");
|
File diff suppressed because one or more lines are too long
|
@ -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": {
|
"themes/default/sass/app.scss": {
|
||||||
"file": "assets/app-bac23d88.css",
|
"file": "assets/app-26e8174e.css",
|
||||||
"src": "themes/default/sass/app.scss",
|
"isEntry": true,
|
||||||
"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 |
64
themes/default/sass/app.scss
vendored
64
themes/default/sass/app.scss
vendored
|
@ -5,3 +5,67 @@
|
||||||
@import "../css/stylesheet.css";
|
@import "../css/stylesheet.css";
|
||||||
@import "../css/adminlte.min.css";
|
@import "../css/adminlte.min.css";
|
||||||
@import "../css/slim.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;
|
||||||
|
}
|
||||||
|
|
|
@ -40,7 +40,7 @@
|
||||||
</noscript>
|
</noscript>
|
||||||
<script src="{{ asset('js/app.js') }}"></script>
|
<script src="{{ asset('js/app.js') }}"></script>
|
||||||
<!-- tinymce -->
|
<!-- 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')
|
@vite('themes/default/sass/app.scss')
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
@ -79,22 +79,18 @@
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
@if (!$productIsFree)
|
@if (!$productIsFree)
|
||||||
<p class="lead">{{ __('Payment Methods') }}:</p>
|
<p class="lead">{{ __('Payment Methods') }}:</p>
|
||||||
|
<div class="rounded pl-3 py-2 gateway-container" style="max-width: 50%;">
|
||||||
<div class="d-flex flex-wrap flex-direction-row">
|
|
||||||
|
|
||||||
@foreach ($paymentGateways as $gateway)
|
@foreach ($paymentGateways as $gateway)
|
||||||
<div class="ml-2">
|
<div class="row ">
|
||||||
<span data-toggle="popover" data-trigger="hover" data-placement="bottom"
|
<div class="col-sm-10 checkout-gateway-label">
|
||||||
data-content="{{ $gateway->name }}"> <label class="text-center"
|
<label for="{{ $gateway->name }}">
|
||||||
for="{{ $gateway->name }}">
|
<img height="40" src="{{ $gateway->image }}"></label>
|
||||||
<img class="mb-3" height="50" src="{{ $gateway->image }}">
|
</div>
|
||||||
</br>
|
<div class="col-sm-2 checkout-gateway-radio">
|
||||||
<input x-on:click="console.log(payment_method)"
|
<input class="checkout-gateway-radio-input" x-model="payment_method"
|
||||||
x-model="payment_method" type="radio"
|
type="radio" id="{{ $gateway->name }}"
|
||||||
id="{{ $gateway->name }}" value="{{ $gateway->name }}">
|
value="{{ $gateway->name }}">
|
||||||
</input>
|
</div>
|
||||||
</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
|
|
16
themes/default/vite.config.js
vendored
16
themes/default/vite.config.js
vendored
|
@ -2,19 +2,12 @@ import { defineConfig } from "vite";
|
||||||
import laravel from "laravel-vite-plugin";
|
import laravel from "laravel-vite-plugin";
|
||||||
import path from "path";
|
import path from "path";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
laravel({
|
laravel({
|
||||||
input: [
|
input: ["themes/default/sass/app.scss", "themes/default/js/app.js"],
|
||||||
"themes/default/sass/app.scss",
|
|
||||||
"themes/default/js/app.js"
|
|
||||||
],
|
|
||||||
buildDirectory: "build",
|
buildDirectory: "build",
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "blade",
|
name: "blade",
|
||||||
handleHotUpdate({ file, server }) {
|
handleHotUpdate({ file, server }) {
|
||||||
|
@ -29,9 +22,8 @@ export default defineConfig({
|
||||||
],
|
],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': '/themes/default/js',
|
"@": "/themes/default/js",
|
||||||
'~bootstrap': path.resolve('node_modules/bootstrap'),
|
"~bootstrap": path.resolve("node_modules/bootstrap"),
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue