added theme controller

optimized website gtmetrix [removed inline styles]
master
A1Gard 2 months ago
parent 0d026213a6
commit 77925f51c3

@ -0,0 +1,29 @@
<?php
namespace App\Http\Controllers;
use App\Models\Setting;
use Illuminate\Http\Request;
class ThemeController extends Controller
{
//
public function cssVariables()
{
$response = 'main{';
foreach (Setting::where('section', 'Theme')->whereNotNull('data')
->get(['value', 'data']) as $color) {
$data = json_decode($color->data);
if ($data->name) {
$response .= '--' . $data->name . ':' . $color->value;
if (isset($data->suffix)) {
$response .= $data->suffix;
}
$response .= ';';
}
}
$response .= '}';
return response($response)->header('Content-Type', 'text/css; charset=utf-8');
}
}

@ -1,4 +1,4 @@
<section class='GradientTextLink py-4' style="--deg: {{getSetting($data->area->name.'_'.$data->part.'_deg')}}deg"> <section class='GradientTextLink py-4'>
<div class="{{gfx()['container']}} py-4 text-center"> <div class="{{gfx()['container']}} py-4 text-center">
<h1> <h1>
{{getSetting($data->area->name.'_'.$data->part.'_title')}} {{getSetting($data->area->name.'_'.$data->part.'_title')}}

