Make design more responsive

Signed-off-by: Julius Härtl <jus@bitgrid.net>
pull/98/head
Julius Härtl 2018-12-03 09:57:26 +01:00
rodzic bcc7172275
commit 7d0002bc17
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4C614C6ED2CDE6DF
3 zmienionych plików z 43 dodań i 34 usunięć

Wyświetl plik

@ -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,

Wyświetl plik

@ -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>

Wyświetl plik

@ -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;
}