View this post on Hive: Steemit Condenser Contributions: Side by side editor/preview panes
Context
When editing a new blog post on Steemit.com, the layout is a bit annoying with the text editor at the top and the preview at the bottom. It makes editing posts difficult because you have to keep scrolling up and down to see the preview and go back typing.
@stoodkev has introduced a side-by-side editing / preview in his SteemPlus, Chrome extension, that modifies Steemit.com pages on-the-fly. However, the release of Communities has broken few features including the side-by-side editing. This was the trigger for me to finally have a look at it and implement a built-in feature.
The work done
To achieve the layout I had to modify both the DOM and the CSS that controls the editor in order to re-arrange the layout and make it responsive (make it adapt to all screen sizes).
Here is the desktop version:
It also works in night mode:
In narrow screens, the preview pane behaviour is unchanged and will sit below the editor.
I also had to modify the files for the comment editor as they share the same editor logic. When creating a comment, there will be no side-by-side feature but there is a slight change in design as seen below:
Steemit Condenser Pull Request
This feature is not out yet, a pull request has been created:
https://github.com/steemit/condenser/pull/3722
Once approved and merged, it will be available in a future release by Steemit Inc.
Vote for my witness
On Steem, Witnesses are playing the important role of providing a performant and safe network for all of us. You have the power to choose 30 trusty witnesses to package transactions and sign the blocks that will go in the Steem blockchain. Vote for me via SteemConnect to help me do more useful projects for the communities.
That's great. Thanks for this.
I was hoping this feature would make it through - it helps a lot when I am editing the long Steem News posts.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
It’s being reviewed now, hopefully will get out soon
Posted using Partiko iOS
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
That's great.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
that's so great. i don't know about IT but i think when you do it for Steemit, it's so useful. thank you so much.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thanks
Posted using Partiko iOS
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Will we have the option to choose between side-by-side view and top to bottom view?
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
If it gets approved and released and I get enough request for a toggle then I’ll add it. For now it will display side by side if it has enough space else it will render top to bottom.
Posted using Partiko iOS
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Sometimes I like to sit comfortably, far away from a screen hanging on the wall, as I prepare my posts. Might need a pair of binoculars if the words get any smaller. There's nothing worse than publishing a post, then noticing seven hours later, you wrote penis instead of pens.
So I could simply hold ctrl and scroll the mouse wheel within the browser, zooming in and out, and that would place the preview below? If that's the case, that's all the toggle I need.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hahahaha
Yes, zooming in would trigger it.
Also the font size has not changed. So even if it’s side by side it should be the same.
Posted using Partiko iOS
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Alright @quochuy. Thanks for taking the time to respond and also, keep up the good work.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thanks @quochuy, it's sorely needed. One of the reasons i currently use steempeak instead.
Happy to have you here. Voted for you as witness.
Namaste
Atma
ps. I would appreciate you investigating the upcoming Matrix-8 platform which offers an inovative multi level governance system. I have a strong conviction this will be VERY helpful for Steem, and/especially for "saving the world" in general.
Please take a look at my latest post and the white paper linked within to begin to get an idea. I am seeking developers to build this on Steem. Perhaps you can help?
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you 😊
Posted using Partiko iOS
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Good work ;)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thanks mate
Posted using Partiko iOS
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Nice work. Although on my end it still doesn’t work side by side...maybe it is my screen? An observation. The search function atm seems broken. I mean one types a name and instead of being redirected to their profile, some random comments from 2 years back appear.
It would have been cool it it was upgraded like on the other front ends, with auto complete and working properly.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
If I'm not wrong, this issue has already been raised with the dev team. I will follow up with them.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Regarding side-by-side, as mentioned at the bottom of the post, it's pending for approval by Steemit devs.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Oops. Missed that
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hi, @quochuy!
You just got a 0.94% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Superb developments there, moving up and down just to have a view on what you've written down is a hectic. Glad seeing hopes of the request being merged and a later released on the next...
For that and many other reasons, casting my vote on your witness in a few.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
I like this as long as it's a feature that can be turned off.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations @quochuy! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
You can view your badges on your Steem Board and compare to others on the Steem Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPTo support your work, I also upvoted your post!
Vote for @Steemitboard as a witness to get one more award and increased upvotes!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit