Merge branch 'feature/question-tags#46' into develop

Kerry-G · Mar 23, 2018 · 6e08e77 · 6e08e77
2 parents 81e51d2 + 148d728
commit 6e08e77
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 74 deletions.
diff --git a/static/src/components/body/Questions/Question.js b/static/src/components/body/Questions/Question.js
@@ -20,12 +20,11 @@ class Question extends Component {
                 <Grid>
                     <Row>
                         <Col lg={12}>
-                        {console.log(this.props.question)}
                             <Votes
-                            question = {this.props.question}
-                            status = {this.props.question.vote_status}
-                            user={this.props.user}
-                            comment_status = {'question'}
+                                question = {this.props.question}
+                                status = {this.props.question.vote_status}
+                                user={this.props.user}
+                                comment_status = {'question'}
                             />
                             <Row>
                                 <h1><span className="question-tag">{this.props.question.engineer}</span>

diff --git a/static/src/components/body/Questions/QuestionPage/QuestionPage.js b/static/src/components/body/Questions/QuestionPage/QuestionPage.js
@@ -55,6 +55,7 @@ class QuestionPage extends Component {
         try {
             fetchAPI("GET", "/api/users/" + this.state.user_id).then(response => {
             if (response.success) {
+                console.log(response.user)
                 this.setState({
                     fname: response.user.fname,
                     lname: response.user.lname,
@@ -67,8 +68,11 @@ class QuestionPage extends Component {
     }
 
     render() {
+        let tags=[];
         let avatarPath = `\\images\\avatar\\`+this.state.display_image;
         if (!this.state.loading) {
+            let userLogin = !((Object.keys(this.props.user).length === 0 && this.props.user.constructor === Object)) //if no user is login
+            let askQuestion;
             let answers = this.state.question.answers.map((answer) => {
                 return (
                     <div key={answer.id}>
@@ -78,9 +82,13 @@ class QuestionPage extends Component {
                         />
                     </div>
             )});
-
-         let userLogin = !((Object.keys(this.props.user).length === 0 && this.props.user.constructor === Object)) //if no user is login
-         let askQuestion;
+            let tagsInfo = tags.map((tag)=>{
+                return (
+                    <span key={tag} className="question-tags">
+                        {tag}
+                    </span>
+                )
+            })
          if(userLogin){
             askQuestion = <Row>
                 <Col md={12}>
@@ -92,41 +100,43 @@ class QuestionPage extends Component {
                     </div>
                 </Col>
             </Row>
-         } else {
-             askQuestion = null;
-         }
-            return (
-                <div className="answer-page">
-                <Grid>
-                    <Row>
-                        <Col>
-                            <span className="question-tag-answer">{this.state.question.engineer}</span>
-                            <Image src={avatarPath} width={24} circle /> {this.state.fname} {this.state.lname}
-                            &nbsp;- {moment(this.state.question.register_date).format("LLL")} 
-                        </Col>
-                    </Row>
-                    <Row className="question-box-text">
-                        <Col>
-                            <Votes
-                                question={this.state.question}
-                                status = {this.state.question.vote_status}
-                                user={this.props.user}
-                                comment_status = {'question'}
-                            /> 
-                        </Col>
-                        <Col>
-                            <h1>{this.state.question.title}</h1>
-                            <p>{this.state.question.text}</p>
-                        </Col>
-                    </Row>
-                    {askQuestion}
-                    <div>
-                        {answers}
-                    </div>
-                </Grid>
+         } else { askQuestion = null; }
+
+         return (
+            <div className="answer-page">
+            <Grid>
+                <Row>
+                    <Col>
+                        <span className="question-tag-answer">{this.state.question.engineer}</span>
+                        <Image src={avatarPath} width={24} circle /> {this.state.fname} {this.state.lname}
+                        &nbsp;- {moment(this.state.question.register_date).format("LLL")} 
+                        <span className="question-tags-answer">
+                        {tagsInfo}
+                        </span>
+                    </Col>
+                </Row>
+                <Row className="question-box-text">
+                    <Col>
+                        <Votes
+                            question={this.state.question}
+                            status = {this.state.question.vote_status}
+                            user={this.props.user}
+                            comment_status = {'question'}
+                        /> 
+                    </Col>
+                    <Col>
+                        <h1>{this.state.question.title}</h1>
+                        <p>{this.state.question.text}</p>
+                    </Col>
+                </Row>
+                {askQuestion}
+                <div>
+                    {answers}
                 </div>
-            )
-        } else {
+            </Grid>
+            </div>
+        )
+    } else {
             return <h2>Loading...</h2>
         }
     }

diff --git a/static/src/components/body/Register.js b/static/src/components/body/Register.js
@@ -12,7 +12,7 @@ class Register extends Component {
             email: '',
             pw: '',
             role: '',
-            display_image: '',
+            display_image: '1',
 
             //validators
             validEmail: null,
@@ -286,8 +286,6 @@ class Register extends Component {
                                 }
                             }}
                         />
-
-
                         <FieldGroup
                             type="file"
                             id="formControlsFile"
@@ -314,9 +312,9 @@ class Register extends Component {
             else {
                 alert = null
             }
-
-            nextButton = <button className="reg-btn" onClick={this.handleNextPage} disabled={this.state.validPassword !== 'success'}>Next</button >
-
+            nextButton = <button className="reg-btn" onClick={this.handleNextPage} disabled={this.state.validPassword !== 'success'}>
+            Next
+            </button >
         }
         else if (this.state.page === 2) {
             saveButton = null
@@ -332,24 +330,18 @@ class Register extends Component {
 
         return (
             <Modal dialogClassName="custom-modal" show={this.props.show} onHide={this.handleClose}>
-
                 <Modal.Body>
-
                     <Grid fluid>
                         <Row>
                             {alert}
                             {body}
-
                         </Row>
                     </Grid>
-
                 </Modal.Body>
-
                 <Modal.Footer>
                     {previousButton}
                     {nextButton}
                     {saveButton}
-
                 </Modal.Footer>
             </Modal>
         );

diff --git a/static/src/styles.css b/static/src/styles.css
@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css?family=Mukta+Mahee");
-/* xsmall:     (max-width: 479px),
+/* xsmall:  (max-width: 479px),
 small:      (max-width: 599px),
 medium:     (max-width: 767px),
 large:      (max-width: 1024px),
@@ -54,7 +54,7 @@ h1 {
 
 /* END HEADER */
 .jumbotron {
-  background-color: #95a5a6; }
+  background-color: #ecf0f1; }
 
 /* FOOTER */
 .footer {
@@ -369,6 +369,16 @@ textarea {
 .question-box-text {
   margin: auto auto 2rem auto; }
 
+.question-tags {
+  margin: 0.4em;
+  background-color: #ecf0f1;
+  padding: 0 0.8em 0 0.8em;
+  border: 1px solid #E27A3F;
+  border-radius: 100px; }
+
+.question-tags-answer {
+  margin-left: 10px; }
+
 .answer-page h1 {
   font-size: 3rem;
   margin: 10px; }
@@ -412,23 +422,6 @@ textarea {
 /*===============================
 START SEARCH
 =================================*/
-.search {
-  position: relative;
-  float: right;
-  width: 20rem;
-  transition: all 10s; }
-  .search:focus {
-    outline: none; }
-
-#searchButton {
-  float: right;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  margin-right: 10px;
-  padding-left: 5px;
-  text-align: left; }
-
 /*==========================================
 END SEARCH
 ============================================*/

diff --git a/static/src/styles.scss b/static/src/styles.scss
@@ -72,7 +72,7 @@ h1{
 }
 /* END HEADER */
 .jumbotron{
-    background-color: $gray;
+    background-color: $offwhite;
 }
 /* FOOTER */
 .footer{
@@ -392,6 +392,17 @@ textarea{
 .question-box-text{
     margin: auto auto 2rem auto;
 }
+.question-tags{
+    margin:0.4em;
+    background-color:$offwhite;
+    padding: 0 0.8em 0 0.8em;
+    border: 1px solid $main;
+    border-radius: 100px;
+
+}
+.question-tags-answer{
+    margin-left:10px;
+}
 .answer-page h1{
     font-size: 3rem;
     margin:10px;