kozyyy
/
forum
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

design rework

Browse Source
master
Slava 6 years ago
parent 2379a767d8
commit 470b89ef7f
9 changed files with 228 additions and 196 deletions
Show Stats Download Patch File Download Diff File

49
experra_forum/src/components/ForumSection.vue
Unescape Escape View File

@ -1,33 +1,54 @@
<template>
<q-list bordered padding>
<q-item>
<q-item-section>
<q-item-label overline>{{title}}</q-item-label>
<q-item-label caption>{{description}}</q-item-label>
<q-list bordered>
<q-item class="row" style="background-color: #f8f8fc;">
<q-item-section style="display: flex; flex-basis: 50%;">
<q-item-label class="text-h6">
<!--q-btn flat round color="primary" icon="arrow_left" /-->{{title}}
</q-item-label>
</q-item-section>
<q-item-section side top>
<q-item-label caption>Последнее сообщение: 5 мин. назад</q-item-label>
<q-item-section v-if="topicsMode" style="display: flex; flex-basis: 50%;" side top>
<q-expansion-item
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-separator spaced />
<q-separator />
<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 :name="topicsMode ? 'arrow_right' : item.icon" color="primary"/>
<q-icon :name="item.icon" color="primary"/>
</q-item-section>
<q-item-section>
<q-item-label>{{item.name}}</q-item-label>
<q-item-label caption>{{item.description}}</q-item-label>
</q-item-section>
<q-item-section class="q-mt-sm" side top>
<q-badge class="q-mb-sm" :label="'Сообщения: ' + item.nMessages" />
<q-badge v-if="!topicsMode" :label="'Темы: ' + item.nTopics" />
<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 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 class="q-ml-md" style="max-width: 300px; min-width: 300px" top>
<q-item-section v-if="item.lastMessage" class="q-ml-md" style="max-width: 300px; min-width: 300px" top>
Последнее сообщение: <br>
от {{item.lastMessage.from}}, {{item.lastMessage.time}} <br>
<p v-if="!topicsMode"> тема: "{{item.lastMessage.topic}}" </p>

108
experra_forum/src/components/TopicThread.vue
Unescape Escape View File

@ -0,0 +1,108 @@
<template>
<q-card>
<q-card-section v-for="item in items" v-bind:key="item.num">
<div class="row q-pb-md">
<div style="display: flex; flex-basis: 20%;">
<div class="col">
<p><b>{{item.name}} </b>
<q-badge v-if="item.isTS">Автор</q-badge>
<q-badge class="q-ml-sm" v-if="item.isTS" color="negative">Админ</q-badge>
</p>
<p>{{item.time}}</p>
</div>
</div>
<q-separator vertical />
<div class="col">
<div class="q-ml-md" style="display: flex; flex-basis: 70%;">{{item.text}}</div>
<div class="col q-ml-md q-mt-md" style="display: flex; flex-basis: 70%;">
<p class="row" @click="goToLink(file)" v-for="(file, index) in item.attachedFiles" v-bind:key="index"><q-icon name="attach_file" />{{file}}</p>
</div>
<div class="col q-mr-md" style="float: right; display: flex; flex-basis: 70%;">
<q-btn class="q-mr-sm" outline round color="primary" icon="question_answer" />
<q-btn class="q-mr-sm" outline round color="primary" icon="edit" />
<q-btn class="q-mr-sm" outline round color="primary" icon="delete" />
<q-rating
v-model="item.rating"
size="1.5em"
icon="star"
/>
</div>
</div>
</div>
<q-separator inset />
</q-card-section>
<q-card-section>
<q-card-section class="q-pt-none">
<div class="q-pa-md q-gutter-sm">
<p>Ответ на: <q-btn size="xs" color="primary" icon="close" label="#2" /></p>
<q-editor v-model="editor" min-height="5rem" />
<q-input v-for="(link, index) in links" v-bind:key="index" outlined v-model="link.text" label="Ссылка на приложение" />
<q-btn @click="createAttachment" round color="primary" icon="attach_file" /><br>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn @click="createNewTopic" flat label="Ответить" color="primary" v-close-popup />
</q-card-actions>
</q-card-section>
</q-card>
</template>
<script>
export default {
name: 'TopicThread',
data () {
return {
links: [],
editor: ''
}
},
props: {
items: {
type: Array,
default: () => [
{
name: 'kekus maximus',
text: 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.',
isDeleted: false,
isTS: true,
isAdmin: true,
attachedFiles: ['lul.com', 'kek.kek'],
num: 1,
time: '19:20',
rating: 3
},
{
name: 'kekus maximus',
text: 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.',
isDeleted: false,
isTS: true,
isAdmin: true,
attachedFiles: ['lul.com', 'kek.kek'],
num: 2,
time: '19:20',
rating: 3
},
{
name: 'kekus maximus',
text: 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.',
isDeleted: false,
isTS: true,
isAdmin: true,
attachedFiles: ['lul.com', 'kek.kek'],
num: 3,
time: '19:20',
rating: 3
}
]
}
},
methods: {
goToLink () {
alert('ПРЫГ')
},
createAttachment () {
this.links.push({ text: '' })
}
}
}
</script>

