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