feat: Edit Tile Icon and Home

resources/js/Global/components/Tiles/Icon-Tile.vue

@@ -1,22 +1,22 @@
 <template>
-    <div :class="`we-icon-tile ${theme}`">
-        <div class="static-content WM-Block WM-Align-C Relative"
-             :style="'background-image: linear-gradient('+GradientDirection+', #'+GradientBegin+' , #'+GradientEnd+'); height: '+height+'px;'">
+    <div :class="`we-icon-tile `">
+        <div :class="`static-content ${theme}`" :style="'height: '+height+'px;'">
             <div class="Content">
                 <v-icon>WMi-{{ icon }}</v-icon>
                 <div class="info">
-                    <div class="Fa"> {{ TitleFa }} </div>
-                    <div class="En"> {{ TitleEn }} </div>
+                    <div class="Fa" v-html="TitleFa"></div>
+                    <div class="En" v-html="TitleEn"></div>
                     <div class="desc Fa Thin" v-if="Desc != ''" v-html="Desc"></div>
                 </div>
             </div>
-        </div>
             <div v-if="Quantity != ''" class="quantity" >
                 <div class="label top Fa"> {{ QuantityTopLabel }} </div>
                 <div class="number En Bold">{{ Quantity }}</div>
                 <div class="label bottom Fa"> {{ QuantityBottomLabel }} </div>
             </div>
         </div>
+
+    </div>
 </template>
 
 <script>
