Beefy Boxes and Bandwidth Generously Provided by pair Networks
Keep It Simple, Stupid
 
PerlMonks  

PerlMonks meets Twitter Bootstrap

by tobyink (Abbot)
on Sep 02, 2014 at 19:56 UTC ( #1099304=monkdiscuss: print w/ replies, xml ) Need Help??

Here's what it looks like: screenshot.

And, here's how to do it. Paste the following into your Free Nodelet:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.mi +n.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstra +p/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/h +ighlight.js/8.2/highlight.min.js"></script> <script type="text/javascript" src="//buzzword.org.uk/2014/pm/pm2.js"> +</script>

Then in Nodelet Settings make sure your Free Nodelet isn't hidden.

If you want to play around with the idea, adjust the buzzword.org.uk URL to point to a script file on your own server; grab a copy of the Javascript and CSS files and have fun!

Comment on PerlMonks meets Twitter Bootstrap
Download Code
Re: PerlMonks meets Twitter Bootstrap
by Anonymous Monk on Sep 03, 2014 at 01:07 UTC

    Neat :)

    Here it is as an addition to themes for Anonymous Monk or try out themes without changing display settings

    javascript:(function () { $('link[rel~=stylesheet]').remove(); $('head').append('<script type="text/javascript" src="//code.jquery.co +m/jquery-1.11.1.min.js"></script>'); $('head').append('<script type="text/javascript" src="//maxcdn.bootstr +apcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>'); $('head').append('<script type="text/javascript" src="//cdnjs.cloudfla +re.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>'); $('head').append('<script type="text/javascript" src="//buzzword.org.u +k/2014/pm/pm2.js"></script>'); }());

    I see downloading some fonts fails for me, and the "sections" and "you" dropdown menus don't drop down

    While this thing is loading I saw briefly a button flash "Toggle navigation" but I can't get to that (or if I disable stylesheets I can't get it to do anything)

    Like I already said, its still neat :)

    Also (probably my css) if I unwrap code sometimes it goes too wide and the nodelets float over the content

Re: PerlMonks meets Twitter Bootstrap
by mje (Deacon) on Sep 03, 2014 at 08:06 UTC

    I really like this but the drop down menus don't work for me in firefox or chromium.

      I've tested in Opera 12.16 and Chromium 36.0.1985.125, both on Ubuntu 14.04.

      They don't drop down on hover - you need to click them.

      Update: tested in Firefox 32.0 too. Works OK for me.

        They don't drop down on hover - you need to click them.

        :) yes we click them in firefox, they don't drop down :)

        I am clicking on "SECTIONS" and "YOU" and nothing happens. There is also nothing in the js console when I click. This is Firefox 31.0 on Ubuntu 12.04.5 LTS.

Re: PerlMonks meets Twitter Bootstrap
by marto (Chancellor) on Sep 03, 2014 at 08:40 UTC
Re: PerlMonks meets Twitter Bootstrap
by trippledubs (Scribe) on Sep 03, 2014 at 13:49 UTC
    Awesome!! That is really polished, looks great.
Re: PerlMonks meets Twitter Bootstrap
by davido (Archbishop) on Sep 03, 2014 at 22:14 UTC

    I like the look and feel, but find it difficult to see links in nodelets, which appear as light green against taupe. I tried to get used to it, but for me (and my monitor, and perhaps my eyes), it's illegible enough that I have to disable the CSS.


    Dave

      I agree that the contrast between them could be improved.

      Update: improved slightly.

        A slight improvement made for much better legibility. Thanks. :)


        Dave

Re: PerlMonks meets Twitter Bootstrap
by frozenwithjoy (Curate) on Sep 04, 2014 at 04:41 UTC

      Thanks - I made all kinds of changes to the navigation last night and must have broken this. Fixed now.

Re: PerlMonks meets Twitter Bootstrap
by Anonymous Monk on Sep 04, 2014 at 08:23 UTC
    There is a typo in pm2.js for the syntax highlighting
    $('pre.blockcode code').each(function(i, block) { hljs.highlightBlock(block); });

    Perlmoks produces these tags

    <pre class="code"> <div class="codeblock"> <tt class="codetext">

    So I would select on tt.codetext (i've tested seems to work)

    javascript:(function () { $('tt.codetext').each(function(i, block) { hljs.highlightBlock(block); + }); }());

    There is also  tt.inlinecode for no-newlines ... see Help for Display Settings

      That selector actually matches up with a bit of Javascript just above it:

      $('p.code').each(function (i, c) { var code = $(c).find('tt.codetext').text().replace(/\u00a0/g,' '). +replace(/\s+$/,''); var dl = $(c).find('span.embed-code-dl'); var pre = $( '<pre class="blockcode"><code>' + $('<div/>').text(code).html() + '</code></pre>' ); var footer = $('<div style="text-align:right"><small></small></div +>'); if (dl.html()) footer.find('small').append(dl.html()); $(c).after(footer); $(c).replaceWith(pre); });

      The intention of that is to rewrite PerlMonks' code-block markup into a much simpler <pre class="blockcode"><code>...</code></pre>, which the syntax highlighter can then deal with.

      However PerlMonks' code-block markup does vary depending on your display settings for code listings. My settings are:

      Code Wrapping Off [ ] Code Wrap Length [ ] Auto Code Wrapping [ Yes ] Code Prefix [ ] Large Code Font [ ] Don't show embedded d/l links [ ] Show download link on code N lines long or more: [ 4 ]

      If you let me know your settings I can try to make sure pm2.js works better with them.

        If you let me know your settings I can try to make sure pm2.js works better with them.

        Logged out view, I'm Anonymous Monk :) I saw no highlighting before this tweak

Re: PerlMonks meets Twitter Bootstrap
by thargas (Chaplain) on Sep 04, 2014 at 17:48 UTC

    Very nice! Thank-you.

    The only issue I've noticed so far is that the "Recently Active Threads" page takes way too much vertical space., but I haven't figured out how this works to fix it.

      That should be improved now. (I've copied a few bits from PerlMonks' common.css.)

        Thanks again. Much better.
Re: PerlMonks meets Twitter Bootstrap - UPDATE 19 SEPT 2014
by tobyink (Abbot) on Sep 19, 2014 at 12:07 UTC

    Fixed the "Nodes You Wrote" link (thanks mje!), and added a "last hour of cb" link to the "Sections" menu.

    Also, a couple of weeks ago I added avatars to all posts.

      Thanks tobyink

      As much as I enjoy your posts I like to be able to find my own too ;-)

Re: PerlMonks meets Twitter Bootstrap
by Ovid (Cardinal) on Sep 21, 2014 at 11:54 UTC
Re: PerlMonks meets Twitter Bootstrap
by biohisham (Priest) on Sep 23, 2014 at 04:47 UTC

    This is very nice !. I am adopting it at my browser. I guess we should explore making this the default layout to the forum. The current layout is a bit dated already and a facelift is in order.



    A 4 year old monk

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: monkdiscuss [id://1099304]
Approved by mtmcc
Front-paged by Corion
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others surveying the Monastery: (11)
As of 2014-09-23 12:21 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    How do you remember the number of days in each month?











    Results (220 votes), past polls