Items/draft (#400)

* add 'no more posts' message at the end of all posts display + fix texts frmo Tess + fix filter bug

* remove right/left images to keep only left and rotate in CSS when necessary

* fix default draft handling + repost popup bug

* remove duplicate css classes

* fix no more posts message always displayed

* responsive comment face selector

* consolidated no more posts check

Co-authored-by: jack dishman <[email protected]>

Author: ldmweb

src/assets/images/reactions/right-side/admiration.webp

@@ -1,21 +1,16 @@
 <template>
-	<div class="my-4 flex flex-row items-center justify-between">
+	<div
+		v-if="draft.title !== `` || draft.subtitle !== `` || draft.content !== ``"
+		class="my-4 flex flex-row items-center justify-between"
+	>
 		<!-- Title -->
 		<div class="flex flex-grow flex-col">
 			<h6
-				v-if="numberOfDrafts > 1"
 				class="truncate text-base font-semibold"
 				:style="$route.name === `home` ? `max-width: 259px` : `max-width: 408px`"
 			>
 				{{ draft.title === `` ? `New Post` : draft.title }}
 			</h6>
-			<h6
-				v-else
-				class="truncate text-base font-semibold"
-				:style="$route.name === `home` ? `max-width: 259px` : `max-width: 408px`"
-			>
-				{{ draft.title === `` ? `Default draft` : draft.title }}
-			</h6>
 			<p v-if="draft.timestamp !== 0" class="text-gray5 text-sm">Last saved {{ $formatDate(draft.timestamp) }}</p>
 			<p v-else class="text-gray5 text-sm">No save</p>
 		</div>
@@ -50,11 +45,7 @@
 					<span class="text-primary ml-1 self-center text-sm">Edit this draft</span>
 				</button>
 				<!-- Delete -->
-				<button
-					v-if="numberOfDrafts > 1"
-					class="focus:outline-none text-negative mt-2 flex"
-					@click="deleteDraft(draft)"
-				>
+				<button class="focus:outline-none text-negative mt-2 flex" @click="deleteDraft(draft)">
 					<BinIcon class="p-1" />
 					<span class="text-negative ml-1 self-center text-sm">Delete this draft</span>
 				</button>

src/assets/images/reactions/right-side/aloof.webp

@@ -164,17 +164,17 @@ export default Vue.extend({
 		getText(): string {
 			switch (this.step) {
 				case 0:
-					return `As your daily entry point to Blogchain, this screen is important. Make it truly your own by picking whichever options you prefer for displaying content, editing tools, widgets, and more.`
+					return `Make it truly your own by selecting your preferences for displaying content, editing tools, updating widgets, and customizing everything as you wish!`
 				case 1:
-					return `On this page, we make it easy for you to find posts by writers who suit your interests well. Browse categories, featured tags, or trending topics to get started.`
+					return `Here you can easily browse posts that suit your interests. Scroll through  various categories, featured tags, or trending topics to get started.`
 				case 2:
-					return `Sometimes a post or headline catches your attention, but there’s no time to read it now. That’s why Blogchain makes it easy to highlight such content for later and then share with friends if you want.`
+					return `Sometimes a post or headline catches your attention, but you’re short of time. No worries. Blogchain makes it easy to save and share content for later.`
 				case 3:
-					return `Have an idea you’d like to share with the world? Blogchain’s simple editing tool will make it easy for you to craft and publish your post in a intuitive writing experience.`
+					return `Have an idea you’d like to share with the world? Blogchain’s simple editing tool makes it easy to craft and publish your post through an intuitive writing experience.`
 				case 4:
-					return `Agree or disagree with something you’ve read on Blogchain? Use our comment features to talk about it with other readers. You can even include one of our custom reaction illustrations to make your point.`
+					return `Agree or disagree with something you’ve read on Blogchain? Use our comment features to discuss with other readers. You can even include a custom reaction illustration to make your point.`
 				case 5:
-					return `You will be able to change your profile and add more informations later on your profile page.`
+					return `You’ll be able to update your profile or add more information later!`
 				default:
 					return `out of scope`
 			}

src/assets/images/reactions/right-side/awe.webp

@@ -1,11 +1,5 @@
 <template>
-	<svg
-		class="-mr-px h-5 w-5 rotate-90 transform"
-		fill="none"
-		stroke="currentColor"
-		viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
-	>
+	<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
 	</svg>
 </template>

src/assets/images/reactions/right-side/bored.webp

@@ -85,7 +85,7 @@
 						<div v-for="f in faceStats.slice(page * 6, page * 6 + 6)" :key="f.face.label" class="flex w-24 flex-col">
 							<div class="flex flex-col rounded-lg border p-1" :class="`border-` + getStyle(f.face.label)">
 								<span class="self-center text-xs">{{ f.face.label }}</span>
-								<img :src="f.face.leftImage" :alt="f.face.label" class="h-16 w-16 self-center" />
+								<img :src="f.face.image" :alt="f.face.label" class="h-16 w-16 self-center" />
 							</div>
 							<span class="mt-1 self-center text-sm font-semibold"
 								>{{ ((f.count / getCommentCount(`total`)) * 100).toFixed(1) }}%</span
@@ -106,7 +106,7 @@
 					<button class="focus:outline-none ml-2" @click="toggleStats = true"><StatsIcon /></button>
 				</div>
 				<CommentFilter
-					v-show="!showEmotions && comments.length > 0"
+					v-show="!showEmotions && (comments.length > 0 || this.filter !== ``)"
 					:filter="filter"
 					class="modal-animation"
 					@clicked="setFilter"
@@ -115,20 +115,18 @@
 			<!-- Top overlay with selector -->
 			<div v-show="showEmotions" class="relative flex w-full flex-row-reverse">
 				<div
-					class="z-10 mr-1 flex flex-row justify-between rounded-tr-lg bg-white p-5"
-					:style="$route.name === `post-post` ? `width: 490px` : `width: 406px`"
+					class="z-10 mr-1 hidden xl:flex flex-row justify-between rounded-tr-lg bg-white p-5 xl:w-3/5"
 					style="margin-bottom: -112px; margin-top: 1px; pointer-events: none"
 				>
 					<h6 class="text-primary self-center text-center text-2xl font-semibold">How do you feel?</h6>
 				</div>
-				<div class="absolute z-10 mt-10 mr-8 flex items-center">
+				<div class="absolute z-20 mt-8 xl:mt-10 mr-8 flex items-center">
 					<button class="bg-gray1 focus:outline-none rounded-full p-1" @click="showEmotions = false">
 						<CloseIcon />
 					</button>
 				</div>
 				<div
-					class="z-10 flex flex-row justify-between rounded-tl-lg bg-white p-5"
-					:style="$route.name === `post-post` ? `width: 350px` : `width: 306px`"
+					class="z-10 flex flex-row justify-between rounded-tl-lg bg-white p-5 w-full xl:w-2/5 mr-1 xl:mr-0"
 					style="
 						margin-bottom: -112px;
 						background: linear-gradient(#ffffff, rgba(255, 255, 255, 0));
@@ -159,7 +157,7 @@
 					:class="showEmotions ? `` : `border p-2 bg-` + selectedEmotionColor"
 				>
 					<div
-						class="flex w-full items-center justify-center overflow-hidden rounded-xl"
+						class="flex w-full items-center justify-center overflow-hidden rounded-xl relative"
 						:style="showEmotions ? `height: 20rem` : `height: 10rem`"
 					>
 						<div v-if="this.$store.state.session.id !== ``" class="flex w-full flex-row">
@@ -168,29 +166,45 @@
 								<button class="focus:outline-none h-auto flex-shrink-0" @click="toggleShowEmotions">
 									<span v-if="activeEmotion.label !== ``">
 										<img
-											:src="activeEmotion.rightImage"
+											:src="activeEmotion.image"
 											:alt="activeEmotion.label"
-											class="object-contain"
-											style="width: 126px; height: 126px"
+											class="object-contain w-24 h-24 xl:w-32 xl:h-32"
+											style="transform: rotateY(180deg)"
 										/>
 									</span>
 									<span v-else
 										><FlipIcon
-											class="transition duration-500 ease-in-out opacity-50 hover:opacity-100"
-											style="width: 140px; height: 140px"
+											class="transition duration-500 ease-in-out opacity-50 hover:opacity-100 w-24 h-24 xl:w-32 xl:h-32"
 									/></span>
 								</button>
 								<textarea
+									v-if="comments.length > 0"
 									v-model="comment"
-									class="focus:outline-none mr-6 h-40 w-full resize-none overflow-y-auto py-4 pl-2 pr-16 leading-normal"
+									class="focus:outline-none mr-6 h-40 w-full resize-none overflow-y-auto py-4 pl-2 pr-10 xl:pr-16 leading-normal"
 									name="body"
 									placeholder="What's your response?"
 								/>
+								<textarea
+									v-else
+									v-model="comment"
+									class="focus:outline-none mr-6 h-40 w-full resize-none overflow-y-auto py-4 pl-2 pr-10 xl:pr-16 leading-normal"
+									name="body"
+									placeholder="Be the first one commenting this post..."
+								/>
 								<div class="relative">
 									<span class="absolute bottom-0 right-0 flex flex-col">
+										<button
+											class="bg-primary focus:outline-none block rounded-lg xl:hidden"
+											style="margin-right: 15.2px; margin-bottom: 15px"
+											:class="comment !== '' && activeEmotion.label !== '' ? '' : 'opacity-50'"
+											@click="sendComment"
+										>
+											<SendIcon class="m-2 mb-3 ml-3 h-5 w-5 text-white transform rotate-45" />
+										</button>
 										<BrandedButton
 											style="margin-right: 15.2px; margin-bottom: 15px"
 											text="Post"
+											class="hidden xl:block"
 											:action="sendComment"
 											:thin="true"
 											:class="comment !== '' && activeEmotion.label !== '' ? '' : 'opacity-50'"
@@ -202,28 +216,27 @@
 							<div
 								v-show="showEmotions"
 								ref="scrollContainer"
-								class="modal-animation w-full overflow-y-scroll bg-white px-6"
+								class="modal-animation w-full overflow-y-scroll bg-white px-4 xl:px-6 flex justify-center"
 								style="height: 320px; scroll-snap-type: y mandatory; scroll-snap-stop: always"
 							>
 								<!-- Middle selector area -->
 								<div
-									class="absolute rounded-lg p-2"
+									class="absolute rounded-lg p-2 h-32 xl:h-24 mt-24 xl:mt-28"
 									:class="
 										selectedEmotionColor === `positive` ||
 										selectedEmotionColor === `neutral` ||
 										selectedEmotionColor === `negative`
 											? `bg-opacity-25 bg-` + selectedEmotionColor
 											: `bg-gray1`
 									"
-									style="height: 96px; margin-top: 112px"
-									:style="$route.name === `post-post` ? `width: 716px` : `width: 646px`"
+									style="width: 92%"
 								></div>
 								<!-- Faces grid -->
-								<div class="relative" style="padding-bottom: 120px; padding-top: 120px">
+								<div class="relative w-full" style="padding-bottom: 120px; padding-top: 120px">
 									<div
 										v-for="row in faceGroupings"
 										:key="row[0].label + row[1].label + row[2].label"
-										class="relative flex w-full flex-row px-2"
+										class="relative flex w-full flex-row mb-2 xl:px-2 justify-between"
 										style="scroll-snap-align: center"
 									>
 										<button
@@ -234,12 +247,20 @@
 											style="transition: all 0.3s ease-in-out"
 											@click="setEmotion(face)"
 										>
-											<img :src="face.leftImage" :alt="face.label" class="h-20 w-20" />
+											<img :src="face.image" :alt="face.label" class="h-20 w-20" style="transform: rotateY(180deg)" />
+											<p
+												class="capitalize xl:hidden mt-1"
+												:class="
+													selectedEmotion.label === face.label ? `font-bold text-` + selectedEmotionColor : `text-gray7`
+												"
+											>
+												{{ face.label }}
+											</p>
 										</button>
 										<div
 											v-for="face in row"
 											:key="face.label + face.label"
-											class="face-tag flex flex-grow items-center justify-center"
+											class="face-tag hidden xl:flex flex-grow items-center justify-center"
 										>
 											<button
 												class="focus:outline-none outline-none flex flex-grow items-center justify-center"
@@ -269,18 +290,17 @@
 			<!-- Bottom overlay with selector -->
 			<div v-show="showEmotions" class="relative flex w-full flex-row-reverse">
 				<div
-					class="z-10 mr-1 flex flex-row-reverse items-end rounded-br-xl bg-white p-5"
+					class="z-10 mr-1 hidden xl:flex flex-row-reverse items-end rounded-br-xl bg-white p-5 xl:w-3/5"
 					style="height: 111px; margin-top: -112px; margin-bottom: 1px; pointer-events: none"
-					:style="$route.name === `post-post` ? `width: 490px` : `width: 406px;  margin-right: 53px;`"
 				></div>
 				<button
-					class="bg-primary focus:outline-none absolute bottom-0 right-0 z-10 mb-7 mr-7 rounded-lg px-6 py-2 text-white"
+					class="bg-primary focus:outline-none absolute bottom-0 right-0 z-20 mb-7 mr-7 rounded-lg px-6 py-2 text-white"
 					@click="confirmEmotion"
 				>
 					Select
 				</button>
 				<div
-					class="z-10 flex flex-row-reverse items-end rounded-bl-lg bg-white p-5"
+					class="z-10 flex flex-row-reverse items-end rounded-bl-lg bg-white p-5 w-full mr-1 xl:mr-0 xl:w-2/5"
 					style="
 						height: 111px;
 						margin-top: -112px;
@@ -289,7 +309,6 @@
 						margin-bottom: 1px;
 						margin-left: 1px;
 					"
-					:style="$route.name === `post-post` ? `width: 350px` : `width: 306px`"
 				></div>
 			</div>
 			<Comment
@@ -313,6 +332,7 @@ import BrandedButton from '@/components/BrandedButton.vue'
 import Comment from '@/components/post/Comment.vue'
 import CommentFilter from '@/components/post/CommentFilter.vue'
 import FlipIcon from '@/components/icons/Flip.vue'
+import SendIcon from '@/components/icons/Send.vue'
 import CloseIcon from '@/components/icons/X.vue'
 import StatsIcon from '@/components/icons/Stats.vue'
 import ChevronLeft from '@/components/icons/ChevronLeft.vue'
@@ -324,15 +344,15 @@ import { createComment, sendComment, ICommentData, getCommentsOfPost } from '@/b
 import { getPhotoFromIPFS } from '@/backend/photos'
 
 interface FaceStat {
-	face: { label: string; leftImage: any; rightImage: any }
+	face: { label: string; image: any }
 	count: number
 }
 
 interface IData {
 	faceGroupings: object[]
 	feelingList: Record<string, any>
-	activeEmotion: { label: string; leftImage: any; rightImage: any }
-	selectedEmotion: { label: string; leftImage: any; rightImage: any }
+	activeEmotion: { label: string; image: any }
+	selectedEmotion: { label: string; image: any }
 	comments: ICommentData[]
 	avatar: string
 	comment: string
@@ -358,6 +378,7 @@ export default Vue.extend({
 		StatsIcon,
 		ChevronLeft,
 		ChevronRight,
+		SendIcon,
 	},
 	props: {
 		postCID: {
@@ -386,8 +407,8 @@ export default Vue.extend({
 			faceGroupings,
 			feelingList: feelings,
 			avatar: ``,
-			activeEmotion: { label: ``, leftImage: null, rightImage: null },
-			selectedEmotion: { label: ``, leftImage: null, rightImage: null },
+			activeEmotion: { label: ``, image: null },
+			selectedEmotion: { label: ``, image: null },
 			comment: ``,
 			comments: [],
 			emotion: ``,
@@ -427,7 +448,7 @@ export default Vue.extend({
 			this.filter = reaction
 			this.filterComments()
 		},
-		setEmotion(r: { label: string; leftImage: any; rightImage: any }) {
+		setEmotion(r: { label: string; image: any }) {
 			this.selectedEmotion = r
 			if (feelings.positive.has(r.label)) {
 				this.selectedEmotionColor = `positive`
@@ -465,8 +486,8 @@ export default Vue.extend({
 			// Apply filter to comments, in case new comment was added in filtered category
 			this.comment = ``
 			this.filterComments()
-			this.selectedEmotion = { label: ``, leftImage: null, rightImage: null }
-			this.activeEmotion = { label: ``, leftImage: null, rightImage: null }
+			this.selectedEmotion = { label: ``, image: null }
+			this.activeEmotion = { label: ``, image: null }
 			this.emotion = ``
 			this.filter = ``
 			this.selectedEmotionColor = `neutralLightest`

src/assets/images/reactions/right-side/brave.webp

@@ -177,7 +177,14 @@
 						:class="quoteContent !== `` ? '' : 'opacity-50'"
 						style="transition: all 0.4s"
 					>
-						<BrandedButton :action="handleSendRepost" :text="`Post`" />
+						<button
+							class="bg-primary focus:outline-none block rounded-lg xl:hidden"
+							style="margin-right: 15.2px; margin-bottom: 15px"
+							@click="handleSendRepost"
+						>
+							<SendIcon class="m-2 mb-3 ml-3 h-5 w-5 text-white transform rotate-45" />
+						</button>
+						<BrandedButton :action="handleSendRepost" :text="`Quote`" class="hidden xl:block" />
 					</div>
 				</div>
 				<PostActions
@@ -439,6 +446,15 @@
 								<CommentIcon :isActive="showComments" />
 								<span v-if="comments" class="ml-1">{{ comments.length }}</span>
 							</button>
+							<Repost
+								:repost="repost"
+								:post="post"
+								:cid="postCID"
+								class="fill-primary mr-4"
+								:hasRepost="hasReposted"
+								:repostCount="repostCount"
+								@toggleRepost="toggleQuoteRepost"
+							/>
 							<Share
 								:repost="repost"
 								:post="post"
@@ -472,6 +488,7 @@ import Repost from '@/components/post/Repost.vue'
 import TagPill from '@/components/Tag.vue'
 import More from '@/components/icons/More.vue'
 import XIcon from '@/components/icons/X.vue'
+import SendIcon from '@/components/icons/Send.vue'
 import FriendButton from '@/components/FriendButton.vue'
 import RepostIcon from '@/components/icons/Repost.vue'
 import StatsIcon from '@/components/icons/Stats.vue'
@@ -535,6 +552,7 @@ export default Vue.extend({
 		FriendButton,
 		RepostIcon,
 		BrandedButton,
+		SendIcon,
 	},
 	props: {
 		repost: {