questions card redesign

Quento-Solutions · Sep 2, 2020 · b60eed4 · b60eed4
1 parent f31a525
commit b60eed4
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 25 deletions.
diff --git a/assets/images/Quento_Physics_Filler.png b/assets/images/Quento_Physics_Filler.png
diff --git a/components/NotesCard.vue b/components/NotesCard.vue
@@ -6,6 +6,8 @@
     :class="clickable ? 'previewClickable' : ''"
     @click="PushNotesPage()"
   >
+  <div class="card-content" :style="preview? 'cursor: pointer;':''">
+  <div class="p-6 text-container" :style="preview ? '' : 'width:100%'">
     <DeleteNotesModal v-if="!disabled && NoteOwner" :open.sync="deleteNotesOpen" :noteId="note.id"></DeleteNotesModal>
     <!-- Card Header -->
     <AvatarBar
@@ -39,15 +41,16 @@
       </template>
     </AvatarBar>
     <!-- Category Pills -->
+    <div class="inner-content" :style="preview? '':'width:70%;margin-left:15%'">
     <div
-      class="w-4/5 vx-row p-2 items-start md:items-center text-sm mt-2 flex-col md:flex-row title-content"
+      class="w-4/5 vx-row p-2 items-start md:items-center md:text-sm text-xs mt-2 flex-row"
     >
       <div
-        class="rounded-full bg-orange-500 p-2 px-4 vx-row items-center text-ginger text-white"
-        style="background-color: #ed8936"
+        class="rounded-full bg-orange-500 md:p-2 md:px-4 p-2 px-4 vx-row items-center text-ginger text-white" 
+        style="background-color: #ed8936 padding-top:0.6rem;padding-bottom:0.6rem;"
       >Grade {{ note.grade }}</div>
       <div
-        class="rounded-full bg-purple-500 p-2 px-4 vx-row items-center text-ginger text-white mx-0 mt-2 md:mt-0 md:mx-2"
+        class="rounded-full bg-purple-500 md:p-2 md:px-4 p-2 px-4 vx-row items-center text-ginger text-white mt-0 mx-2"
         style="background-color: #9f7aea"
       >
         <i
@@ -61,23 +64,17 @@
 
     <!-- Title -->
     <div
-      class="w-4/5 text-ginger-b text-3xl p-4 ml-1/2 title-content"
-      style="line-height: 1;"
+      class="w-4/5 text-ginger-b text-3xl p-4 ml-1/2 pl-2"
+      style="line-height: 1.3;"
     >{{ note.title }}</div>
 
     <!-- Content -->
-    <div class="vx-row w-full justify-center p-4 pt-0 m-0 pt-0" style="margin: 0;">
+    <div class="vx-row w-full justify-start p-4 pt-0 m-0 pt-0 pl-0" style="margin: 0;">
       <div
-        class="md:w-4/5 w-full vx-row justify-center overflow-y-hidden relative rounded-md p-1"
+        class="md:w-full w-full vx-row justify-center overflow-y-hidden relative rounded-md p-1 pb-0"
         :style="
-          preview ? (hasImage ? 'max-height : 512px' : 'max-height: 200px') : ''"
+          preview ? 'max-height: 150px' : ''"
       >
-        <img
-          :src="note.images[0]"
-          class="responsive rounded border-solid mb-4"
-          v-if="hasImage && preview"
-          style="border-width: 2px; border-color: #ccd6dd;"
-        />
         <vue-flux
           :options="vfOptions"
           :images="note.images"
@@ -116,7 +113,7 @@
 
     <!-- Footer -->
 
-    <div class="vx-row w-full justify-evenly lg:px-10 p-6">
+    <div class="vx-row md:w-1/2 w-2/3 justify-between lg:px-10 p-6" style="padding-left:1rem;padding-top:0;" :style="preview? '':'width:80%;margin-left:10%'">
       <vs-avatar
         class="icon-small"
         :color="userLiked(note.id) ? 'danger' : '#f4f7f8'"
@@ -144,6 +141,25 @@
         <template #tooltip>Bookmark</template>
       </VxTooltip>
     </div>
+  </div>
+  </div>
+  <div class="image-container" :style="preview ? '' : 'display:none;'">
+            <img
+          :src="note.images[0]"
+          v-if="hasImage && preview"  
+          style="position:absolute;object-fit: cover;min-height:100%"
+        />
+        <img
+          src="../assets/images/Quento_Physics_Filler.png"
+          v-if="!hasImage && preview"  
+          style="position:absolute;object-fit: cover;min-height:100%"
+        />
+
+
+
+
+  </div>
+  </div>
   </VxCard>
 </template>
 
@@ -213,7 +229,31 @@ export default class NotesCard extends Vue {
   image?: HTMLImageElement
 }
 </script>
-<style lang="scss">
+
+<style>
+.vx-card__body {
+  padding:0 !important;
+}
+</style>
+
+<style lang="scss" scoped>
+.card-content {
+    flex-direction:row;
+    display:flex;
+    padding:0 !important;
+}
+
+.text-container {
+  width:66%;
+}
+
+.image-container {
+  width:34%; 
+  background:white;
+  position:relative;
+  overflow:hidden;
+}
+
 #note-card {
   .vs-navbar__group__items {
     min-width: 120px;
@@ -268,13 +308,27 @@ export default class NotesCard extends Vue {
   background: rgba(90, 90, 90, 0.1);
   border-radius: 15px !important;
 }
-.title-content {
-  margin-left: 10%;
+
+@media only screen and (max-width: 1024px) {
+  .card-content {
+    flex-direction:column-reverse;
+}
+.inner-content {
+  width: 100% !important;
+  margin:0 !important;
+}
+.text-container {
+  width:100%;
+}
+
+.image-container {
+  width:100%; 
+  height:250px;
+}
+.image-container img {
+  width:100% !important;  
+  height:auto !important;
 }
-@media only screen and (max-width: 768px) {
-  .title-content {
-    margin-left: 0%;
-  }
 }
 .flux-image {
   background-position: 0px 0px !important;

diff --git a/components/QuestionCard.vue b/components/QuestionCard.vue
@@ -7,13 +7,14 @@
     @click="PushQuestionsPage()"
   >
     <!-- Card Header -->
+    <div class="p-6">
     <AvatarBar
       :username="question.userDisplayName"
       :date="question.createdAt"
       :photoURL="question.userPhotoUrl"
       :userId="question.userId"
     ></AvatarBar>
-
+    </div>
     <!-- Category Pills -->
     <div class="w-4/5 vx-row p-2 items-center text-sm mt-2 ml-1/2 title-content">
       <div

diff --git a/pages/notes/index.vue b/pages/notes/index.vue
@@ -7,7 +7,7 @@
     <div id="notes-content-overlay"></div>
     <NotesSidebar />
     <div class="sidebar-spacer"></div>
-    <div class="vx-col lg:w-1/2 md:w-2/3 w-full">
+    <div class="vx-col lg:w-2/3 md:w-2/3 w-full">
       <div class="vx-col w-full inline-flex lg:hidden" style="">
         <div class="vx-row mb-4 w-full bg-white rounded-md p-2">
           <vs-avatar class="icon-small float-right" @click="openNotesSidebar()">