Event show page buttons and styling

frontend/package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "autosize": "^5.0.1",
     "axios": "^0.26.1",
     "jwt-decode": "^3.1.2",
     "moment": "^2.29.2",

frontend/public/stylesheets/04_event_show.css

@@ -30,6 +30,7 @@
   height: fit-content;
   margin-left: 8px;
   max-height: 650px;
+  width: 100%;
   /* overflow-y: scroll; */
 }
 
@@ -46,7 +47,7 @@
 
 
 .event-show-content{
-  margin-right: 30px;
+  margin-right: 10px;
   width: 50%;
   height: 500px;
   /* border: 1px solid gray; */
@@ -55,24 +56,6 @@
 }
 
 
-.comment-input, textarea{
-  width: 98%;
-  overflow: auto;
-  padding: none;
-  margin-left: 2px;
-  /* line-height: 12px; */
-  /* margin-top: 6px; */
-  resize: none;
-  line-height: 1.5;
-  vertical-align: middle;
-  border-radius: 6px;
-  height: 1.5em;
-}
-
-.comment-submit{
-  /* margin-bottom: 8px; */
-  visibility: hidden;
-}
 
 
 .event-show-title{
@@ -129,7 +112,7 @@
 .attendee-list{
   width: 30%;
   height: 70%;
-  margin-bottom: 15px;
+  margin: 15px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -161,6 +144,7 @@
 
 .comment-container{
   margin: 4px;
+  margin-top: 0;
 }
 
 .comment-title-container{
@@ -184,17 +168,10 @@
   height: auto;
 }
 
-.comment-body{
-  font-size: 14px;
-  margin-left: 5px;
-}
-
 .comment-header{
   display: flex;
 }
 
-
-
 .show-map-wrapper {
   min-height: 500px;
   width: 100%;
@@ -212,6 +189,19 @@
   padding-bottom: 5px;
 }
 
+.show-links-wrapper{
+  width: 100%;
+  display: flex;
+  /* padding-left: 20px; */
+  padding-top: 20px;
+  justify-content: center;
+}
+
+.show-links{
+  display: flex;
+  align-items: center;
+}
+
 .event-show-body, .event-show-content,
 .event-show-details, .event-date, .event-time {
   /* text-align: center; */
@@ -225,20 +215,13 @@
                                 supported by Chrome, Edge, Opera and Firefox */
 }
 
-.attendee-list{
-  /* border: 1px solid green; */
-  margin-bottom: 15px;
-  height: 70%;
-}
-
 .attendee-list-title {
-  font-size: 18px;
-  padding-bottom: 10px;
-  text-decoration: underline;
+  font-size: 26px;
 }
 
 .interaction-container{
   display: flex;
+  justify-content: space-between;
   width: 80%;
   margin: 15px;
 }
@@ -250,18 +233,14 @@
 .join-button{
   cursor: pointer;
   color: #537895;
-  padding-bottom: 15px;
 }
 
+
 .event-show-back-link{
   color: #537895;
-  padding-bottom: 15px;
-}
-
-.attendee-list-title {
-  font-size: 18px;
-  padding-bottom: 10px;
-  text-decoration: underline;
+  font-size: 14px;
+  text-align: center;
+  cursor: pointer;
 }
 
 .attendee-list-name {

frontend/public/stylesheets/05_profile.css

@@ -38,6 +38,7 @@
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin-top: 20px;
+  border-bottom: 4px #eeeeee solid;
 }
 
 #profile-self-top {

frontend/public/stylesheets/08_poi_container.css

@@ -1,7 +1,7 @@
 .poi-list-container{
   /* margin-top: 12px; */
   margin-bottom: 12px;
-  height: 340px;
+  max-height: 380px;
   overflow-y: auto;
   width: 100%;
 }
@@ -10,7 +10,7 @@
   margin: 12px;
   padding: 4px;
   border-radius: 2px;
-  width: 90%;
+  width: 95%;
 }
 .poi-container p{
   font-size: 15px;
@@ -33,6 +33,6 @@
   transition: box-shadow .2s ease-in-out;
 }
 
-.poi-contents{
-
+.poi-container{
+  width: 80%;
 }

frontend/public/stylesheets/09_thread_index.css

@@ -30,9 +30,13 @@
 
 .thread-index{
   width: 80%;
-  border: 1px solid purple;
+  max-width: 800px;
+  min-height: 400px;
+  /* border: 1px solid purple; */
   /* z-index: 1; */
   background-color: white;
+  margin: 15px;
+  margin-bottom: 60px;
 }
 
 .thread-index-title{
@@ -71,21 +75,18 @@
 .thread-index-item{
   /* border: 1px solid yellowgreen; */
   margin: 10px;
+  margin-bottom: 20px;
 }
 
 .comment-index{
-  transition:transform 0.2s ease-out;
-  transform:scaleY(1);
-  transform-origin:top;
-  z-index: 5;
-  /* visibility: visible; */
-  display: block;
+  max-height: 500px;
+  transition: max-height 0.25s ease-in;
 }
 
 .hidden{
-  transform:scaleY(0);
-  /* visibility: hidden; */
-  display: none;
+  max-height: 0;
+  transition: max-height 0.15s ease-out;
+  overflow: hidden;
 }
 
 .comment-tools{
@@ -94,6 +95,49 @@
   height: 100%;
 }
 
+
+.comment-body{
+  font-size: 14px;
+  margin-left: 5px;
+  width: 100%;
+  word-wrap: normal;
+  padding-top: 6px;
+}
+
+.comment-body-p{
+  width: 100%;
+  word-wrap: break-word;
+
+}
+
+.comment-header{
+  display: flex;
+}
+
+.comment-input{
+  width: inherit;
+  width: 100%; 
+  max-width: 100%;
+  /* padding: none; */
+  /* margin-left: 2px; */
+  resize: none;
+  /* line-height: 1.5; */
+  border-radius: 6px;
+  height: 1.5em;
+  display: block;
+}
+
+.comment-submit{
+  /* margin-bottom: 8px; */
+  visibility: hidden;
+  display: none;
+}
+
+.auto{
+  display: block;
+}
+
+
 .delete-comment i{
   min-width: 10px;
   display: flex;
@@ -114,12 +158,18 @@
 }
 
 .comment-box{
-  margin-bottom: 6px;
+  padding-top: 6px;
   border-bottom: 1px solid #ccc;
+  transition: background-color .1s ease-in-out;
+}
+
+.comment-box:hover{
+  background-color: #e8e8e8;
 }
 
 .comment-form{
-  height: 28px;
+  /* height: 28px; */
+  height: 80%;
 }
 
 .thread-header-container{
@@ -131,4 +181,15 @@
 .thread-title{
   font-size: 20px;
   margin-bottom: 6px;
+}
+
+.no-comment-message{
+  margin-left: 12px;
+}
+
+.rsvp{
+  text-decoration: underline;
+  color: #537895;
+  cursor: pointer;
+
 }

frontend/src/components/comment_form/comment_form.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import autosize from 'autosize';
 
 class CommentForm extends React.Component{
   constructor(props){
@@ -7,6 +8,10 @@ class CommentForm extends React.Component{
     this.handleSubmit = this.handleSubmit.bind(this)
   }
 
+  componentDidMount(){
+    autosize(this.textarea);
+ }
+
   handleSubmit(e){
     e.preventDefault()
     if (this.state.body === '') {
@@ -32,17 +37,18 @@ class CommentForm extends React.Component{
   }
 
   render(){
-    const {formType} = this.props;
     return (
       <form onSubmit={this.handleSubmit} className="comment-form">
-        {/* <h4>{formType}</h4> */}
-        <textarea 
-          placeholder={`What's on your mind, ${this.props.comment.username}?`} 
-          onKeyPress={ this.commentEnterSubmit} 
-          className="comment-input" 
-          value={this.state.body} 
-          onChange={this.update("body")}  
-        />
+        <p className="comment-body-p">
+          <textarea
+          className="comment-input"
+          onChange={this.update("body")}
+          value={this.state.body}    
+          ref={c=>this.textarea=c}
+          placeholder={`What's on your mind, ${this.props.comment.username}?`}
+          onKeyPress={ this.commentEnterSubmit}  
+          rows={1}/>
+        </p>
         <input className="comment-submit" type="button" name="go" value="Submit" />
       </form>
     )

frontend/src/components/event/attendee_index.jsx

@@ -13,9 +13,9 @@ class AttendeeIndex extends React.Component{
         </h3>
 
         <div className="attendee-list-container">
-          {attendees.map(person => (
+          {attendees.map((person,idx) => (
             <div
-              key={person?.username}
+              key={idx}
               className="attendee-list-name">
               {person?.username}
             </div>

frontend/src/components/event/comment_index.jsx

@@ -8,7 +8,14 @@ class CommentIndex extends React.Component{
     const members = this.props.event.attendees.map(person => person.username)
     const commentForm = members.includes(this.props.currentUserUsername)
       ? <CreateCommentFormContainer threadId={this.props.threadId}/> 
-      : <div className="no-comment-message">RSVP to join the conversation</div>
+      : (
+        <div className="no-comment-message">
+          <span
+            className="rsvp"
+            onClick={()=>this.props.addAttendee(this.props.eventId,this.props.userId )}
+          >RSVP</span>&nbsp;to join the conversation
+        </div>  
+      )
 
     const {comments} = this.props;
     if(!comments) {