@ -11,50 +11,52 @@ class GradientTextLink
{ {
$setting = new Setting(); $setting = new Setting();
$setting->section = 'theme'; $setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_title'; $setting->key = $part->area->name . '_' . $part->part . '_title';
$setting->value = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquid aspernatur, commodi corporis cupiditate'; $setting->value = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquid aspernatur, commodi corporis cupiditate';
$setting->type = 'TEXT'; $setting->type = 'TEXT';
$setting->size = 12; $setting->size = 12;
$setting->title = $part->area->name . ' ' . $part->part .' title'; $setting->title = $part->area->name . ' ' . $part->part . ' title';
$setting->save(); $setting->save();
$setting = new Setting(); $setting = new Setting();
$setting->section = 'theme'; $setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_btn'; $setting->key = $part->area->name . '_' . $part->part . '_btn';
$setting->value = 'Shop'; $setting->value = 'Shop';
$setting->type = 'TEXT'; $setting->type = 'TEXT';
$setting->size = 4; $setting->size = 4;
$setting->title = $part->area->name . ' ' . $part->part .' button text'; $setting->title = $part->area->name . ' ' . $part->part . ' button text';
$setting->save(); $setting->save();
$setting = new Setting(); $setting = new Setting();
$setting->section = 'theme'; $setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_link'; $setting->key = $part->area->name . '_' . $part->part . '_link';
$setting->value = config('app.url'); $setting->value = config('app.url');
$setting->type = 'TEXT'; $setting->type = 'TEXT';
$setting->ltr = true; $setting->ltr = true;
$setting->size = 4; $setting->size = 4;
$setting->title = $part->area->name . ' ' . $part->part .' button link'; $setting->title = $part->area->name . ' ' . $part->part . ' button link';
$setting->save(); $setting->save();
$setting = new Setting(); $setting = new Setting();
$setting->section = 'theme'; $setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_deg'; $setting->key = $part->area->name . '_' . $part->part . '_deg';
$setting->value = 45; $setting->value = 45;
$setting->size = 4; $setting->size = 4;
$setting->type = 'NUMBER'; $setting->type = 'NUMBER';
$setting->data = json_encode(['xmin' => 0, 'xmax' => 360]); $setting->data = json_encode(['xmin' => 0, 'xmax' => 360, 'name' => 'gradient-text-link-deg', 'suffix' => 'deg']);
$setting->title = $part->area->name . ' ' . $part->part. ' degree'; $setting->title = $part->area->name . ' ' . $part->part . ' degree';
$setting->save(); $setting->save();
} }
public static function onRemove(Part $part = null) public static function onRemove(Part $part = null)
{ {
Setting::where('key',$part->area->name . '_' . $part->part.'_btn')->first()?->delete(); Setting::where('key', $part->area->name . '_' . $part->part . '_btn')->first()?->delete();
Setting::where('key',$part->area->name . '_' . $part->part.'_title')->first()?->delete(); Setting::where('key', $part->area->name . '_' . $part->part . '_title')->first()?->delete();
Setting::where('key',$part->area->name . '_' . $part->part.'_link')->first()?->delete(); Setting::where('key', $part->area->name . '_' . $part->part . '_link')->first()?->delete();
Setting::where('key',$part->area->name . '_' . $part->part.'_deg')->first()?->delete(); Setting::where('key', $part->area->name . '_' . $part->part . '_deg')->first()?->delete();
} }
public static function onMount(Part $part = null) public static function onMount(Part $part = null)
{ {
return $part; return $part;

@ -1,6 +1,6 @@
.GradientTextLink { .GradientTextLink {
// scss // scss
background: linear-gradient( var(--deg), var(--xshop-primary), var(--xshop-secondary) 100%); background: linear-gradient( var(--gradient-text-link-deg), var(--xshop-primary), var(--xshop-secondary) 100%);
color: var(--xshop-diff); color: var(--xshop-diff);
h1{ h1{

@ -1,4 +1,4 @@
<nav id='SideMenu' style="---side-bg: {{getSetting($data->area->name.'_'.$data->part.'_bg')}};"> <nav id='SideMenu'>
<div class="text-center py-3" id="side-menu-logo"> <div class="text-center py-3" id="side-menu-logo">
<a href="{{url('/')}}"> <a href="{{url('/')}}">
<img src="{{asset('upload/images/logo.svg')}}" alt=""> <img src="{{asset('upload/images/logo.svg')}}" alt="">

@ -36,6 +36,7 @@ class SideMenu
$setting->value = '#ececec'; $setting->value = '#ececec';
$setting->type = 'COLOR'; $setting->type = 'COLOR';
$setting->size = 3; $setting->size = 3;
$setting->data = json_encode(['name' => 'side-menu-bg-color']);
$setting->title = $part->area->name . ' ' . $part->part .' background'; $setting->title = $part->area->name . ' ' . $part->part .' background';
$setting->save(); $setting->save();
} }
@ -43,7 +44,7 @@ class SideMenu
{ {
Setting::where('key',$part->area->name . '_' . $part->part.'_menu')->first()?->delete(); Setting::where('key',$part->area->name . '_' . $part->part.'_menu')->first()?->delete();
Setting::where('key',$part->area->name . '_' . $part->part.'_text')->first()?->delete(); Setting::where('key',$part->area->name . '_' . $part->part.'_text')->first()?->delete();
Setting::where('key',$part->area->name . '_' . $part->part.'bg')->first()?->delete(); Setting::where('key',$part->area->name . '_' . $part->part.'_bg')->first()?->delete();
} }
public static function onMount(Part $part = null) public static function onMount(Part $part = null)
{ {

@ -4,47 +4,55 @@
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
z-index: 8; z-index: 8;
background: var(---side-bg); background: var(--side-menu-bg-color);
width: 20rem; width: 20rem;
bottom: 0; bottom: 0;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
img{
img {
width: 50% !important; width: 50% !important;
height: auto !important; height: auto !important;
} }
ul{
ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
li{
li {
transition: 600ms; transition: 600ms;
a{
a {
padding: .75rem 1rem; padding: .75rem 1rem;
display: block; display: block;
} }
text-align: center; text-align: center;
&:hover{ &:hover {
background: var(--xshop-secondary); background: var(--xshop-secondary);
a{
color: var(--xshop-diff); a {
} color: var(--xshop-diff);
}
} }
&.current-page{ &.current-page {
background: var(--xshop-primary); background: var(--xshop-primary);
a{
a {
color: var(--xshop-diff); color: var(--xshop-diff);
} }
} }
} }
} }
#side-menu-btn{
#side-menu-btn {
display: none; display: none;
} }
} }
main{ main {
position: relative; position: relative;
inset-inline-start: 20rem; inset-inline-start: 20rem;
width: calc(100% - 20rem); width: calc(100% - 20rem);
@ -53,56 +61,61 @@ main{
/*-1024px width*/ /*-1024px width*/
@media (max-width: 1024px) { @media (max-width: 1024px) {
main{ main {
position: static; position: static;
width: auto; width: auto;
} }
#SideMenu{ #SideMenu {
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
bottom: auto; bottom: auto;
overflow: visible !important; overflow: visible !important;
//position: relative; //position: relative;
#side-menu-logo{ #side-menu-logo {
float: left; float: left;
img{
img {
width: auto !important; width: auto !important;
height: 48px !important; height: 48px !important;
margin-right: 1rem; margin-right: 1rem;
margin-left: 1rem; margin-left: 1rem;
} }
} }
ul{
ul {
display: none; display: none;
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
right: 0; right: 0;
background: var(--xshop-background); background: var(--xshop-background);
li{
li {
text-align: start; text-align: start;
} }
&.active{
display: block ; &.active {
display: block;
} }
} }
#side-menu-btn{
#side-menu-btn {
display: block !important; display: block !important;
float: right; float: right;
padding: 1.7rem 2rem; padding: 1.7rem 2rem;
&:hover{
&:hover {
background: var(--xshop-primary); background: var(--xshop-primary);
color: var(--xshop-diff); color: var(--xshop-diff);
} }
} }
#side-menu-content{ #side-menu-content {
display: none !important; display: none !important;
} }
} }
} }

@ -1,5 +1,5 @@
<section class='TreeGridProducts' <section class='TreeGridProducts'
style="---main-bg: {{getSetting($data->area->name.'_'.$data->part.'_color')}}; style="---three-main-bg-color: {{getSetting($data->area->name.'_'.$data->part.'_color')}};
--gx1: {{getSetting($data->area->name.'_'.$data->part.'_gradx1')}}; --gx1: {{getSetting($data->area->name.'_'.$data->part.'_gradx1')}};
--gx2: {{getSetting($data->area->name.'_'.$data->part.'_gradx2')}}; --gx2: {{getSetting($data->area->name.'_'.$data->part.'_gradx2')}};
--gy1: {{getSetting($data->area->name.'_'.$data->part.'_grady1')}}; --gy1: {{getSetting($data->area->name.'_'.$data->part.'_grady1')}};

@ -25,6 +25,7 @@ class TreeGridProducts
$setting->key = $part->area->name . '_' . $part->part.'_color'; $setting->key = $part->area->name . '_' . $part->part.'_color';
$setting->value = '#273763'; $setting->value = '#273763';
$setting->type = 'COLOR'; $setting->type = 'COLOR';
$setting->data = json_encode(['name' => 'three-main-bg-color']);
$setting->size = 4; $setting->size = 4;
$setting->title = $part->area->name . ' ' . $part->part .' main color'; $setting->title = $part->area->name . ' ' . $part->part .' main color';
$setting->save(); $setting->save();
@ -52,6 +53,7 @@ class TreeGridProducts
$setting->key = $part->area->name . '_' . $part->part.'_gradx1'; $setting->key = $part->area->name . '_' . $part->part.'_gradx1';
$setting->value = '#FF7D33'; $setting->value = '#FF7D33';
$setting->type = 'COLOR'; $setting->type = 'COLOR';
$setting->data = json_encode(['name' => 'three-main-bg-gx1']);
$setting->size = 3; $setting->size = 3;
$setting->title = $part->area->name . ' ' . $part->part .' second gradiant color 1'; $setting->title = $part->area->name . ' ' . $part->part .' second gradiant color 1';
$setting->save(); $setting->save();
@ -60,8 +62,10 @@ class TreeGridProducts
$setting->section = 'theme'; $setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_gradx2'; $setting->key = $part->area->name . '_' . $part->part.'_gradx2';
$setting->value = '#FF971D'; $setting->value = '#FF971D';
$setting->data = json_encode(['name' => 'three-main-bg-gx2']);
$setting->type = 'COLOR'; $setting->type = 'COLOR';
$setting->size = 3; $setting->size = 3;
$setting->title = $part->area->name . ' ' . $part->part .' second gradiant color 2'; $setting->title = $part->area->name . ' ' . $part->part .' second gradiant color 2';
$setting->save(); $setting->save();
@ -86,8 +90,9 @@ class TreeGridProducts
$setting = new Setting(); $setting = new Setting();
$setting->section = 'theme'; $setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_grady1'; $setting->key = $part->area->name . '_' . $part->part.'_grady1';
$setting->value = '#FF7D33'; $setting->value = '#3368ff';
$setting->type = 'COLOR'; $setting->type = 'COLOR';
$setting->data = json_encode(['name' => 'three-main-bg-gy1']);
$setting->size = 3; $setting->size = 3;
$setting->title = $part->area->name . ' ' . $part->part .' third gradiant color 1'; $setting->title = $part->area->name . ' ' . $part->part .' third gradiant color 1';
$setting->save(); $setting->save();
@ -97,6 +102,7 @@ class TreeGridProducts
$setting->key = $part->area->name . '_' . $part->part.'_grady2'; $setting->key = $part->area->name . '_' . $part->part.'_grady2';
$setting->value = '#430392'; $setting->value = '#430392';
$setting->type = 'COLOR'; $setting->type = 'COLOR';
$setting->data = json_encode(['name' => 'three-main-bg-gy2']);
$setting->size = 3; $setting->size = 3;
$setting->title = $part->area->name . ' ' . $part->part .' third gradiant color 2'; $setting->title = $part->area->name . ' ' . $part->part .' third gradiant color 2';
$setting->save(); $setting->save();

@ -53,19 +53,18 @@
&:first-child { &:first-child {
grid-column: 1/5 span; grid-column: 1/5 span;
grid-row: 1/3; grid-row: 1/3;
background: var(---main-bg); background: var(--three-main-bg-color);
} }
&:nth-child(2) { &:nth-child(2) {
grid-column: 6/3 span; grid-column: 6/3 span;
grid-row: 1/2; grid-row: 1/2;
background: rgb(255,125,51); background: linear-gradient(180deg, var(--three-main-bg-gx1) 0%, var(--three-main-bg-gx2) 100%);
background: linear-gradient(180deg, var(--gx1) 0%, var(--gx2) 100%);
overflow: hidden; overflow: hidden;
} }
&:nth-child(3) { &:nth-child(3) {
grid-column: 6/3 span; grid-column: 6/3 span;
grid-row: 2/2; grid-row: 2/2;
background: linear-gradient(180deg, var(--gy1) 0%, var(--gy2) 100%); background: linear-gradient(180deg, var(--three-main-bg-gy1) 0%, var(--three-main-bg-gy2) 100%);
overflow: hidden; overflow: hidden;
} }
} }

@ -12,6 +12,7 @@
<link rel="stylesheet" href="{{asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css')}}"> <link rel="stylesheet" href="{{asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{ route('theme.variable.css') }}">
@vite(['resources/sass/client.scss', 'resources/js/client.js']) @vite(['resources/sass/client.scss', 'resources/js/client.js'])
@yield('custom-head') @yield('custom-head')

@ -354,6 +354,9 @@ Route::prefix(config('app.panel.prefix'))->name('admin.')->group(
}); });
Route::get('theme/variable.css',[\App\Http\Controllers\ThemeController::class,'cssVariables'])->name('theme.variable.css');
Route::get('test',function (){ Route::get('test',function (){
// return \Resources\Views\Segments\PreloaderCircle::onAdd(); // return \Resources\Views\Segments\PreloaderCircle::onAdd();
return getCategoryProductBySetting('index_TreeGridProducts_category'); return getCategoryProductBySetting('index_TreeGridProducts_category');

Loading…
Cancel
Save