use a bit more compact layout on mobile
This commit is contained in:
parent
4e339d9be3
commit
986c453702
|
@ -10,11 +10,12 @@ import {
|
|||
} from '../../services/notification_utils/notification_utils.js'
|
||||
import FaviconService from '../../services/favicon_service/favicon_service.js'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faCircleNotch, faCircleUp } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCircleNotch, faArrowUp, faMinus } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faCircleNotch,
|
||||
faCircleUp
|
||||
faArrowUp,
|
||||
faMinus
|
||||
)
|
||||
|
||||
const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
|
||||
|
|
|
@ -26,7 +26,13 @@
|
|||
type="button"
|
||||
@click="scrollToTop"
|
||||
>
|
||||
<FAIcon icon="circle-up" />
|
||||
<FALayers class="fa-scale-110 fa-old-padding-layer">
|
||||
<FAIcon icon="arrow-up" />
|
||||
<FAIcon
|
||||
icon="minus"
|
||||
transform="up-7"
|
||||
/>
|
||||
</FALayers>
|
||||
</button>
|
||||
<button
|
||||
v-if="unseenCount"
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import Status from '../status/status.vue'
|
||||
import { mapState } from 'vuex'
|
||||
import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
|
||||
import Conversation from '../conversation/conversation.vue'
|
||||
import TimelineMenu from '../timeline_menu/timeline_menu.vue'
|
||||
|
@ -6,11 +7,15 @@ import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.
|
|||
import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
|
||||
import { debounce, throttle, keyBy } from 'lodash'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faCircleNotch, faCog } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCircleNotch, faCirclePlus, faCog, faMinus, faArrowUp, faCheck } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faCircleNotch,
|
||||
faCog
|
||||
faCog,
|
||||
faMinus,
|
||||
faArrowUp,
|
||||
faCirclePlus,
|
||||
faCheck
|
||||
)
|
||||
|
||||
const Timeline = {
|
||||
|
@ -88,7 +93,10 @@ const Timeline = {
|
|||
},
|
||||
virtualScrollingEnabled () {
|
||||
return this.$store.getters.mergedConfig.virtualScrolling
|
||||
}
|
||||
},
|
||||
...mapState({
|
||||
mobileLayout: state => state.interface.layoutType === 'mobile',
|
||||
})
|
||||
},
|
||||
created () {
|
||||
const store = this.$store
|
||||
|
|
|
@ -1,10 +1,26 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.Timeline {
|
||||
.alert-dot {
|
||||
border-radius: 100%;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
position: absolute;
|
||||
left: calc(50% - 4px);
|
||||
top: calc(50% - 4px);
|
||||
margin-left: 6px;
|
||||
margin-top: -6px;
|
||||
background-color: var(--cBlue);
|
||||
}
|
||||
|
||||
.loadmore-text {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.loadmore-button {
|
||||
position: relative
|
||||
}
|
||||
|
||||
&.-blocked {
|
||||
cursor: progress;
|
||||
}
|
||||
|
|
|
@ -8,22 +8,53 @@
|
|||
type="button"
|
||||
@click="scrollToTop"
|
||||
>
|
||||
<FAIcon icon="circle-up" />
|
||||
<FALayers class="fa-scale-110 fa-old-padding-layer">
|
||||
<FAIcon icon="arrow-up" />
|
||||
<FAIcon
|
||||
icon="minus"
|
||||
transform="up-7"
|
||||
/>
|
||||
</FALayers>
|
||||
</button>
|
||||
<button
|
||||
v-if="showLoadButton"
|
||||
class="button-default loadmore-button"
|
||||
@click.prevent="showNewStatuses"
|
||||
>
|
||||
{{ loadButtonString }}
|
||||
</button>
|
||||
<div
|
||||
v-else-if="!embedded"
|
||||
class="loadmore-text faint"
|
||||
@click.prevent
|
||||
>
|
||||
{{ $t('timeline.up_to_date') }}
|
||||
</div>
|
||||
<template v-if="mobileLayout">
|
||||
<button
|
||||
v-if="showLoadButton"
|
||||
class="button-unstyled loadmore-button"
|
||||
@click.prevent="showNewStatuses"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="circle-plus"
|
||||
/>
|
||||
<div class="alert-dot" />
|
||||
</button>
|
||||
<div
|
||||
v-else-if="!embedded"
|
||||
class="loadmore-text faint"
|
||||
@click.prevent
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="check"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
v-if="showLoadButton"
|
||||
class="button-default loadmore-button"
|
||||
@click.prevent="showNewStatuses"
|
||||
>
|
||||
{{ loadButtonString }}
|
||||
</button>
|
||||
<div
|
||||
v-else-if="!embedded"
|
||||
class="loadmore-text faint"
|
||||
@click.prevent
|
||||
>
|
||||
{{ $t('timeline.up_to_date') }}
|
||||
</div>
|
||||
</template>
|
||||
<QuickFilterSettings v-if="!embedded" />
|
||||
<QuickViewSettings v-if="!embedded" />
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue