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 React from "react";
import { marked } from "marked"; 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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPenToSquare, faFileLines } from "@fortawesome/free-solid-svg-icons";
import "./App.scss"; import "./App.scss";
marked.setOptions({ marked.setOptions({
@ -24,38 +23,45 @@ class App extends React.Component {
render() { render() {
return ( return (
<div className="App container-fluid vh-100"> <div class="container-fluid">
<div className="row"> <div class="row min-vh-100">
<div className="editor-topbar col-md-6 border border-dark border-2"> <div class="col-12 col-md-6 bg-red">
<h3 className="text-white text-center"> <div class="d-flex flex-column h-100">
<FontAwesomeIcon icon={faPenToSquare} /> <div class="row bg-color-6 text-white">
{` Editor`} <h3 className="text-white text-center">
</h3> <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>
<div className="preview-topbar col-md-6 border border-dark border-2"> <div class="col-12 col-md-6 bg-red">
<h3 className="text-white text-center"> <div class="d-flex flex-column h-100">
<FontAwesomeIcon icon={faFileLines} /> <div class="row bg-color-8 text-white">
{` Preview`} <h3 className="text-white text-center">
</h3> <FontAwesomeIcon icon={faFileLines} />
</div> {` Preview`}
</div> </h3>
<div className="row h-100"> </div>
<div className="col-md-6 p-0 border border-dark border-2"> <div class="row bg-blue flex-grow-1 text-white">
<textarea <div
className="text-justify h-100 px-3 py-1 form-control p-0 rounded-0" className="text-justify px-3 py-1 m-0 overflow-auto markdown-body"
id="editor" style={{ "min-height": 300 }}
value={this.state.markdown} id="preview"
onChange={this.handleMarkdownChange} dangerouslySetInnerHTML={{
></textarea> __html: marked.parse(this.state.markdown),
</div> }}
<div className="col-md-6 p-0 border border-dark border-2"> />{" "}
<div className="" id="preview"> </div>
<div
className="text-justify vh-100 px-3 py-1 m-0 overflow-auto markdown-body"
dangerouslySetInnerHTML={{
__html: marked.parse(this.state.markdown),
}}
/>
</div> </div>
</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 "~bootstrap/scss/bootstrap";
@import "~github-markdown-css/github-markdown.css"; @import "~github-markdown-css/github-markdown.css";
@ -20,18 +12,6 @@ $colors: #73a857, #3f2e7a, #bdbb99, #77b1a9, #fb6964, #9b59b6, #2c3e50, #27ae60,
.bg-color-#{$i} { .bg-color-#{$i} {
background-color: $color; background-color: $color;
color: white; 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 { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }