Padding to short and long answers, changing open and closing states t…

…o responses
mathematicalthinking · Feb 28, 2024 · da97ef3 · da97ef3
1 parent 0111aa9
commit da97ef3
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 24 deletions.
diff --git a/app/components/response-mentor-thread.hbs b/app/components/response-mentor-thread.hbs
@@ -22,15 +22,20 @@
       @isParentWorkspace={{@isParentWorkspace}}
     />
   </div>
-  <div class='response-mentor-container thread-child'>
-    <div>
+  <div
+    class={{if
+      this.show
+      'mentor-thread-container'
+      'mentor-thread-container closed'
+    }}
+  >
+    <div class='mentor-header-thread'>
       {{#if this.showButton}}
-        <button {{on 'click' this.toggleShowResponses}}>
+        <button {{on 'click' this.toggleShowResponses}} class='primary-button'>
           {{this.showResponsesText}}
         </button>
       {{/if}}
     </div>
-
     {{#if this.showResponses}}
       <ResponseMentorReply
         @isCreating={{@isCreating}}
@@ -56,6 +61,8 @@
         @toSubmission={{@toSubmission}}
         @handleResponseThread={{@handleResponseThread}}
         @isParentWorkspace={{@isParentWorkspace}}
-      />{{/if}}
+      />
+    {{/if}}
   </div>
+
 </div>
diff --git a/app/components/response-mentor-thread.js b/app/components/response-mentor-thread.js
@@ -1,20 +1,22 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+
 export default class ResponseMentorThreadComponent extends Component {
-  // to have responses be collapsed at first
   @tracked show = false;
 
-  // action to toggle the showResponses property
   get showResponsesText() {
     return this.showResponses ? 'Hide responses' : 'Show responses';
   }
+
   get showResponses() {
     return this.show || this.args.isCreating;
   }
+
   get showButton() {
     return !this.args.isCreating;
   }
+
   @action
   toggleShowResponses() {
     this.show = !this.show;

diff --git a/app/components/response-new.js b/app/components/response-new.js
@@ -9,8 +9,6 @@ import ErrorHandlingMixin from '../mixins/error_handling_mixin';
 
 export default Component.extend(ErrorHandlingMixin, {
   currentUser: service('current-user'),
-  elementId: 'response-new',
-
   utils: service('utility-methods'),
   loading: service('loading-display'),
 

diff --git a/app/components/response-submission-view.js b/app/components/response-submission-view.js
@@ -11,7 +11,7 @@ export default Component.extend({
   store: service(),
   // elementId: 'response-submission-view',
   isShortExpanded: true,
-  isLongExpanded: true,
+  isLongExpanded: false,
   isImageExpanded: false,
   isUploadExpanded: false,
   isRevising: false,

diff --git a/app/styles/_response-mentor-thread.scss b/app/styles/_response-mentor-thread.scss
@@ -53,7 +53,7 @@
       margin-bottom: 1em;
 
       p {
-        font-weight: 400;
+        font-weight: 500;
       }
     }
 
@@ -62,35 +62,77 @@
     }
     .submission-content-container {
       padding: 1em;
+      .submission-content-short,
+      .submission-content-long {
+        padding: 1em;
+        margin-top: 1em;
+        background-color: rgb(243, 243, 243);
+        border-radius: 0.5em;
+      }
     }
   }
   // for response-mentor-reply
   .response-mentor-container {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space;
+    margin-top: 1em;
+    padding: 0.5em;
     .response-users {
       display: flex;
       flex-direction: column;
       gap: 1em;
     }
 
-    .mentor-thread-container,
-    .new-response-container {
+    /* Add transition property to the container */
+    .mentor-thread-container {
       margin-left: 5em;
       border: 1px solid #ccc;
       border-radius: 8px;
-      padding: 10px; /* Adjust padding */
+      padding: 10px;
       display: flex;
       flex-direction: column;
       gap: 0.5em;
-      background-color: #f8f8f8; /* Set background color */
+      background-color: #f8f8f8;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      .mentor-header-thread {
-        display: flex;
-        justify-content: space-between;
+      overflow: hidden; /* Hide overflow to enable the sliding effect */
+      max-height: 500px; /* Set a maximum height for the container */
+      opacity: 1; /* Initial opacity */
+    }
+
+    /* Define animation for opening and closing */
+    @keyframes slideIn {
+      from {
+        max-height: 0;
+      }
+      to {
+        max-height: 500px;
       }
     }
+
+    @keyframes slideOut {
+      from {
+        max-height: 500px;
+      }
+      to {
+        max-height: 0;
+      }
+    }
+
+    /* Apply animation to the container */
+    .mentor-thread-container.closed {
+      animation: slideOut 0.3s ease-in-out;
+    }
+
+    .mentor-thread-container:not(.closed) {
+      animation: slideIn 0.3s ease-in-out;
+    }
+
+    /* Apply transition to the header */
+    .mentor-header-thread {
+      display: flex;
+      justify-content: space-between;
+      transition: margin 0.3s ease;
+    }
+
+    //  STOP HERE
     .response-text {
       padding: 0.8em;
       font-weight: 500;
@@ -104,8 +146,17 @@
   }
   // When user crafts new response in a thread
   .new-response-container {
+    margin-left: 5em;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 10px;
     display: flex;
     flex-direction: column;
+    gap: 0.5em;
+    background-color: #f8f8f8;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    width: 200%;
+
     p {
       font-weight: 400;
     }

diff --git a/app/templates/components/response-mentor-reply.hbs b/app/templates/components/response-mentor-reply.hbs
@@ -13,6 +13,7 @@
     @handleResponseThread={{action 'handleNewMentorReply'}}
   />
 {{else}}
+
   {{#if this.sortedMentorReplies}}
     {{#each this.sortedMentorReplies as |listOfMentorReplies|}}
       <div class='response-mentor-container'>

diff --git a/app/templates/components/response-submission-view.hbs b/app/templates/components/response-submission-view.hbs
@@ -74,7 +74,7 @@
           <Textarea @name='brief-summary' @value={{revisedBriefSummary}} />
         {{else}}
           {{#if this.isShortExpanded}}
-            <div class='submission-content short'>
+            <div class='submission-content-short'>
               {{#if this.displaySubmission.answer.answer}}
                 {{{this.displaySubmission.answer.answer}}}
               {{else}}
@@ -84,7 +84,7 @@
           {{/if}}
         {{/if}}
       </div>
-      <div class='submission-content-container long'>
+      <div class='submission-content-container'>
         {{#if this.isRevising}}
           <div class='submission-header'>
             <span>Explanation</span>
@@ -106,7 +106,7 @@
           <QuillContainer @setup='insertQuillContent' />
         {{else}}
           {{#if this.isLongExpanded}}
-            <div class='submission-content-container long'>
+            <div class='submission-content-container submission-content-long'>
               {{#if this.displaySubmission.answer.explanation}}
                 {{{this.displaySubmission.answer.explanation}}}
               {{/if}}