From 8e75a85873aff12da317997a892402e253c58174 Mon Sep 17 00:00:00 2001 From: Riccardo Graziosi <31478034+riggraz@users.noreply.github.com> Date: Wed, 8 Jun 2022 10:20:36 +0200 Subject: [PATCH] Refactor CSS (#116) Refactor CSS files and structure. Also refactors some html and React components for a smarter use of CSS classes. --- app/javascript/components/Board/BoardP.tsx | 5 +- app/javascript/components/Board/NewPost.tsx | 8 +- .../components/Board/NewPostForm.tsx | 2 +- app/javascript/components/Board/PostList.tsx | 4 +- .../components/Board/PostListItem.tsx | 4 +- .../components/Board/PostStatusFilter.tsx | 10 +- .../components/Board/PostStatusListItem.tsx | 4 +- .../components/Board/SearchFilter.tsx | 8 +- .../components/Comments/Comment.tsx | 4 +- .../components/Comments/CommentsP.tsx | 6 +- .../components/Comments/NewComment.tsx | 6 +- .../Comments/NewCommentUpdateSection.tsx | 2 +- app/javascript/components/Post/ActionBox.tsx | 38 +++---- app/javascript/components/Post/LikeList.tsx | 12 +-- app/javascript/components/Post/PostP.tsx | 17 ++-- .../components/Post/PostUpdateList.tsx | 13 ++- .../components/Roadmap/PostList.tsx | 2 +- .../Roadmap/PostListByPostStatus.tsx | 2 +- .../components/Roadmap/PostListItem.tsx | 2 +- .../SiteSettings/Boards/BoardEditable.tsx | 8 +- .../SiteSettings/Boards/BoardForm.tsx | 2 +- .../Boards/BoardsSiteSettingsP.tsx | 21 ++-- .../PostStatuses/PostStatusEditable.tsx | 6 +- .../PostStatuses/PostStatusForm.tsx | 2 +- .../PostStatusesSiteSettingsP.tsx | 19 ++-- app/javascript/components/common/Box.tsx | 14 +++ .../components/{shared => common}/Button.tsx | 0 .../{shared => common}/CommentsNumber.tsx | 0 .../{shared => common}/CustomTexts.tsx | 0 .../{shared => common}/DragZone.tsx | 0 .../{shared => common}/PostBoardLabel.tsx | 0 .../{shared => common}/PostStatusLabel.tsx | 0 .../{shared => common}/Separator.tsx | 0 app/javascript/components/common/Sidebar.tsx | 13 +++ .../components/common/SidebarBox.tsx | 18 ++++ .../SiteSettingsInfoBox.tsx | 5 +- .../components/{shared => common}/Spinner.tsx | 0 app/javascript/components/common/Switch.tsx | 17 ++++ app/javascript/packs/bootstrap_custom.js | 8 -- app/javascript/packs/hello_erb.js.erb | 3 - .../{general => common}/_custom_texts.scss | 2 +- .../{general => common}/_form.scss | 4 +- .../{general => common}/_header.scss | 52 +++++++--- .../_components.scss => common/_index.scss} | 99 +++++++++++++------ .../_scroll_shadows.scss} | 38 ------- .../stylesheets/components/Board.scss | 13 +-- .../stylesheets/components/Comments.scss | 2 +- .../stylesheets/components/LikeButton.scss | 4 +- .../stylesheets/components/Post.scss | 25 ++--- .../stylesheets/components/Roadmap.scss | 2 +- .../stylesheets/constants/_colors.scss | 6 +- app/javascript/stylesheets/main.scss | 10 +- ....html.erb => _boards_nav_section.html.erb} | 0 app/views/layouts/_header.html.erb | 28 ++++-- app/views/site_settings/_menu.html.erb | 3 +- app/views/site_settings/boards.html.erb | 4 +- app/views/site_settings/general.html.erb | 2 +- .../site_settings/post_statuses.html.erb | 4 +- config/locales/en.yml | 3 +- config/locales/it.yml | 3 +- spec/views/header_spec.rb | 2 +- 61 files changed, 329 insertions(+), 262 deletions(-) create mode 100644 app/javascript/components/common/Box.tsx rename app/javascript/components/{shared => common}/Button.tsx (100%) rename app/javascript/components/{shared => common}/CommentsNumber.tsx (100%) rename app/javascript/components/{shared => common}/CustomTexts.tsx (100%) rename app/javascript/components/{shared => common}/DragZone.tsx (100%) rename app/javascript/components/{shared => common}/PostBoardLabel.tsx (100%) rename app/javascript/components/{shared => common}/PostStatusLabel.tsx (100%) rename app/javascript/components/{shared => common}/Separator.tsx (100%) create mode 100644 app/javascript/components/common/Sidebar.tsx create mode 100644 app/javascript/components/common/SidebarBox.tsx rename app/javascript/components/{shared => common}/SiteSettingsInfoBox.tsx (88%) rename app/javascript/components/{shared => common}/Spinner.tsx (100%) create mode 100644 app/javascript/components/common/Switch.tsx delete mode 100644 app/javascript/packs/hello_erb.js.erb rename app/javascript/stylesheets/{general => common}/_custom_texts.scss (96%) rename app/javascript/stylesheets/{general => common}/_form.scss (88%) rename app/javascript/stylesheets/{general => common}/_header.scss (54%) rename app/javascript/stylesheets/{general/_components.scss => common/_index.scss} (57%) rename app/javascript/stylesheets/{general/_index.scss => common/_scroll_shadows.scss} (61%) rename app/views/layouts/{_boards_menu_section.html.erb => _boards_nav_section.html.erb} (100%) diff --git a/app/javascript/components/Board/BoardP.tsx b/app/javascript/components/Board/BoardP.tsx index 00675bd3..ddf26081 100644 --- a/app/javascript/components/Board/BoardP.tsx +++ b/app/javascript/components/Board/BoardP.tsx @@ -4,6 +4,7 @@ import NewPost from './NewPost'; import SearchFilter from './SearchFilter'; import PostStatusFilter from './PostStatusFilter'; import PostList from './PostList'; +import Sidebar from '../common/Sidebar'; import IBoard from '../../interfaces/IBoard'; @@ -74,7 +75,7 @@ class BoardP extends React.Component { return (
-
+ { currentFilter={filters.postStatusId} handleFilterClick={handlePostStatusFilterChange} /> -
+ { } = this.state; return ( -
+
{board.name} ; @@ -24,8 +25,7 @@ const PostStatusFilter = ({ handleFilterClick, currentFilter, }: Props) => ( -
- {I18n.t('board.filter_box.title')} + { postStatuses.map((postStatus, i) => ( : null } { error ? {error} : null } -
+ ); export default PostStatusFilter; \ No newline at end of file diff --git a/app/javascript/components/Board/PostStatusListItem.tsx b/app/javascript/components/Board/PostStatusListItem.tsx index 9cdc573b..49e4d6b9 100644 --- a/app/javascript/components/Board/PostStatusListItem.tsx +++ b/app/javascript/components/Board/PostStatusListItem.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import PostStatusLabel from '../shared/PostStatusLabel'; -import Button from '../shared/Button'; +import PostStatusLabel from '../common/PostStatusLabel'; +import Button from '../common/Button'; interface Props { name: string; diff --git a/app/javascript/components/Board/SearchFilter.tsx b/app/javascript/components/Board/SearchFilter.tsx index e45ad6da..c76a0fdd 100644 --- a/app/javascript/components/Board/SearchFilter.tsx +++ b/app/javascript/components/Board/SearchFilter.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import I18n from 'i18n-js'; -import { BoxTitleText } from '../shared/CustomTexts'; +import SidebarBox from '../common/SidebarBox'; interface Props { searchQuery: string; @@ -9,9 +9,7 @@ interface Props { } const SearchFilter = ({ searchQuery, handleChange }: Props) => ( -
- {I18n.t('board.search_box.title')} - + ( id="searchPostInput" className="form-control" /> -
+ ); export default SearchFilter; \ No newline at end of file diff --git a/app/javascript/components/Comments/Comment.tsx b/app/javascript/components/Comments/Comment.tsx index 92cbc015..1443f1b6 100644 --- a/app/javascript/components/Comments/Comment.tsx +++ b/app/javascript/components/Comments/Comment.tsx @@ -4,8 +4,8 @@ import Gravatar from 'react-gravatar'; import I18n from 'i18n-js'; import NewComment from './NewComment'; -import Separator from '../shared/Separator'; -import { MutedText } from '../shared/CustomTexts'; +import Separator from '../common/Separator'; +import { MutedText } from '../common/CustomTexts'; import { ReplyFormState } from '../../reducers/replyFormReducer'; diff --git a/app/javascript/components/Comments/CommentsP.tsx b/app/javascript/components/Comments/CommentsP.tsx index e42f3966..0f884480 100644 --- a/app/javascript/components/Comments/CommentsP.tsx +++ b/app/javascript/components/Comments/CommentsP.tsx @@ -3,12 +3,12 @@ import I18n from 'i18n-js'; import NewComment from './NewComment'; import CommentList from './CommentList'; -import Spinner from '../shared/Spinner'; -import { DangerText } from '../shared/CustomTexts'; +import Spinner from '../common/Spinner'; +import { DangerText } from '../common/CustomTexts'; import IComment from '../../interfaces/IComment'; import { ReplyFormState } from '../../reducers/replyFormReducer'; -import Separator from '../shared/Separator'; +import Separator from '../common/Separator'; interface Props { postId: number; diff --git a/app/javascript/components/Comments/NewComment.tsx b/app/javascript/components/Comments/NewComment.tsx index 1f363de8..07ebea76 100644 --- a/app/javascript/components/Comments/NewComment.tsx +++ b/app/javascript/components/Comments/NewComment.tsx @@ -4,9 +4,9 @@ import Gravatar from 'react-gravatar'; import NewCommentUpdateSection from './NewCommentUpdateSection'; -import Button from '../shared/Button'; -import Spinner from '../shared/Spinner'; -import { DangerText } from '../shared/CustomTexts'; +import Button from '../common/Button'; +import Spinner from '../common/Spinner'; +import { DangerText } from '../common/CustomTexts'; interface Props { body: string; diff --git a/app/javascript/components/Comments/NewCommentUpdateSection.tsx b/app/javascript/components/Comments/NewCommentUpdateSection.tsx index 4ecb7b6d..7d79e204 100644 --- a/app/javascript/components/Comments/NewCommentUpdateSection.tsx +++ b/app/javascript/components/Comments/NewCommentUpdateSection.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import I18n from 'i18n-js'; -import { MutedText } from '../shared/CustomTexts'; +import { MutedText } from '../common/CustomTexts'; interface Props { postUpdateFlagValue: boolean; diff --git a/app/javascript/components/Post/ActionBox.tsx b/app/javascript/components/Post/ActionBox.tsx index afb985a5..8020993c 100644 --- a/app/javascript/components/Post/ActionBox.tsx +++ b/app/javascript/components/Post/ActionBox.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import I18n from 'i18n-js'; -import Button from '../shared/Button'; -import { BoxTitleText, SmallMutedText } from '../shared/CustomTexts'; +import { SmallMutedText } from '../common/CustomTexts'; +import SidebarBox from '../common/SidebarBox'; +import Switch from '../common/Switch'; interface Props { followed: boolean; @@ -12,23 +13,22 @@ interface Props { } const ActionBox = ({followed, submitFollow, isLoggedIn}: Props) => ( -
-
- {I18n.t('post.action_box.title')} -
- -
- - { followed ? - I18n.t('post.action_box.following_description') - : - I18n.t('post.action_box.not_following_description') - } - -
-
+ + location.href = '/users/sign_in'} + label={I18n.t('post.action_box.follow_button')} + checked={followed} + htmlId="followSwitch" + /> + + + { followed ? + I18n.t('post.action_box.following_description') + : + I18n.t('post.action_box.not_following_description') + } + + ); export default ActionBox; \ No newline at end of file diff --git a/app/javascript/components/Post/LikeList.tsx b/app/javascript/components/Post/LikeList.tsx index 533fd761..d82c625a 100644 --- a/app/javascript/components/Post/LikeList.tsx +++ b/app/javascript/components/Post/LikeList.tsx @@ -3,12 +3,12 @@ import I18n from 'i18n-js'; import Gravatar from 'react-gravatar'; import ILike from '../../interfaces/ILike'; -import Spinner from '../shared/Spinner'; +import Spinner from '../common/Spinner'; +import SidebarBox from '../common/SidebarBox'; import { - BoxTitleText, DangerText, CenteredMutedText -} from '../shared/CustomTexts'; +} from '../common/CustomTexts'; interface Props { likes: Array; @@ -17,9 +17,7 @@ interface Props { } const LikeList = ({ likes, areLoading, error}: Props) => ( -
- {I18n.t('post.likes_box.title')} - + { areLoading ? : null } { error ? {error} : null } @@ -34,7 +32,7 @@ const LikeList = ({ likes, areLoading, error}: Props) => ( )) }
-
+ ); export default LikeList; \ No newline at end of file diff --git a/app/javascript/components/Post/PostP.tsx b/app/javascript/components/Post/PostP.tsx index 32b6cfe3..f5cea398 100644 --- a/app/javascript/components/Post/PostP.tsx +++ b/app/javascript/components/Post/PostP.tsx @@ -12,10 +12,11 @@ import ActionBox from './ActionBox'; import LikeButton from '../../containers/LikeButton'; import PostBoardSelect from './PostBoardSelect'; import PostStatusSelect from './PostStatusSelect'; -import PostBoardLabel from '../shared/PostBoardLabel'; -import PostStatusLabel from '../shared/PostStatusLabel'; +import PostBoardLabel from '../common/PostBoardLabel'; +import PostStatusLabel from '../common/PostStatusLabel'; import Comments from '../../containers/Comments'; -import { MutedText } from '../shared/CustomTexts'; +import { MutedText } from '../common/CustomTexts'; +import Sidebar from '../common/Sidebar'; import { LikesState } from '../../reducers/likesReducer'; import { CommentsState } from '../../reducers/commentsReducer'; @@ -101,8 +102,8 @@ class PostP extends React.Component { ); return ( -
-
+
+ { isLoggedIn={isLoggedIn} /> -
+
-
+ <>
{ {friendlyDate(post.createdAt)} -
+ ; @@ -26,9 +27,7 @@ const PostUpdateList = ({ areLoading, error, }: Props) => ( -
- {I18n.t('post.updates_box.title')} - + { areLoading ? : null } { error ? {error} : null } @@ -71,7 +70,7 @@ const PostUpdateList = ({ )) }
-
+ ); export default PostUpdateList; \ No newline at end of file diff --git a/app/javascript/components/Roadmap/PostList.tsx b/app/javascript/components/Roadmap/PostList.tsx index b0d40fed..e74d9d14 100644 --- a/app/javascript/components/Roadmap/PostList.tsx +++ b/app/javascript/components/Roadmap/PostList.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PostListItem from './PostListItem'; -import { CenteredMutedText } from '../shared/CustomTexts'; +import { CenteredMutedText } from '../common/CustomTexts'; import IPostJSON from '../../interfaces/json/IPost'; import IBoard from '../../interfaces/IBoard'; diff --git a/app/javascript/components/Roadmap/PostListByPostStatus.tsx b/app/javascript/components/Roadmap/PostListByPostStatus.tsx index 92ab477f..031a5a1a 100644 --- a/app/javascript/components/Roadmap/PostListByPostStatus.tsx +++ b/app/javascript/components/Roadmap/PostListByPostStatus.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PostList from './PostList'; -import { TitleText } from '../shared/CustomTexts'; +import { TitleText } from '../common/CustomTexts'; import IPostStatus from '../../interfaces/IPostStatus'; import IPostJSON from '../../interfaces/json/IPost'; diff --git a/app/javascript/components/Roadmap/PostListItem.tsx b/app/javascript/components/Roadmap/PostListItem.tsx index 0ee8ab95..ac6ab7df 100644 --- a/app/javascript/components/Roadmap/PostListItem.tsx +++ b/app/javascript/components/Roadmap/PostListItem.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { TitleText, UppercaseText } from '../shared/CustomTexts'; +import { TitleText, UppercaseText } from '../common/CustomTexts'; interface Props { id: number; diff --git a/app/javascript/components/SiteSettings/Boards/BoardEditable.tsx b/app/javascript/components/SiteSettings/Boards/BoardEditable.tsx index 15b8c3dd..a7fa1973 100644 --- a/app/javascript/components/SiteSettings/Boards/BoardEditable.tsx +++ b/app/javascript/components/SiteSettings/Boards/BoardEditable.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import I18n from 'i18n-js'; import { Draggable } from 'react-beautiful-dnd'; -import { DescriptionText } from '../../shared/CustomTexts'; +import { DescriptionText } from '../../common/CustomTexts'; -import DragZone from '../../shared/DragZone'; -import PostBoardLabel from '../../shared/PostBoardLabel'; -import Separator from '../../shared/Separator'; +import DragZone from '../../common/DragZone'; +import PostBoardLabel from '../../common/PostBoardLabel'; +import Separator from '../../common/Separator'; import BoardForm from './BoardForm'; interface Props { diff --git a/app/javascript/components/SiteSettings/Boards/BoardForm.tsx b/app/javascript/components/SiteSettings/Boards/BoardForm.tsx index 13b04bad..4c624b0d 100644 --- a/app/javascript/components/SiteSettings/Boards/BoardForm.tsx +++ b/app/javascript/components/SiteSettings/Boards/BoardForm.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import I18n from 'i18n-js'; -import Button from '../../shared/Button'; +import Button from '../../common/Button'; interface Props { mode: 'create' | 'update'; diff --git a/app/javascript/components/SiteSettings/Boards/BoardsSiteSettingsP.tsx b/app/javascript/components/SiteSettings/Boards/BoardsSiteSettingsP.tsx index 812624ed..b9fff63a 100644 --- a/app/javascript/components/SiteSettings/Boards/BoardsSiteSettingsP.tsx +++ b/app/javascript/components/SiteSettings/Boards/BoardsSiteSettingsP.tsx @@ -1,14 +1,15 @@ import * as React from 'react'; import I18n from 'i18n-js'; - import { DragDropContext, Droppable } from 'react-beautiful-dnd'; import BoardEditable from './BoardEditable'; import BoardForm from './BoardForm'; -import SiteSettingsInfoBox from '../../shared/SiteSettingsInfoBox'; -import Spinner from '../../shared/Spinner'; +import SiteSettingsInfoBox from '../../common/SiteSettingsInfoBox'; +import Spinner from '../../common/Spinner'; +import Box from '../../common/Box'; +import { CenteredMutedText } from '../../common/CustomTexts'; + import { BoardsState } from '../../../reducers/boardsReducer'; -import { CenteredMutedText } from '../../shared/CustomTexts'; import IBoard from '../../../interfaces/IBoard'; interface Props { @@ -89,8 +90,8 @@ class BoardsSiteSettingsP extends React.Component { } = this.props; return ( - -
+ <> +

{I18n.t('site_settings.boards.title')}

{ @@ -124,16 +125,16 @@ class BoardsSiteSettingsP extends React.Component { : {I18n.t('site_settings.boards.empty')} } -
+ -
+

{I18n.t('site_settings.boards.new')}

-
+ - + ); } } diff --git a/app/javascript/components/SiteSettings/PostStatuses/PostStatusEditable.tsx b/app/javascript/components/SiteSettings/PostStatuses/PostStatusEditable.tsx index 9ba5510a..2a8e7f31 100644 --- a/app/javascript/components/SiteSettings/PostStatuses/PostStatusEditable.tsx +++ b/app/javascript/components/SiteSettings/PostStatuses/PostStatusEditable.tsx @@ -3,9 +3,9 @@ import I18n from 'i18n-js'; import { Draggable } from 'react-beautiful-dnd'; -import PostStatusLabel from "../../shared/PostStatusLabel"; -import DragZone from '../../shared/DragZone'; -import Separator from '../../shared/Separator'; +import PostStatusLabel from "../../common/PostStatusLabel"; +import DragZone from '../../common/DragZone'; +import Separator from '../../common/Separator'; import PostStatusForm from './PostStatusForm'; interface Props { diff --git a/app/javascript/components/SiteSettings/PostStatuses/PostStatusForm.tsx b/app/javascript/components/SiteSettings/PostStatuses/PostStatusForm.tsx index aff8e689..5d226678 100644 --- a/app/javascript/components/SiteSettings/PostStatuses/PostStatusForm.tsx +++ b/app/javascript/components/SiteSettings/PostStatuses/PostStatusForm.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import I18n from 'i18n-js'; -import Button from '../../shared/Button'; +import Button from '../../common/Button'; import padStart from '../../../helpers/padStart'; diff --git a/app/javascript/components/SiteSettings/PostStatuses/PostStatusesSiteSettingsP.tsx b/app/javascript/components/SiteSettings/PostStatuses/PostStatusesSiteSettingsP.tsx index 18946ffb..5505b924 100644 --- a/app/javascript/components/SiteSettings/PostStatuses/PostStatusesSiteSettingsP.tsx +++ b/app/javascript/components/SiteSettings/PostStatuses/PostStatusesSiteSettingsP.tsx @@ -5,11 +5,12 @@ import { DragDropContext, Droppable } from 'react-beautiful-dnd'; import IPostStatus from '../../../interfaces/IPostStatus'; import { PostStatusesState } from "../../../reducers/postStatusesReducer"; -import { CenteredMutedText } from '../../shared/CustomTexts'; -import SiteSettingsInfoBox from '../../shared/SiteSettingsInfoBox'; +import { CenteredMutedText } from '../../common/CustomTexts'; +import SiteSettingsInfoBox from '../../common/SiteSettingsInfoBox'; import PostStatusForm from './PostStatusForm'; import PostStatusEditable from './PostStatusEditable'; -import Spinner from '../../shared/Spinner'; +import Spinner from '../../common/Spinner'; +import Box from '../../common/Box'; interface Props { authenticityToken: string; @@ -84,8 +85,8 @@ class PostStatusesSiteSettingsP extends React.Component { const { postStatuses, settingsAreUpdating, settingsError } = this.props; return ( - -
+ <> +

{I18n.t('site_settings.post_statuses.title')}

{ @@ -119,16 +120,16 @@ class PostStatusesSiteSettingsP extends React.Component { : {I18n.t('site_settings.post_statuses.empty')} } -
+ -
+

{I18n.t('site_settings.post_statuses.new')}

-
+ - + ); } } diff --git a/app/javascript/components/common/Box.tsx b/app/javascript/components/common/Box.tsx new file mode 100644 index 00000000..3f292649 --- /dev/null +++ b/app/javascript/components/common/Box.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; + +interface Props { + customClass?: string; + children: React.ReactNode; +} + +const Box = ({ customClass, children }: Props) => ( +
+ {children} +
+); + +export default Box; \ No newline at end of file diff --git a/app/javascript/components/shared/Button.tsx b/app/javascript/components/common/Button.tsx similarity index 100% rename from app/javascript/components/shared/Button.tsx rename to app/javascript/components/common/Button.tsx diff --git a/app/javascript/components/shared/CommentsNumber.tsx b/app/javascript/components/common/CommentsNumber.tsx similarity index 100% rename from app/javascript/components/shared/CommentsNumber.tsx rename to app/javascript/components/common/CommentsNumber.tsx diff --git a/app/javascript/components/shared/CustomTexts.tsx b/app/javascript/components/common/CustomTexts.tsx similarity index 100% rename from app/javascript/components/shared/CustomTexts.tsx rename to app/javascript/components/common/CustomTexts.tsx diff --git a/app/javascript/components/shared/DragZone.tsx b/app/javascript/components/common/DragZone.tsx similarity index 100% rename from app/javascript/components/shared/DragZone.tsx rename to app/javascript/components/common/DragZone.tsx diff --git a/app/javascript/components/shared/PostBoardLabel.tsx b/app/javascript/components/common/PostBoardLabel.tsx similarity index 100% rename from app/javascript/components/shared/PostBoardLabel.tsx rename to app/javascript/components/common/PostBoardLabel.tsx diff --git a/app/javascript/components/shared/PostStatusLabel.tsx b/app/javascript/components/common/PostStatusLabel.tsx similarity index 100% rename from app/javascript/components/shared/PostStatusLabel.tsx rename to app/javascript/components/common/PostStatusLabel.tsx diff --git a/app/javascript/components/shared/Separator.tsx b/app/javascript/components/common/Separator.tsx similarity index 100% rename from app/javascript/components/shared/Separator.tsx rename to app/javascript/components/common/Separator.tsx diff --git a/app/javascript/components/common/Sidebar.tsx b/app/javascript/components/common/Sidebar.tsx new file mode 100644 index 00000000..820f1101 --- /dev/null +++ b/app/javascript/components/common/Sidebar.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; + +interface Props { + children: React.ReactNode; +} + +const Sidebar = ({ children }: Props) => ( +
+ {children} +
+); + +export default Sidebar; \ No newline at end of file diff --git a/app/javascript/components/common/SidebarBox.tsx b/app/javascript/components/common/SidebarBox.tsx new file mode 100644 index 00000000..dd0cb4f1 --- /dev/null +++ b/app/javascript/components/common/SidebarBox.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +import { BoxTitleText } from './CustomTexts'; + +interface Props { + title: string; + customClass?: string; + children: React.ReactNode; +} + +const SidebarBox = ({ title, customClass, children }: Props) => ( +
+ {title} + {children} +
+); + +export default SidebarBox; \ No newline at end of file diff --git a/app/javascript/components/shared/SiteSettingsInfoBox.tsx b/app/javascript/components/common/SiteSettingsInfoBox.tsx similarity index 88% rename from app/javascript/components/shared/SiteSettingsInfoBox.tsx rename to app/javascript/components/common/SiteSettingsInfoBox.tsx index 990057f6..684f4086 100644 --- a/app/javascript/components/shared/SiteSettingsInfoBox.tsx +++ b/app/javascript/components/common/SiteSettingsInfoBox.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import I18n from 'i18n-js'; import Spinner from './Spinner'; +import Box from './Box'; interface Props { areUpdating: boolean; @@ -9,7 +10,7 @@ interface Props { } const SiteSettingsInfoBox = ({ areUpdating, error }: Props) => ( -
+ { areUpdating ? @@ -21,7 +22,7 @@ const SiteSettingsInfoBox = ({ areUpdating, error }: Props) => ( : {I18n.t('site_settings.info_box.up_to_date')} } -
+ ); export default SiteSettingsInfoBox; \ No newline at end of file diff --git a/app/javascript/components/shared/Spinner.tsx b/app/javascript/components/common/Spinner.tsx similarity index 100% rename from app/javascript/components/shared/Spinner.tsx rename to app/javascript/components/common/Spinner.tsx diff --git a/app/javascript/components/common/Switch.tsx b/app/javascript/components/common/Switch.tsx new file mode 100644 index 00000000..0be7fd0c --- /dev/null +++ b/app/javascript/components/common/Switch.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; + +interface Props { + label?: string; + onClick: React.MouseEventHandler; + checked?: boolean; + htmlId?: string; +} + +const Switch = ({ label, onClick, checked, htmlId }: Props) => ( +
+ + +
+); + +export default Switch; \ No newline at end of file diff --git a/app/javascript/packs/bootstrap_custom.js b/app/javascript/packs/bootstrap_custom.js index 447ed642..e4c567f0 100644 --- a/app/javascript/packs/bootstrap_custom.js +++ b/app/javascript/packs/bootstrap_custom.js @@ -1,13 +1,5 @@ import 'bootstrap/js/dist/alert' import 'bootstrap/js/dist/button' -import 'bootstrap/js/dist/carousel' import 'bootstrap/js/dist/collapse' import 'bootstrap/js/dist/dropdown' -import 'bootstrap/js/dist/index' -import 'bootstrap/js/dist/modal' -import 'bootstrap/js/dist/popover' -import 'bootstrap/js/dist/scrollspy' -import 'bootstrap/js/dist/tab' -import 'bootstrap/js/dist/toast' -import 'bootstrap/js/dist/tooltip' import 'bootstrap/js/dist/util' \ No newline at end of file diff --git a/app/javascript/packs/hello_erb.js.erb b/app/javascript/packs/hello_erb.js.erb deleted file mode 100644 index 090eca9b..00000000 --- a/app/javascript/packs/hello_erb.js.erb +++ /dev/null @@ -1,3 +0,0 @@ -<% name = 'Erb' %> - -console.log('Hello world from <%= name %>') diff --git a/app/javascript/stylesheets/general/_custom_texts.scss b/app/javascript/stylesheets/common/_custom_texts.scss similarity index 96% rename from app/javascript/stylesheets/general/_custom_texts.scss rename to app/javascript/stylesheets/common/_custom_texts.scss index e2ee2ebf..14155bea 100644 --- a/app/javascript/stylesheets/general/_custom_texts.scss +++ b/app/javascript/stylesheets/common/_custom_texts.scss @@ -24,7 +24,7 @@ } .mutedText { - color: $muted-text-color; + color: $astuto-grey; } .smallMutedText { diff --git a/app/javascript/stylesheets/general/_form.scss b/app/javascript/stylesheets/common/_form.scss similarity index 88% rename from app/javascript/stylesheets/general/_form.scss rename to app/javascript/stylesheets/common/_form.scss index a65a0dc4..207ec568 100644 --- a/app/javascript/stylesheets/general/_form.scss +++ b/app/javascript/stylesheets/common/_form.scss @@ -9,7 +9,7 @@ } .form-control:focus { - border-color: $astuto-grey; + border-color: $astuto-light-grey; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(0, 0, 0, 0.6); } @@ -33,7 +33,7 @@ margin-top: 24px; - a { color: $astuto-black; } + a { color: $primary-color; } } .switch { diff --git a/app/javascript/stylesheets/general/_header.scss b/app/javascript/stylesheets/common/_header.scss similarity index 54% rename from app/javascript/stylesheets/general/_header.scss rename to app/javascript/stylesheets/common/_header.scss index cb5d56cc..b0fd3b08 100644 --- a/app/javascript/stylesheets/general/_header.scss +++ b/app/javascript/stylesheets/common/_header.scss @@ -1,4 +1,9 @@ -.navbar { +.header { + @extend + .navbar, + .navbar-expand-md, + .navbar-light; + position: sticky; z-index: 1; top: 0px; @@ -13,7 +18,9 @@ margin-bottom: 1em; - .navbar-brand { + .brand { + @extend .navbar-brand; + font-size: 18pt; font-weight: 700; @@ -27,7 +34,19 @@ } } + .navbarToggler { + @extend .navbar-toggler; + + &:focus { + outline: none; + } + } + .boardsNav { + @extend + .navbar-nav, + .mr-auto; + .nav-item { @extend .badge, @@ -42,25 +61,26 @@ } } - .fullname { - vertical-align: middle; + .profileNav { + @extend + .navbar-nav, + .ml-auto; - color: $astuto-black; - } + .profileToggle { + @extend + .nav-link, + .dropdown-toggle; - .dropdown-toggle::after { - vertical-align: middle; - } + &::after { vertical-align: middle; } + } - .navbar-toggler:focus { - outline: none; - } - - .navbar-toggler[aria-expanded="true"] { - background-color: $astuto-grey; + .fullname { + color: $astuto-black; + vertical-align: middle; + } } .dropdown-item:active { - background-color: $astuto-black; + background-color: $primary-color; } } \ No newline at end of file diff --git a/app/javascript/stylesheets/general/_components.scss b/app/javascript/stylesheets/common/_index.scss similarity index 57% rename from app/javascript/stylesheets/general/_components.scss rename to app/javascript/stylesheets/common/_index.scss index 83b75446..e03825d1 100644 --- a/app/javascript/stylesheets/general/_components.scss +++ b/app/javascript/stylesheets/common/_index.scss @@ -1,16 +1,10 @@ -a { - color: $astuto-black; - - &:hover { color: inherit; } -} - .card { @extend .card; box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.15); transition: all 0.3s cubic-bezier(.25,.8,.25,1); - color: $astuto-black; + color: $primary-color; padding: 8px; } @@ -27,7 +21,8 @@ a { } } -.multiColumnContainer { +// General container for pages with siderbar + main content +.twoColumnsContainer { @extend .d-flex, .justify-content-between, @@ -37,18 +32,17 @@ a { @include media-breakpoint-down(sm) { flex-direction: column; + } - .postAndCommentsContainer { width: 100%; } + // Make the main content full width + & > div:nth-child(2) { + @extend + .flex-grow-1, + .w-100; } } -.multiRowContent { - @extend - .flex-grow-1, - .w-100; -} - -.content { +.box { @extend .card, .flex-grow-1, @@ -60,7 +54,13 @@ a { position: sticky; top: 79px; - .sidebarCard { + @include media-breakpoint-down(sm) { + position: relative; + width: 100%; + top: 0; + } + + .sidebarBox { @extend .card, .d-flex, @@ -74,6 +74,10 @@ a { width: 280px; margin-right: 16px; + + @include media-breakpoint-down(sm) { + width: 100%; + } } } @@ -85,8 +89,18 @@ a { .text-center, .align-self-stretch; + a { + color: $astuto-grey; + font-weight: 500; + + &:hover { + color: $astuto-black; + } + } + .nav-link.active { - background-color: $astuto-black; + color: $astuto-black; + background-color: $astuto-light-grey; } } @@ -109,17 +123,6 @@ a { &:active { cursor: grabbing; } } - -@include media-breakpoint-down(sm) { - .sidebar { - position: relative; - width: 100%; - top: 0; - - .sidebarCard { width: 100%; } - } -} - .badge { @extend .badge, @@ -132,5 +135,41 @@ a { .badgeLight { @extend .badge-light; - background-color: $astuto-grey; + background-color: $astuto-light-grey; +} + +.container { + max-width: 960px; +} + +.turbolinks-progress-bar { + background-color: $primary-color; + height: 2px; +} + +.gravatar { + border-radius: 100%; +} + +.checkboxSwitch { + @extend + .custom-control, + .custom-switch; + + & > input[type="checkbox"] { + @extend .custom-control-input; + } + + & > label { + @extend .custom-control-label; + + &::before { + transform: scale(1.2); + } + } + + & > input:checked ~ label::before { + background-color: $primary-color !important; + border-color: $primary-color !important; + } } \ No newline at end of file diff --git a/app/javascript/stylesheets/general/_index.scss b/app/javascript/stylesheets/common/_scroll_shadows.scss similarity index 61% rename from app/javascript/stylesheets/general/_index.scss rename to app/javascript/stylesheets/common/_scroll_shadows.scss index f60d4b65..93a5f58a 100644 --- a/app/javascript/stylesheets/general/_index.scss +++ b/app/javascript/stylesheets/common/_scroll_shadows.scss @@ -1,41 +1,3 @@ -/* - This stylesheet contains styles that are general and - could not be grouped in a file of their own -*/ - -.container { - max-width: 960px; -} - -.turbolinks-progress-bar { - background-color: $astuto-black; - height: 2px; -} - -.gravatar { - border-radius: 100%; -} - -.dot { - width: 16px; - height: 16px; - border-radius: 100%; - - margin-top: auto; - margin-bottom: auto; - margin-right: 4px; -} - -.loginInfo { - text-decoration: underline; -} - -.btn { - color: #fff; - background-color: #343a40; - border-color: #343a40; -} - // Credits: https://codepen.io/chriscoyier/pen/YzXBYvL .scroll-shadows { max-height: 200px; diff --git a/app/javascript/stylesheets/components/Board.scss b/app/javascript/stylesheets/components/Board.scss index 172ba2ff..77fa3b32 100644 --- a/app/javascript/stylesheets/components/Board.scss +++ b/app/javascript/stylesheets/components/Board.scss @@ -1,14 +1,7 @@ .boardContainer { - @extend - .d-flex, - .justify-content-between, - .align-items-start; - - flex-direction: row; + @extend .twoColumnsContainer; @include media-breakpoint-down(sm) { - flex-direction: column; - .postStatusFilterContainer { flex-direction: row !important; flex-wrap: wrap; @@ -18,7 +11,7 @@ } .newPostContainer { - background-color: $astuto-grey; + background-color: $astuto-light-grey; text-align: center; .boardTitle { @@ -91,7 +84,7 @@ .p-3; height: 140px; - color: $astuto-black; + color: $primary-color; @include media-breakpoint-down(sm) { height: auto; diff --git a/app/javascript/stylesheets/components/Comments.scss b/app/javascript/stylesheets/components/Comments.scss index 6a6e8fac..3dcbd44f 100644 --- a/app/javascript/stylesheets/components/Comments.scss +++ b/app/javascript/stylesheets/components/Comments.scss @@ -95,7 +95,7 @@ font-size: 14px; .commentLink { - color: $astuto-black; + color: $primary-color; &:hover { text-decoration: underline; diff --git a/app/javascript/stylesheets/components/LikeButton.scss b/app/javascript/stylesheets/components/LikeButton.scss index c60b271d..63a7839a 100644 --- a/app/javascript/stylesheets/components/LikeButton.scss +++ b/app/javascript/stylesheets/components/LikeButton.scss @@ -15,13 +15,13 @@ border-bottom: $like_button_size solid rgba(35,35,35,.2); &:hover { - border-bottom-color: $astuto-black; + border-bottom-color: $primary-color; cursor: pointer; } } .likeButton.liked { - border-bottom-color: $astuto-black; + border-bottom-color: $primary-color; } .likesCountLabel { diff --git a/app/javascript/stylesheets/components/Post.scss b/app/javascript/stylesheets/components/Post.scss index 3239c7f4..5368e117 100644 --- a/app/javascript/stylesheets/components/Post.scss +++ b/app/javascript/stylesheets/components/Post.scss @@ -1,10 +1,5 @@ -.pageContainer { - @extend - .d-flex, - .justify-content-between, - .align-items-start; - - flex-direction: row; +.postContainer { + @extend .twoColumnsContainer; @include media-breakpoint-down(sm) { flex-direction: column; @@ -14,8 +9,6 @@ .sidebar { .postUpdateListContainer { - @extend .sidebarCard; - .postUpdateList { @extend .scroll-shadows, @@ -63,8 +56,6 @@ } .likeListContainer { - @extend .sidebarCard; - .likeList { @extend .scroll-shadows, @@ -86,14 +77,12 @@ } .actionBoxContainer { - @extend - .sidebarCard, - .text-center; + @extend .text-center; - .btn { + .checkboxSwitch { @extend - .mt-3, - .mb-1; + .mt-1, + .mb-2; } } } @@ -141,7 +130,7 @@ @extend .my-3; - color: $astuto-black; + color: $primary-color; } } } \ No newline at end of file diff --git a/app/javascript/stylesheets/components/Roadmap.scss b/app/javascript/stylesheets/components/Roadmap.scss index 33384c8a..babe950f 100644 --- a/app/javascript/stylesheets/components/Roadmap.scss +++ b/app/javascript/stylesheets/components/Roadmap.scss @@ -11,7 +11,7 @@ .p-0; width: 32%; - background-color: $astuto-grey; + background-color: $astuto-light-grey; @include media-breakpoint-down(sm) { width: 100%; diff --git a/app/javascript/stylesheets/constants/_colors.scss b/app/javascript/stylesheets/constants/_colors.scss index a40c59a7..e0cdc3b2 100644 --- a/app/javascript/stylesheets/constants/_colors.scss +++ b/app/javascript/stylesheets/constants/_colors.scss @@ -1,3 +1,5 @@ +$primary-color: #333; + $astuto-black: #333; -$astuto-grey: rgba(178, 178, 178, 0.15); -$muted-text-color: #6c757d; \ No newline at end of file +$astuto-grey: rgba(0, 0, 0, 0.5); +$astuto-light-grey: rgba(178, 178, 178, 0.2); \ No newline at end of file diff --git a/app/javascript/stylesheets/main.scss b/app/javascript/stylesheets/main.scss index 8bec9c83..161e1f1c 100644 --- a/app/javascript/stylesheets/main.scss +++ b/app/javascript/stylesheets/main.scss @@ -2,11 +2,11 @@ @import 'constants/colors'; -@import 'general/components'; -@import 'general/custom_texts'; -@import 'general/form'; -@import 'general/header'; -@import 'general/index'; +@import 'common/index'; +@import 'common/custom_texts'; +@import 'common/form'; +@import 'common/header'; +@import 'common/scroll_shadows'; /* Components */ @import 'components/Board'; diff --git a/app/views/layouts/_boards_menu_section.html.erb b/app/views/layouts/_boards_nav_section.html.erb similarity index 100% rename from app/views/layouts/_boards_menu_section.html.erb rename to app/views/layouts/_boards_nav_section.html.erb diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index 1e8c6a24..40d91f43 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -1,26 +1,35 @@ -