kopia lustrzana https://github.com/nextcloud/social
Make design more responsive
Signed-off-by: Julius Härtl <jus@bitgrid.net>pull/98/head
rodzic
bcc7172275
commit
7d0002bc17
14
src/App.vue
14
src/App.vue
|
@ -4,8 +4,10 @@
|
|||
<app-navigation :menu="menu" />
|
||||
</div>
|
||||
<div id="app-content">
|
||||
<Search v-if="searchTerm != ''" :term="searchTerm" />
|
||||
<router-view v-if="searchTerm === ''" :key="$route.fullPath" />
|
||||
<div class="social__wrapper">
|
||||
<Search v-if="searchTerm != ''" :term="searchTerm" />
|
||||
<router-view v-if="searchTerm === ''" :key="$route.fullPath" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="setup">
|
||||
|
@ -42,7 +44,13 @@
|
|||
}
|
||||
|
||||
#app-content .social__wrapper {
|
||||
margin: 15px calc(50% - 350px - 75px);
|
||||
padding: 15px;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
#app-content .social__wrapper {
|
||||
margin: 15px calc(50% - 350px - 75px);
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
#social-spacer a:hover,
|
||||
|
|
|
@ -21,21 +21,28 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div class="social__wrapper">
|
||||
<div class="social__container">
|
||||
<div v-if="results.length < 1" id="emptycontent" :class="{'icon-loading': loading}">
|
||||
<div v-if="!loading" class="icon-search" />
|
||||
<h2 v-if="!loading">{{ t('social', 'No accounts found') }}</h2>
|
||||
<p v-if="!loading">No accounts found for {{ term }}</p>
|
||||
</div>
|
||||
<div v-if="match || results.length > 0">
|
||||
<h3>{{ t('social', 'Search') }} {{ term }}</h3>
|
||||
<h3>{{ t('social', 'Searching for') }} {{ term }}</h3>
|
||||
<UserEntry v-for="result in results" :key="result.id" :item="result" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.user-entry {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: -3px;
|
||||
margin-left: 47px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -1,39 +1,33 @@
|
|||
<template>
|
||||
<div class="social__wrapper">
|
||||
<div class="social__container">
|
||||
<transition name="slide-fade">
|
||||
<div v-if="showInfo" class="social__welcome">
|
||||
<a class="close icon-close" href="#" @click="hideInfo()"><span class="hidden-visually">Close</span></a>
|
||||
<h2>🎉 {{ t('social', 'Nextcloud becomes part of the federated social networks!') }}</h2>
|
||||
<p>
|
||||
{{ t('social', 'We automatically created a social account for you. Your social ID is the same as your federated cloud ID:') }}
|
||||
<span class="social-id">{{ socialId }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="social__timeline">
|
||||
<composer />
|
||||
<timeline-entry v-for="entry in timeline" :item="entry" :key="entry.id" />
|
||||
<infinite-loading ref="infiniteLoading" @infinite="infiniteHandler">
|
||||
<div slot="spinner"><div class="icon-loading" /></div>
|
||||
<div slot="no-more"><div class="list-end" /></div>
|
||||
<div slot="no-results">
|
||||
<div id="emptycontent">
|
||||
<div class="icon-social" />
|
||||
<h2>{{ t('social', 'No posts found.') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</infinite-loading>
|
||||
<div class="social__container">
|
||||
<transition name="slide-fade">
|
||||
<div v-if="showInfo" class="social__welcome">
|
||||
<a class="close icon-close" href="#" @click="hideInfo()"><span class="hidden-visually">Close</span></a>
|
||||
<h2>🎉 {{ t('social', 'Nextcloud becomes part of the federated social networks!') }}</h2>
|
||||
<p>
|
||||
{{ t('social', 'We automatically created a social account for you. Your social ID is the same as your federated cloud ID:') }}
|
||||
<span class="social-id">{{ socialId }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="social__timeline">
|
||||
<composer />
|
||||
<timeline-entry v-for="entry in timeline" :item="entry" :key="entry.id" />
|
||||
<infinite-loading ref="infiniteLoading" @infinite="infiniteHandler">
|
||||
<div slot="spinner"><div class="icon-loading" /></div>
|
||||
<div slot="no-more"><div class="list-end" /></div>
|
||||
<div slot="no-results">
|
||||
<div id="emptycontent">
|
||||
<div class="icon-social" />
|
||||
<h2>{{ t('social', 'No posts found.') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</infinite-loading>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.social__wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.social__container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue