experra_forum/src/components/ForumSection.vue

@@ -8,22 +8,25 @@
       </q-item-section>
       <q-item-section v-if="topicsMode" style="display: flex; flex-basis: 50%;" side top>
         <q-expansion-item
-        v-model="infoExpanded"
         expand-separator
         label="Информация"
         header-class="primary"
         >
+          <q-card style="background-color: #f8f8fc;">
+            <q-card-section>
+              {{description}}
+            </q-card-section>
+          </q-card>
         </q-expansion-item>
       </q-item-section>
-    </q-item>
+
-    <q-item v-if="infoExpanded" style="background-color: #f8f8fc;">
-      {{description}}
     </q-item>
 
     <q-separator />
-    <q-item @click="moveTo()" clickable v-ripple v-for="item in pages[pageN]" :key="item.name">
+    <q-item-label header>{{topicsMode ? "Темы" : "Разделы"}}</q-item-label>
+    <q-item @click="moveTo()" clickable v-ripple v-for="item in items" :key="item.name">
       <q-item-section center avatar>
-        <q-icon :size="'xs'" :name="item.icon" color="primary"/>
+        <q-icon :name="item.icon" color="primary"/>
       </q-item-section>
 
       <q-item-section>
@@ -31,18 +34,19 @@
       </q-item-section>
 
       <q-item-section class="q-mt-sm" side top>
-        <q-badge v-if="topicsMode" class="q-mb-sm">
+        <q-badge v-if="topicsMode" class="q-mb-sm text-h6">
           {{item.nMessages}}
           <q-tooltip content-class="bg-indigo" :offset="[10, 10]">
             Сообщения
           </q-tooltip>
         </q-badge>
-        <q-badge v-else class="q-mb-sm">
+        <q-badge v-else class="q-mb-sm text-h6">
           {{item.nTopics}}
           <q-tooltip content-class="bg-indigo" :offset="[10, 10]">
             Темы
           </q-tooltip>
         </q-badge>
+        <!--q-badge v-if="!topicsMode" :label="'Темы: ' + item.nTopics" /-->
       </q-item-section>
       <q-item-section v-if="item.lastMessage" class="q-ml-md" style="max-width: 300px; min-width: 300px" top>
         Последнее сообщение: <br>
@@ -50,28 +54,11 @@
         <p v-if="!topicsMode"> тема: "{{item.lastMessage.topic}}" </p>
       </q-item-section>
     </q-item>
