NodeBB composer drag bar, simple CSS tweak

Moved Technical Support
  • 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:

    0_1453494911174_chrome_2016-01-22_13-35-03.png

    With a drag bar that can be used to resize the composer to any size, eg this:

    0_1453494968310_chrome_2016-01-22_13-35-57.png

    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! 🙂

  • Updated the CSS slightly to fix a couple bugs.

  • @Arc

    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:

    0_1453497259614_upload-3560ab58-5865-411d-8b14-a77c24e4d3c8

    I have the question answer plugin enabled so maybe your CSS is interfering with the dropdown?

    Thanks,

  • @whitts Sorry, didnt notice that. Update your CSS, problem should be fixed now, is it?

  • @Arc

    Wow that was fast.. Seems to look good now.. Thanks alot 🙂

  • @whitts Good to hear! Let me know any other issues you find!

  • Any way to make the color of the bar change dynamically based on the category selected?

  • @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.

  • If you update the CSS it should have- no effect on mobile view at all, really. Anyway- As for the color changing!

    Its possible, yeah! I'm just not sure how, each theme is very different and I'm not sure how yours handles per-category colors.

  • Yeh.. thats what i thought.. i think i will just set the bar to the blue that persona uses in the mobile view (same colors as the buttons) so that they blend in more.. Either way this is a great little tweak.. thanks again

  • works with redactor?

  • @bitspook Not sure! It should, though, I think redactor uses the same class. Try it out and let me know if it doesnt work, I can tweak a version for redactor.

  • @Arc

    Threw some code line warnings, but it works 😄

    I LOVE it.

  • 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*/

  • @bitspook Its actually spaced out in the original too, for some stupid reason Markdown's code formatting is removing the spacing! Mind running me through what errors he corrected, so if they're all good I can add it to the OP and credit you guys?

  • great 😗

  • @Arc It's because you use inline-codes rather than block codes, try ``` or 4 space indention instead of `.

  • @Arc

    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. 🙂

  • @Arc It's great! Thank you very much for this, I included it in my forum immediately 🙂


Suggested Topics


  • 0 Votes
    4 Posts
    307 Views

    @retipster awesome, looking forward to your email 👍

  • 0 Votes
    10 Posts
    505 Views

    That solved my problem. Thank you so much!!!!

  • 0 Votes
    8 Posts
    7k Views

    @vfssantos
    These settings worked for me.

    {
    "url": "http://192.168.1.1:4567",
    "secret": "XXXXXXXXXXXX",
    "database": "mongo",
    "mongo": {
    "host": "127.0.0.1",
    "port": "27017",
    "username": "nodebb",
    "password": "mypassword",
    "database": "nodebb",
    "uri": ""
    },
    "port": "4567"
    }

    From the Commandline Terminal, first stop and then start nodebb

    ./nodebb stop ./nodebb start
  • 0 Votes
    3 Posts
    5k Views

    @a_5mith

    Yes I have already checked it. I have found a docker image created by @nopz, this one is up-to-date. But the official docker image in not! Maybe you (nodebb) should give access to a dockerfile to allow anyone to build a nodebb docker image. EDIT I found the dockerfile, and the problem about this outdated version here. It's outdated because the dockerfile build the image with the v0.5.x version :

    FROM centos:centos7 MAINTAINER NodeBB Docker Team <[email protected]> # install main packages: RUN yum -y update ; yum clean all RUN yum -y install epel-release tar ; yum clean all RUN yum -y install wget ; yum clean all RUN yum -y groupinstall "Development Tools" RUN yum -y install nodejs git ImageMagick npm RUN yum -y install openssl openssl-devel # clone nodebb and install it RUN cd /opt ; git clone -b v0.5.x https://github.com/NodeBB/NodeBB nodebb RUN cd /opt/nodebb ; npm install # Create a nodebb volume VOLUME /opt/nodebb # Define a working directory WORKDIR /opt/nodebb # Expose ports EXPOSE 80 EXPOSE 443 EXPOSE 4567 CMD [ "node", "app.js" ]

    You should (NodeBB) update this dockerfile !

    End of the EDIT

    Now, with the nopz/nodebb image I just had a problem about plugin persistence. But the first installation is so much easier and automatic with just one docker.

    Thanks for your answer by the way 🙂

  • 0 Votes
    5 Posts
    2k Views

    @BDHarrington7 said:

    Did you try an npm rebuild first?