added modern slider theme

added submenu expandable to homayon-menu repsonosive

README-fa.md

@@ -18,7 +18,6 @@
 - کاهش سایز پروژه
 - UI/UX شخصی‌سازی شده
 - دوستانه تر شدن محیط توسعه
-- شخصی سازی قالب وبسایت
 
 ## مستندات 
 

README.md

@@ -17,7 +17,6 @@
 - Project size compression
 - UI/UX is more specific
 - Developer Friendlier
-- Custom theme design 
 
 
 ## Documentation

app/Console/Commands/clientAssetGenerator.php

@@ -32,8 +32,8 @@ class clientAssetGenerator extends Command
 
         $vars['xshop-background'] = $gfxes['background'] ?? '#000000';
         $vars['xshop-primary'] = $gfxes['primary'] ?? '#6e0000';
-        $vars['xshop-diff'] = getGrayscaleTextColor($gfxes['primary']) ?? '#6e0000';
-        $vars['xshop-diff2'] = getGrayscaleTextColor($gfxes['secondary']) ?? '#6e0000';
+        $vars['xshop-diff'] =  getGrayscaleTextColor($gfxes['primary']) ?? '#6e0000';
+        $vars['xshop-diff2'] =  getGrayscaleTextColor($gfxes['secondary']) ?? '#6e0000';
         $vars['xshop-secondary'] = $gfxes['secondary'] ?? '#ff0000';
         $vars['xshop-text'] = $gfxes['text'] ?? '#111111';
         $vars['xshop-border-radius'] = $gfxes['border-radius'] ?? '7px';
@@ -43,23 +43,21 @@ class clientAssetGenerator extends Command
         // prepare client.scss and add gfx variable
         $js = "// PLEASE DO NOT EDIT THIS FILE, \n// IF YOU WANT ADD ANY CODE CREATE NEW JS INTO client-custom \n import axios from 'axios'; \n window.axios = axios; \n \n window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';" . PHP_EOL;
         $variables = "// PLEASE DO NOT EDIT THIS FILE, \n// IF YOU WANT ADD ANY CODE CREATE NEW SCSS INTO client-custom" . PHP_EOL;
-        $appVariables = '';
         foreach ($vars as $k => $var) {
-            $appVariables .= '$' . "$k:$var;" . PHP_EOL;
+            $variables .= '$'."$k:$var;" . PHP_EOL;
         }
-        $appVariables .= ":root{" . PHP_EOL;
+        $variables .= ":root{" . PHP_EOL;
         foreach ($vars as $k => $var) {
-            $appVariables .= "--$k:$var;" . PHP_EOL;
+            $variables .= "--$k:$var;" . PHP_EOL;
         }
-        $appVariables .= "}" . PHP_EOL . PHP_EOL;
+        $variables .= "}" . PHP_EOL . PHP_EOL;
 
-        file_put_contents(resource_path() . '/sass/client-custom/_app_variables.scss', $appVariables);
         // add custom scss and js
         $files = File::allFiles(resource_path() . '/sass/client-custom');
 
         foreach ($files as $file) {
             if ($file->getType() == 'file' && $file->getExtension() == 'scss') {
-                $variables .= '@use "client-custom/' .
+                $variables .= '@import "client-custom/' .
                     substr(trim($file->getBasename(), '_'), 0, -5)
                     . '";' . PHP_EOL;
             }
@@ -76,28 +74,18 @@ class clientAssetGenerator extends Command
         }
         // add parts scss & js
         foreach (Part::distinct()->get() as $part) {
-            if (filesize(__DIR__ . '/../../../resources/views/segments/' . $part->segment . '/' . $part->part . '/' . $part->part . '.scss') > 10) {
-                $variables .= '@use "../views/segments/' . $part->segment . '/'
+            if (filesize(__DIR__.'/../../../resources/views/segments/' . $part->segment . '/' . $part->part .'/' . $part->part . '.scss' ) > 10) {
+                $variables .= '@import "../views/segments/' . $part->segment . '/'
                     . $part->part . '/' . $part->part . '";' . PHP_EOL;
             }
-            if (filesize(__DIR__ . '/../../../resources/views/segments/' . $part->segment . '/' . $part->part . '/' . $part->part . '.js') > 10) {
+            if (filesize(__DIR__.'/../../../resources/views/segments/' . $part->segment . '/' . $part->part .'/' . $part->part . '.js' ) > 10){
                 $js .= 'import "../views/segments/' . $part->segment . '/'
                     . $part->part . '/' . $part->part . '.js";' . PHP_EOL;
             }
         }
 
         // save scss
-        file_put_contents(resource_path() . '/sass/client.scss', $this->removeDuplicateLines($variables));
-        file_put_contents(resource_path() . '/js/client.js', $this->removeDuplicateLines( $js ));
-    }
-
-
-    // remove duplicate lines
-    private function removeDuplicateLines($text)
-    {
-        $lines = explode("\n", $text);
-        $uniqueLines = array_unique($lines);
-        $uniqueText = implode("\n", $uniqueLines);
-        return $uniqueText;
+        file_put_contents(resource_path() . '/sass/client.scss', $variables);
+        file_put_contents(resource_path() . '/js/client.js', $js);
     }
 }