-    <q-separator />
-    <q-item>
-      <q-btn v-if="pageN != 0" @click="pageN = 0" flat color="primary" label="<<" />
-      <q-btn v-if="pageN != 0" @click="pageN--" flat color="primary" label="<" />
-      <q-btn v-if="pageN != 0" @click="pageN--" flat color="primary" :label="pageN" />
-      <q-btn outline color="primary" :label="pageN + 1" />
-      <q-btn v-if="pageN + 1 != pages.length" @click="pageN++" flat color="primary" :label="pageN + 2" />
-      <q-btn v-if="pageN + 1 != pages.length" @click="pageN++" flat color="primary" label=">" />
-      <q-btn v-if="pageN + 1 != pages.length" @click="pageN = pages.length - 1" flat color="primary" label=">>" />
-    </q-item>
   </q-list>
 </template>
 <script>
 export default {
   name: 'ForumSelection',
-  data () {
-    return ({
-      pages: [],
-      pageN: 0,
-      infoExpanded: false
-    })
-  },
   props: {
     title: {
       type: String,
@@ -95,23 +82,6 @@ export default {
     topicsMode: {
       type: Boolean,
       default: false
-    },
-    maxPerPage: {
-      type: Number
-    }
-  },
-  beforeMount () {
-    const self = this
-    let page = []
-    this.items.forEach((el) => {
-      page.push(el)
-      if (page.length === self.maxPerPage) {
-        self.pages.push(page)
-        page = []
-      }
-    })
-    if (page.length !== 0) {
-      self.pages.push(page)
     }
   },
   methods: {

experra_forum/src/layouts/MainLayout.vue

@@ -1,9 +1,8 @@
 <template>
-  <q-layout style="background-color: #f5f5f5;" view="lHh Lpr lFf">
+  <q-layout view="lHh Lpr lFf">
-    <q-header>
+    <q-header elevated>
       <q-toolbar>
         <q-btn
-          v-if="$q.screen.width < 1200"
           flat
           dense
           round
@@ -11,75 +10,31 @@
           aria-label="Menu"
           @click="leftDrawerOpen = !leftDrawerOpen"
         />
-        <q-space />
+
-        <q-btn-dropdown flat :label="'Иван Иванов'">
+        <q-toolbar-title>
-         <q-list>
+          Форум ЭкспеРО
-           <q-item clickable v-close-popup tabindex="0" v-ripple>
+        </q-toolbar-title>
-             <q-item-section>
-               <q-item-label>Выйти</q-item-label>
-             </q-item-section>
-             <q-item-section side>
-               <q-icon name="exit_to_app" />
-             </q-item-section>
-           </q-item>
-         </q-list>
-       </q-btn-dropdown>
       </q-toolbar>
     </q-header>
 
     <q-drawer
       v-model="leftDrawerOpen"
-      show-if-above
+      bordered
-      content-class="bg-white"
+      content-class="bg-grey-1"
     >
       <q-list>
         <q-item-label
           header
-          style="background-color: #7B89CA; height: 50px"
+          style="background-color: #7B89CA"
-          class="text-white text-h6 text-center"
+          class="text-white text-h6"
         >
-          ЭкспеРО
+          Меню
         </q-item-label>
-        <q-item
+        <EssentialLink
-          v-for="option in menu.options"
+          v-for="link in essentialLinks"
-          :key="option.title"
+          :key="link.title"
-          clickable
+          v-bind="link"
-          @click="menu.chosenOption = option"
+        />
-        >
-          <q-item-section
-            v-if="option.icon"
-            avatar
-          >
-            <q-icon :name="option.icon" />
-          </q-item-section>
-
-          <q-item-section>
-            <q-item-label>{{ option.title }}</q-item-label>
-          </q-item-section>
-        </q-item>
-        <div v-if="menu.chosenOption">
-          <q-item style="background-color: #7b89ca">
-            <q-item-section>
-              {{menu.chosenOption.title}}
-            </q-item-section>
-          </q-item>
-          <q-item
-            v-for="suboption in menu.chosenOption.suboptions"
-            :key="suboption.title"
-            clickable
-          >
-            <q-item-section
-              v-if="suboption.icon"
-              avatar
-            >
-              <q-icon :name="suboption.icon" />
-            </q-item-section>
-
-            <q-item-section>
-              <q-item-label>{{ suboption.title }}</q-item-label>
-            </q-item-section>
-          </q-item>
-        </div>
       </q-list>
     </q-drawer>
 
@@ -90,108 +45,51 @@
 </template>
 
 <script>
-// import EssentialLink from 'components/EssentialLink'
+import EssentialLink from 'components/EssentialLink'
 
 export default {
   name: 'MainLayout',
 
-  // components: {
+  components: {
-  //   EssentialLink
+    EssentialLink
-  // },
+  },
 
   data () {
     return {
       leftDrawerOpen: false,
-      menu: {
+      essentialLinks: [
-        chosenOption: null,
-        options: [
         {
           title: 'Приборная панель',
+          caption: 'Перейти на глагне',
           icon: 'backspace',
-            suboptions: [
+          link: '/'
-              {
-                title: 'Пользователи',
-                icon: 'school',
-                link: 'https://quasar.dev'
-              },
-              {
-                title: 'Дополнительные поля',
-                icon: 'subdirectory_arrow_left',
-                link: 'https://github.com/quasarframework'
-              },
-              {
-                title: 'Зоны ответственности',
-                icon: 'subdirectory_arrow_left',
-                link: 'https://github.com/quasarframework'
-              }
-            ]
         },
         {
           title: 'Пользователи',
-            icon: 'school',
+          caption: 'Перейти на площадку',
-            suboptions: [
-              {
-                title: 'Пользователи',
           icon: 'school',
           link: 'https://quasar.dev'
         },
         {
           title: 'Дополнительные поля',
+          caption: 'Выйти из платформы',
           icon: 'subdirectory_arrow_left',
           link: 'https://github.com/quasarframework'
         },
         {
           title: 'Зоны ответственности',
+          caption: 'Выйти из платформы',
           icon: 'subdirectory_arrow_left',
           link: 'https://github.com/quasarframework'
-              }
-            ]
         },
         {
-            title: 'Дополнительные поля',
+          title: 'Группы черт',
-            icon: 'subdirectory_arrow_left',
+          caption: 'Выйти из платформы',
-            suboptions: [
-              {
-                title: 'Пользователи',
-                icon: 'school',
-                link: 'https://quasar.dev'
-              },
-              {
-                title: 'Дополнительные поля',
-                icon: 'subdirectory_arrow_left',
-                link: 'https://github.com/quasarframework'
-              },
-              {
-                title: 'Зоны ответственности',
-                icon: 'subdirectory_arrow_left',
-                link: 'https://github.com/quasarframework'
-              }
-            ]
-          },
-          {
-            title: 'Зоны ответственности',
-            icon: 'subdirectory_arrow_left',
-            suboptions: [
-              {
-                title: 'Пользователи',
-                icon: 'school',
-                link: 'https://quasar.dev'
-              },
-              {
-                title: 'Дополнительные поля',
           icon: 'subdirectory_arrow_left',
           link: 'https://github.com/quasarframework'
-              },
-              {
-                title: 'Зоны ответственности',
-                icon: 'subdirectory_arrow_left',
-                link: 'https://github.com/quasarframework'
-              }
-            ]
         }
       ]
     }
   }
-  }
 }
 </script>

experra_forum/src/pages/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md row justify-center full-height">
-    <ForumSection style="max-width: 700px" class="q-mb-md col" title="Семейства методик" description="Какое-то описание" :maxPerPage="3" :items="sections"/>
+    <ForumSection style="max-width: 700px" class="q-mb-md col" title="Семейства методик" description="Какое-то описание" :items="sections"/>
   </div>
 </template>
 
@@ -15,8 +15,8 @@ export default {
   data () {
     return {
       sections: [
-        { name: 'Семейство 1', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 1', icon: 'error', nMessages: 10, nTopics: 10 },
-        { name: 'Семейство 2', icon: 'warning', nMessages: 10, nTopics: 10 },
+        { name: 'Семейство 2', icon: 'error', nMessages: 10, nTopics: 10 },
         { name: 'Семейство 5', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
         { name: 'Семейство 14', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 },
         { name: 'Семейство -1', icon: 'fiber_manual_record', nMessages: 10, nTopics: 10 }

experra_forum/src/pages/Topics.vue

@@ -50,13 +50,13 @@ export default {
       topics: [
         {
           name: 'tema 1',
-          icon: 'warning',
+          icon: 'error',
           nMessages: 10,
           lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
         },
         {
           name: 'tema 3',
-          icon: 'warning',
+          icon: 'error',
           nMessages: 10,
           lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
         },