mirror of
https://github.com/styppo/hamstr.git
synced 2024-10-18 13:33:22 +00:00
Responsive layout
This commit is contained in:
parent
47ebdccddb
commit
c7d67fa6a3
@ -1,3 +1,5 @@
|
|||||||
$phone-sm: 374px;
|
$phone-sm: 374px;
|
||||||
$phone: 414px;
|
$phone: 414px;
|
||||||
$tablet: 1024px;
|
$phone-lg: 755px;
|
||||||
|
$tablet-sm: 1113px;
|
||||||
|
$tablet: 1310px;
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<span
|
<span
|
||||||
:class="'username' + (wrap ? ' two-line' : '')"
|
class="username"
|
||||||
|
:class="{'two-line': wrap}"
|
||||||
>
|
>
|
||||||
<a @click.stop="toProfile(pubkey)">
|
<a @click.stop="toProfile(pubkey)">
|
||||||
<span
|
<span
|
||||||
|
@ -1,5 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="rootCssClass">
|
<div
|
||||||
|
class="post-editor"
|
||||||
|
:class="{
|
||||||
|
'post-editor-compact': compact,
|
||||||
|
'post-editor-compact-collapsed': collapsed
|
||||||
|
}"
|
||||||
|
>
|
||||||
<div class="post-editor-avatar">
|
<div class="post-editor-avatar">
|
||||||
<BaseUserAvatar :pubkey="$store.state.keys.pub" />
|
<BaseUserAvatar :pubkey="$store.state.keys.pub" />
|
||||||
</div>
|
</div>
|
||||||
@ -102,14 +108,6 @@ export default {
|
|||||||
collapsed: this.compact,
|
collapsed: this.compact,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
rootCssClass() {
|
|
||||||
let classes = ['post-editor']
|
|
||||||
if (this.compact) classes.push('post-editor-compact')
|
|
||||||
if (this.collapsed) classes.push('post-editor-compact-collapsed')
|
|
||||||
return classes
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
hasPostText() {
|
hasPostText() {
|
||||||
return this.post.text.trim().length > 0
|
return this.post.text.trim().length > 0
|
||||||
@ -162,7 +160,7 @@ button.btn {
|
|||||||
padding: 12px;
|
padding: 12px;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
resize: vertical;
|
resize: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -206,7 +204,6 @@ button.btn {
|
|||||||
.input-section {
|
.input-section {
|
||||||
textarea {
|
textarea {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
resize: none;
|
|
||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -42,13 +42,14 @@
|
|||||||
class="menu-post-button"
|
class="menu-post-button"
|
||||||
@click="$store.commit('toggleTweetButton')"
|
@click="$store.commit('toggleTweetButton')"
|
||||||
>
|
>
|
||||||
Post
|
<span class="label">Post</span>
|
||||||
|
<BaseIcon class="icon" icon="pen" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ProfilePopup />
|
<ProfilePopup />
|
||||||
<div
|
<div
|
||||||
class="mobile-close-menu-button"
|
class="mobile-close-menu-button"
|
||||||
@click="$store.commit('setMobileMenuState', false)"
|
@click="$emit('mobile-menu-close')"
|
||||||
>
|
>
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<BaseIcon icon="left" />
|
<BaseIcon icon="left" />
|
||||||
@ -76,6 +77,7 @@ export default {
|
|||||||
//MoreMenu,
|
//MoreMenu,
|
||||||
ProfilePopup
|
ProfilePopup
|
||||||
},
|
},
|
||||||
|
emits: ['mobile-menu-close'],
|
||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
items: MENU_ITEMS,
|
items: MENU_ITEMS,
|
||||||
@ -118,6 +120,7 @@ menu {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
padding-inline-start: 0;
|
||||||
.menu {
|
.menu {
|
||||||
&-nav {
|
&-nav {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -141,7 +144,7 @@ menu {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-post-button {
|
&-post-button {
|
||||||
width: 80%;
|
width: 90%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -151,6 +154,9 @@ menu {
|
|||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
.icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mobile-close-menu-button {
|
.mobile-close-menu-button {
|
||||||
@ -158,17 +164,37 @@ menu {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $tablet) and (min-width: $phone) {
|
||||||
|
menu {
|
||||||
|
align-items: flex-end;
|
||||||
|
.menu-post-button {
|
||||||
|
width: fit-content;
|
||||||
|
padding: 1rem;
|
||||||
|
.label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
display: block;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $phone) {
|
@media screen and (max-width: $phone) {
|
||||||
menu {
|
menu {
|
||||||
.mobile-close-menu-button {
|
.mobile-close-menu-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 0;
|
||||||
top: 10px;
|
top: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background-color: $color-primary;
|
background-color: $color-primary;
|
||||||
|
cursor: pointer;
|
||||||
.icon {
|
.icon {
|
||||||
width: 1.2rem;
|
width: 1.2rem;
|
||||||
height: 1.2rem;
|
height: 1.2rem;
|
||||||
@ -181,7 +207,8 @@ menu {
|
|||||||
span {
|
span {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-left: 8px;
|
margin: 0 4px;
|
||||||
|
line-height: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -47,7 +47,8 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import 'assets/theme/colors.scss';
|
@import "assets/theme/colors.scss";
|
||||||
|
@import "assets/variables.scss";
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
@ -101,4 +102,15 @@ a {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $tablet) and (min-width: $phone) {
|
||||||
|
.menu-item {
|
||||||
|
&-content {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -105,14 +105,13 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import 'assets/theme/colors.scss';
|
@import "assets/theme/colors.scss";
|
||||||
|
@import "assets/variables.scss";
|
||||||
|
|
||||||
.menu-profile {
|
.menu-profile {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 4px 1rem;
|
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
margin-right: 1rem;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
transition: 120ms ease-in-out;
|
transition: 120ms ease-in-out;
|
||||||
@ -123,7 +122,7 @@ export default {
|
|||||||
background-color: rgba($color: $color-primary, $alpha: 0.3);
|
background-color: rgba($color: $color-primary, $alpha: 0.3);
|
||||||
}
|
}
|
||||||
&-pic {
|
&-pic {
|
||||||
margin: 6px 0;
|
padding: 2px;
|
||||||
img {
|
img {
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -207,4 +206,10 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $tablet) and (min-width: $phone) {
|
||||||
|
.menu-profile-items {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -30,7 +30,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
trends: [
|
trends: [
|
||||||
{
|
{
|
||||||
name: '#nostr',
|
name: '#todo',
|
||||||
postCount: 58
|
postCount: 58
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -4,10 +4,10 @@
|
|||||||
<TheKeyInitializationDialog style="max-height: 85vh" @look-around="setLookingAroundMode"/>
|
<TheKeyInitializationDialog style="max-height: 85vh" @look-around="setLookingAroundMode"/>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
|
||||||
<div class="layout">
|
<div class="layout" @click="mobileMenuOpen = false">
|
||||||
<div class="layout-menu">
|
<div class="layout-menu">
|
||||||
<div class="layout-menu-fixed">
|
<div class="layout-menu-fixed" :class="{active: mobileMenuOpen}">
|
||||||
<MainMenu />
|
<MainMenu @click.stop @mobile-menu-close="mobileMenuOpen = false" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -46,6 +46,13 @@
|
|||||||
<Trends />
|
<Trends />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="mobile-menu-toggler"
|
||||||
|
@click.stop="mobileMenuOpen = !mobileMenuOpen"
|
||||||
|
>
|
||||||
|
<BaseIcon icon="hamburger" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-page-sticky v-if="($q.screen.width < 600)" @click.stop="resizePostEntryPlaceholder" id="bottom-drawer" position="bottom" class="z-top xs lt-sm">
|
<q-page-sticky v-if="($q.screen.width < 600)" @click.stop="resizePostEntryPlaceholder" id="bottom-drawer" position="bottom" class="z-top xs lt-sm">
|
||||||
@ -71,15 +78,6 @@
|
|||||||
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TheUserMenu
|
|
||||||
id="bottom-menu"
|
|
||||||
:compact-mode="true"
|
|
||||||
:posting="postEntryOpen"
|
|
||||||
@toggle-post-entry="togglePostEntry"
|
|
||||||
@scroll-to-rect="scrollToRect"
|
|
||||||
@set-user="lookingAround=false"
|
|
||||||
/>
|
|
||||||
</q-page-sticky>
|
</q-page-sticky>
|
||||||
</q-layout>
|
</q-layout>
|
||||||
</template>
|
</template>
|
||||||
@ -90,19 +88,19 @@ import { scroll, useQuasar, LocalStorage } from 'quasar'
|
|||||||
const { getVerticalScrollPosition, setVerticalScrollPosition} = scroll
|
const { getVerticalScrollPosition, setVerticalScrollPosition} = scroll
|
||||||
import { activateSub, deactivateSub, destroyStreams } from '../query'
|
import { activateSub, deactivateSub, destroyStreams } from '../query'
|
||||||
import MainMenu from 'components/MainMenu/MainMenu.vue'
|
import MainMenu from 'components/MainMenu/MainMenu.vue'
|
||||||
import TheUserMenu from 'components/TheUserMenu.vue'
|
|
||||||
import TheKeyInitializationDialog from 'components/TheKeyInitializationDialog.vue'
|
import TheKeyInitializationDialog from 'components/TheKeyInitializationDialog.vue'
|
||||||
import SearchBox from 'components/SearchBox/SearchBox.vue'
|
import SearchBox from 'components/SearchBox/SearchBox.vue'
|
||||||
import Trends from 'components/Trends/index.vue'
|
import Trends from 'components/Trends/index.vue'
|
||||||
|
import BaseIcon from 'components/BaseIcon/index.vue'
|
||||||
import { setCssVar, getCssVar } from 'quasar'
|
import { setCssVar, getCssVar } from 'quasar'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'MainLayout',
|
name: 'MainLayout',
|
||||||
components: {
|
components: {
|
||||||
|
BaseIcon,
|
||||||
MainMenu,
|
MainMenu,
|
||||||
SearchBox,
|
SearchBox,
|
||||||
Trends,
|
Trends,
|
||||||
TheUserMenu,
|
|
||||||
TheKeyInitializationDialog,
|
TheKeyInitializationDialog,
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -124,6 +122,8 @@ export default defineComponent({
|
|||||||
postEntryOpen: false,
|
postEntryOpen: false,
|
||||||
replyEvent: null,
|
replyEvent: null,
|
||||||
lookingAround: false,
|
lookingAround: false,
|
||||||
|
|
||||||
|
mobileMenuOpen: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -355,25 +355,28 @@ export default defineComponent({
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
&-fixed {
|
&-fixed {
|
||||||
position: fixed;
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: inherit;
|
max-width: inherit;
|
||||||
|
padding: 0 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-flow {
|
&-flow {
|
||||||
border-right: $border-dark;
|
border-right: $border-dark;
|
||||||
border-left: $border-dark;
|
border-left: $border-dark;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: 660px;
|
||||||
max-width: 660px;
|
max-width: 660px;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
&-sidebar {
|
&-sidebar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 330px;
|
min-width: 330px;
|
||||||
margin-left: 1rem;
|
margin: 0 1rem;
|
||||||
&-fixed {
|
&-fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 330px;
|
||||||
max-width: inherit;
|
max-width: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -382,32 +385,44 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $tablet-sm) {
|
||||||
|
.layout-sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $phone-lg) {
|
||||||
|
.layout-menu {
|
||||||
|
max-width: 80px;
|
||||||
|
}
|
||||||
|
.layout-flow {
|
||||||
|
min-width: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $phone) {
|
@media screen and (max-width: $phone) {
|
||||||
.layout-menu-fixed-container{
|
.layout {
|
||||||
|
&-menu {
|
||||||
|
max-width: 300px;
|
||||||
|
width: unset;
|
||||||
|
&-fixed {
|
||||||
|
position: fixed;
|
||||||
background-color: $color-bg;
|
background-color: $color-bg;
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
box-shadow: $shadow-white;
|
box-shadow: $shadow-white;
|
||||||
transition: 200ms ease;
|
transition: 200ms ease;
|
||||||
padding-left: 20px;
|
z-index: 1000;
|
||||||
&.active {
|
&.active {
|
||||||
transform: translateX(0%);
|
transform: translateX(0%);
|
||||||
z-index: 666;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layout-sidebar {
|
|
||||||
&-fixed {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.layout {
|
|
||||||
&-sidebar {
|
&-sidebar {
|
||||||
display: none;
|
display: none;
|
||||||
max-width: unset;
|
max-width: unset;
|
||||||
|
&-fixed {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
&-menu {
|
|
||||||
max-width: 300px;
|
|
||||||
width: unset;
|
|
||||||
}
|
}
|
||||||
.mobile-menu-toggler {
|
.mobile-menu-toggler {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -415,7 +430,7 @@ export default defineComponent({
|
|||||||
left: 1rem;
|
left: 1rem;
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
padding: 8px;
|
padding: 6px 8px 8px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background-color: $color-primary;
|
background-color: $color-primary;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -485,141 +500,4 @@ export default defineComponent({
|
|||||||
.q-fab__actions--left {
|
.q-fab__actions--left {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
|
||||||
body {
|
|
||||||
height: unset;
|
|
||||||
overflow: unset;
|
|
||||||
}
|
|
||||||
#navagation-buttons .q-btn{
|
|
||||||
font-size: .8rem;
|
|
||||||
}
|
|
||||||
#layout-container {
|
|
||||||
justify-content: flex-start;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
#left-drawer {
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 50px;
|
|
||||||
max-width: 50px;
|
|
||||||
min-width: 50px;
|
|
||||||
flex: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
#middle-page {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
min-width: 550px;
|
|
||||||
max-width: 650px;
|
|
||||||
height: 100vh;
|
|
||||||
padding-bottom: 0;
|
|
||||||
flex: 1;
|
|
||||||
flex-shrink: 1;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
#middle-page .q-page-container {
|
|
||||||
overflow: auto;
|
|
||||||
height: 100%;
|
|
||||||
flex: 1;
|
|
||||||
flex-shrink: 1;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
#post-entry {
|
|
||||||
height: fit-content;
|
|
||||||
display: unset;
|
|
||||||
}
|
|
||||||
#bottom-menu,
|
|
||||||
#bottom-menu-placeholder,
|
|
||||||
#bottom-post-entry-placeholder {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 700px) {
|
|
||||||
#layout-container {
|
|
||||||
justify-content: flex-start;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
#left-drawer, #right-drawer {
|
|
||||||
display: flex;
|
|
||||||
visibility: inherit;
|
|
||||||
height: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
}
|
|
||||||
#right-drawer {
|
|
||||||
width: auto;
|
|
||||||
max-width: 300px;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
flex: 1;
|
|
||||||
flex-shrink: 1;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
#middle-page {
|
|
||||||
min-width: 400px;
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 1023px) {
|
|
||||||
#left-drawer {
|
|
||||||
width: 200px;
|
|
||||||
min-width: 200px;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
#middle-page {
|
|
||||||
width: 600px;
|
|
||||||
min-width: 600px;
|
|
||||||
max-width: 600px;
|
|
||||||
flex: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
#navagation-buttons .q-btn{
|
|
||||||
font-size: .9rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 1100px) {
|
|
||||||
#left-drawer {
|
|
||||||
width: 200px;
|
|
||||||
min-width: 200px;
|
|
||||||
max-width: 300px;
|
|
||||||
flex: 1;
|
|
||||||
flex-shrink: 1;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
#right-drawer {
|
|
||||||
width: 300px;
|
|
||||||
min-width: 300px;
|
|
||||||
max-width: 300px;
|
|
||||||
flex: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 1200px) {
|
|
||||||
#layout-container {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
#left-drawer, #right-drawer {
|
|
||||||
width: calc((100vw - 600px) / 2);
|
|
||||||
max-width: 300px;
|
|
||||||
flex: 1;
|
|
||||||
flex-shrink: 1;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
#middle-page {
|
|
||||||
width: 600px;
|
|
||||||
min-width: 600px;
|
|
||||||
max-width: 600px;
|
|
||||||
flex: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -61,7 +61,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-if='!searchText'>
|
<div v-if='!searchText'>
|
||||||
<BasePostThread v-for="thread in threads" :key="thread[0].id" :events="thread" @add-event='addEvent'/>
|
<BasePostThread v-for="thread in threads" :key="thread[0].id" :events="thread" @add-event='addEvent'/>
|
||||||
<BaseButtonLoadMore :loading-more='loadingMore' :reached-end='reachedEnd' @click='loadMore' />
|
<BaseButtonLoadMore :loading='loadingMore' :reached-end='reachedEnd' @click='loadMore' />
|
||||||
</div>
|
</div>
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user