[fix-steemit] the code background underflow

in #steemit8 years ago

Looks matter. For websites, at least.

Here I am today, to propose a very small change to steemit. One that will most easily be overlooked. But one that needs to be. (that's about as much "english" in this post).

Sorry guys. This is not going to be a 200-word "slice-of-life", or "poetry", or "motivation", or any such post (not that I have anything against them), but is going to be a small post, indeed.


I hate those small quirks in websites. The ones that normal people overlook and move on, but some people cringe. Here is one such insignificant thing about steemit: The code background underflow.

Let us look at some examples, eh? How do you code in markdown?

```<i do not know how to put three backticks within three backticks without breaking the code>

code markdown example inside code markdown,  three backticks. try scrolling. you get the point? You scrolled, right?

```<i do not know how to put three backticks within three backticks without breaking the code>

If you still don't get it, ...pictures!
before
before scroll
after
after scroll


Given that I've only dabbled with front end design, and I don't do it for a living, here are two fixes that I've figured, will work.

\1. display: inline-block

.Markdown pre > code, .ReplyEditor__body.rte pre > code {
    display: inline-block;
}

This forces the <code> to be 100% of content width.

\2. flexbox

I am a bit skeptical of using flexbox but given that browser compatibility is just fine (caniuse.com), there shouldn't be no reason to use it. But given there are still quirks across different browsers and versions, it is a tough call.

For this, we style <pre>

.Markdown pre {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

and then <code>.

.Markdown pre > code, .ReplyEditor__body.rte pre > code {
    display: flex;
}

In case any of you want to submit a pull request on GitHub () to fix this issue, here are the relevant lines:

<pre> is styled with overflow: auto in normalize.css. Hence I would recommend you add a .Markdown pre styling in the same file markdown.scss in case you think the flexbox solution is better.

So, the fruits of labor? Ta-Da!
scroll background fixed

DISCLAIMER: I have just dabbled around with front end design. The above solutions can be wrong, and better solutions WILL exist. Feel free to share your thoughts on this one.


So, steemit is a great platform, nay? Content-creation galore! There is one idea for Steemit that I had in mind. Tutorials! As you know, there are hundreds of people writing "how-to" posts on the internet. Give them a common platform to showcase their expertise, and reward them for it. I'd personally like to see a corner of steemit where all the tech-savvy gather (not just limited to cryptocurrency), and just hang out, maybe? I can see, not far, it is.

Sort:  

So, create a corner of steemit where the tech-savvy gather-- I think this is a great idea and a great use for a real-time database like rethinkdb, which is frequently used for chats....

Congratulations @oreganotoppings! You have received a personal award!

Happy Birthday - 1 Year on Steemit Happy Birthday - 1 Year on Steemit
Click on the badge to view your own Board of Honor on SteemitBoard.

For more information about this award, click here

By upvoting this notification, you can help all Steemit users. Learn how here!

Congratulations @oreganotoppings! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 3 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Vote for @Steemitboard as a witness to get one more award and increased upvotes!

Coin Marketplace

STEEM 0.17
TRX 0.14
JST 0.028
BTC 59401.87
ETH 2615.39
USDT 1.00
SBD 2.40