@@ -66,6 +66,71 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
+/*---------------------------------------------------------------*/
+/*                    Qunatity :: End*/
+/*---------------------------------------------------------------*/
+
+    @import "resources/js/Global/scss/_vars.scss";
+    @each $color,
+    $value in $colors {
+        .static-content.theme-#{$color} .v-icon {
+            color: $value;
+        }
+        .static-content.theme-#{$color} .info {
+            color: $value;
+        }
+    }
+
+
+    .bg-grad-black {
+        background-image: linear-gradient(to right, var(--color-black), #000);
+    }
+    .bg-grad-cyan {
+        background-image: linear-gradient(to right, var(--color-cyan), #308e95);
+    }
+    .bg-grad-light-cyan {
+        background-image: linear-gradient(to right, #ecfcfd, #c4f3f7);
+    }
+    .bg-grad-orange {
+        background-image: linear-gradient(to right, var(--color-orange), #e45a47);
+    }
+    .bg-grad-light-orange {
+        background-image: linear-gradient(to right, #ffe2de, #ffeae7);
+    }
+    .bg-grad-brown {
+        background-image: linear-gradient(to right, var(--color-brown), #6f4a30);
+    }
+    .bg-grad-light-brown {
+        background-image: linear-gradient(to right, #ffddc5, #ffefe4);
+    }
+    .bg-grad-blue {
+        background-image: linear-gradient(to right, var(--color-blue), #5ab2ed);
+    }
+    .bg-grad-light-blue {
+        background-image: linear-gradient(to right, #e4f4ff, #b0dfff);
+    }
+    .bg-grad-red {
+        background-image: linear-gradient(to right, var(--color-red), #e15066);
+    }
+    .bg-grad-light-red {
+        background-image: linear-gradient(to right, #ffdede, #ffe8eb);
+    }
+    .bg-grad-purple {
+        background-image: linear-gradient(to right, var(--color-purple), #e15066);
+    }
+    .bg-grad-light-purple {
+        background-image: linear-gradient(to right, #fff0f8, #fff3f9);
+    }
+    .bg-grad-light-gray {
+        background-image: linear-gradient(to right, var(--color-light-gray), #eaeaea);
+    }
+    .bg-grad-light-gold {
+        background-image: linear-gradient(to right, #ffebb0, #fff3cf);
+    }
+
+
+
     .we-icon-tile {
         width:100%;
         padding: 5px;
@@ -84,6 +149,14 @@ export default {
     .we-icon-tile .static-content {
         transition: 0.5s;
         direction: rtl;
+        display: block;
+        text-align: center;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 5px;
+
     }
     .we-icon-tile:hover .static-content {
         -webkit-filter: grayscale(100%);
@@ -100,12 +173,7 @@ export default {
         border-radius: 5px;
     }
 
-    .static-content {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    .we-icon-tile.content-right .static-content {
+    .static-content.content-right {
         justify-content: right;
         padding-right: 50px;
     }
@@ -215,6 +283,12 @@ export default {
         transition-delay: 0.58s;
     }
 
+    .static-content.theme-white .quantity .number,
+    .static-content.theme-white .quantity .label.bottom,
+    .static-content.theme-white .quantity .label.top {
+        color: #fff;
+    }
+
 
     .we-icon-tile.sm .info .En {
         font-size: 10px;
@@ -226,20 +300,7 @@ export default {
         font-size: 20px;
     }
 
-    /*---------------------------------------------------------------*/
-    /*                    Qunatity :: End*/
-    /*---------------------------------------------------------------*/
 
-    @import "resources/js/Global/scss/_vars.scss";
-    @each $color,
-    $value in $colors {
-        .we-icon-tile.theme-#{$color} .v-icon {
-            color: $value;
-        }
-        .we-icon-tile.theme-#{$color} .info {
-            color: $value;
-        }
-    }
 
 
 

resources/js/Home/views/Home.vue

@@ -1,6 +1,11 @@
 <template>
-    <v-container fluid>
-        <v-layout row wrap>
+    <v-container>
+        <v-row class="reverse">
+            <v-col xl="8" lg="8" offset-xl="2" offset-lg="2" class="fade-in fast delay-01">
+                <big-section-title title_fa="سیستم مدیریت یک پارچه" title_en="Integrated Management System" desc="هر آنچه مربوط به مدیریت مجموعه ی شما می باشد." />
+            </v-col>
+        </v-row>
+        <v-row>
             <a
                 :href="module.href"
                 :class="'flex fade-in fast ' + module.main_class"
@@ -11,15 +16,16 @@
 
                 <icon-tile
                     :theme="module.title_class +' Shadowed'"
-                    :TitleEn="$_name(`${module.slug}.tile.name_en`) != '' ? $_name(`${module.slug}.tile.name_en`)  :  module.title_en"
-                    :TitleFa="$_name(`${module.slug}.tile.name`) != '' ? $_name(`${module.slug}.tile.name`)  :  module.title_fa"
+                    :TitleEn="module.title_en"
+                    :TitleFa="module.title_fa"
                     :GradientBegin="module.gradient_begin"
                     :GradientEnd="module.gradient_end"
                     :icon="module.img_url"
                     :height="module.img_height"
+                    :Desc="module.description"
                 />
             </a>
-        </v-layout>
+        </v-row>
         <router-link v-if="getAuthUser.is_owner == 'true' || hostname == originHostName" :to="{name: 'AddModule'}">
             <v-btn large fab color="cyan" fixed bottom left dark style="left:5%">
                 <v-icon dark>WMi-plus</v-icon>
@@ -35,6 +41,8 @@ import Tile from "@Global/components/Tiles/Tile";
 import IconTile from '@Global/components/Tiles/Icon-Tile';
 import { mapGetters, mapActions } from "vuex";
 import routes from '@Global/utils/common/routes';
+import BigSectionTitle from '@Global/components/Dividers/Section-Title-Big';
+
 
 export default {
     data: () => ({
@@ -42,7 +50,8 @@ export default {
         originHostName : routes.originHostName()
     }),
     components: {
-        IconTile
+        IconTile,
+        BigSectionTitle
     },
     computed: {
         ...mapGetters("rolePermission", ["getModules"]),
@@ -58,4 +67,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+    .container {
+        max-width: 1785px;
+    }
 </style>