NodeBB composer drag bar, simple CSS tweak
-
Hey.
I'm not sure about posting CSS tweaks in here, but I figured this'd be useful to many people. This should work on almost all themes, and will replace the arrow at the top right of the composer, eg this:
With a drag bar that can be used to resize the composer to any size, eg this:
This does not add any additional functionality to the composer- this ability already exists, this just makes it easier to use and more user-transparent that the option is available.
To use:
Just paste the below CSS at the bottom of your Custom CSS:/*Custom Composer Bar Tweak by Arc*/ .composer .resizer .trigger i:before { content: "\f0c9"; cursor: n-resize; } .composer.maximized .resizer .trigger i:before { content: "\f0c9"; cursor: n-resize; } .composer .resizer { position: absolute; width: 100%; top: 10px; height: 0; cursor: n-resize; } .composer .resizer .trigger i { margin-left: -10%; position: relative; color: #FFF; font-size: 14px; } .composer .resizer .trigger { position: relative; display: block; width: 110%; height: 20px; top: -10px; margin: 0 auto; margin-left: -11px; background: rgba(0,0,0,0.1); border: 0px solid #E4E4E4; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 0%; line-height: 20px; -o-transition:.3s ease-in-out; -ms-transition:.3 ease-in-outs; -moz-transition:.3s ease-in-out; -webkit-transition:.3s ease-in-out; transition:.3s ease-in-out; } .composer .resizer .trigger:hover { background: rgba(0,0,0,0.2); -o-transition:.3s ease-in-out; -ms-transition:.3 ease-in-outs; -moz-transition:.3s ease-in-out; -webkit-transition:.3s ease-in-out; transition:.3s ease-in-out; }
-
This looks great, thank you. Was surprised yesterday when I actually learned that the bar could be manipulated!
-
This is awesome.. I've always had problems with the down and up arrow not working all the time (i posted the issue on the github page for persona).
I have a question though.. when i add the css the submit button gets thrown off:
I have the question answer plugin enabled so maybe your CSS is interfering with the dropdown?
Thanks,
-
@Arc
It looks a bit funky in mobile view.. Maybe because the top bar background in mobile view (default) is blue matching the colour of the close and submit colors but with your css the bar is gray - which probably wouldnt look too bad if the close and submit buttons were centered vertically. -
A friend worked out some of the warnings and spaced out the classes. Love the drag effect; will be using it going forward. Thanks for your work on it.
/*Custom Composer Bar Tweak by Arc begin*/
.composer .resizer .trigger i:before {
content: "\f0c9";
cursor: n-resize;
}
.composer.maximized .resizer .trigger i:before {
content: "\f0c9";
cursor: n-resize;
}
.composer .resizer {
position: absolute;
width: 100%;
top: 10px;
height: 0;
cursor: n-resize;
}
.composer .resizer .trigger i {
margin-left: -10%;
position: relative;
color: #FFF;
font-size: 14px;
}
.composer .resizer .trigger {
position: relative;
display: block;
width: 110%;
height: 20px;
top: -10px;
margin: 0 auto;
margin-left: -11px;
background: #000;
background: rgba(0,0,0,0.1);
border: 0 solid #E4E4E4;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 0;
line-height: 20px;
-o-transition:.3s ease-in-out;
-ms-transition:.3 ease-in-outs;
-moz-transition:.3s ease-in-out;
-webkit-transition:.3s ease-in-out;
transition:.3s ease-in-out;
}
.composer .resizer .trigger:hover {
background: #000;
background: rgba(0,0,0,0.2);
-o-transition:.3s ease-in-out;
-ms-transition:.3 ease-in-outs;
-moz-transition:.3s ease-in-out;
-webkit-transition:.3s ease-in-out;
transition:.3s ease-in-out;
}
/*Custom Composer Bar Tweak by Arc end*/ -
@Arc It's because you use inline-codes rather than block codes, try
```
or 4 space indention instead of`
. -
it threw some warnings about zero value px, and he pulled the % symbols and it removed the warnings. He said that there is still an "unimportant warning" about how using height and width with borders can make elements appear larger than intended. Anyway, they were exclamations rather than X's; trivial warnings. No credit is needed nor due.
I like the drag bar much better than the stock arrow.