freeCodeCamp.org-Front-End-Dev-Libraries/Markdown-Previewer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved styling responsivenes

Browse Source
This commit is contained in:
Manish 2022-06-30 23:44:58 +10:00
parent a03084cf1b
commit 9be0c4c29a
3 changed files with 42 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
markdown-previewer/src/App.js
View File

@ -1,8 +1,7 @@
import React from "react";
import { marked } from "marked";
import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
import { faFileLines } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPenToSquare, faFileLines } from "@fortawesome/free-solid-svg-icons";
import "./App.scss";
marked.setOptions({
@ -24,38 +23,45 @@ class App extends React.Component {
render() {
return (
<div className="App container-fluid vh-100">
<div className="row">
<div className="editor-topbar col-md-6 border border-dark border-2">
<h3 className="text-white text-center">
<FontAwesomeIcon icon={faPenToSquare} />
{` Editor`}
</h3>
<div class="container-fluid">
<div class="row min-vh-100">
<div class="col-12 col-md-6 bg-red">
<div class="d-flex flex-column h-100">
<div class="row bg-color-6 text-white">
<h3 className="text-white text-center">
<FontAwesomeIcon icon={faPenToSquare} />
{` Editor`}
</h3>
</div>
<div class="row bg-blue flex-grow-1 text-white">
<textarea
className="text-justify px-3 py-1 form-control p-0 rounded-0"
style={{ "min-height": 300 }}
id="editor"
value={this.state.markdown}
onChange={this.handleMarkdownChange}
></textarea>{" "}
</div>
</div>
</div>
<div className="preview-topbar col-md-6 border border-dark border-2">
<h3 className="text-white text-center">
<FontAwesomeIcon icon={faFileLines} />
{` Preview`}
</h3>
</div>
</div>
<div className="row h-100">
<div className="col-md-6 p-0 border border-dark border-2">
<textarea
className="text-justify h-100 px-3 py-1 form-control p-0 rounded-0"
id="editor"
value={this.state.markdown}
onChange={this.handleMarkdownChange}
></textarea>
</div>
<div className="col-md-6 p-0 border border-dark border-2">
<div className="" id="preview">
<div
className="text-justify vh-100 px-3 py-1 m-0 overflow-auto markdown-body"
dangerouslySetInnerHTML={{
__html: marked.parse(this.state.markdown),
}}
/>
<div class="col-12 col-md-6 bg-red">
<div class="d-flex flex-column h-100">
<div class="row bg-color-8 text-white">
<h3 className="text-white text-center">
<FontAwesomeIcon icon={faFileLines} />
{` Preview`}
</h3>
</div>
<div class="row bg-blue flex-grow-1 text-white">
<div
className="text-justify px-3 py-1 m-0 overflow-auto markdown-body"
style={{ "min-height": 300 }}
id="preview"
dangerouslySetInnerHTML={{
__html: marked.parse(this.state.markdown),
}}
/>{" "}
</div>
</div>
</div>
</div>

20
markdown-previewer/src/App.scss
View File

@ -1,11 +1,3 @@
@font-face {
font-family: "quicksand";
/* license: url("https://radii.page/fonts/Quicksand-Regular.txt"); */
src: local("quicksand") url("./quicksand.ttf") format("tff");
}
/*$font-family-base: quicksand, roboto !default;*/
@import "~bootstrap/scss/bootstrap";
@import "~github-markdown-css/github-markdown.css";
@ -20,18 +12,6 @@ $colors: #73a857, #3f2e7a, #bdbb99, #77b1a9, #fb6964, #9b59b6, #2c3e50, #27ae60,
.bg-color-#{$i} {
background-color: $color;
color: white;
&:hover {
background-color: darken($color, 10%);
color: white;
}
&:focus {
background-color: $color;
color: white;
}
&:focus:hover {
background-color: darken($color, 10%);
color: white;
}
}
}

6
markdown-previewer/src/index.css
View File

@ -1,13 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}