diff --git a/app/javascript/components/Board/PostListItem.tsx b/app/javascript/components/Board/PostListItem.tsx index 05b25cb6..795dfecd 100644 --- a/app/javascript/components/Board/PostListItem.tsx +++ b/app/javascript/components/Board/PostListItem.tsx @@ -32,7 +32,7 @@ const PostListItem = ({ isLoggedIn, authenticityToken, }: Props) => ( - +
window.location.href = `/posts/${id}`} className="postListItem"> - -
- {title} - {description} -
- - { postStatus ? : null } -
+
+ {title} + {description} + +
+ + { postStatus ? : null }
-
- +
+
); export default PostListItem; \ No newline at end of file diff --git a/app/javascript/components/LikeButton/LikeButtonP.tsx b/app/javascript/components/LikeButton/LikeButtonP.tsx index 3e2db452..50dc0707 100644 --- a/app/javascript/components/LikeButton/LikeButtonP.tsx +++ b/app/javascript/components/LikeButton/LikeButtonP.tsx @@ -22,14 +22,15 @@ const LikeButtonP = ({ isLoggedIn, }: Props) => (
- +
{ + e.stopPropagation(); + + if (isLoggedIn) handleLikeSubmit(postId, !liked, authenticityToken); + else window.location.href = `/users/sign_in`; + }} + className={`likeButton${liked ? ' liked' : ''}`} + > +
{likesCount}
); diff --git a/app/javascript/stylesheets/components/Board.scss b/app/javascript/stylesheets/components/Board.scss index 81e69c06..e9b23fbe 100644 --- a/app/javascript/stylesheets/components/Board.scss +++ b/app/javascript/stylesheets/components/Board.scss @@ -73,24 +73,26 @@ .flex-grow-1; } - .postLink { - @extend .my-3; - - display: block; - color: $astuto-black; - - &:hover { text-decoration: none; } - } - .postListItem { @extend .card3D, .d-flex, - .flex-column, - .justify-content-between, + .flex-row, + .justify-content-start, + .my-3, .p-3; height: 140px; + color: $astuto-black; + + &:hover { cursor: pointer; } + + .postContainer { + @extend + .d-flex, + .flex-column, + .justify-content-between; + } } .postTitle { diff --git a/app/javascript/stylesheets/components/LikeButton.scss b/app/javascript/stylesheets/components/LikeButton.scss new file mode 100644 index 00000000..c60b271d --- /dev/null +++ b/app/javascript/stylesheets/components/LikeButton.scss @@ -0,0 +1,31 @@ +.likeButtonContainer { + @extend + .d-flex, + .flex-column, + .mr-3, + .mt-2; + + $like_button_size: 11px; + + .likeButton { + @extend .mb-2; + + border-left: $like_button_size solid transparent; + border-right: $like_button_size solid transparent; + border-bottom: $like_button_size solid rgba(35,35,35,.2); + + &:hover { + border-bottom-color: $astuto-black; + cursor: pointer; + } + } + + .likeButton.liked { + border-bottom-color: $astuto-black; + } + + .likesCountLabel { + text-align: center; + font-size: 17px; + } +} \ No newline at end of file diff --git a/app/javascript/stylesheets/main.scss b/app/javascript/stylesheets/main.scss index 7fc7fd5c..e018c65a 100644 --- a/app/javascript/stylesheets/main.scss +++ b/app/javascript/stylesheets/main.scss @@ -11,5 +11,6 @@ /* Components */ @import 'components/Board'; @import 'components/Comments'; +@import 'components/LikeButton'; @import 'components/Post'; @import 'components/Roadmap'; \ No newline at end of file diff --git a/spec/system/board_spec.rb b/spec/system/board_spec.rb index bd54031c..b48a9fdf 100644 --- a/spec/system/board_spec.rb +++ b/spec/system/board_spec.rb @@ -15,7 +15,7 @@ feature 'board', type: :system, js: true do let(:user) { FactoryBot.create(:user) } let(:board_container) { '.boardContainer' } - let(:post_link) { '.postLink' } + let(:post_list_item) { '.postListItem' } let(:sidebar) { '.sidebar' } let(:new_post_form) { '.newPostForm' } let(:reset_filter) { '.resetFilter' } @@ -43,7 +43,7 @@ feature 'board', type: :system, js: true do visit board_path(board) within board_container do - expect(page).to have_selector(post_link, count: 3) + expect(page).to have_selector(post_list_item, count: 3) expect(page).to have_content(/#{post1.title}/i) expect(page).to have_content(/#{post1.description}/i) expect(page).to have_no_content(/#{post4.title}/i) @@ -169,9 +169,9 @@ feature 'board', type: :system, js: true do # puts "tot: #{n_of_posts_in_board}, perpage: #{n_of_posts_per_page}, page: #{page_number}" within board_container do if n_of_posts_in_board < n_of_posts_per_page * page_number - expect(page).to have_selector(post_link, count: n_of_posts_in_board) + expect(page).to have_selector(post_list_item, count: n_of_posts_in_board) else - expect(page).to have_selector(post_link, count: n_of_posts_per_page * page_number) + expect(page).to have_selector(post_list_item, count: n_of_posts_per_page * page_number) end end end @@ -182,7 +182,7 @@ feature 'board', type: :system, js: true do visit board_path(board) - n_of_posts_per_page = page.all(:css, post_link).size + n_of_posts_per_page = page.all(:css, post_list_item).size page_number = 1 assert_number_of_posts_shown(n_of_posts_in_board, n_of_posts_per_page, page_number)