Refactor stylesheets

This commit is contained in:
riggraz
2019-09-02 19:59:55 +02:00
parent 86286b634d
commit 66dde5ee91
15 changed files with 139 additions and 155 deletions

View File

@@ -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;

View File

@@ -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<IPost>;
boards: Array<IBoard>;

View File

@@ -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<IPost>;

View File

@@ -1,7 +1,5 @@
import * as React from 'react';
import '../../stylesheets/components/Roadmap/PostListItem.scss';
interface Props {
title: string;
boardName: string;

View File

@@ -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<IPostStatus>;

View File

@@ -73,6 +73,7 @@
.postLink {
text-decoration: none;
border-radius: 4px;
margin: 8px 0;
}
.postLink:hover {
@@ -86,14 +87,13 @@
justify-content: space-between;
height: 114px;
margin: 4px 0;
margin: 0;
padding: 8px 4px;
}
.postTitle {
color: black;
font-weight: 500;
font-size: 18px;
font-size: 17px;
}
.postDescription {
@@ -108,7 +108,6 @@
color: black;
font-size: 16px;
text-transform: uppercase;
}
.postDetailsComments {
margin-right: 16px;
@@ -128,4 +127,6 @@
margin-right: 4px;
}
}
}
}
}

View File

@@ -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;
}
}
}
}
}

View File

@@ -1,4 +0,0 @@
.postList {
display: flex;
flex-direction: column;
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -1,7 +0,0 @@
.roadmapColumns {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}

View File

@@ -1,6 +1,6 @@
<%=
react_component(
'Board/Board',
'Board',
{
board: @board,
isLoggedIn: user_signed_in?,

View File

@@ -2,7 +2,7 @@
<%=
react_component(
'Roadmap/Roadmap',
'Roadmap',
{
postStatuses: @post_statuses,
posts: @posts,

View File

@@ -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

View File

@@ -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