Responsive PirateBox

I've recently taken to building a responsive design for the PirateBox and thought I would share what I've submitted to the main repos...

Desktop:


and mobile:


if you want to take a look at the code it's here.

Any feedback is welcome, I'm just having fun coding.

Edited: Better link for the source code, can just download a zip with the files you need, now.



Edited 2 time(s). Last edit at 06/05/2013 01:30AM by neirpyc.

is there a way to download a zip file of the whole responsive design itself? It looks simple and nice

legofreak73 Wrote:
-------------------------------------------------------
> is there a way to download a zip file of the whole
> responsive design itself? It looks simple and nice
>


I can throw something together - give me a bit.

Edit: Didn't want to double post but I changed the link to my own repo for a more consolidated download of just the files you need for the new design. Here.



Edited 1 time(s). Last edit at 06/05/2013 01:31AM by neirpyc.

This design is already laying around in our "main" repository too.
Currently neirpyc and the rest is testing and fixing some compatibility issues with i.e. Forum links.

This design already runs on two of my boxes

so far
Matthias

Good design but still waiting for
the Kareha Forum supported update.

johanrusli Wrote:
-------------------------------------------------------
> Good design but still waiting for
> the Kareha Forum supported update.


It has a 'links' section built-in, it's just commented out. You could uncomment the section and just point them where you want if you're up for it.

neirpyc Wrote:
-------------------------------------------------------
> johanrusli Wrote:
> --------------------------------------------------
> -----
> > Good design but still waiting for
> > the Kareha Forum supported update.
>
>
> It has a 'links' section built-in, it's just
> commented out. You could uncomment the section and
> just point them where you want if you're up for
> it.
Okay....it works. Just edit the index.html file and find

                        <!-- Optional Links! -->
			<!--
			<nav id="top-nav">
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				</ul>
			</nav>
			-->

change it to

                       <nav id="top-nav">
				<ul>
					<li><a href="[piratebox.lan]; Discuss It </a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				</ul>
			</nav>

Thanks you so much

if anyone experiences a scrollbar on the piratebox logo with IE10 on Win7, change this:

#logo {
  float: left;
}

to this:

#logo {
float:left;
overflow:hidden;
}


otherwise, this is phenominal, lightweight, and clean!

dicknuckle Wrote:
-------------------------------------------------------
> if anyone experiences a scrollbar on the piratebox
> logo with IE10 on Win7, change this:
>
> #logo {
>   float: left;
> }
>
> to this:
>
> #logo {
> float:left;
> overflow:hidden;
> }
>
>
> otherwise, this is phenominal, lightweight, and
> clean!

These fixes will be in the next version which should be on Github later today.

Hi!

I'm having troubles to install the piratebox responsive theme.

I try to copy the files using scp, downloaded here to my /opt/piratebox folder but then, when I turn on my router again I no longer can acess the wifi spot..

There is something I have to do after copying the files?
Inside one folder there is a lighppd folder, should I copy it to my installation too?

Matthias Wrote:
-------------------------------------------------------
> This design is already laying around in our "main"
> repository too.

Can I install the responsive theme with opkg from the repository?
I tried to find the package with no luck.

Thanks!

No, you can't install the responsive design from any repository.
But you can try to use piratebox 1.0 which includes the responsive design.

regards Matthias

Ok, I'll start to test the 1.0 now
thanks

Hi i am currently using Nargren 2.0 design layout but i've added alot of customizations of my own.
I really like how you was able to make the download page be included in the index file ( so to speak)

How would i go about doing this for the 2.0 design.

I would really like to add it to my current UI so that i don't have to stat over customizing again.


Is it possible it is as easy as creating a new html page and then using an embed code linking to lighttpd.conf or the shared folder?

thanks!



Edited 1 time(s). Last edit at 11/23/2013 02:24AM by damavox.

Embeding works

damavox,

do you want the contents of the download folder to show on the landing page?

If so, the you can use an <iframe>.

Thanks Nargren and yes i would, the biggest thing i've ever done with any type of code is create a very simple calculator that would only run in the compiler in java,

I will look into the iframe more, i would really like for page to cover the whole middle section, the way i have it right now is i basically copied index.html and got rid of the chat box, renamed it to downloads.html then embeded the downloads folder (/Shared) in the space provided for the chat box. Then i linked to the new downloads.html in the index file... It works just not as pretty and simple as it could be.lol

The biggest obsticale i am having is when streaming videos the video stays within the parameters of the "chat box section" even when in full screen mode.

@video stays in the box (iframe)

This happens, because the page and so the video as well opens within the iframe. I'm not sure how this could be overcome, however this might help: stackoverflow

Thanks Nargren, I took a look at the page and script, unfortunately, the script on the page calls the "parent" html page by default so linking it with /shared or even piratebox.lan/shared does not work, it only calls the home (or parent) screen inside the iframe box.

As i mentioned before i am not even a novice when it comes to coding or code reading i only know the very basic things.
So my question would be what part of your css or html file controls the layout of the screen where the chat box is on the right and the favicon_large and upload box is on the left. i've been messing around but can't seem to find it.

My solution for the above problem is to try and create a modified css outlay and call it just in the download section.

I'm hoping that will work. That is unless its controlled by Javascript

Short on time but i was able to solve my issues.
As well as i was able to place the image board inside the layout, by creating coping the index.html page deleting everything except the header and footer and then using iframe and some JS to put the image board between the 2.

will elaborate more later.

Was wondering if it would be ok with you, Nargren, to make by layout available to the community. ( I.E. PB 2.5 design Based off Nargren's 2.0 design
)

Hi,

sorry I was away for a week and couldn't get online too much.

So about the page layout.
the chat window is layed out by

Language: HTML
<div id="page">
        <div id="contents">
                <section id="main">
                        <article class="special">

For which the css codes are:

Language: CSS
#page{
        width: 1000px;
        margin: auto;
        text-align: left;
}
#contens{
        text-align: justify;
}
#main{
        max-width: 630px;        
        float:left;
}
article.special{
        text-align:justify;
        padding:10px 5px 10px 5px; /* top,right,bottom,left */
        margin:10px 0px 10px 0px;
        font:normal 15px arial;
        line-height:125%;
        background:white;
        color:black;
}

So technically each layer (div, section, article) adds a little formatting to the final layout of the chat window.
page - make it 1000px wide
section main - make the main part of the screen 630px wide (the remainder from the 1000px is allocated then to the "aside" on the right side of the screen which holds the upload button and other stuff in the

Language: HTML
<aside id="main_side">

)
article special - some padding etc., final formatting.

I hope this helps a little for further formatting.

About your layout, sure you can make modifications to my design and make it available to everyone. Ideally you would make a fork from my Github repository and make your changes there.

Thanks Nargren, I actually was able to use javascript code, took me about 2 hours to learn how to write about 5 lines of code abd get it right. Lol, but it allowed me to overcome 99% of the issues I was having. The other issue I am having is I would like the iframe box to resize to the movie streaming rather than stay the same size as my "index of shared" page but no biggie considering fullscreen now works.

But as far as posting it goes I am going to have to go through my www folder and do alittle clean up first.

It you want I'll send you the files or post them somewhere for you to take alook at before posting for the community from a branch of your github..After all its 95% your design, it should be "Nargren Approved" first