Skip to content

Commit

Permalink
Merge pull request #84 from Importantus/53-refactor-feed-ui
Browse files Browse the repository at this point in the history 
💄 Get slide animation on feed page working in chrome
  • Loading branch information
@Draculente
Draculente authored Nov 19, 2024
2 parents e124d11 + 0e431ca commit 702f189
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 52 deletions.
74 changes: 36 additions & 38 deletions frontend/src/components/feeds/feedPage/FeedPageItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,50 +82,48 @@ console.log(props.feed);
</div>
</div>
</div>
<Transition name="slide-fade">
<div v-if="showOptions" class="px-4 py-4 rounded-lg bg-[#282828] flex flex-col gap-4 z-0"
:class="{ 'rounded-t-none': showOptions }">

<FeedDescription v-if="props.feed.description" :description="props.feed.description"></FeedDescription>

<div v-if="props.feed.errormessage">
<div class="flex flex-row items-center gap-2 bg-red-800 rounded-t-lg px-3 py-2">
<Info size="25"></Info>
<p class="text-left font-thin text-sm">We failed to fetch this feed for {{
props.feed.error_count }} times. Error messages related to the
app can be reported <a class="underline" :href="REPORT_URL">here</a>.</p>
</div>
<p class="bg-red-500 rounded-b-lg px-3 py-2 z-10 text-sm">{{ props.feed.errormessage
}}</p>
<div style="transition: all ease .5s;" class="px-4 py-4 rounded-lg bg-[#282828] flex flex-col gap-4 z-0"
:class="{ 'rounded-t-none h-auto': showOptions, 'h-0 overflow-hidden -mt-9': !showOptions }">

<FeedDescription v-if="props.feed.description" :description="props.feed.description"></FeedDescription>

<div v-if="props.feed.errormessage">
<div class="flex flex-row items-center gap-2 bg-red-800 rounded-t-lg px-3 py-2">
<Info size="25"></Info>
<p class="text-left font-thin text-sm">We failed to fetch this feed for {{
props.feed.error_count }} times. Error messages related to the
app can be reported <a class="underline" :href="REPORT_URL">here</a>.</p>
</div>
<p class="bg-red-500 rounded-b-lg px-3 py-2 z-10 text-sm">{{ props.feed.errormessage
}}</p>
</div>

<div class="flex justify-between items-center gap-2">
<div>
<h3 class="font-semibold">Open in App?</h3>
<p class="text-secondary-500 text-left font-thin text-sm">Should Feed Articles Open In App?
</p>
</div>
<label class="relative inline-flex items-center cursor-pointer" title="open Feed with App">
<input type="checkbox" class="sr-only peer" v-model="openInApp">
<div class="w-11 h-6 bg-primary-600 rounded-full peer dark:bg-background-900 dark:peer-focus:ring-orange-00 peer-checked:after:translate-x-full
<div class="flex justify-between items-center gap-2">
<div>
<h3 class="font-semibold">Open in App?</h3>
<p class="text-secondary-500 text-left font-thin text-sm">Should Feed Articles Open In App?
</p>
</div>
<label class="relative inline-flex items-center cursor-pointer" title="open Feed with App">
<input type="checkbox" class="sr-only peer" v-model="openInApp">
<div class="w-11 h-6 bg-primary-600 rounded-full peer dark:bg-background-900 dark:peer-focus:ring-orange-00 peer-checked:after:translate-x-full
rtl:peer-checked:after:-translate-x-full peer-checked:after:border-primary-600 after:content-[''] after:absolute after:top-0.5
after:start-[2px] after:bg-primary-600 after:border-primary-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all
dark:border-background-900 peer-checked:bg-primary-800">
</div>
</label>
</div>
</div>
</label>
</div>

<div class="flex gap-3">
<button v-if="canShare" @click="shareFeed();" title="share Feed"
class=" w-full h-11 bg-primary-600 rounded-lg hover:bg-amber-700 transition">Share</button>
<button @click="openFeedPage();" title="open Feed with new Tap"
class=" w-full h-11 bg-primary-600 rounded-lg hover:bg-amber-700 transition">Open</button>
<button @click="store.deleteFeed(props.feed.id)" title="remove"
class="w-11 h-11 flex-shrink-0 bg-black/30 rounded-lg hover:bg-red-900 transition flex justify-center items-center">
<Trash2 size="20" class="text-background-300" />
</button>
</div>
<div class="flex gap-3">
<button v-if="canShare" @click="shareFeed();" title="share Feed"
class=" w-full h-11 bg-primary-600 rounded-lg hover:bg-amber-700 transition">Share</button>
<button @click="openFeedPage();" title="open Feed with new Tap"
class=" w-full h-11 bg-primary-600 rounded-lg hover:bg-amber-700 transition">Open</button>
<button @click="store.deleteFeed(props.feed.id)" title="remove"
class="w-11 h-11 flex-shrink-0 bg-black/30 rounded-lg hover:bg-red-900 transition flex justify-center items-center">
<Trash2 size="20" class="text-background-300" />
</button>
</div>
</Transition>
</div>
</div>
</template>
28 changes: 14 additions & 14 deletions frontend/src/components/feeds/feedPage/FeedPageList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,19 @@ store.getFeedList();
</script>

<template>
<div>
<div v-if="store.feedList.length > 0">
<NonBlockingLoadIndicator :show="store.state === StoreStatus.LOADING" />
<TransitionGroup name="list" tag="div" class="flex flex-col gap-4 overflow-x-hidden">
<FeedItem v-for="feed in store.feedList" :key="feed.id" :feed="feed" />
</TransitionGroup>
</div>
<div v-else-if="store.feedList.length === 0 && store.state === StoreStatus.READY">
<div class="flex w-full items-center justify-center flex-col h-full mt-[20vh]">
<img src="/images/LovingDoodle.svg" alt="A Person holding a heart in their hands" class="w-[80%]">
<p class="text-background-600 m-0">No subscribed feeds yet.</p>
</div>
</div>
<BlockingLoadIndicator v-else :show="true" />
<div style="interpolate-size: allow-keywords;">
<div v-if="store.feedList.length > 0">
<NonBlockingLoadIndicator :show="store.state === StoreStatus.LOADING" />
<TransitionGroup name="list" tag="div" class="flex flex-col gap-4 overflow-x-hidden">
<FeedItem v-for="feed in store.feedList" :key="feed.id" :feed="feed" />
</TransitionGroup>
</div>
<div v-else-if="store.feedList.length === 0 && store.state === StoreStatus.READY">
<div class="flex w-full items-center justify-center flex-col h-full mt-[20vh]">
<img src="/images/LovingDoodle.svg" alt="A Person holding a heart in their hands" class="w-[80%]">
<p class="text-background-600 m-0">No subscribed feeds yet.</p>
</div>
</div>
<BlockingLoadIndicator v-else :show="true" />
</div>
</template>

0 comments on commit 702f189

Please sign in to comment.