miklo
/
social
sforkowany z mirror/social
1
0
Forkuj 0
Kod Zgłoszenia Oczekujące zmiany Packages Projekty Wydania Wiki Aktywność

Make design more responsive 

Signed-off-by: Julius Härtl <jus@bitgrid.net>
alpha1
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ęć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

14
src/App.vue
Wyświetl plik

@ -4,8 +4,10 @@
<app-navigation :menu="menu" /> <app-navigation :menu="menu" />
</div> </div>
<div id="app-content"> <div id="app-content">
<Search v-if="searchTerm != ''" :term="searchTerm" /> <div class="social__wrapper">
<router-view v-if="searchTerm === ''" :key="$route.fullPath" /> <Search v-if="searchTerm != ''" :term="searchTerm" />
<router-view v-if="searchTerm === ''" :key="$route.fullPath" />
</div>
</div> </div>
</div> </div>
<div v-else class="setup"> <div v-else class="setup">
@ -42,7 +44,13 @@
} }
#app-content .social__wrapper { #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, #social-spacer a:hover,

11
src/components/Search.vue
Wyświetl plik

@ -21,21 +21,28 @@
--> -->
<template> <template>
<div class="social__wrapper"> <div class="social__container">
<div v-if="results.length < 1" id="emptycontent" :class="{'icon-loading': loading}"> <div v-if="results.length < 1" id="emptycontent" :class="{'icon-loading': loading}">
<div v-if="!loading" class="icon-search" /> <div v-if="!loading" class="icon-search" />
<h2 v-if="!loading">{{ t('social', 'No accounts found') }}</h2> <h2 v-if="!loading">{{ t('social', 'No accounts found') }}</h2>
<p v-if="!loading">No accounts found for {{ term }}</p> <p v-if="!loading">No accounts found for {{ term }}</p>
</div> </div>
<div v-if="match || results.length > 0"> <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" /> <UserEntry v-for="result in results" :key="result.id" :item="result" />
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.user-entry {
padding: 0;
}
h3 {
margin-top: -3px;
margin-left: 47px;
}
</style> </style>
<script> <script>

52
src/views/Timeline.vue
Wyświetl plik

@ -1,39 +1,33 @@
<template> <template>
<div class="social__wrapper"> <div class="social__container">
<div class="social__container"> <transition name="slide-fade">
<transition name="slide-fade"> <div v-if="showInfo" class="social__welcome">
<div v-if="showInfo" class="social__welcome"> <a class="close icon-close" href="#" @click="hideInfo()"><span class="hidden-visually">Close</span></a>
<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>
<h2>🎉 {{ t('social', 'Nextcloud becomes part of the federated social networks!') }}</h2> <p>
<p> {{ t('social', 'We automatically created a social account for you. Your social ID is the same as your federated cloud ID:') }}
{{ 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>
<span class="social-id">{{ socialId }}</span> </p>
</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>
</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>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.social__wrapper {
display: flex;
}
.social__container { .social__container {
flex-grow: 1; flex-grow: 1;
} }