diff --git a/public/index.html b/public/index.html index d5c0374..b5ab2d4 100644 --- a/public/index.html +++ b/public/index.html @@ -41,4 +41,16 @@ To create a production bundle, use `npm run build` or `yarn build`. --> + + + diff --git a/src/components/App.js b/src/components/App.js index 1d8cb1a..ac7986f 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -4,7 +4,6 @@ import "./css/App.css"; import Navigation from './Navigation'; import Github from './Github'; import Articles from './Articles'; -import ArticleEditor from './ArticleEditor'; import About from './About'; import Intro from './Intro'; @@ -19,7 +18,6 @@ const App = (props) => { } /> - diff --git a/src/components/Article.js b/src/components/Article.js index 0e81ab6..80ab284 100644 --- a/src/components/Article.js +++ b/src/components/Article.js @@ -1,49 +1,13 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import Theater from './subcomponents/Theater'; import './css/Articles.css'; const Article = ({article}) => { - const [show, setShow] = useState(""); - const [currArticle, setCurrArticle] = useState(""); - - useEffect(()=>{ - if (currArticle === ""){ // If no articles have been opened - if (show === "") { - // Set the current article and initiate the open animation - setCurrArticle(article); - setShow("open"); - - // Once the animation runs, open the entire article - setTimeout(() =>{ - setShow("show"); - }, 1024) - } - - } else if (currArticle !== article) { // If we've changed articles - // Change currArticle to the actual current article and initiate close animation - setCurrArticle(article); - setShow("close"); - - // Step through the close animation, open animation, and fully opening the article - setTimeout(()=>{ - setShow(""); - - setTimeout(()=>{ - - setShow("open"); - - setTimeout(() =>{ - setShow("show"); - }, 1024); - }, 1024); - }, 24); - } - }, [currArticle, article, show]); - let linkProcessor = (text) => { /** * Given some text, processes and returns jsx with any link represented as an anchor */ + let output = [""]; // Stores all text in a list let loc = 0; // Stores the current location in output that we're working with let tmp; @@ -162,7 +126,6 @@ const Article = ({article}) => { return [...output.keys()].map((i)=>{ // Format text and return as jsx let text = linkProcessor(output[i]); // Process links - text = newLineProcessor(text); if (type[i] === 0){ // Return default text type @@ -189,7 +152,7 @@ const Article = ({article}) => { }; return ( -
+
{ - const [content, setContent] = useState("Hello World"); - - let article = { - "id":"0", - "title": "Article Editor", - "desc":"This is a place to edit articles", - "contents": content - }; - - let copyToClipboard = () => { - navigator.clipboard.writeText(content).then(function() { - console.log('Async: Copying to clipboard was successful!'); - }, function(err) { - console.error('Async: Could not copy text: ', err); - }); - }; - - return ( -
-
-
Copy to Clipboard
-
-
- -
- ); -}; - -export default ArticleEditor; \ No newline at end of file diff --git a/src/components/css/ArticleEditor.css b/src/components/css/ArticleEditor.css deleted file mode 100644 index 44c05ec..0000000 --- a/src/components/css/ArticleEditor.css +++ /dev/null @@ -1,42 +0,0 @@ -.ArticleEditor textarea { - width:100%; - height: 35vh; - border-style: solid; - border-color: lightgray; - border-radius: 2px; - border-width: 2px; - padding: 0.4em 0.4em 0.4em 0; - text-align: left; -} - -.ArticleEditor .toolbar { - width: 100%; - height: 56px; - display: flex; -} - -.ArticleEditor .toolbar .btn { - color: white; - background-color: darkgreen; - text-align: center; - align-items:center; - justify-content: center; - display: flex; - padding-left: 3px; - padding-right: 3px; -} -.ArticleEditor .toolbar .btn:hover{ - background-color: #005400 -} - -.article .open { - max-height:100vh; -} - -.article .Close { - max-height:100vh; -} - -.article { - max-height:100vh; -} \ No newline at end of file diff --git a/src/components/css/Articles.css b/src/components/css/Articles.css index 24d8038..b7a808b 100644 --- a/src/components/css/Articles.css +++ b/src/components/css/Articles.css @@ -3,24 +3,6 @@ align-items: center; display: flex; flex-direction: column; - max-height:0; - overflow: hidden; - transition: max-height 1s ease; - -} - -.article.open { - max-height:100vh; - transition: max-height 1s ease; -} - -.article.close { - max-height:100vh; -} - -.article.show { - max-height:none; - } .article .content { diff --git a/src/components/css/Theater.css b/src/components/css/Theater.css index f912564..0940f71 100644 --- a/src/components/css/Theater.css +++ b/src/components/css/Theater.css @@ -15,7 +15,7 @@ .theater-bg { - height: inherit; + height: 100%; width:100%; background-size: cover; background-image: url('../../img/background.webp'); diff --git a/src/components/subcomponents/Listing.js b/src/components/subcomponents/Listing.js index 6fb3bb1..a9e7379 100644 --- a/src/components/subcomponents/Listing.js +++ b/src/components/subcomponents/Listing.js @@ -1,5 +1,4 @@ import React from 'react'; -import { Link } from 'react-router-dom'; import '../css/Listing.css'; const Listing = (props) => { @@ -12,12 +11,12 @@ const Listing = (props) => { */ return ( ); };