app/Console/Commands/makePart.php

@@ -82,7 +82,7 @@ DOC;
         file_put_contents($folderPath . '/' . $part . '.json', json_encode($detail,JSON_PRETTY_PRINT));
         file_put_contents($folderPath . '/' . ucfirst($part) . '.php', $handler);
         file_put_contents($folderPath . '/' . $part . '.scss', $scss);
-        File::copy(__DIR__.'/data/screen.webp',$folderPath .'/screenshot.webp');
+        File::copy(__DIR__.'/data/screen.png',$folderPath .'/screenshot.png');
 
 
 

app/Http/Controllers/Admin/AreaController.php

@@ -100,7 +100,7 @@ class AreaController extends Controller
      */
     public function image($segment, $part)
     {
-        return response()->file(resource_path() . '/views/segments/' . $segment . '/' . $part . '/screenshot.webp', ['Content-Type' => 'image/png']);
+        return response()->file(resource_path() . '/views/segments/' . $segment . '/' . $part . '/screenshot.png', ['Content-Type' => 'image/png']);
     }
 
     public function update(Request $request, Area $area)

package.json

@@ -14,8 +14,7 @@
         "laravel-vite-plugin": "^1.0",
         "sass": "^1.56.1",
         "vite": "^5.0",
-        "vue": "^3.2.37",
-        "path": "^0.12.7"
+        "vue": "^3.2.37"
     },
     "dependencies": {
         "bs5-lightbox": "^1.8.3",

resources/js/app.js

@@ -19,7 +19,7 @@ import ToastPlugin from 'vue-toast-notification';
 import {useToast} from 'vue-toast-notification';
 import store from "./components/libs/store.js";
 import chartjs from 'chart.js/auto';
-// import './panel/raw.js';
+import './panel/raw.js';
 import './panel/navbar.js';
 import './panel/list-checkboxs.js';
 import './panel/general-events.js';

resources/js/client-custom/customerActions.js

@@ -5,7 +5,7 @@ window.addEventListener('load', function () {
     document.querySelectorAll('.fav-btn')?.forEach(function (el) {
         el.addEventListener('click', async function () {
             let resp = await axios.get(favUrl+this.getAttribute('data-slug'));
-            if (resp.data.OK){
+            if (resp.data.success){
                 this.setAttribute('data-is-fav',resp.data.data);
                 window.$toast.success(resp.data.message);
             }else {
@@ -16,7 +16,7 @@ window.addEventListener('load', function () {
     document.querySelectorAll('.compare-btn')?.forEach(function (el) {
         el.addEventListener('click', async function () {
             let resp = await axios.get(compUrl+this.getAttribute('data-slug'));
-            if (resp.data.OK){
+            if (resp.data.success){
                 window.$toast.success(resp.data.message);
             }else {
                 window.$toast.error("Error!");
@@ -28,7 +28,7 @@ window.addEventListener('load', function () {
         el.addEventListener('click', async function (e) {
             e.preventDefault();
             let resp = await axios.get(this.getAttribute('href'));
-            if (resp.data.OK){
+            if (resp.data.success){
                 window.$toast.success(resp.data.message);
                 document.querySelectorAll('.card-count')?.forEach(function (el2) {
                    el2.innerText = resp.data.data.count;

resources/js/client-vue/vueDateTimePickerClient.vue

@@ -918,6 +918,7 @@ export default {
 
 #dp-modal {
     position: fixed;
+//display: none; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background: #00000033; backdrop-filter: blur(4px);
 }
 
 #picker {

resources/js/components/FontAwesomeIconPicker.vue

@@ -2574,6 +2574,7 @@ export default {
 }
 
 #icon-dropdown{
+    //display: block;
     min-height: 45px;
     padding-right: 2rem;
     padding-left: 2rem;

resources/js/components/MetaInput.vue

@@ -353,6 +353,7 @@ export default {
     background: #00000033;
     backdrop-filter: blur(5px);
     z-index: 10;
+    //display: none;
 }
 
 .img-index{

resources/js/components/RemixIconPicker.vue

@@ -2695,6 +2695,7 @@ export default {
 }
 
 #icon-dropdown{
+    //display: block;
     min-height: 45px;
     padding-right: 2rem;
     padding-left: 2rem;

resources/js/components/vueDateRangePicker.vue

@@ -943,6 +943,7 @@ export default {
 
 #dp-modal {
     position: fixed;
+//display: none; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background: #00000033; backdrop-filter: blur(4px);
 }
 
 #picker {

resources/js/components/vueDateTimePicker.vue

@@ -918,6 +918,7 @@ export default {
 
 #dp-modal {
     position: fixed;
+//display: none; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background: #00000033; backdrop-filter: blur(4px);
 }
 
 #picker {

resources/js/components/vueJalaliCalendar.vue

@@ -23,8 +23,6 @@
                 </div>
             </div>
             <table id="vue-cal-table">
-                <thead>
-
                 <tr>
                     <th @click="selectByWeekDay(0)">
                         {{ __("Saturday") }}
@@ -48,10 +46,6 @@
                         {{ __("Friday") }}
                     </th>
                 </tr>
-                </thead>
-                <tbody>
-
-
                 <tr v-for="(tr,i) in monthArray">
                     <td v-for="(td,j) in tr" @mouseenter="hover" @click="selecting(td)" :class="getClass(td)" :title="td.date+' '+td.pDate"
                         :data-timpstamp="td.unixTimeStamp">
@@ -61,7 +55,6 @@
                         </template>
                     </td>
                 </tr>
-                </tbody>
             </table>
             <input type="hidden" :value="JSON.stringify(selected)" :name="inputName">
         </div>

resources/sass/app.scss

@@ -1,18 +1,9 @@
-@use "sass:color";
 // Fonts
-@use 'vazirmatn/Vazirmatn-font-face.css';
-@use "remixicon/fonts/remixicon.css";
-@use "vue-toast-notification/dist/theme-bootstrap.css";
+@import 'vazirmatn/Vazirmatn-font-face.css';
+@import "remixicon/fonts/remixicon.css";
+@import "vue-toast-notification/dist/theme-bootstrap.css";
 // Variables
-@use 'panel/variables';
-
-@use "panel/common";
-@use "panel/raw";
-@use "panel/fix";
-@use "panel/navbar";
-@use "panel/breadcrumbs";
-@use "panel/item-list";
-@use "panel/steps";
+@import 'panel/variables';
 
 // Bootstrap
 //@import 'bootstrap/scss/bootstrap';
@@ -62,7 +53,7 @@ a{
 
     >aside{
         background-image: url("../images/pattern.png");
-        background-color: color.adjust(variables.$body-bg, $lightness: 7%);
+        background-color: lighten($body-bg,7);
         position: relative;
     }
     &.sided{
@@ -74,3 +65,10 @@ a{
 }
 
 
+@import "panel/common";
+@import "panel/raw";
+@import "panel/fix";
+@import "panel/navbar";
+@import "panel/breadcrumbs";
+@import "panel/item-list";
+@import "panel/steps";

resources/sass/client-custom/.gitignore

@@ -1 +0,0 @@
-_app_variables.scss

resources/sass/client-custom/_app_variables.scss

@@ -1,19 +0,0 @@
-$xshop-background:#eeeeee;
-$xshop-primary:#03b2b5;
-$xshop-diff:#ffffff;
-$xshop-diff2:#ffffff;
-$xshop-secondary:#0064c2;
-$xshop-text:#111111;
-$xshop-border-radius:7px;
-$xshop-shadow:2px 2px 4px #777777;
-:root{
---xshop-background:#eeeeee;
---xshop-primary:#03b2b5;
---xshop-diff:#ffffff;
---xshop-diff2:#ffffff;
---xshop-secondary:#0064c2;
---xshop-text:#111111;
---xshop-border-radius:7px;
---xshop-shadow:2px 2px 4px #777777;
-}
-

resources/sass/client-custom/_assetsNode.scss

@@ -1,5 +1,5 @@
-@use "remixicon/fonts/remixicon.css";
-@use "tiny-slider/dist/tiny-slider.css";
-@use "vue-toast-notification/dist/theme-bootstrap.css";
-@use "vazir-xui/font-face.css";
-@use "vazirmatn/Vazirmatn-font-face.css";
+@import "remixicon/fonts/remixicon.css";
+@import "tiny-slider/dist/tiny-slider.css";
+@import "vue-toast-notification/dist/theme-bootstrap.css";
+@import "vazir-xui/font-face.css";
+@import "vazirmatn/Vazirmatn-font-face.css";

resources/sass/panel/_common.scss

@@ -1,14 +1,12 @@
-@use "sass:color";
-@use "variables";
 body {
-    background: variables.$body-bg;
+    background: $body-bg;
 }
 
 .circle-btn {
     width: 75px;
     height: 75px;
     border-radius: 50%;
-    background: variables.$secondary-color-panel;
+    background: $secondary-color-panel;
     backdrop-filter: blur(4px);
     border: 0;
     box-shadow: 0px 3px 5px #11111177, inset 0 0 0 0 darkred;
@@ -58,7 +56,7 @@ a.btn, a.action-btn, a.circle-btn {
 }
 
 .general-form {
-    background: variables.$lighter-color;
+    background: $lighter-color;
     border-radius: 7px;
     margin-bottom: 4rem;
     position: relative;
@@ -157,11 +155,11 @@ a.btn, a.action-btn, a.circle-btn {
         color: white;
 
         &.active {
-            background: variables.$primary-color-panel;
+            background: $primary-color-panel;
         }
 
         &:hover {
-            background: rgba(variables.$primary-color-panel, .7);
+            background: rgba($primary-color-panel, .7);
         }
     }
 }
@@ -169,7 +167,7 @@ a.btn, a.action-btn, a.circle-btn {
 #setting-sections {
     section {
         display: none;
-        background: variables.$lighter-color;
+        background: $lighter-color;
         padding: 1rem;
 
         .setting-field {
@@ -208,10 +206,10 @@ a.btn, a.action-btn, a.circle-btn {
     height: 125px;
     text-align: center;
     display: block;
-    color: variables.$text-muted;
+    color: $text-muted;
 
     &:hover {
-        color:  color.adjust(variables.$primary-color-panel, $lightness: 7%);
+        color: lighten($primary-color-panel, 10);
     }
 
     i {
@@ -226,12 +224,12 @@ a.btn, a.action-btn, a.circle-btn {
 }
 
 .avatar-x64 {
-    background: variables.$body-bg;
+    background: $body-bg;
     width: 64px;
     height: 64px;
     border-radius: 50%;
     object-fit: cover;
-    border: 3px rgba(variables.$primary-color-panel, 127) solid;
+    border: 3px rgba($primary-color-panel, 127) solid;
 }
 
 .skewed-container {
@@ -255,7 +253,7 @@ a.btn, a.action-btn, a.circle-btn {
 
     .card-header {
         background: #ffffff22 !important;
-        color: variables.$secondary-color-panel;
+        color: $secondary-color-panel;
     }
 
     .card-body {
@@ -277,7 +275,7 @@ a.btn, a.action-btn, a.circle-btn {
 
     .card-header {
         background: #ffffff22 !important;
-        color: variables.$secondary-color-panel;
+        color: $secondary-color-panel;
     }
 
     .card-body {
@@ -321,7 +319,7 @@ a.btn, a.action-btn, a.circle-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    color:  color.adjust(variables.$primary-color-panel, $lightness: 15%);
+    color: lighten($primary-color-panel, 15);
 
     .loader {
         position: relative;
@@ -556,7 +554,7 @@ a.btn, a.action-btn, a.circle-btn {
     bottom: -50vh;
     left: 1rem;
     right: 1rem;
-    background: variables.$lighter-color;
+    background: $lighter-color;
     height: 40vh;
     border-radius: 7px 7px 0 0;
     border: 1px solid #aaaaaa55;

resources/sass/panel/_fix.scss

@@ -1,4 +1,3 @@
-@use "variables";
 .form-control:focus,.form-check-input:focus{
     box-shadow: 0 0 0 0.25rem rgba(133, 13, 253, 0.25);
 border-color: #bc86fe;
@@ -8,7 +7,7 @@ border-color: #bc86fe;
 
     .card{
         background-color: rgba(var(--bs-body-bg),.5);
-        background-image: url("$resImage/pattern.png");
+        background-image: url("../../images/pattern.png");
         backdrop-filter: blur(4px);
         box-shadow: -2px -2px 7px #560000, 2px 2px 7px #5e00b5;
     }
@@ -16,7 +15,7 @@ border-color: #bc86fe;
 
 main{
     .card{
-        background-color: variables.$lighter-color;
+        background-color: $lighter-color;
         border: 0;
         .card-header{
             background: #00000011;

resources/sass/panel/_item-list.scss

@@ -1,8 +1,6 @@
-@use "sass:color";
-@use "variables";
 .item-list {
     overflow: hidden;
-    background: variables.$lighter-color;
+    background: $lighter-color;
     //margin: 0 1rem;
     border-radius: 4px;
 
@@ -76,7 +74,7 @@
                 border-radius: 3px;
             }
              input:checked + label{
-                background: color.adjust(variables.$primary-color-panel, $lightness: 10%)
+                background: lighten($primary-color-panel,10);
             }
             input{
                 display: none;

resources/sass/panel/_navbar.scss

@@ -1,4 +1,3 @@
-@use "variables";
 #panel-navbar {
     height: 100%;
     overflow-y: auto;
@@ -39,7 +38,7 @@
             color: white;
 
             &:hover {
-                color: variables.$secondary-color-panel;
+                color: $secondary-color-panel;
             }
         }
     }

resources/sass/panel/_steps.scss

@@ -1,5 +1,3 @@
-@use "variables";
-@use "sass:color";
 .steps {
 
 
@@ -27,14 +25,14 @@
         top: 50%;
         inset-inline-start: 0;
         inset-inline-end: calc(100% - var(--progress));
-        border-bottom: 1px solid color.adjust(variables.$primary-color-panel, $lightness: 20%);
+        border-bottom: 1px solid lighten($primary-color-panel,20);
         transition: all 0.3s ease-in-out;
     }
 
     li {
         position: relative;
         z-index: 2;
-        background: variables.$lighter-color;
+        background: $lighter-color;
         cursor: pointer;
         border: 1px solid #ccc;
         border-radius: 50%;
@@ -49,8 +47,8 @@
         }
 
         &.active {
-            border-color: color.adjust(variables.$primary-color-panel, $lightness: 20%);
-            background-color: variables.$primary-color-panel;
+            border-color: lighten($primary-color-panel,20);
+            background-color: $primary-color-panel;
         }
     }
 }
@@ -88,11 +86,11 @@
     justify-content: center;
 
     &:hover {
-        border-color: variables.$primary-color-panel;
+        border-color: $primary-color-panel;
     }
 }
 #upload-drag-drop.active {
-    border-color: variables.$primary-color-panel;
+    border-color: $primary-color-panel;
 }
 
 .img-preview{
@@ -107,7 +105,7 @@
 
 
 .indexed{
-    background: variables.$primary-color-panel;
+    background: $primary-color-panel;
 }
 
 #upload-image-select{

resources/views/components/assets.blade.php

@@ -4,7 +4,12 @@
     <link rel="stylesheet" href="{{asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css')}}">
 @endif
 
+@if(config('app.debug') && !config('app.deployed'))
     <!-- Scripts -->
-    @vite(['resources/sass/app.scss', 'resources/js/app.js', 'resources/js/panel/raw.js'])
+    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
+@else
+    <link rel="stylesheet" href="{{asset('build/assets/app-B_xQQxAx.css')}}">
+    <script src="{{asset('build/assets/app-1AxZ3O2-.js')}}" defer type="module"></script>
+@endif
 
 <script src="{{asset('assets/vendor/editor/ckeditor.js')}}"></script>

resources/views/segments/clips_page/ClipListGrid/ClipListGrid.scss

@@ -1,5 +1,3 @@
-@use "../../../../sass/client-custom/app_variables";
-
 .ClipListGrid {
     .container,.container-fluid{
         overflow: hidden;
@@ -35,7 +33,7 @@
             display: flex;
             position: absolute;
             z-index: 2;
-            background: rgba(app_variables.$xshop-diff, .7);
+            background: rgba($xshop-diff, .7);
             padding: 7px;
             bottom: 0;
             left: 0;