style: 💄 checkout payment method list

package-lock.json

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

package.json

@@ -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",

public/build/assets/app-0fd5dfcd.js

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

public/build/manifest.json

@@ -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",
+    "file": "assets/app-26e8174e.css",
-    "src": "themes/default/sass/app.scss",
+    "isEntry": true,
-    "isEntry": true
+    "src": "themes/default/sass/app.scss"
   }
 }

themes/default/sass/app.scss

@@ -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;
+}

themes/default/views/layouts/main.blade.php

@@ -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>
 

themes/default/views/store/checkout.blade.php

@@ -79,22 +79,18 @@
                                 <div class="col-6">
                                     @if (!$productIsFree)
                                         <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)
-                                                <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>
                                             @endforeach
                                         </div>

themes/default/vite.config.js

@@ -2,19 +2,12 @@ import { defineConfig } from "vite";
 import laravel from "laravel-vite-plugin";
 import path from "path";
 
-
-
 export default defineConfig({
     plugins: [
         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",
         }),
-        
-        
         {
             name: "blade",
             handleHotUpdate({ file, server }) {
@@ -29,9 +22,8 @@ export default defineConfig({
     ],
     resolve: {
         alias: {
-            '@': '/themes/default/js',
+            "@": "/themes/default/js",
-            '~bootstrap': path.resolve('node_modules/bootstrap'),
+            "~bootstrap": path.resolve("node_modules/bootstrap"),
-        }
+        },
     },
-    
 });