From fd5b36ffc10d6bccb9e0ffa87e3955fdfd0fd552 Mon Sep 17 00:00:00 2001 From: Camerin Date: Sun, 19 Jun 2022 16:15:21 -0400 Subject: [PATCH] Github - Fixed Github style Additionally, moved button css to it's own file, and started button component file. --- src/components/App.js | 1 + src/components/css/App.css | 38 ------------- src/components/css/Buttons.css | 58 +++++++++++++++++++ src/components/css/Github.css | 22 ++++++++ src/components/subcomponents/Buttons.js | 28 ++++++++++ src/components/subcomponents/GithubRepos.js | 62 ++++++++++----------- 6 files changed, 137 insertions(+), 72 deletions(-) create mode 100644 src/components/css/Buttons.css create mode 100644 src/components/subcomponents/Buttons.js diff --git a/src/components/App.js b/src/components/App.js index 2df9ca4..1ae0300 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,6 +1,7 @@ import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import "./css/App.css"; +import "./css/Buttons.css"; import Navigation from './Navigation'; import Github from './Github'; import Articles from './Articles'; diff --git a/src/components/css/App.css b/src/components/css/App.css index 7168d8c..b4abcc9 100644 --- a/src/components/css/App.css +++ b/src/components/css/App.css @@ -34,44 +34,6 @@ html, body { height:100%; } -.btn { - border-style: solid; - border-color: #837483; - border-radius: 5px; - border-width: 1px; - background-color: #373747; - padding: 6px; - display: flex; - text-align: center; - align-items: center; - align-content: center; - justify-content: center; - width: fit-content; - cursor: pointer; -} -.btn:hover { - color: #C3C0C0; - background-color: #363643; - border-color: #C3C0C0; -} - -.btn.mar-la { - margin-left: auto; -} - -.btn.mar-ra { - margin-right: auto; -} - -.btn.btn-compact-right { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -.btn.btn-compact-left { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - @media only screen and (max-width: 600px) { .App .app-content { margin-bottom: 4rem; diff --git a/src/components/css/Buttons.css b/src/components/css/Buttons.css new file mode 100644 index 0000000..ca60fd3 --- /dev/null +++ b/src/components/css/Buttons.css @@ -0,0 +1,58 @@ + +.btn { + border-style: solid; + border-color: #837483; + border-radius: 5px; + border-width: 1px; + background-color: #373747; + padding: 6px; + display: flex; + text-align: center; + align-items: center; + align-content: center; + justify-content: center; + width: fit-content; + cursor: pointer; +} + +.btn:hover { + color: #C3C0C0; + background-color: #363643; + border-color: #C3C0C0; +} + +.btn.toggle { + font-size: 32px; +} + +.btn.toggle .on { + display: block; + height: 32px; +} + +.btn.toggle .off { + display:none; +} + +.btn.mar-la { + margin-left: auto; +} + +.btn.mar-ra { + margin-right: auto; +} + +.btn-compact-container { + display:flex; + flex-direction: row; +} + +.btn.btn-compact-right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.btn.btn-compact-left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} \ No newline at end of file diff --git a/src/components/css/Github.css b/src/components/css/Github.css index 318c123..6b20d36 100644 --- a/src/components/css/Github.css +++ b/src/components/css/Github.css @@ -20,6 +20,11 @@ font-size: medium; } +.Github .select-menu { + display:flex; + flex-direction: row; +} + .Github .dropdown-menu option { background-color: #5F5F6A; } @@ -129,10 +134,27 @@ @media only screen and (max-width: 600px) { + .repo-list { + width: 100%; + } + .repo .content { flex-direction: column; } .repo .times { font-size: 16px; } + + .Github .sort-menu { + align-items: center; + flex-direction: row; + } + + .Github .select-menu { + flex-direction: row; + } + + .Github .sort-menu .btn.toggle { + margin-left: auto; + } } \ No newline at end of file diff --git a/src/components/subcomponents/Buttons.js b/src/components/subcomponents/Buttons.js new file mode 100644 index 0000000..e404457 --- /dev/null +++ b/src/components/subcomponents/Buttons.js @@ -0,0 +1,28 @@ +import React, { useState } from 'react'; +import { Link } from 'react-router-dom'; +import '../css/Buttons.css'; +import {ArrowUpShort, ArrowDownShort} from 'react-bootstrap-icons'; + +/** + * Buttons - set of button components that are reusable throughout the app. + */ + +export const ToggleButton = ({ + defVal=true, + icons=[, ], + text="", + clickAction=()=>{} + }) => { + /** + * ToggleButton - A subcomponent for making lists of content, mostly to make a list of links. + */ + + const [value, setValue] = useState(defVal); + + return ( +
{setValue(!value); clickAction(value);}} > +
{icons[0]}
+
{icons[1]}
+
+ ); +}; \ No newline at end of file diff --git a/src/components/subcomponents/GithubRepos.js b/src/components/subcomponents/GithubRepos.js index 50a300d..d5490fb 100644 --- a/src/components/subcomponents/GithubRepos.js +++ b/src/components/subcomponents/GithubRepos.js @@ -1,6 +1,7 @@ import React from 'react'; import { connect } from 'react-redux'; -import {getRepos, getUser, getRepoLanguages, nextPage, setSortValue} from '../../actions'; +import { getRepos, getUser, getRepoLanguages, nextPage, setSortValue } from '../../actions'; +import { ToggleButton } from './Buttons'; class GithubRepos extends React.Component { @@ -130,43 +131,36 @@ class GithubRepos extends React.Component { return (
-

Sort By: 

- +
+

Sort By: 

+ +
  -
{ + { + console.warn(val); this.props.setSortValue({ ...this.props.sortedValue, - asc: true + asc: val }); - }}> - Ascend -
-
{ - this.props.setSortValue({ - ...this.props.sortedValue, - asc: false - }); - }}> - Descend -
+ }} />
{render}