From ed6f7dbee9cf83582ea0cb7fdf630356a33bc890 Mon Sep 17 00:00:00 2001 From: Hanna Taylor & Katherine Broner Date: Thu, 12 May 2016 20:34:14 -0400 Subject: [PATCH 1/4] Work on styling on the question show page --- app/views/questions/show.erb | 40 +++++++++++++++--------- public/css/application.css | 60 ++++++++++++++++++++++++++++++------ public/css/normalize.css | 2 ++ 3 files changed, 79 insertions(+), 23 deletions(-) diff --git a/app/views/questions/show.erb b/app/views/questions/show.erb index 06270a4..8d96b8f 100644 --- a/app/views/questions/show.erb +++ b/app/views/questions/show.erb @@ -5,33 +5,49 @@

<%=@question.description%>

- +
+

Comments

-Add a comment to this question
+

Add a comment

-
+ + + +
+

Answers

+
-

Add an Answer

- - + diff --git a/public/css/application.css b/public/css/application.css index f50e465..09c3c24 100644 --- a/public/css/application.css +++ b/public/css/application.css @@ -4,7 +4,7 @@ body { .container { margin-top: 12em; text-align: center; - padding-bottom: 5em; + padding-bottom: 15em; } #question-form { @@ -31,6 +31,7 @@ body { display: inline; margin-top: 0; } + .vote-button { font-size: 12px; display: inline-block; @@ -42,6 +43,52 @@ body { margin-right: auto; } + + + +/* Question Show Page */ + +.orange-underline { + border-bottom: 5px solid; + border-color: #D86E3E; + color: #3A5863; +} + +.answer-container { + margin-left: auto; + margin-right: auto; + margin-top: 3em; + width: 40em; + color: #3A5863; + line-height: 2em; +} + +.answer-container ul { + list-style-type: none; + padding: 0; +} +.add-question-comment-link a { + color: #3A5863; +} + +.add-question-comment-link a:hover { + color: #D86E3E; +} + +.comments-container { + margin-left: auto; + margin-right: auto; + margin-top: 3em; + width: 20em; + color: #3A5863; + line-height: 2em; +} + +.comments-container ul { + list-style-type: none; + padding: 0; +} + .question-table td { padding: 2em; background-color: #3A5863; @@ -71,15 +118,10 @@ body { .question-description { margin-left: auto; margin-right: auto; - width: 55em; - padding-right: 5em; - padding-left: 5em; -} - -.question-description p { - font-size: 120%; - color: #3A5863; + width: 40em; word-wrap: break-word; + color: #3A5863; + font-size: 120%; } diff --git a/public/css/normalize.css b/public/css/normalize.css index 15f23c5..0db76b8 100644 --- a/public/css/normalize.css +++ b/public/css/normalize.css @@ -85,6 +85,7 @@ template { a { background: transparent; text-decoration: none; + color: #3A5863; } /** @@ -94,6 +95,7 @@ a { a:active, a:hover { outline: 0; + color: #D86E3E; } /* Text-level semantics From d19e247aab9de040edf94803fd8a7cf9bd83c082 Mon Sep 17 00:00:00 2001 From: Hanna Taylor & Katherine Broner Date: Thu, 12 May 2016 21:17:55 -0400 Subject: [PATCH 2/4] Fix answers so that user_id gets added --- app/controllers/answers.rb | 27 ++++++++++++++++++- app/views/_answer_vote_button.erb | 0 app/views/_comment_vote_button.erb | 0 ...e_button.erb => _question_vote_button.erb} | 0 app/views/questions/show.erb | 3 ++- public/js/application.js | 4 +++ 6 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 app/views/_answer_vote_button.erb create mode 100644 app/views/_comment_vote_button.erb rename app/views/{_vote_button.erb => _question_vote_button.erb} (100%) diff --git a/app/controllers/answers.rb b/app/controllers/answers.rb index d880504..fbd14a4 100644 --- a/app/controllers/answers.rb +++ b/app/controllers/answers.rb @@ -1,6 +1,6 @@ post '/questions/:question_id/answers' do @question = Question.find_by(id: params[:question_id]) - @answer = Answer.new(description: params[:description]) + @answer = Answer.new(description: params[:description], user_id: current_user.id) @answers = @question.answers @comments = @answer.comments if @answer.save @@ -27,3 +27,28 @@ redirect "/questions/#{@question.id}" end end + +# post '/questions/:question_id/answers/:answer_id/answer/upvote' do +# @question = Question.find_by(id: params[:question_id]) +# @answer = Answer.find_by(id: params[:answer_id]) +# binding.pry +# @answer.votes.create(value: 1) + +# if request.xhr? +# {points: @answer.points}.to_json +# else +# redirect "/questions/#{@question.id}" +# end +# end + +# post '/questions/:question_id/downvote' do +# @question = Question.find_by(id: params[:question_id]) +# @answer = Answer.find_by(id: params[:answer_id]) +# @answer.votes.create(value: -1) + +# if request.xhr? +# {points: @answer.points}.to_json +# else +# redirect "/questions/#{@question.id}" +# end +# end diff --git a/app/views/_answer_vote_button.erb b/app/views/_answer_vote_button.erb new file mode 100644 index 0000000..e69de29 diff --git a/app/views/_comment_vote_button.erb b/app/views/_comment_vote_button.erb new file mode 100644 index 0000000..e69de29 diff --git a/app/views/_vote_button.erb b/app/views/_question_vote_button.erb similarity index 100% rename from app/views/_vote_button.erb rename to app/views/_question_vote_button.erb diff --git a/app/views/questions/show.erb b/app/views/questions/show.erb index 8d96b8f..fd5828b 100644 --- a/app/views/questions/show.erb +++ b/app/views/questions/show.erb @@ -1,6 +1,6 @@
-

<%=@question.title%><%= erb :_vote_button %>

+

<%=@question.title%><%= erb :_question_vote_button %>

<%=@question.description%>

@@ -45,6 +45,7 @@ <% @answers.each do |answer| %>
<%= erb :'/answers/_individual_answer', locals: {answer: answer, question: @question} %> + <%= erb :_answer_vote_button %>
diff --git a/public/js/application.js b/public/js/application.js index 341bd02..0e86fb1 100644 --- a/public/js/application.js +++ b/public/js/application.js @@ -12,6 +12,10 @@ $(document).ready(function() { $(".total-points").text(voteObject.points); }) }); + + + + $('#ask-a-question-button').on("click", "a", function(e){ e.preventDefault(); $('#question-form').show(); From 403e704c11a1ac8dab85c5e5401f3c84477b095c Mon Sep 17 00:00:00 2001 From: Hanna Taylor & Katherine Broner Date: Thu, 12 May 2016 22:14:56 -0400 Subject: [PATCH 3/4] More styling --- app/views/questions/index.erb | 5 +- app/views/questions/show.erb | 3 +- app/views/sessions/login.erb | 21 ++- app/views/users/new.erb | 22 ++- app/views/users/show.erb | 47 ++++-- public/css/application.css | 279 ++++++++++++++++++++-------------- 6 files changed, 236 insertions(+), 141 deletions(-) diff --git a/app/views/questions/index.erb b/app/views/questions/index.erb index 33fcde1..f6b4f15 100644 --- a/app/views/questions/index.erb +++ b/app/views/questions/index.erb @@ -1,6 +1,7 @@
-

Questions

- +
+

Questions

+

<%= erb :'/_errors', layout: false %>

-

Answers

+

Answers

    @@ -56,6 +56,7 @@
<% end %>
+
diff --git a/app/views/sessions/login.erb b/app/views/sessions/login.erb index 10e0f5b..55a3b4e 100644 --- a/app/views/sessions/login.erb +++ b/app/views/sessions/login.erb @@ -1,5 +1,10 @@
-

Login to TravelOverflow

+ +
+
+

Login to Travel Overflow!

+
+
<% if @errors %> <% @errors.each do |error| %> @@ -7,14 +12,18 @@ <% end %> <% end %> +
+ - - - +
+
+ -

Not registered? Sign up now!

- +
+
+

Not registered? Sign up now!

+
diff --git a/app/views/users/new.erb b/app/views/users/new.erb index 2dbd0fe..e0ed7ef 100644 --- a/app/views/users/new.erb +++ b/app/views/users/new.erb @@ -1,5 +1,10 @@
-

Register for TravelOverflow!

+ +
+
+

Register for Travel Overflow!

+
+
<% if @errors %> <% errors.each do |error| %> @@ -7,9 +12,18 @@ <% end %> <% end %> +
+
- - - +
+
+
+ +
+ +
+

Already registered? Login in!

+
+
diff --git a/app/views/users/show.erb b/app/views/users/show.erb index 3f107aa..5dfe280 100644 --- a/app/views/users/show.erb +++ b/app/views/users/show.erb @@ -1,39 +1,62 @@
-

Welcome, <%= @user.username.capitalize %>!

+

Welcome, <%= @user.username.capitalize %>!

-

Questions

+
+

Your Questions

+ <% @user_questions.each do |question| %> -

<%= question.title %>

+ + <% end %> + +
<%= question.title %>
+
-

Answers

+
+

Your Answers

+ <% @user_answers.each do |answer| %> + <% @question_answered %> -

<%=@question_answered.title%> <%= answer.description %>

+ <% end %> + +
Question: <%=@question_answered.title%>
Answer: <%= answer.description %>
+
-

Comments on Questions

+
+

Comments on Questions

+ <% @user_comments.each do |comment| %> <% if comment.commentable_type == "Question" %> <% @commented_question_id = comment.commentable_id %> <% @question_commented_on = Question.find_by(id: @commented_question_id)%> - <%= @question_commented_on.title %> - <%= comment.description %> + + <% end %> <% end %> + +
Question: <%= @question_commented_on.title %>
+ Comment: <%= comment.description %>
+
-

Comments on Answers

+
+

Comments on Answers

+ <% @user_comments.each do |comment| %> <% if comment.commentable_type == "Answer" %> <% @commented_answer_id = comment.commentable_id %> <% @answer_commented_on = Answer.find_by(id: @commented_answer_id)%> <% @question_of_commented_answer = Question.find_by(id: @answer_commented_on.question_id) %> -

Question: <%=@question_of_commented_answer.title%>

-

Answer:<%= @answer_commented_on.description %>

-

Comment:<%= comment.description %>

+ <% end %> <% end %> + +
Question: <%=@question_of_commented_answer.title%>
+ Answer: <%= @answer_commented_on.description %>
+ Comment: <%= comment.description %>
+
diff --git a/public/css/application.css b/public/css/application.css index 09c3c24..ddf8b85 100644 --- a/public/css/application.css +++ b/public/css/application.css @@ -1,35 +1,148 @@ body { background-color: #E7E7E7; } + .container { margin-top: 12em; text-align: center; padding-bottom: 15em; } -#question-form { +/* Header/Footer */ +#top-header { background-color: #3A5863; - width: 44em; - height: 22em; - margin-left: auto; - margin-right: auto; + height: 2em; + width: 100%; + position: absolute; + top: 0; } -.white { +#footer { + background-color: #3A5863; + height: 4em; + width: 100%; + position: fixed; + bottom: 0; +} + +#copyright { color: white; + padding-left: 15%; + position: absolute; } -.title-box { - height: 2em; - width: 30em; +#creators a { + color: white; + padding-right: 15%; + float: right; + position: relative; } -.description-box { +#creators a:hover { + color: #D86E3E; + padding-right: 15%; + float: right; + position: relative; +} + + +#top-header-login a { + color: white; + float: right; + margin-top: -1em; + margin-right: 15%; +} + +#top-header-profile a { + color: white; + float: right; + margin-top: -1em; + margin-right: 2%; +} + +#top-header-signup a { + color: white; + float: right; + margin-top: -1em; + margin-right: 2%; +} + +#logo-header { height: 8em; - width: 30em; - word-wrap: break-word; - display: inline; - margin-top: 0; + width: 100%; + position: absolute; + top: 2em; + padding-right: 10em; +} + +#logo-header img { + position: absolute; + top: 2em; + padding-left: 15%; +} + + +#ask-a-question-button a { + background-color: #3A5863; + position: relative; + font-weight: normal; + width: -webkit-fit-content; + padding: .5em; + color: white; + float: right; + top: 1.5em; + margin-right: 15%; +} + +#ask-a-question-button a:hover { + background-color: #3A5863; + position: relative; + font-weight: normal; + width: -webkit-fit-content; + padding: .5em; + color: white; + float: right; + top: 1.5em; + margin-right: 15%; +} + +.questions-button a { + background-color: #3A5863; + font-weight: normal; + position: relative; + width: -webkit-fit-content; + padding: .5em; + color: white; + float: right; + top: 1.5em; + margin-right: 2%; +} + +.questions-button a:hover { + background-color: #3A5863; + font-weight: normal; + position: relative; + width: -webkit-fit-content; + padding: .5em; + color: white; + float: right; + top: 1.5em; + margin-right: 2%; +} + +.hidden { + display: none; +} + + + +/* Ask a Question Section */ +#question-form { + background-color: #3A5863; + width: 44em; + height: 22em; + margin-left: auto; + margin-right: auto; } .vote-button { @@ -45,7 +158,6 @@ body { - /* Question Show Page */ .orange-underline { @@ -125,128 +237,63 @@ body { } -#top-header { - background-color: #3A5863; - height: 2em; - width: 100%; - position: absolute; - top: 0; -} -#footer { - background-color: #3A5863; - height: 4em; - width: 100%; - position: fixed; - bottom: 0; -} - -#copyright { - color: white; - padding-left: 15%; - position: absolute; -} - -#creators a { - color: white; - padding-right: 15%; - float: right; - position: relative; -} -#creators a:hover { - color: #D86E3E; - padding-right: 15%; - float: right; - position: relative; -} +/* User Show Page */ -#top-header-login a { +.profile-container { + margin-left: auto; + margin-right: auto; + margin-top: 3em; + width: 40em; color: white; - float: right; - margin-top: -1em; - margin-right: 15%; + line-height: 2em; } -#top-header-profile a { - color: white; - float: right; - margin-top: -1em; - margin-right: 2%; -} +/* Change Font Colors */ -#top-header-signup a { - color: white; - float: right; - margin-top: -1em; - margin-right: 2%; +.blue { + color: #3A5863; } -#logo-header { - height: 8em; - width: 100%; - position: absolute; - top: 2em; - padding-right: 10em; +.orange { + color: #D86E3E; } -#logo-header img { - position: absolute; - top: 2em; - padding-left: 15%; +.white { + color: white; } - -#ask-a-question-button a { +/* Sign Up/Login */ +.sign-form-container { + margin-left: auto; + margin-right: auto; + margin-top: 3em; + width: 35em; + line-height: 4.5em; background-color: #3A5863; - position: relative; - font-weight: normal; - width: -webkit-fit-content; - padding: .5em; - color: white; - float: right; - top: 1.5em; - margin-right: 15%; + padding: 1em; } -#ask-a-question-button a:hover { - background-color: #3A5863; - position: relative; - font-weight: normal; - width: -webkit-fit-content; - padding: .5em; - color: white; - float: right; - top: 1.5em; - margin-right: 15%; +/* Form input size changes */ +.title-box { + height: 2em; + width: 30em; } -.questions-button a { - background-color: #3A5863; - font-weight: normal; - position: relative; - width: -webkit-fit-content; - padding: .5em; - color: white; - float: right; - top: 1.5em; - margin-right: 2%; +.description-box { + height: 8em; + width: 30em; + word-wrap: break-word; + display: inline; + margin-top: 0; } -.questions-button a:hover { - background-color: #3A5863; - font-weight: normal; - position: relative; - width: -webkit-fit-content; +.register-button { + background-color: #D86E3E; + border:none; + font-size: 150%; padding: .5em; color: white; - float: right; - top: 1.5em; - margin-right: 2%; -} - -.hidden { - display: none; } - From 39cb2526128b6d650a2c00a9d0ab780f0597b67d Mon Sep 17 00:00:00 2001 From: Hanna Taylor & Katherine Broner Date: Thu, 12 May 2016 22:58:58 -0400 Subject: [PATCH 4/4] Fix merge conflicts --- app/controllers/answers.rb | 25 ------------------ app/views/_answer_vote_button.erb | 0 app/views/_comment_vote_button.erb | 0 app/views/answers/_individual_answer.erb | 14 ++++++++-- app/views/index.erb | 0 app/views/layout.erb | 2 ++ app/views/questions/_individual_question.erb | 1 - app/views/questions/index.erb | 2 ++ app/views/questions/show.erb | 27 +++++++------------- app/views/users/show.erb | 6 ++--- public/css/normalize.css | 10 ++++++++ public/js/application.js | 24 +++-------------- 12 files changed, 42 insertions(+), 69 deletions(-) delete mode 100644 app/views/_answer_vote_button.erb delete mode 100644 app/views/_comment_vote_button.erb delete mode 100644 app/views/index.erb diff --git a/app/controllers/answers.rb b/app/controllers/answers.rb index fbd14a4..0737fa1 100644 --- a/app/controllers/answers.rb +++ b/app/controllers/answers.rb @@ -27,28 +27,3 @@ redirect "/questions/#{@question.id}" end end - -# post '/questions/:question_id/answers/:answer_id/answer/upvote' do -# @question = Question.find_by(id: params[:question_id]) -# @answer = Answer.find_by(id: params[:answer_id]) -# binding.pry -# @answer.votes.create(value: 1) - -# if request.xhr? -# {points: @answer.points}.to_json -# else -# redirect "/questions/#{@question.id}" -# end -# end - -# post '/questions/:question_id/downvote' do -# @question = Question.find_by(id: params[:question_id]) -# @answer = Answer.find_by(id: params[:answer_id]) -# @answer.votes.create(value: -1) - -# if request.xhr? -# {points: @answer.points}.to_json -# else -# redirect "/questions/#{@question.id}" -# end -# end diff --git a/app/views/_answer_vote_button.erb b/app/views/_answer_vote_button.erb deleted file mode 100644 index e69de29..0000000 diff --git a/app/views/_comment_vote_button.erb b/app/views/_comment_vote_button.erb deleted file mode 100644 index e69de29..0000000 diff --git a/app/views/answers/_individual_answer.erb b/app/views/answers/_individual_answer.erb index 1b4ce31..f608948 100644 --- a/app/views/answers/_individual_answer.erb +++ b/app/views/answers/_individual_answer.erb @@ -1,9 +1,19 @@ -
  • - <%=answer.description%>
    • +
    +
  • <%=answer.description%>
    • +<% if logged_in? %> Add a comment to this answer
    +<% end %> + +
      + <% answer.comments.each do |comment| %> + <%= erb :'/comments/_individual_comment', locals: {answer: answer, question: @question, comment: comment} %> + <% end %> +
    +
    + diff --git a/app/views/index.erb b/app/views/index.erb deleted file mode 100644 index e69de29..0000000 diff --git a/app/views/layout.erb b/app/views/layout.erb index d3d5a67..dce5a79 100644 --- a/app/views/layout.erb +++ b/app/views/layout.erb @@ -32,7 +32,9 @@
    + <% if logged_in? %>

    Ask a Question

    + <% end %>

    Questions

    diff --git a/app/views/questions/_individual_question.erb b/app/views/questions/_individual_question.erb index 569c953..4eff771 100644 --- a/app/views/questions/_individual_question.erb +++ b/app/views/questions/_individual_question.erb @@ -1,4 +1,3 @@ <%=question.title%> - diff --git a/app/views/questions/index.erb b/app/views/questions/index.erb index f6b4f15..5ca1e83 100644 --- a/app/views/questions/index.erb +++ b/app/views/questions/index.erb @@ -1,7 +1,9 @@
    +

    Questions

    +

    <%= erb :'/_errors', layout: false %>

    - - -
    diff --git a/app/views/users/show.erb b/app/views/users/show.erb index 5dfe280..f904937 100644 --- a/app/views/users/show.erb +++ b/app/views/users/show.erb @@ -48,11 +48,11 @@ <% @commented_answer_id = comment.commentable_id %> <% @answer_commented_on = Answer.find_by(id: @commented_answer_id)%> <% @question_of_commented_answer = Question.find_by(id: @answer_commented_on.question_id) %> - + Question: <%=@question_of_commented_answer.title%>
    Answer: <%= @answer_commented_on.description %>
    - Comment: <%= comment.description %> - <% end %> + Comment: <%= comment.description %> + <% end %> <% end %> diff --git a/public/css/normalize.css b/public/css/normalize.css index 0db76b8..86bc385 100644 --- a/public/css/normalize.css +++ b/public/css/normalize.css @@ -98,6 +98,16 @@ a:hover { color: #D86E3E; } +/* BULLET POINTS ========================================================================== */ +ul { + list-style-type: none; + padding: 0; +} + +li { + list-style-type: none; + padding: 0; +} /* Text-level semantics ========================================================================== */ diff --git a/public/js/application.js b/public/js/application.js index 0e86fb1..81fde4e 100644 --- a/public/js/application.js +++ b/public/js/application.js @@ -12,10 +12,6 @@ $(document).ready(function() { $(".total-points").text(voteObject.points); }) }); - - - - $('#ask-a-question-button').on("click", "a", function(e){ e.preventDefault(); $('#question-form').show(); @@ -31,10 +27,7 @@ $(document).ready(function() { data: data }); ajaxRequest.done(function(response){ - $('.title-box').val(''); - $('.description-box').val(''); - $('#question-form').hide(); - $('.question-table').prepend(response); + $('#question-list').append(response); }); }); $('#add-answer-button').on("click", function(e){ @@ -58,12 +51,10 @@ $(document).ready(function() { $('#answer-list').append(response); }); }); - $('.answer a').on("click", function(e){ + $('.add-answer-comment-link').on("click", function(e){ e.preventDefault(); - $('.answer-comment-form').hide(); $(this).hide() - $('#' + e.target.parentElement.id + ' form').show(); - $('.answer a').show(); + $('#' + this.parentElement.id + ' form').show(); $('#' + e.target.parentElement.id + ' form').on("submit", function(e){ e.preventDefault(); var data = $(e.target).serialize(); @@ -74,12 +65,7 @@ $(document).ready(function() { type: type, data: data }).done(function(response){ - if (e.target.parentElement.id == 1) { - $('ul.answer-comment-list').eq(0).append(response); - } - else{ - $('#' + e.target.parentElement.id + ' ul.answer-comment-list').append(response); - }; + $('#' + e.target.parentElement.id).children('ul').append(response); $('#' + e.target.parentElement.id + ' form').children('#answer-comment-description').val(''); }); }); @@ -105,5 +91,3 @@ $(document).ready(function() { }); }); }); - -