From 66dde5ee91e6150d2232cd4b6b26ce0e573041c4 Mon Sep 17 00:00:00 2001 From: riggraz Date: Mon, 2 Sep 2019 19:59:55 +0200 Subject: [PATCH] Refactor stylesheets --- .../components/Board/{Board.tsx => index.tsx} | 2 +- .../components/Roadmap/PostList.tsx | 2 - .../Roadmap/PostListByPostStatus.tsx | 2 - .../components/Roadmap/PostListItem.tsx | 2 - .../Roadmap/{Roadmap.tsx => index.tsx} | 2 +- .../components/{Board => }/Board.scss | 77 ++++++++-------- .../stylesheets/components/Roadmap.scss | 87 +++++++++++++++++++ .../components/Roadmap/PostList.scss | 4 - .../Roadmap/PostListByPostStatus.scss | 46 ---------- .../components/Roadmap/PostListItem.scss | 26 ------ .../components/Roadmap/Roadmap.scss | 7 -- app/views/boards/show.html.erb | 2 +- app/views/static_pages/roadmap.html.erb | 2 +- spec/helpers/posts_helper_spec.rb | 15 ---- spec/system/roadmap_spec.rb | 18 ++-- 15 files changed, 139 insertions(+), 155 deletions(-) rename app/javascript/components/Board/{Board.tsx => index.tsx} (92%) rename app/javascript/components/Roadmap/{Roadmap.tsx => index.tsx} (93%) rename app/javascript/stylesheets/components/{Board => }/Board.scss (66%) create mode 100644 app/javascript/stylesheets/components/Roadmap.scss delete mode 100644 app/javascript/stylesheets/components/Roadmap/PostList.scss delete mode 100644 app/javascript/stylesheets/components/Roadmap/PostListByPostStatus.scss delete mode 100644 app/javascript/stylesheets/components/Roadmap/PostListItem.scss delete mode 100644 app/javascript/stylesheets/components/Roadmap/Roadmap.scss delete mode 100644 spec/helpers/posts_helper_spec.rb diff --git a/app/javascript/components/Board/Board.tsx b/app/javascript/components/Board/index.tsx similarity index 92% rename from app/javascript/components/Board/Board.tsx rename to app/javascript/components/Board/index.tsx index a9b7c6d6..b9bc207a 100644 --- a/app/javascript/components/Board/Board.tsx +++ b/app/javascript/components/Board/index.tsx @@ -5,7 +5,7 @@ import PostList from './PostList'; import IBoard from '../../interfaces/IBoard'; -import '../../stylesheets/components/Board/Board.scss'; +import '../../stylesheets/components/Board.scss'; interface Props { board: IBoard; diff --git a/app/javascript/components/Roadmap/PostList.tsx b/app/javascript/components/Roadmap/PostList.tsx index 48403168..09dc6139 100644 --- a/app/javascript/components/Roadmap/PostList.tsx +++ b/app/javascript/components/Roadmap/PostList.tsx @@ -5,8 +5,6 @@ import PostListItem from './PostListItem'; import IPost from '../../interfaces/IPost'; import IBoard from '../../interfaces/IBoard'; -import '../../stylesheets/components/Roadmap/PostList.scss'; - interface Props { posts: Array; boards: Array; diff --git a/app/javascript/components/Roadmap/PostListByPostStatus.tsx b/app/javascript/components/Roadmap/PostListByPostStatus.tsx index 46a3894b..17d645bf 100644 --- a/app/javascript/components/Roadmap/PostListByPostStatus.tsx +++ b/app/javascript/components/Roadmap/PostListByPostStatus.tsx @@ -6,8 +6,6 @@ import IPostStatus from '../../interfaces/IPostStatus'; import IPost from '../../interfaces/IPost'; import IBoard from '../../interfaces/IBoard'; -import '../../stylesheets/components/Roadmap/PostListByPostStatus.scss'; - interface Props { postStatus: IPostStatus; posts: Array; diff --git a/app/javascript/components/Roadmap/PostListItem.tsx b/app/javascript/components/Roadmap/PostListItem.tsx index 35a854c1..fd2a6de8 100644 --- a/app/javascript/components/Roadmap/PostListItem.tsx +++ b/app/javascript/components/Roadmap/PostListItem.tsx @@ -1,7 +1,5 @@ import * as React from 'react'; -import '../../stylesheets/components/Roadmap/PostListItem.scss'; - interface Props { title: string; boardName: string; diff --git a/app/javascript/components/Roadmap/Roadmap.tsx b/app/javascript/components/Roadmap/index.tsx similarity index 93% rename from app/javascript/components/Roadmap/Roadmap.tsx rename to app/javascript/components/Roadmap/index.tsx index 9eba94e3..96add6cb 100644 --- a/app/javascript/components/Roadmap/Roadmap.tsx +++ b/app/javascript/components/Roadmap/index.tsx @@ -6,7 +6,7 @@ import IPostStatus from '../../interfaces/IPostStatus'; import IPost from '../../interfaces/IPost'; import IBoard from '../../interfaces/IBoard'; -import '../../stylesheets/components/Roadmap/Roadmap.scss'; +import '../../stylesheets/components/Roadmap.scss'; interface Props { postStatuses: Array; diff --git a/app/javascript/stylesheets/components/Board/Board.scss b/app/javascript/stylesheets/components/Board.scss similarity index 66% rename from app/javascript/stylesheets/components/Board/Board.scss rename to app/javascript/stylesheets/components/Board.scss index 41c2ffb4..c1f4a92d 100644 --- a/app/javascript/stylesheets/components/Board/Board.scss +++ b/app/javascript/stylesheets/components/Board.scss @@ -73,6 +73,7 @@ .postLink { text-decoration: none; border-radius: 4px; + margin: 8px 0; } .postLink:hover { @@ -86,46 +87,46 @@ justify-content: space-between; height: 114px; - margin: 4px 0; + margin: 0; padding: 8px 4px; - } + + .postTitle { + color: black; + font-weight: 500; + font-size: 17px; + } + + .postDescription { + color: grey; + font-weight: 400; + font-size: 15px; + } + + .postDetails { + display: flex; + + color: black; + font-size: 16px; + text-transform: uppercase; + + .postDetailsComments { + margin-right: 16px; + } + + .postDetailsStatus { + display: flex; + } + + .dot { + width: 16px; + height: 16px; + border-radius: 100%; - .postTitle { - color: black; - font-weight: 500; - font-size: 18px; - } - - .postDescription { - color: grey; - font-weight: 400; - font-size: 15px; - } - - .postDetails { - display: flex; - - color: black; - font-size: 16px; - text-transform: uppercase; - } - - .postDetailsComments { - margin-right: 16px; - } - - .postDetailsStatus { - display: flex; - } - - .dot { - width: 16px; - height: 16px; - border-radius: 100%; - - margin-top: auto; - margin-bottom: auto; - margin-right: 4px; + margin-top: auto; + margin-bottom: auto; + margin-right: 4px; + } + } } } } \ No newline at end of file diff --git a/app/javascript/stylesheets/components/Roadmap.scss b/app/javascript/stylesheets/components/Roadmap.scss new file mode 100644 index 00000000..29801f3b --- /dev/null +++ b/app/javascript/stylesheets/components/Roadmap.scss @@ -0,0 +1,87 @@ +.roadmapColumns { + display: flex; + flex: 1 1 auto; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; + + @media (max-width: 800px) { + .roadmapColumn { + width: 100%; + } + } + + @media (min-width: 801px) { + .roadmapColumn { + width: 32%; + } + } + + .roadmapColumn { + border-width: 1px; + border-style: solid; + border-radius: 4px; + + margin: 8px 0; + padding: 8px; + + .columnHeader { + display: flex; + align-items: center; + + padding-bottom: 4px; + border-bottom-style: solid; + border-bottom-width: 1px; + margin-bottom: 8px; + } + + .dot { + width: 16px; + height: 16px; + border-radius: 100%; + } + + .columnTitle { + margin: 0 8px; + font-weight: 700; + } + + .scrollContainer { + overflow-y: auto; + max-height: 350px; + + .postList { + display: flex; + flex-direction: column; + + .postLink { + text-decoration: none; + border-radius: 4px; + } + + .postLink:hover { + text-decoration: none; + background-color: #f5f5f5; + } + + .postListItem { + margin: 4px 0; + padding: 8px 4px; + } + + .postTitle { + color: black; + font-weight: 500; + font-size: 17px; + } + + .postBoard { + color: grey; + font-weight: 400; + font-size: 14px; + text-transform: uppercase; + } + } + } + } +} \ No newline at end of file diff --git a/app/javascript/stylesheets/components/Roadmap/PostList.scss b/app/javascript/stylesheets/components/Roadmap/PostList.scss deleted file mode 100644 index b2d1da70..00000000 --- a/app/javascript/stylesheets/components/Roadmap/PostList.scss +++ /dev/null @@ -1,4 +0,0 @@ -.postList { - display: flex; - flex-direction: column; -} \ No newline at end of file diff --git a/app/javascript/stylesheets/components/Roadmap/PostListByPostStatus.scss b/app/javascript/stylesheets/components/Roadmap/PostListByPostStatus.scss deleted file mode 100644 index d400a7b7..00000000 --- a/app/javascript/stylesheets/components/Roadmap/PostListByPostStatus.scss +++ /dev/null @@ -1,46 +0,0 @@ -@media (max-width: 800px) { - .roadmapColumn { - width: 100%; - } -} - -@media (min-width: 801px) { - .roadmapColumn { - width: 32%; - } -} - -.roadmapColumn { - border-width: 1px; - border-style: solid; - border-radius: 4px; - - margin: 8px 0; - padding: 8px; -} - -.columnHeader { - display: flex; - align-items: center; - - padding-bottom: 4px; - border-bottom-style: solid; - border-bottom-width: 1px; - margin-bottom: 8px; -} - -.dot { - width: 16px; - height: 16px; - border-radius: 100%; -} - -.columnTitle { - margin: 0 8px; - font-weight: 700; -} - -.scrollContainer { - overflow-y: auto; - max-height: 350px; -} \ No newline at end of file diff --git a/app/javascript/stylesheets/components/Roadmap/PostListItem.scss b/app/javascript/stylesheets/components/Roadmap/PostListItem.scss deleted file mode 100644 index 7b217d5c..00000000 --- a/app/javascript/stylesheets/components/Roadmap/PostListItem.scss +++ /dev/null @@ -1,26 +0,0 @@ -.postLink { - text-decoration: none; - border-radius: 4px; -} - -.postLink:hover { - text-decoration: none; - background-color: #f5f5f5; -} - -.postListItem { - margin: 4px 0; - padding: 8px 4px; -} - -.postTitle { - color: black; - font-weight: 500; - font-size: 17px; -} - -.postBoard { - color: grey; - font-weight: 400; - font-size: 14px; -} \ No newline at end of file diff --git a/app/javascript/stylesheets/components/Roadmap/Roadmap.scss b/app/javascript/stylesheets/components/Roadmap/Roadmap.scss deleted file mode 100644 index 0e15bde6..00000000 --- a/app/javascript/stylesheets/components/Roadmap/Roadmap.scss +++ /dev/null @@ -1,7 +0,0 @@ -.roadmapColumns { - display: flex; - flex: 1 1 auto; - justify-content: space-between; - align-items: flex-start; - flex-wrap: wrap; -} \ No newline at end of file diff --git a/app/views/boards/show.html.erb b/app/views/boards/show.html.erb index aae054db..9130d40a 100644 --- a/app/views/boards/show.html.erb +++ b/app/views/boards/show.html.erb @@ -1,6 +1,6 @@ <%= react_component( - 'Board/Board', + 'Board', { board: @board, isLoggedIn: user_signed_in?, diff --git a/app/views/static_pages/roadmap.html.erb b/app/views/static_pages/roadmap.html.erb index 83f0d86e..f1bb69ad 100644 --- a/app/views/static_pages/roadmap.html.erb +++ b/app/views/static_pages/roadmap.html.erb @@ -2,7 +2,7 @@ <%= react_component( - 'Roadmap/Roadmap', + 'Roadmap', { postStatuses: @post_statuses, posts: @posts, diff --git a/spec/helpers/posts_helper_spec.rb b/spec/helpers/posts_helper_spec.rb deleted file mode 100644 index f3d00cbc..00000000 --- a/spec/helpers/posts_helper_spec.rb +++ /dev/null @@ -1,15 +0,0 @@ -require 'rails_helper' - -# Specs in this file have access to a helper object that includes -# the PostsHelper. For example: -# -# describe PostsHelper do -# describe "string concat" do -# it "concats two strings with spaces" do -# expect(helper.concat_strings("this","that")).to eq("this that") -# end -# end -# end -RSpec.describe PostsHelper, type: :helper do - pending "add some examples to (or delete) #{__FILE__}" -end diff --git a/spec/system/roadmap_spec.rb b/spec/system/roadmap_spec.rb index 1886e590..bbc7ffa9 100644 --- a/spec/system/roadmap_spec.rb +++ b/spec/system/roadmap_spec.rb @@ -46,9 +46,9 @@ feature 'roadmap', type: :system, js: true do within roadmap_columns do expect(page).to have_selector(roadmap_column, count: 2) expect(page).to have_selector(column_header, count: 2) - expect(page).to have_content(post_status_1.name) - expect(page).to have_content(post_status_2.name) - expect(page).not_to have_content(post_status_3.name) + expect(page).to have_content(/#{post_status_1.name}/i) + expect(page).to have_content(/#{post_status_2.name}/i) + expect(page).not_to have_content(/#{post_status_3.name}/i) end end @@ -57,9 +57,9 @@ feature 'roadmap', type: :system, js: true do within roadmap_columns do expect(page).to have_selector(post_link, count: 2) - expect(page).to have_content(post1.title) - expect(page).to have_content(post2.title) - expect(page).not_to have_content(post3.title) + expect(page).to have_content(/#{post1.title}/) + expect(page).to have_content(/#{post2.title}/) + expect(page).not_to have_content(/#{post3.title}/) end end @@ -67,9 +67,9 @@ feature 'roadmap', type: :system, js: true do visit root_path within roadmap_columns do - expect(page).to have_content(post1.board.name) - expect(page).to have_content(post2.board.name) - expect(page).not_to have_content(post3.board.name) + expect(page).to have_content(/#{post1.board.name}/i) + expect(page).to have_content(/#{post2.board.name}/i) + expect(page).not_to have_content(/#{post3.board.name}/i) end end end \ No newline at end of file