renamed blog to notebook; fixed spacing on post body

This commit is contained in:
Isaac Visintainer 2019-07-18 12:44:00 -07:00
parent 3c07cc32d5
commit 38ecb2987a
9 changed files with 64 additions and 28 deletions

View File

@ -13,6 +13,16 @@ button {
padding: 0;
}
p {
font-size: 16px;
line-height: 24px;
}
pre {
padding: 8px;
background-color: #f9f9f9;
}
a {
color: inherit;
text-decoration: inherit;

View File

@ -104,7 +104,7 @@ export class BlogSettings extends Component {
<div className="flex-col w-100">
<p className="body-regular-400">Rename</p>
<p className="gray-50 label-small-2" style={{marginTop:12, marginBottom:23}}>
Change the name of this blog
Change the name of this notebook
</p>
<p className="label-small-2">Notebook Name</p>
<input className="body-regular-400 w-100"

View File

@ -52,7 +52,7 @@ export class HeaderMenu extends Component {
borderColor: "black",
}}
style={{flexBasis:148}}>
My Blogs
Notebooks
</NavLink>
<div className="fl bb b-gray-30 w-16" style={{flexGrow:1}}>

View File

@ -39,7 +39,7 @@ export class PathControl extends Component {
if (this.props.location.pathname === '/~publish/new-blog') {
path.push(
{ text: 'New Blog', url: finalUrl }
{ text: 'New Notebook', url: finalUrl }
);
} else if (this.props.location.pathname === '/~publish/new-post') {
if (blog) {
@ -49,7 +49,7 @@ export class PathControl extends Component {
});
}
path.push(
{ text: 'New Post', url: finalUrl }
{ text: 'New Note', url: finalUrl }
);
}
return path;

View File

@ -9,7 +9,7 @@ export class PostBody extends Component {
super(props)
}
renderA(what, node, attr) {
renderA(what, node, attr, parentNode) {
let aStyle = {
textDecorationLine: "underline",
wordWrap: "break-word"
@ -19,7 +19,7 @@ export class PostBody extends Component {
return item;
} else {
let newAttr = Object.assign({style: aStyle, key: key}, item.ga);
return this.parseContent(item.c, item.gn, newAttr);
return this.parseContent(item.c, item.gn, newAttr, node);
}
});
const element =
@ -28,26 +28,30 @@ export class PostBody extends Component {
}
renderIMG(what, node, attr) {
renderIMG(what, node, attr, parentNode) {
let imgStyle = {
width: "100%",
height: "auto"
height: "auto",
marginBottom: 12,
};
let newAttr = Object.assign({style: imgStyle}, attr);
const element = React.createElement(node, newAttr);
return element;
}
renderDefault(what, node, attr) {
renderP(what, node, attr, parentNode) {
let dStyle = {
wordWrap: "break-word"
wordWrap: "break-word",
};
if (parentNode !== 'li') {
dStyle.marginBottom = 12;
}
let children = what.map((item, key) => {
if (typeof(item) === 'string') {
return item;
} else {
let newAttr = Object.assign({key: key}, item.ga);
return this.parseContent(item.c, item.gn, newAttr);
return this.parseContent(item.c, item.gn, newAttr, node);
}
});
const element =
@ -55,20 +59,42 @@ export class PostBody extends Component {
return element;
}
parseContent(what, node, attr) {
renderDefault(what, node, attr, parentNode) {
let dStyle = {
wordWrap: "break-word",
};
let children = what.map((item, key) => {
if (typeof(item) === 'string') {
return item;
} else {
let newAttr = Object.assign({key: key}, item.ga);
return this.parseContent(item.c, item.gn, newAttr, node);
}
});
const element =
React.createElement(node, Object.assign({style: dStyle}, attr), children);
return element;
}
parseContent(what, node, attr, parentNode) {
switch (node) {
case "a":
return this.renderA(what, node, attr);
return this.renderA(what, node, attr, parentNode);
case "img":
return this.renderIMG(what, node, attr);
return this.renderIMG(what, node, attr, parentNode);
case "p":
return this.renderP(what, node, attr, parentNode);
default:
return this.renderDefault(what, node, attr);
return this.renderDefault(what, node, attr, parentNode);
}
}
render() {
let page = this.parseContent(this.props.body.c, this.props.body.gn, this.props.body.ga);
let page = this.parseContent(this.props.body.c,
this.props.body.gn,
this.props.body.ga,
null);
return page;
}
}

View File

@ -28,7 +28,7 @@ export class PublishCreate extends Component {
<div className="w-100">
<p className="publish">Publish</p>
<Link to={link}>
<p className="create">+New Blog</p>
<p className="create">+New Notebook</p>
</Link>
</div>
);
@ -45,7 +45,7 @@ export class PublishCreate extends Component {
<div className="w-100">
<p className="publish">Publish</p>
<Link to={link}>
<p className="create">+New Post</p>
<p className="create">+New Note</p>
</Link>
</div>
);

View File

@ -11,9 +11,9 @@ class FormLink extends Component {
render(props){
if (this.props.enabled) {
return (
<p className="body-large b z-2 pointer" onClick={this.props.action}>
<button className="body-large b z-2 pointer" onClick={this.props.action}>
{this.props.body}
</p>
</button>
);
}
return (
@ -184,16 +184,16 @@ export class NewBlog extends Component {
<FormLink
enabled={(this.state.title !== '')}
action={this.firstPost}
body={"-> Create a first post"}
action={this.addInvites}
body={"-> Send Invites"}
/>
<hr className="gray-30" style={{marginTop:32, marginBottom: 32}}/>
<FormLink
enabled={(this.state.title !== '')}
action={this.addInvites}
body={"-> Send Invites"}
action={this.firstPost}
body={"-> Create a first note"}
/>
<hr className="gray-30" style={{marginTop:32, marginBottom: 32}}/>
@ -228,7 +228,7 @@ export class NewBlog extends Component {
/>
<p className="body-regular-400" style={{marginTop:25, marginBottom:27}}>
Who is invited to read this blog?
Who is invited to read this notebook?
</p>
<input className={invitesStyle}
@ -244,7 +244,7 @@ export class NewBlog extends Component {
<FormLink
enabled={enableButtons}
action={this.firstPost}
body={"-> Save and create a first post"}
body={"-> Save and create a first note"}
/>
<hr className="gray-30" style={{marginTop:32, marginBottom: 32}}/>

View File

@ -23,7 +23,7 @@ class SideTab extends Component {
-> Post
</p>
<p className="pointer" onClick={this.props.discardPost}>
Discard post
Discard note
</p>
</div>
);

View File

@ -84,7 +84,7 @@ export class Pubs extends Component {
<div className="w-100">
<h2 className="gray-50"
style={{marginLeft: 16, marginTop:32, marginBottom: 16}}>
My Blogs
Notebooks
</h2>
</div>
<div className="w-100 flex">