4
experra_forum/src/css/quasar.variables.sass
Unescape Escape View File

@ -12,8 +12,8 @@
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.
$primary : #1976D2
$secondary : #26A69A
$primary : #3E53B4
$secondary : #7B89CA
$accent : #9C27B0
$dark : #1D1D1D

24
experra_forum/src/layouts/MainLayout.vue
Unescape Escape View File

@ -12,21 +12,21 @@
/>
<q-toolbar-title>
Форум экспертов EXPERRA
Форум ЭкспеРО
</q-toolbar-title>
</q-toolbar>
</q-header>
<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
content-class="bg-grey-1"
>
<q-list>
<q-item-label
header
class="text-grey-8"
style="background-color: #7B89CA"
class="text-white text-h6"
>
Меню
</q-item-label>
@ -59,19 +59,31 @@ export default {
leftDrawerOpen: false,
essentialLinks: [
{
title: 'Глагне',
title: 'Приборная панель',
caption: 'Перейти на глагне',
icon: 'backspace',
link: '/'
},
{
title: 'Experra',
title: 'Пользователи',
caption: 'Перейти на площадку',
icon: 'school',
link: 'https://quasar.dev'
},
{
title: 'Выйти',
title: 'Дополнительные поля',
caption: 'Выйти из платформы',
icon: 'subdirectory_arrow_left',
link: 'https://github.com/quasarframework'
},
{
title: 'Зоны ответственности',
caption: 'Выйти из платформы',
icon: 'subdirectory_arrow_left',
link: 'https://github.com/quasarframework'
},
{
title: 'Группы черт',
caption: 'Выйти из платформы',
icon: 'subdirectory_arrow_left',
link: 'https://github.com/quasarframework'

75
experra_forum/src/pages/Index.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template>
<div class="q-pa-md justify-center full-height">
<ForumSection v-for="section in sections" :key="section.name" class="q-mb-md" :title="section.name" :description="section.description" :items="section.items"/>
<div class="q-pa-md row justify-center full-height">
<ForumSection style="max-width: 700px" class="q-mb-md col" title="Семейства методик" description="Какое-то описание" :items="sections"/>
</div>
</template>
@ -15,72 +15,11 @@ export default {
data () {
return {
sections: [
{
name: 'Семейство методик 1',
description: 'Описание семейства 1',
items: [
{
name: 'razdel 1',
description: 'razdel 1 description',
icon: 'school',
nMessages: 10,
nTopics: 10,
lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
},
{
name: 'razdel 2',
description: 'razdel 2 description',
icon: 'arrow_left',
nMessages: 110,
nTopics: 1110,
lastMessage: { from: 'Ольга Быстрая', time: 'Вчера 08:20', topic: 'Сап эксперач!' }
}
]
},
{
name: 'Семейство методик 2',
description: 'Описание семейства 2',
items: [
{
name: 'Музыка',
description: 'razddescription',
icon: 'school',
nMessages: 10,
nTopics: 10,
lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
},
{
name: 'Анимэ',
description: 'description',
icon: 'check',
nMessages: 110,
nTopics: 1110,
lastMessage: { from: 'Ольга Быстрая', time: 'Вчера 08:20', topic: 'Сап эксперач!' }
},
{
name: 'Обучение школьников',
description: 'description',
icon: 'arrow_left',
nMessages: 110,
nTopics: 1110,
lastMessage: { from: 'Ольга Быстрая', time: 'Вчера 08:20', topic: 'Сап эксперач!' }
}
]
},
{
name: 'Кошки',
description: 'Описание семейства 3',
items: [
{
name: 'Флудилка',
description: 'description',
icon: 'map',
nMessages: 110,
nTopics: 1110,
lastMessage: { from: 'Ольга Быстрая', time: 'Вчера 08:20', topic: 'Сап эксперач!' }
}
]
}
{ name: 'Семейство 1', icon: 'error', 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 }
]
}
}

31
experra_forum/src/pages/NewTopic.vue
Unescape Escape View File

@ -1,31 +0,0 @@
<template>
<div class="q-pa-md q-gutter-sm">
<q-input v-model="title" label="Название" stack-label :dense="dense" />
<q-editor v-model="editor" min-height="5rem" />
<q-card flat bordered>
<q-badge label="Предпросмотр" />
<!--q-badge class="q-mb-sm" :label="'Сообщения: ' + item.nMessages" /-->
<q-card-section v-html="editor" />
</q-card>
<q-btn @click="createNewTopic" label="Создать"/>
</div>
</template>
<script>
export default {
name: 'NewTopic',
data () {
return {
title: null,
editor: null
}
},
methods: {
createNewTopic () {
this.$router.push({ path: '/topics/1' })
}
}
}
</script>

65
experra_forum/src/pages/Topic.vue
Unescape Escape View File

@ -1,68 +1,17 @@
<template>
<div class="q-pa-md q-gutter-sm">
<q-card flat bordered>
<p class="text-h5 q-pa-md">Название темы</p>
<p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32</p>
<q-separator spaced />
<div class="row" style="display: flex; width: 100%;">
<p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Иван Иванов, Сегодня 17:03</p>
<div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
<q-btn size="30px" flat style="color: #0000FF">+</q-btn>
<p class="text-h6 q-pa-sm q-mt-md">10</p>
<q-btn size="30px" flat style="color: #FF0080">-</q-btn>
</div>
</div>
</q-card>
<q-card class="q-ml-xl" flat bordered>
<p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32</p>
<q-separator spaced />
<div class="row" style="display: flex; width: 100%;">
<p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Олег Олегов, Сегодня 17:04</p>
<div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
<q-btn size="30px" flat style="color: #0000FF">+</q-btn>
<p class="text-h6 q-pa-sm q-mt-md">11</p>
<q-btn size="30px" flat style="color: #FF0080">-</q-btn>
</div>
</div>
</q-card>
<q-card class="q-ml-xl" flat bordered>
<p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа </p>
<q-separator spaced />
<div class="row" style="display: flex; width: 100%;">
<p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Алиса Встранечудесова, Сегодня 17:09</p>
<div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
<q-btn size="30px" flat style="color: #0000FF">+</q-btn>
<p class="text-h6 q-pa-sm q-mt-md">0</p>
<q-btn size="30px" flat style="color: #FF0080">-</q-btn>
</div>
</div>
</q-card>
<q-card class="q-ml-xl" flat bordered>
<p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа </p>
<q-separator spaced />
<div class="row" style="display: flex; width: 100%;">
<p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Евгений Женин, Сегодня 17:10</p>
<div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
<q-btn size="30px" flat style="color: #0000FF">+</q-btn>
<p class="text-h6 q-pa-sm q-mt-md">0</p>
<q-btn size="30px" flat style="color: #FF0080">-</q-btn>
</div>
</div>
</q-card>
<q-separator spaced />
<q-editor v-model="editor" min-height="5rem" />
<q-card flat bordered>
<q-badge label="Предпросмотр" />
<q-card-section v-html="editor" />
</q-card>
<q-btn @click="answer" label="Ответить"/>
<div class="q-pa-md justify-center full-height row">
<TopicThread class="col" style="max-width: 700px;"/>
</div>
</template>
<script>
import TopicThread from 'components/TopicThread'
export default {
name: 'Topic',
components: {
TopicThread
},
data () {
return {
editor: '',

67
experra_forum/src/pages/Topics.vue
Unescape Escape View File

@ -1,7 +1,32 @@
<template>
<div class="q-pa-md justify-center full-height">
<q-btn @click="goToNewTheme()" class="q-mt-md q-mb-md">Новая тема</q-btn>
<ForumSection class="q-mb-md" :title="name" :description="description" :items="themes" :topicsMode="true"/>
<div class="q-pa-md justify-center full-height row">
<!--q-btn @click="goToNewTheme()" class="q-mt-md q-mb-md">Новая тема</q-btn-->
<ForumSection style="max-width: 700px" class="q-mb-md col" :title="name" :description="description" :items="topics" :topicsMode="true"/>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-btn @click="creatingTopic=true" fab icon="add" color="primary" />
</q-page-sticky>
<q-dialog v-model="creatingTopic" persistent>
<q-card style="width:700px">
<q-card-section>
<div class="text-h6">Новая тема</div>
</q-card-section>
<q-card-section class="q-pt-none">
<div class="q-pa-md q-gutter-sm">
<q-input v-model="newTopicTitle" class="text-h5" label="Название" stack-label />
<q-editor v-model="newTopicEditor" min-height="5rem" />
<q-input v-for="(link, index) in links" v-bind:key="index" outlined v-model="link.text" label="Ссылка на приложение" />
<q-btn @click="createAttachment" round color="primary" icon="attach_file" /><br>
<p>Важная тема: <q-checkbox v-model="newTopicIsImportant" /></p>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn @click="createNewTopic" flat label="OK" color="primary" v-close-popup />
<q-btn @click="cleanNewTopicVals" flat label="Закрыть" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
@ -15,39 +40,36 @@ export default {
},
data () {
return {
links: [],
newTopicTitle: '',
newTopicEditor: '',
creatingTopic: false,
newTopicIsImportant: false,
name: 'Имя раздела',
description: 'описание',
themes: [
topics: [
{
name: 'tema 1',
description: 'razdel 1 description',
icon: 'school',
icon: 'error',
nMessages: 10,
nTopics: 10,
lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
},
{
name: 'tema 3',
description: 'razdel 1 description',
icon: 'school',
icon: 'error',
nMessages: 10,
nTopics: 10,
lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
},
{
name: 'tema 4',
description: 'razdel 1 description',
icon: 'school',
icon: 'fiber_manual_record',
nMessages: 10,
nTopics: 10,
lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
},
{
name: 'tema 2',
description: 'razdel 2 description',
icon: 'arrow_left',
icon: 'fiber_manual_record',
nMessages: 110,
nTopics: 1110,
lastMessage: { from: 'Ольга Быстрая', time: 'Вчера 08:20', topic: 'Сап эксперач!' }
}
]
@ -56,6 +78,19 @@ export default {
methods: {
goToNewTheme () {
this.$router.push({ path: '/new-topic/1' })
},
createNewTopic () {
this.topics.unshift({ name: this.newTopicTitle, icon: 'error', nMessages: 1, lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' } })
this.cleanNewTopicVals()
},
cleanNewTopicVals () {
this.newTopicTitle = ''
this.newTopicEditor = ''
this.links = []
this.newTopicIsImportant = false
},
createAttachment () {
this.links.push({ text: '' })
}
}
}

1
experra_forum/src/router/routes.js
Unescape Escape View File

@ -6,7 +6,6 @@ const routes = [
children: [
{ path: '', component: () => import('pages/Index.vue') },
{ path: '/topics/:id', component: () => import('pages/Topics.vue') },
{ path: '/new-topic/:id', component: () => import('pages/NewTopic.vue') },
{ path: '/topic/:id', component: () => import('pages/Topic.vue') }
]
}

Write Preview
Loading…
Cancel
Save