urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2025-01-03 01:54:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

fixed auto-resizing of blog title input field

Browse Source
This commit is contained in:
Isaac Visintainer 2019-08-13 10:56:45 -07:00
parent 2f5d2bfb36
commit 9517dabcc1
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
pkg/interface/publish/src/js/components/new-blog.js
View File

@ -40,6 +40,8 @@ export class NewBlog extends Component {
this.returnHome = this.returnHome.bind(this);
this.addInvites = this.addInvites.bind(this);
this.blogSubmit = this.blogSubmit.bind(this);
this.titleHeight = 52;
}
blogSubmit() {
@ -109,6 +111,11 @@ export class NewBlog extends Component {
}
titleChange(evt){
this.titleInput.style.height = 'auto';
this.titleInput.style.height = (this.titleInput.scrollHeight < 52)
? 52 : this.titleInput.scrollHeight;
this.titleHeight = this.titleInput.style.height;
this.setState({title: evt.target.value});
}
@ -155,13 +162,16 @@ export class NewBlog extends Component {
style={{height: 'calc(100% - 124px)', top: 124}}>
<div className="h-inner dt center mw-688 w-100">
<div className="flex-col dtc v-mid">
<input autoFocus
className="header-2 b--none"
<textarea autoFocus
ref={(el) => {this.titleInput = el}}
className="header-2 b--none w-100"
style={{resize:"none", height: this.titleHeight}}
rows={1}
type="text"
name="blogName"
placeholder="Add a Title"
onChange={this.titleChange}
/>
onChange={this.titleChange}>
</textarea>
<hr className="gray-30" style={{marginTop:32, marginBottom: 32}}/>
@ -202,13 +212,16 @@ export class NewBlog extends Component {
style={{height: 'calc(100% - 124px)', top: 124}}>
<div className="h-inner dt center mw-688 w-100">
<div className="flex-col dtc v-mid">
<input autoFocus
className="header-2 b--none"
<textarea autoFocus
ref={(el) => {this.titleInput = el}}
className="header-2 b--none w-100"
style={{resize:"none", height: this.titleHeight}}
rows={1}
type="text"
name="blogName"
placeholder="Add a Title"
onChange={this.titleChange}
/>
onChange={this.titleChange}>
</textarea>
<p className="body-regular-400" style={{marginTop:25, marginBottom:27}}>
Who is invited to read this notebook?