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">
<h1>
{{getSetting($data->area->name.'_'.$data->part.'_title')}}

@ -11,50 +11,52 @@ class GradientTextLink
{
$setting = new Setting();
$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->type = 'TEXT';
$setting->size = 12;
$setting->title = $part->area->name . ' ' . $part->part .' title';
$setting->title = $part->area->name . ' ' . $part->part . ' title';
$setting->save();
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_btn';
$setting->key = $part->area->name . '_' . $part->part . '_btn';
$setting->value = 'Shop';
$setting->type = 'TEXT';
$setting->size = 4;
$setting->title = $part->area->name . ' ' . $part->part .' button text';
$setting->title = $part->area->name . ' ' . $part->part . ' button text';
$setting->save();
$setting = new Setting();
$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->type = 'TEXT';
$setting->ltr = true;
$setting->size = 4;
$setting->title = $part->area->name . ' ' . $part->part .' button link';
$setting->title = $part->area->name . ' ' . $part->part . ' button link';
$setting->save();
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_deg';
$setting->key = $part->area->name . '_' . $part->part . '_deg';
$setting->value = 45;
$setting->size = 4;
$setting->type = 'NUMBER';
$setting->data = json_encode(['xmin' => 0, 'xmax' => 360]);
$setting->title = $part->area->name . ' ' . $part->part. ' degree';
$setting->data = json_encode(['xmin' => 0, 'xmax' => 360, 'name' => 'gradient-text-link-deg', 'suffix' => 'deg']);
$setting->title = $part->area->name . ' ' . $part->part . ' degree';
$setting->save();
}
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.'_title')->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 . '_btn')->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 . '_deg')->first()?->delete();
}
public static function onMount(Part $part = null)
{
return $part;

@ -1,6 +1,6 @@
.GradientTextLink {
// 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);
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">
<a href="{{url('/')}}">
<img src="{{asset('upload/images/logo.svg')}}" alt="">

@ -36,6 +36,7 @@ class SideMenu
$setting->value = '#ececec';
$setting->type = 'COLOR';
$setting->size = 3;
$setting->data = json_encode(['name' => 'side-menu-bg-color']);
$setting->title = $part->area->name . ' ' . $part->part .' background';
$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.'_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)
{

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

@ -1,5 +1,5 @@
<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')}};
--gx2: {{getSetting($data->area->name.'_'.$data->part.'_gradx2')}};
--gy1: {{getSetting($data->area->name.'_'.$data->part.'_grady1')}};

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

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

@ -12,6 +12,7 @@
<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'])
@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 (){
// return \Resources\Views\Segments\PreloaderCircle::onAdd();
return getCategoryProductBySetting('index_TreeGridProducts_category');

Loading…
Cancel
Save