mirror of
https://github.com/astuto/astuto.git
synced 2025-12-15 19:27:52 +01:00
Refactor stylesheets
This commit is contained in:
@@ -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;
|
||||
@@ -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>;
|
||||
|
||||
@@ -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>;
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import '../../stylesheets/components/Roadmap/PostListItem.scss';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
boardName: string;
|
||||
|
||||
@@ -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>;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
87
app/javascript/stylesheets/components/Roadmap.scss
Normal file
87
app/javascript/stylesheets/components/Roadmap.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
.postList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
.roadmapColumns {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
<%=
|
||||
react_component(
|
||||
'Board/Board',
|
||||
'Board',
|
||||
{
|
||||
board: @board,
|
||||
isLoggedIn: user_signed_in?,
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
<%=
|
||||
react_component(
|
||||
'Roadmap/Roadmap',
|
||||
'Roadmap',
|
||||
{
|
||||
postStatuses: @post_statuses,
|
||||
posts: @posts,
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user