style: 💄 checkout payment method list
This commit is contained in:
parent
5b44df24ab
commit
11a12bb48b
12 changed files with 94 additions and 34 deletions
2
package-lock.json
generated
2
package-lock.json
generated
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "controlpanel",
|
||||
"name": "controllpanelgg",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
|
|
@ -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
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": {
|
||||
"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 |
64
themes/default/sass/app.scss
vendored
64
themes/default/sass/app.scss
vendored
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
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 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"),
|
||||
},
|
||||
},
|
||||
|
||||
});
|
||||
|
|
Loading…
Add table
Reference in a new issue