Rearranged question CTA and Contributor block

rimutaka · Nov 22, 2024 · b9cce2f · b9cce2f
1 parent cb5eb66
commit b9cce2f
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 13 deletions.
diff --git a/vue/src/assets/main.css b/vue/src/assets/main.css
@@ -52,11 +52,13 @@ a.p-button {
 }
 
 /* Dark styles for topic checkboxes */
-input.p-checkbox-input, input.p-radiobutton-input {
+input.p-checkbox-input,
+input.p-radiobutton-input {
   @apply dark:opacity-15;
 }
 
-input:checked.p-checkbox-input, input:checked.p-radiobutton-input {
+input:checked.p-checkbox-input,
+input:checked.p-radiobutton-input {
   @apply dark:opacity-0;
 }
 
@@ -106,7 +108,7 @@ footer a {
 
 /* Call to action box shown to users without subs */
 .cta-box {
-  @apply p-4 pt-8 border-2 rounded-md border-slate-300 border-dashed shadow-md md:shadow-lg;
+  @apply md:mt-12 px-4 py-8 w-fit mx-auto border-2 rounded-md border-slate-300 border-dashed shadow-md md:shadow-lg;
 }
 
 /* QUESTION FORM */
@@ -252,9 +254,16 @@ footer a {
   @apply text-base font-bold mt-4;
 }
 
-.q-card .contributor {
+/* Question contributor block */
+
+.contributor-block {
+  @apply mb-12 mt-8 md:mt-16 mx-auto text-center w-fit;
+}
+
+.contributor-icon {
   @apply bg-contain bg-no-repeat bg-center;
   background-image: url(@/assets/images/contributor.svg);
+  filter: drop-shadow(3px 3px 2px #555);
 }
 
 .subdued .subdued-text {
@@ -266,7 +275,7 @@ footer a {
   opacity: 0.3;
 }
 
-/* Contribute card */
+/* Contribute cards */
 
 .contribute-card {
   @apply max-w-md mx-auto mb-8 pb-4 rounded-md border-slate-100 dark:border-slate-300 shadow;

diff --git a/vue/src/components/PostAnswerCTA.vue b/vue/src/components/PostAnswerCTA.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-8 cta-box">
+  <div>
     <h3 class="mb-4 text-slate-700 dark:text-slate-300 w-full">Get more questions like this to find and fill gaps in your knowledge</h3>
 
     <div class="flex w-full">

diff --git a/vue/src/components/QuestionCard.vue b/vue/src/components/QuestionCard.vue
@@ -47,7 +47,6 @@
             <p v-if="!isAnswered" class="text-xs text-slate-500 dark:text-slate-300">{{ howManyOptionsLeftToSelect }}</p>
           </div>
         </div>
-        <QuestionContributor v-if="question.contributor?.name" />
       </div>
     </div>
     <LoadingMessage v-else-if="loadingStatus == constants.LoadingStatus.Loading" />
@@ -68,7 +67,6 @@ import Tag from "primevue/tag";
 import TransitionSlot from "./TransitionSlot.vue";
 import LinkButton from "./LinkButton.vue";
 import LoadingMessage from "./LoadingMessage.vue";
-import QuestionContributor from "./QuestionContributor.vue";
 
 const props = defineProps<{
   topic: string,// must have a value or "any" for any topic

diff --git a/vue/src/components/QuestionContributor.vue b/vue/src/components/QuestionContributor.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="my-12 mx-auto text-center" :class="{ 'subdued': isSubdued }">
+  <div v-if="question?.contributor?.name" class="contributor-block" :class="{ 'subdued': isSubdued }">
     <figure class="max-w-screen-md mx-auto">
-      <div class="w-full h-12 mb-4 contributor subdued-image"></div>
+      <div class="w-full h-12 mb-4 contributor-icon subdued-image"></div>
       <blockquote>
-        <p class="text-l font-medium  dark:text-slate-200 dark:opacity-70 max-w-md mx-auto subdued-text">This question was contributed by a generous community member</p>
+        <p class="text-l font-medium  dark:text-slate-200 dark:opacity-70 max-w-md mx-auto subdued-text md:whitespace-nowrap">This question was contributed by a generous community member</p>
       </blockquote>
       <figcaption class="flex items-center justify-center mt-6 space-x-3">
         <a :href="contributorUrl || ''" title="Go to contributor's website">

diff --git a/vue/src/views/QuestionPreview .vue b/vue/src/views/QuestionPreview .vue
@@ -1,6 +1,7 @@
 <template>
   <h1 class="mb-4 md:mb-8 text-2xl text-start">Question preview about <em class="italic">{{ topicName }}</em></h1>
   <QuestionCard :topic="topic" :qid="qid" :next="false" :is-preview="true" />
+  <QuestionContributor />
 </template>
 
 <script setup lang="ts">
@@ -14,6 +15,7 @@ import { marked } from 'marked';
 
 
 import QuestionCard from "../components/QuestionCard.vue";
+import QuestionContributor from "../components/QuestionContributor.vue";
 
 const route = useRoute();
 const router = useRouter();

diff --git a/vue/src/views/QuestionView.vue b/vue/src/views/QuestionView.vue
@@ -2,7 +2,10 @@
   <h1 class="mb-4 md:mb-8 text-2xl text-start">Question about <em class="italic">{{ topicName }}</em></h1>
   <LoadingMessage v-if="isLoading" />
   <QuestionCard v-if="!isLoading" :topic="topic" :qid="qid" :next="true" :key="componentKey" />
-  <PostAnswerCTA v-if="!isLoading && ctaPitchVisible" />
+  <div v-if="!isLoading && ctaBlockVisible" class="mb-12 cta-box">
+    <PostAnswerCTA />
+  </div>
+  <QuestionContributor />
 </template>
 
 <script setup lang="ts">
@@ -16,6 +19,7 @@ import { useAuth0 } from '@auth0/auth0-vue';
 import QuestionCard from "../components/QuestionCard.vue";
 import PostAnswerCTA from '@/components/PostAnswerCTA.vue';
 import LoadingMessage from '@/components/LoadingMessage.vue';
+import QuestionContributor from "../components/QuestionContributor.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -36,7 +40,7 @@ const initialQid = route.query.qid ? <string>route.query.qid : undefined;
 const topic = ref<string>(initialTopic);
 const qid = ref<string | undefined>(initialQid);
 
-const ctaPitchVisible = computed(() => {
+const ctaBlockVisible = computed(() => {
   // checking user subs does not work because this page does not load user details
   // if  (!user.value?.topics.length && question.value?.answers?.[0].e) { return true } else { return false };
   if (!email.value && question.value?.answers?.[0].e) { return true } else { return false };