responsive

src/components/Auth/TemplateComponent.vue

@@ -2,7 +2,9 @@
   <q-card class="auth-template-card">
     <div class="header">
       <div class="title-image">
-        <q-img src="/assets/images/auth/login-image-right.png" />
+        <router-link :to="{name: 'Public.Home'}">
+          <q-img src="/assets/images/auth/login-image-right.png" />
+        </router-link>
       </div>
       <div class="image">
         <q-img src="/assets/images/auth/login-image-left.png" />
@@ -27,6 +29,12 @@ export default {
   box-shadow: 0 0 6px #00000029;
   border-radius: 10px;
   opacity: 1;
+
+  @media screen and (max-width: 599px) {
+    min-width: 90%;
+    max-width: 90%;
+  }
+
   .header {
     display: flex;
     justify-content: space-between;
@@ -43,6 +51,11 @@ export default {
     padding-right: 67px;
     padding-left: 67px;
     padding-bottom: 61px;
+    @media screen and (max-width: 599px) {
+      $padding: 20px;
+      padding-right: $padding;
+      padding-left: $padding;
+    }
   }
 }
 </style>

src/components/EntityIndexGridItem.vue

@@ -0,0 +1,50 @@
+<template>
+  <q-card class="EntityIndexGridItem">
+    <q-card-section v-if="inputData.props?.cols && inputData.props.cols.length > 0">
+      <div v-for="(col, colIndex) in inputData.props.cols"
+           :key="colIndex"
+           class="table-column">
+        <slot name="col"
+              :col="col"
+              :row="inputData.props.row">
+          <div class="label"
+               v-html="col.label" />
+          <div class="value"
+               v-html="col.field(inputData.props.row)" />
+        </slot>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script>
+export default {
+  name: 'EntityIndexGridItem',
+  props: {
+    inputData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  mounted() {
+    console.log('inputData', this.inputData)
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.EntityIndexGridItem {
+  width: 100%;
+  margin-bottom: 8px;
+  .table-column {
+    margin-bottom: 16px;
+    .label {
+      color: #616161;
+    }
+    .value {}
+  }
+}
+</style>

src/components/InvoicePaymentCard.vue

@@ -211,6 +211,7 @@ export default {
     color: #212121;
     .final-price {
       display: flex;
+      flex-wrap: wrap !important;
       flex-flow: row;
       justify-content: space-between;
       padding: 13px 22px 13px 27px;
@@ -223,6 +224,9 @@ export default {
         justify-content: flex-start;
         align-items: center;
         font-size: 17px;
+        @media screen and (max-width: 599px) {
+          width: 100%;
+        }
         .q-img {
           width: 32px;
           margin-right: 15px;
@@ -231,6 +235,10 @@ export default {
       .final-price-value {
         font-size: 20px;
         font-weight: bold;
+        @media screen and (max-width: 599px) {
+          width: 100%;
+          text-align: right;
+        }
         .unit {
           font-size: 17px;
           font-weight: normal;
@@ -242,6 +250,7 @@ export default {
       .other-item {
         display: flex;
         flex-flow: row;
+        flex-wrap: wrap !important;
         justify-content: space-between;
         padding: 19px 22px 18px 27px;
         border-bottom: 1px solid #E1E3ED;
@@ -251,6 +260,9 @@ export default {
           justify-content: flex-start;
           align-items: center;
           font-size: 16px;
+          @media screen and (max-width: 599px) {
+            width: 100%;
+          }
           .q-icon {
             color: #475F4A;
             margin-right: 10px;
@@ -263,6 +275,10 @@ export default {
           align-items: center;
           font-size: 18px;
           font-weight: bold;
+          @media screen and (max-width: 599px) {
+            width: 100%;
+            text-align: right;
+          }
           .unit {
             font-size: 16px;
             font-weight: normal;
@@ -273,15 +289,27 @@ export default {
     .action-area {
       display: flex;
       flex-flow: row;
+      flex-wrap: wrap !important;
       justify-content: flex-start;
       align-items: center;
       margin-bottom: 28px;
       .btn-pay {
         width: 60%;
         margin-left: 19px;
+        @media screen and (max-width: 599px) {
+          width: 100%;
+          margin-bottom: 16px;
+          margin-left: 0;
+          order: 1;
+        }
       }
       .btn-cancel {
         width: calc( 40% - 19px );
+        @media screen and (max-width: 599px) {
+          margin-bottom: 16px;
+          width: 100%;
+          order: 2;
+        }
       }
     }
     .show-invoice-row {

src/components/Menu/SideMenu/MenuItem.vue

@@ -53,7 +53,8 @@
             exact
             @click="itemSelected(item)">
       <div class="section-title">
-        <q-item-section class="list-section title-icon"
+        <q-item-section v-if="item.icon"
+                        class="list-section title-icon"
                         avatar>
           <q-avatar :icon="item.icon"
                     size="30" />

src/components/Template/Header/MainHeader.vue

@@ -9,14 +9,15 @@
                  icon="isax:menu-1"
                  color="primary"
                  round
-                 text-color="white"
+                 flat
+                 text-color="gray"
                  dense
                  unelevated
                  @click="toggleLeftDrawer" />
           <q-btn flat
                  round
                  dense
-                 class="top-menu-item top-menu-logo"
+                 class="top-menu-item top-menu-logo gt-sm"
                  :to="{name: 'Public.Home'}">
             <q-img src="/assets/images/web/user-top-menu-logo.png"
                    width="53" />
@@ -78,6 +79,15 @@
           </div>
         </q-toolbar>
       </div>
+
+      <q-btn flat
+             round
+             dense
+             class="center-logo lt-md"
+             :to="{name: 'Public.Home'}">
+        <q-img src="/assets/images/web/homepage-first-section-logo.png" />
+      </q-btn>
+
       <div class="left-side">
         <q-btn v-if="user && user.id !== null"
                color="primary"
@@ -103,12 +113,16 @@
                   transform="translate(-114.152 -311.642)"
                   fill="#fff" />
           </svg>
-          حساب کاربری
+          <span class="btn-label">
+            حساب کاربری
+          </span>
         </q-btn>
         <q-btn v-else
                color="primary"
                :to="{name: 'Login'}">
-          ورود / ثبت نام
+          <span class="btn-label">
+            ورود / ثبت نام
+          </span>
           <svg id="Login"
                xmlns="http://www.w3.org/2000/svg"
                width="18.479"
@@ -268,20 +282,36 @@ export default {
     position: absolute;
     right: 0;
   }
+  @media screen and (max-width: 1023px) {
+    .q-btn {
+      width: 40px;
+      padding: 0;
+      .btn-label {
+        display: none;
+      }
+    }
+  }
   @media screen and (max-width: 599px) {
     right: 16px;
     margin-bottom: 10px;
   }
 }
 </style>
+
 <style scoped lang="scss">
 .header-inside {
   height: 120px;
   background-color: #FBF4EA;
   color: #212121;
+  @media only screen and (max-width: 1023px) {
+    height: 70px;
+  }
   //border-bottom: solid 1px #DFE1EC;
   &.isHomePage {
     background: transparent;
+    @media only screen and (max-width: 1023px) {
+      background-color: #FBF4EA;
+    }
   }
   .admin-top-menu {
     display: flex;
@@ -335,6 +365,10 @@ export default {
       margin-right: 10px;
       margin-left: 10px;
     }
+    @media only screen and (max-width: 1023px) {
+      padding-top: 0;
+      margin-bottom: 0;
+    }
 
     display: flex;
     flex-flow: row;
@@ -357,11 +391,25 @@ export default {
         }
       }
     }
+
+    .center-logo {
+      $width: 100px;
+      $height: 55px;
+      position: absolute;
+      width: $width;
+      height: 100%;
+      top: 0;
+      left: calc( 50% - (#{$width} / 2));
+    }
+
     .left-side {
       display: flex;
       flex-flow: row;
       align-items: center;
       padding-right: 50px;
+      @media only screen and (max-width: 1023px) {
+        height: 100%;
+      }
     }
 
     &.isHomePage {

src/components/Template/SideBard/AdminPanelSideBar.vue

@@ -1,8 +1,19 @@
 <template>
-  <q-list class="side-menu-list"
-          padding>
-    <menu-item :menu="adminMenuItems" />
-  </q-list>
+  <div class="AdminPanelSideBar">
+    <div class="logo lt-md">
+      <q-btn flat
+             round
+             dense
+             class="btn-logo"
+             :to="{name: 'Public.Home'}">
+        <q-img src="/assets/images/web/homepage-first-section-logo.png" />
+      </q-btn>
+    </div>
+    <q-list class="side-menu-list"
+            padding>
+      <menu-item :menu="adminMenuItems" />
+    </q-list>
+  </div>
 </template>
 
 <script>
@@ -133,268 +144,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.side-menu-main-layout {
-  display: flex;
-  flex-direction: column;
-  border-radius: 0;
-  margin: 30px 0 0 0;
-  overflow-y: auto;
-
-  .side-logo {
-    display: flex;
-    height: 167px;
-    align-items: center;
-    justify-content: center;
-    @media screen and (max-width: 1919px) {
-      height: 136px;
-    }
-    @media screen and (max-width: 1439px) {
-      height: 100px;
-    }
-    @media screen and (max-width: 599px) {
-      height: 110px;
-    }
-
-    .logo-image {
-      width: 140px;
-      height: 95px;
-      @media screen and (max-width: 1919px) {
-        height: 76px;
-      }
-      @media screen and (max-width: 1439px) {
-        width: 100px;
-        height: 50px;
-      }
-
-      .q-img__container {
-        width: 140px;
-        height: 95px;
-        @media screen and (max-width: 1919px) {
-          height: 76px;
-        }
-        @media screen and (max-width: 1439px) {
-          width: 100px;
-          height: 50px;
-        }
-      }
+.AdminPanelSideBar {
+  .logo {
+    padding: 10px 60px;
+    .q-btn {
+      width: 100%;
     }
   }
+  .side-menu-list {
 
-  .q-list {
-    padding: 0;
-    width: 100%;
-
-    &.side-menu-list {
-      margin: 0;
-
-      .top-separator {
-        margin: 0 40px 32px 40px;
-        @media screen and (max-width: 1919px) {
-          margin: 0 30px 25px 30px;
-        }
-        @media screen and (max-width: 1439px) {
-          margin: 0 45px 22px 45px;
-        }
-      }
-
-      .q-item {
-        padding: 0;
-        min-height: 0;
-
-        &.item-list {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          font-size: 16px;
-          font-weight: 500;
-          cursor: pointer;
-          padding: 0 14px 0 10px;
-          border-radius: 14px;
-
-          &.alone-item {
-            height: 40px;
-
-            &.active-route {
-              .indicator {
-                height: 8px;
-                width: 8px;
-                background-color: white;
-                border-radius: 50%;
-                margin: auto;
-              }
-            }
-          }
-
-          .section-title {
-            height: 30px;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .title-icon {
-              margin-right: 12px;
-            }
-
-            .q-item__section--side {
-              padding: 0;
-            }
-          }
-
-          .list-section {
-            display: flex;
-            flex-direction: row;
-            justify-content: right;
-
-            .q-avatar {
-              height: 22px;
-              width: 22px;
-            }
-          }
-        }
-      }
-
-      .side-expansion-list {
-        &.top-expansion {
-          margin-bottom: 10px;
-        }
-
-        .expansion-body {
-          display: flex;
-          margin-left: 8px;
-        }
-
-        .q-expansion-item__content {
-          .vertical-separator {
-            margin: 6px 9px 9px 9px;
-            @media screen and (max-width: 599px) {
-              margin: 0 10px 12px 10px;
-            }
-          }
-        }
-
-        .q-list {
-          &.list-expansion {
-            margin-bottom: 0;
-
-            .item-list-expansion {
-              height: 30px;
-              margin: 5px;
-
-              .item-list-expansion-title {
-                justify-content: start;
-              }
-            }
-
-            .top-expansion-separator {
-              margin: 0 40px 5px 40px;
-              @media screen and (max-width: 1439px) {
-                margin: 0 30px 5px 30px;
-              }
-              @media screen and (max-width: 599px) {
-                margin: 0 45px 5px 45px;
-              }
-            }
-
-            .list-child-item {
-              height: 30px;
-              justify-content: right;
-              margin-bottom: 8px;
-              width: 157px;
-              border-radius: 10px;
-              padding: 0 14px;
-              @media screen and (max-width: 1439px) {
-                width: 148px;
-              }
-              @media screen and (max-width: 599px) {
-                width: 160px;
-                margin-bottom: 5px;
-                padding: 0 10px 0 12px;
-              }
-
-              &:last-child {
-                margin-bottom: 0;
-              }
-
-              .list-child-section {
-                font-size: 14px !important;
-                justify-content: center;
-              }
-            }
-          }
-        }
-      }
-
-      .active-route {
-        background-color: rgb(91 122 95 / 8%);
-        color: #616161;
-
-        .indicator {
-          height: 6px;
-          width: 6px;
-          background-color: white;
-          border-radius: 50%;
-          margin: auto;
-        }
-      }
-
-    }
-
-    .q-item__section--avatar {
-      min-width: 0 !important;
-    }
-
-    a {
-      text-decoration: none;
-      color: #212121;
-      padding: 0;
-    }
-  }
-
-  .log-out {
-    color: white;
-    font-size: 16px;
-    font-weight: 500;
-    cursor: pointer;
-    height: 40px !important;
-    //width: 232px;
-    border-radius: 14px;
-    display: flex;
-    align-items: center;
-    padding: 0 14px 0 10px;
-    margin: 0 0 36px 27px;
-    @media screen and (max-width: 1439px) {
-      margin: 0 31px 33px 31px;
-    }
-    @media screen and (max-width: 599px) {
-      margin: 0 30px 30px 30px;
-      //padding: 0 0 0 10px;
-    }
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .q-avatar {
-      height: 22px;
-      width: 22px;
-      margin-right: 12px;
-      transform: matrix(-1, 0, 0, 1, 0, 0);
-    }
-  }
-
-  &:deep(.side-menu-main-layout) {
-    .q-expansion-item__container {
-      .q-item {
-        display: flex;
-        padding: 0 10px !important;
-
-      }
-
-      .q-icon {
-        font-size: 21px;
-      }
-    }
   }
-
 }
 </style>

src/components/Template/SideBard/Main.vue

@@ -2,9 +2,13 @@
   <div class="drawer-inside">
     <div class="side-menu-main-layout">
       <div class="side-logo">
-        <router-link :to="{name: 'Public.Home'}">
-          <div class="logo-image" />
-        </router-link>
+        <q-btn flat
+               round
+               dense
+               class="btn-logo"
+               :to="{name: 'Public.Home'}">
+          <q-img src="/assets/images/web/homepage-first-section-logo.png" />
+        </q-btn>
       </div>
       <div class="side-menu-body">
         <q-list class="side-menu-list"
@@ -239,21 +243,9 @@ export default {
   flex-direction: column;
   overflow-y: auto;
   .side-logo {
-    margin-top: 20px;
-    margin-bottom: 10px;
-    margin-left: 25px;
-    cursor: pointer;
-    .alaa-logo {
-      width: 50px;
-      //&:deep(.q-img__image ){
-      //  width:50%;
-      //  height:50%;
-      //}
-    }
-    .logo-image {
-      text-align: left;
-      .q-img__container {
-      }
+    padding: 20px 90px;
+    .btn-logo {
+      width: 100%;
     }
   }
 

src/components/Template/SideBard/UserPanelSideBar.vue

@@ -1,33 +1,18 @@
 <template>
-  <div class="side-menu-main-layout">
-    <div v-if="false"
-         class="side-logo">
-      <div class="logo-image" />
+  <div class="UserPanelSideBar">
+    <div class="logo lt-md">
+      <q-btn flat
+             round
+             dense
+             class="btn-logo"
+             :to="{name: 'Public.Home'}">
+        <q-img src="/assets/images/web/homepage-first-section-logo.png" />
+      </q-btn>
     </div>
     <q-list class="side-menu-list"
             padding>
-      <q-input v-if="false"
-               v-model="searchText"
-               dense
-               standout="bg-deep-purple-5 text-white"
-               placeholder="جست و جو"
-               @update:model-value ="search(userProfileMenuItems)">
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
       <menu-item :menu="userProfileMenuItems" />
     </q-list>
-    <div v-if="false"
-         class="log-out"
-         @click="logOut">
-      <span>
-        <q-avatar icon="isax:logout"
-                  size="30"
-                  dir="rtl" />
-      </span>
-      <span class="logout-text">خروج </span>
-    </div>
   </div>
 </template>
 
@@ -36,7 +21,7 @@ import { User } from 'src/models/User.js'
 import menuItem from 'src/components/Menu/SideMenu/MenuItem.vue'
 
 export default {
-  name: 'SideMenu-dashboard',
+  name: 'UserPanelSideBar',
   components: { menuItem },
   data () {
     return {
@@ -177,268 +162,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.side-menu-main-layout {
-  display: flex;
-  flex-direction: column;
-  border-radius: 0;
-  margin: 30px 0 0 0;
-  overflow-y: auto;
-
-  .side-logo {
-    display: flex;
-    height: 167px;
-    align-items: center;
-    justify-content: center;
-    @media screen and (max-width: 1919px) {
-      height: 136px;
-    }
-    @media screen and (max-width: 1439px) {
-      height: 100px;
-    }
-    @media screen and (max-width: 599px) {
-      height: 110px;
-    }
-
-    .logo-image {
-      width: 140px;
-      height: 95px;
-      @media screen and (max-width: 1919px) {
-        height: 76px;
-      }
-      @media screen and (max-width: 1439px) {
-        width: 100px;
-        height: 50px;
-      }
-
-      .q-img__container {
-        width: 140px;
-        height: 95px;
-        @media screen and (max-width: 1919px) {
-          height: 76px;
-        }
-        @media screen and (max-width: 1439px) {
-          width: 100px;
-          height: 50px;
-        }
-      }
-    }
-  }
-
-  .q-list {
-    padding: 0;
-    width: 100%;
-
-    &.side-menu-list {
-      margin: 0;
-
-      .top-separator {
-        margin: 0 40px 32px 40px;
-        @media screen and (max-width: 1919px) {
-          margin: 0 30px 25px 30px;
-        }
-        @media screen and (max-width: 1439px) {
-          margin: 0 45px 22px 45px;
-        }
-      }
-
-      .q-item {
-        padding: 0;
-        min-height: 0;
-
-        &.item-list {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          font-size: 16px;
-          font-weight: 500;
-          cursor: pointer;
-          padding: 0 14px 0 10px;
-          border-radius: 14px;
-
-          &.alone-item {
-            height: 40px;
-
-            &.active-route {
-              .indicator {
-                height: 8px;
-                width: 8px;
-                background-color: white;
-                border-radius: 50%;
-                margin: auto;
-              }
-            }
-          }
-
-          .section-title {
-            height: 30px;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .title-icon {
-              margin-right: 12px;
-            }
-
-            .q-item__section--side {
-              padding: 0;
-            }
-          }
-
-          .list-section {
-            display: flex;
-            flex-direction: row;
-            justify-content: right;
-
-            .q-avatar {
-              height: 22px;
-              width: 22px;
-            }
-          }
-        }
-      }
-
-      .side-expansion-list {
-        &.top-expansion {
-          margin-bottom: 10px;
-        }
-
-        .expansion-body {
-          display: flex;
-          margin-left: 8px;
-        }
-
-        .q-expansion-item__content {
-          .vertical-separator {
-            margin: 6px 9px 9px 9px;
-            @media screen and (max-width: 599px) {
-              margin: 0 10px 12px 10px;
-            }
-          }
-        }
-
-        .q-list {
-          &.list-expansion {
-            margin-bottom: 0;
-
-            .item-list-expansion {
-              height: 30px;
-              margin: 5px;
-
-              .item-list-expansion-title {
-                justify-content: start;
-              }
-            }
-
-            .top-expansion-separator {
-              margin: 0 40px 5px 40px;
-              @media screen and (max-width: 1439px) {
-                margin: 0 30px 5px 30px;
-              }
-              @media screen and (max-width: 599px) {
-                margin: 0 45px 5px 45px;
-              }
-            }
-
-            .list-child-item {
-              height: 30px;
-              justify-content: right;
-              margin-bottom: 8px;
-              width: 157px;
-              border-radius: 10px;
-              padding: 0 14px;
-              @media screen and (max-width: 1439px) {
-                width: 148px;
-              }
-              @media screen and (max-width: 599px) {
-                width: 160px;
-                margin-bottom: 5px;
-                padding: 0 10px 0 12px;
-              }
-
-              &:last-child {
-                margin-bottom: 0;
-              }
-
-              .list-child-section {
-                font-size: 14px !important;
-                justify-content: center;
-              }
-            }
-          }
-        }
-      }
-
-      .active-route {
-        background-color: rgb(91 122 95 / 8%);
-        color: #616161;
-
-        .indicator {
-          height: 6px;
-          width: 6px;
-          background-color: white;
-          border-radius: 50%;
-          margin: auto;
-        }
-      }
-
-    }
-
-    .q-item__section--avatar {
-      min-width: 0 !important;
-    }
-
-    a {
-      text-decoration: none;
-      color: #212121;
-      padding: 0;
-    }
-  }
-
-  .log-out {
-    color: white;
-    font-size: 16px;
-    font-weight: 500;
-    cursor: pointer;
-    height: 40px !important;
-    //width: 232px;
-    border-radius: 14px;
-    display: flex;
-    align-items: center;
-    padding: 0 14px 0 10px;
-    margin: 0 0 36px 27px;
-    @media screen and (max-width: 1439px) {
-      margin: 0 31px 33px 31px;
-    }
-    @media screen and (max-width: 599px) {
-      margin: 0 30px 30px 30px;
-      //padding: 0 0 0 10px;
-    }
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .q-avatar {
-      height: 22px;
-      width: 22px;
-      margin-right: 12px;
-      transform: matrix(-1, 0, 0, 1, 0, 0);
+.UserPanelSideBar {
+  .logo {
+    padding: 10px 60px;
+    .q-btn {
+      width: 100%;
     }
   }
+  .side-menu-list {
 
-  &:deep(.side-menu-main-layout) {
-    .q-expansion-item__container {
-      .q-item {
-        display: flex;
-        padding: 0 10px !important;
-
-      }
-
-      .q-icon {
-        font-size: 21px;
-      }
-    }
   }
-
 }
 </style>

src/components/Widgets/Invoice/InvoiceList/InvoiceList.vue

@@ -9,6 +9,7 @@
                   :table="table"
                   :table-keys="tableKeys"
                   :create-route-name="createRouteName"
+                  :table-grid-size="$q.screen.lt.sm"
                   :show-search-button="false"
                   :show-expand-button="false"
                   :show-reload-button="false">
@@ -23,6 +24,18 @@
           {{ inputData.col.value }}
         </template>
       </template>
+      <template #entity-index-table-item-cell="{inputData}">
+        <entity-index-grid-item :input-data="inputData">
+          <template #col="{col, row}">
+            <template v-if="col.name === 'action'">
+              <q-btn color="primary"
+                     :to="{name: 'UserPanel.Invoice.Show', params: {id: row.id}}">
+                مشاهده جزییات
+              </q-btn>
+            </template>
+          </template>
+        </entity-index-grid-item>
+      </template>
     </entity-index>
   </div>
 </template>
@@ -35,12 +48,13 @@ import { Invoice } from 'src/models/Invoice.js'
 import { mixinWidget } from 'src/mixin/Mixins.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import BtnControl from 'src/components/Control/btn.vue'
+import EntityIndexGridItem from 'src/components/EntityIndexGridItem.vue'
 
 const BtnControlComp = shallowRef(BtnControl)
 
 export default {
   name: 'InvoiceList',
-  components: { EntityIndex },
+  components: { EntityIndex, EntityIndexGridItem },
   mixins: [mixinWidget],
   data: () => {
     return {
@@ -133,6 +147,9 @@ export default {
     this.mounted = true
   },
   methods: {
+    loggggg (data) {
+      console.log(data)
+    },
     setActionBtn () {
       this.inputs.forEach((item, index) => {
         if (item.name === 'btn') {

src/components/Widgets/Invoice/InvoiceShow/InvoiceShow.vue

@@ -59,23 +59,19 @@
       </q-card-section>
       <q-separator />
       <q-card-section>
-        <div class="row">
-          <div class="col-md-4 col-12">
+        <div class="row q-col-gutter-lg">
+          <div class="col-md-4 col-12 flex items-center justify-start">
             <q-img :src="invoice.item_info.thumbnail"
                    width="100px" />
             {{ invoice.item_info.title }}
           </div>
-          <div class="col-md-4 col-12">
-            <q-img :src="invoice.item_info.thumbnail"
-                   width="100px" />
+          <div class="col-md-4 col-12 flex items-center justify-start">
             <q-icon name="isax:user" />
             استاد:
             {{ invoice.item_info.professor_info.firstname }}
             {{ invoice.item_info.professor_info.lastname }}
           </div>
-          <div class="col-md-4 col-12">
-            <q-img :src="invoice.item_info.thumbnail"
-                   width="100px" />
+          <div class="col-md-4 col-12 flex items-center justify-start">
             <q-icon name="isax:card" />
             قیمت:
             {{ invoice.item_info?.price ? invoice.item_info.price.toLocaleString('fa') : 0 }}

src/components/Widgets/Other/ShowClassroomInfo/ShowClassroomInfo.vue

@@ -6,13 +6,14 @@
       {{classroom.title}}
     </q-banner>
     <q-card v-if="!loading"
+            flat
             class="classroom-card">
       <q-card-section class="info-box">
         <div class="row">
-          <div class="col-md-4 classroom-thumbnail">
+          <div class="col-md-4 col-12 classroom-thumbnail">
             <q-img :src="classroom.thumbnail" />
           </div>
-          <div class="col-md-4 classroom-top-attributes">
+          <div class="col-md-4 col-12 classroom-top-attributes">
             <div class="title">
               دوره آموزشی
               {{classroom.title}}:
@@ -22,7 +23,7 @@
               <div class="attribute-item">{{getHoldingType(classroom.holding_type)}}</div>
             </div>
           </div>
-          <div class="col-md-4 classroom-action-col">
+          <div class="col-md-4 col-12 classroom-action-col">
             <q-btn v-if="!defaultOptions.profileMode"
                    color="primary"
                    class="btn-register"
@@ -60,7 +61,7 @@
       </q-card-section>
       <q-card-section class="info-box">
         <div class="row second-section">
-          <div class="col-md-4 attribute-column">
+          <div class="col-md-4 col-sm-6 col-12 attribute-column">
             <div class="icon">
               <svg xmlns="http://www.w3.org/2000/svg"
                    width="17.058"
@@ -77,7 +78,7 @@
               {{ classroom.professor }}
             </div>
           </div>
-          <div class="col-md-4 attribute-column">
+          <div class="col-md-4 col-sm-6 col-12 attribute-column">
             <div class="icon">
               <svg id="Calendar"
                    xmlns="http://www.w3.org/2000/svg"
@@ -95,7 +96,7 @@
               {{ getTerm(classroom) }}
             </div>
           </div>
-          <div class="col-md-4 attribute-column">
+          <div class="col-md-4 col-sm-6 col-12 attribute-column">
             <div class="icon">
               <svg data-name="Group 11306"
                    xmlns="http://www.w3.org/2000/svg"
@@ -113,14 +114,14 @@
               </svg>
             </div>
             <div class="title">
-              {{ classroom.price }}
+              {{ classroom.price ? classroom.price.toLocaleString('fa') : 0 }}
               تومان
             </div>
           </div>
         </div>
       </q-card-section>
-      <div class="row four-sections">
-        <div class="col-md-6">
+      <div class="row q-col-gutter-lg four-sections">
+        <div class="col-md-6 col-12">
           <div class="info-box detailes">
             <div class="info-box-title">
               <svg xmlns="http://www.w3.org/2000/svg"
@@ -175,7 +176,7 @@
             </div>
           </div>
         </div>
-        <div class="col-md-6">
+        <div class="col-md-6 col-12">
           <div class="info-box class-time">
             <div class="info-box-title">
               <svg id="Time_Circle"
@@ -387,10 +388,10 @@ export default {
       .info-box {
         height: 353px;
         &.detailes {
-          margin-right: 24px;
+          //margin-right: 24px;
         }
         &.rules {
-          margin-right: 24px;
+          //margin-right: 24px;
         }
         .info-box-title {
           margin-bottom: 29px;
@@ -439,9 +440,18 @@ export default {
         display: flex;
         justify-content: flex-end;
         align-items: flex-end;
+        flex-wrap: wrap;
         .btn-register {
           width: 220px;
         }
+        @media screen and (max-width: 700px) {
+          width: 100%;
+          .q-btn {
+            width: 100% !important;
+            margin-left: 0;
+            margin-bottom: 8px;
+          }
+        }
       }
       .second-section {
         .attribute-column {

src/components/Widgets/Payment/PaymentList/PaymentList.vue

@@ -9,20 +9,33 @@
                   :table="table"
                   :table-keys="tableKeys"
                   :create-route-name="createRouteName"
+                  :table-grid-size="$q.screen.lt.sm"
                   :show-search-button="false"
                   :show-expand-button="false"
                   :show-reload-button="false">
       <template #entity-index-table-cell="{inputData}">
         <template v-if="inputData.col.name === 'action'">
-          <!--          <q-btn color="primary"-->
-          <!--                 :to="{name: 'UserPanel.Invoice.Show', params: {id: inputData.props.row.id}}">-->
-          <!--            مشاهده جزییات-->
-          <!--          </q-btn>-->
+          <q-btn color="primary"
+                 :to="{name: 'UserPanel.Invoice.Show', params: {id: inputData.props.row.id}}">
+            مشاهده جزییات
+          </q-btn>
         </template>
         <template v-else>
           {{ inputData.col.value }}
         </template>
       </template>
+      <template #entity-index-table-item-cell="{inputData}">
+        <entity-index-grid-item :input-data="inputData">
+          <template #col="{col, row}">
+            <template v-if="col.name === 'action'">
+              <q-btn color="primary"
+                     :to="{name: 'UserPanel.Invoice.Show', params: {id: row.id}}">
+                مشاهده جزییات
+              </q-btn>
+            </template>
+          </template>
+        </entity-index-grid-item>
+      </template>
     </entity-index>
   </div>
 </template>
@@ -35,12 +48,13 @@ import { Invoice } from 'src/models/Invoice.js'
 import { mixinWidget } from 'src/mixin/Mixins.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import BtnControl from 'src/components/Control/btn.vue'
+import EntityIndexGridItem from 'src/components/EntityIndexGridItem.vue'
 
 const BtnControlComp = shallowRef(BtnControl)
 
 export default {
   name: 'PaymentList',
-  components: { EntityIndex },
+  components: { EntityIndex, EntityIndexGridItem },
   mixins: [mixinWidget],
   data: () => {
     return {

src/components/Widgets/Ticket/TicketList/TicketList.vue

@@ -14,6 +14,7 @@
                   :table="table"
                   :table-keys="tableKeys"
                   :create-route-name="createRouteName"
+                  :table-grid-size="$q.screen.lt.sm"
                   :show-search-button="false"
                   :show-expand-button="false"
                   :show-reload-button="false">
@@ -28,6 +29,18 @@
           {{ inputData.col.value }}
         </template>
       </template>
+      <template #entity-index-table-item-cell="{inputData}">
+        <entity-index-grid-item :input-data="inputData">
+          <template #col="{col}">
+            <template v-if="col.name === 'action'">
+              <q-btn color="primary"
+                     :to="{name: 'UserPanel.Ticket.Show', params: {id: inputData.props.row.id}}">
+                مشاهده جزییات
+              </q-btn>
+            </template>
+          </template>
+        </entity-index-grid-item>
+      </template>
     </entity-index>
   </div>
 </template>
@@ -37,10 +50,11 @@ import { EntityIndex } from 'quasar-crud'
 import { Ticket } from 'src/models/Ticket.js'
 import { mixinWidget } from 'src/mixin/Mixins.js'
 import { APIGateway } from 'src/api/APIGateway.js'
+import EntityIndexGridItem from 'src/components/EntityIndexGridItem.vue'
 
 export default {
   name: 'TicketList',
-  components: { EntityIndex },
+  components: { EntityIndex, EntityIndexGridItem },
   mixins: [mixinWidget],
   data: () => {
     return {

src/components/Widgets/Wallet/MyWallet/MyWallet.vue

@@ -119,11 +119,18 @@ export default {
   .body {
     display: flex;
     flex-flow: row;
+    flex-wrap: wrap;
     justify-content: flex-start;
     align-items: center;
     padding: 45px 58px;
+    @media screen and (max-width: 1024px) {
+      padding: 45px 16px;
+    }
     .card-column {
       width: 427px;
+      @media screen and (max-width: 1024px) {
+        width: 100%;
+      }
       .card {
         max-width: 357px;
         width: 100%;
@@ -157,6 +164,9 @@ export default {
           left: 105px;
           color: #FFFFFF;
           font-size: 24px;
+          @media screen and (max-width: 500px) {
+            left: 50px;
+          }
           .unit {
             font-size: 18px;
           }
@@ -165,6 +175,10 @@ export default {
     }
     .actions-column {
       width: calc( 100% - 427px);
+      @media screen and (max-width: 1024px) {
+        width: 100%;
+        margin-top: 32px;
+      }
       .deposit-section {
         .btn-deposit {
           margin-top: 25px;

src/css/Theme/quasar-crud/index.scss

@@ -3,6 +3,11 @@
   margin-left: -32px;
   //margin-top: -16px;
   padding-top: 0;
+  .q-table__container {
+    .q-table__top {
+      display: none;
+    }
+  }
   .q-table__card {
     background-color: transparent;
     box-shadow: none;

src/pages/User/Profile/classroomInfo.vue

@@ -35,21 +35,32 @@
                       :api="api"
                       :table="table"
                       :table-keys="tableKeys"
+                      :table-grid-size="$q.screen.lt.sm"
                       :show-expand-button="false"
                       :show-reload-button="false"
                       :show-search-button="false">
-          <template #table-cell="{inputData}">
-            <q-td :props="inputData.props">
-              <template v-if="inputData.props.col.name === 'actions'">
-                <q-btn size="md"
-                       color="primary"
-                       label="جزییات"
-                       :to="{name: 'UserPanel.Profile.SessionInfo', params: {id: inputData.props.row.id}}" />
-              </template>
-              <template v-else>
-                {{ inputData.props.value }}
+          <template #entity-index-table-cell="{inputData}">
+            <template v-if="inputData.col.name === 'action'">
+              <q-btn size="md"
+                     color="primary"
+                     label="جزییات"
+                     :to="{name: 'UserPanel.Profile.SessionInfo', params: {id: inputData.props.row.id}}" />
+            </template>
+            <template v-else>
+              {{ inputData.col.value }}
+            </template>
+          </template>
+          <template #entity-index-table-item-cell="{inputData}">
+            <entity-index-grid-item :input-data="inputData">
+              <template #col="{col, row}">
+                <template v-if="col.name === 'action'">
+                  <q-btn size="md"
+                         color="primary"
+                         label="جزییات"
+                         :to="{name: 'UserPanel.Profile.SessionInfo', params: {id: row.id}}" />
+                </template>
               </template>
-            </q-td>
+            </entity-index-grid-item>
           </template>
         </entity-index>
       </q-tab-panel>
@@ -72,13 +83,15 @@ import { EntityIndex } from 'quasar-crud'
 import Enums from 'src/assets/Enums/Enums.js'
 import ShamsiDate from 'src/assets/ShamsiDate.js'
 import { APIGateway } from 'src/api/APIGateway.js'
+import EntityIndexGridItem from 'src/components/EntityIndexGridItem.vue'
 import ShowClassroomInfo from 'src/components/Widgets/Other/ShowClassroomInfo/ShowClassroomInfo.vue'
 
 export default {
   name: 'UserPanel.Profile.ClassroomInfo',
   components: {
+    EntityIndex,
     ShowClassroomInfo,
-    EntityIndex
+    EntityIndexGridItem
   },
   data () {
     return {
@@ -117,7 +130,7 @@ export default {
             field: row => row.ending_time ? ShamsiDate.getDateTime(row.ending_time) : '-'
           },
           {
-            name: 'actions',
+            name: 'action',
             required: true,
             label: 'جزییات',
             align: 'left',

src/pages/User/Profile/classrooms.vue

@@ -5,6 +5,7 @@
                 :api="api"
                 :table="table"
                 :table-keys="tableKeys"
+                :table-grid-size="$q.screen.lt.sm"
                 :show-expand-button="false"
                 :show-reload-button="false"
                 :show-search-button="false">
@@ -19,6 +20,18 @@
         {{ inputData.col.value }}
       </template>
     </template>
+    <template #entity-index-table-item-cell="{inputData}">
+      <entity-index-grid-item :input-data="inputData">
+        <template #col="{col, row}">
+          <template v-if="col.name === 'action'">
+            <q-btn size="md"
+                   color="primary"
+                   label="جزییات"
+                   :to="{name: 'UserPanel.Profile.ClassroomInfo', params: {id: row.classroom_info.id}}" />
+          </template>
+        </template>
+      </entity-index-grid-item>
+    </template>
   </entity-index>
 </template>
 
@@ -29,13 +42,15 @@ import Enums from 'src/assets/Enums/Enums.js'
 import ShamsiDate from 'src/assets/ShamsiDate.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import BtnControl from 'src/components/Control/btn.vue'
+import EntityIndexGridItem from 'src/components/EntityIndexGridItem.vue'
 
 const BtnControlComp = shallowRef(BtnControl)
 
 export default {
   name: 'UserPanel.Profile.AllClassrooms',
   components: {
-    EntityIndex
+    EntityIndex,
+    EntityIndexGridItem
   },
   data () {
     return {
@@ -145,7 +160,7 @@ export default {
             field: row => row.invoice_info ? this.getInvoiceStatusTitle(row.invoice_info) : 'نام مشخص'
           },
           {
-            name: 'actions',
+            name: 'action',
             required: true,
             label: 'جزییات',
             align: 'left',