Sluggo Pins Mark II -The Launch!

I was ready to launch when the code started to crumble and fall apart. 

Something went wrong with the core code that listed the pins, and without a proper code I haven't got a solid product to use. 

I wrote and rewrote the code and finally got a new core and a lot of new insights. The code went even better and shorter than I hoped for. It fulfilled my expectations by far. 

Finally - the Sluggo Pins Mark II is released!

Download your copy at Codepen today:

http://codepen.io/steffodimfelt/pen/dYBeYo

Sluggo Pins Mark II - Pre-launch 2

Ehhh... No... Aaand... No...

The padding won't work. Nor the margins.

My calculations got too complicated.

And they didn't work properly.

Went out for a walk and suddenly I got it.

Tables...

Oh, man... Tables... Of course...

All the pins structured between columns and the space will also be definied in separat columns. The table can have various width and still have constant space between columns.

Feels like going back to basic and throw away all complicated-calcutated-spaces-did-not-work-anyway.

So simple...

Love it.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Pin Row 1</td>
    <td style="width:10px">Space</td>
    <td>Pin Row 2</td>
  </tr>
</table>
</body>
</html>

Sluggo Pins Mark II - Pre-launch

The new Sluggo Pin-version is on its way. I'm tuning and tweaking the last lines to make it pixel-perfect and small-sized. Got rid of 45 lines of code when I fixed the problem with columns not lined up properly. 

Discovered the the columns lined up differently depending on where source and target tags are in the HTML. But not always - three-in-a-row lines up just perfectly...

I also put some if-statements through a JS-minifier and got rid of 40 more lines. Instead of:

if (Columns == "1R" ){

if (ColWidth > 0){Columns = 1;}}

...I got:

"1R"==Columns&&(ColWidth>0&&(Columns=1));

...And a new way to write code more efficient. 

It's just the final touch left and the last doublecheck before the launch. 

Sluggo Pins Mark II - WIP - Solve the padding problem between pins

Just when I thought I was done and ready for launch, I got a drawback - if all the pictures are equal in size the pins become different in height. I've never seen it before because I've used different sized pictures. 

So, why did it happen?

Padding problems

The major problem is that the columns have different kinds of padding. Left and right columns have only left or right padding, but the columns in the middle have left and right padding. This gives the  left and right columns some extra space and therefore makes them slightly smaller.

Why did I do that? 

Well, in Mark I there where padding around all sides of the columns. The problem comes when the user wants a wide padding. The left padding of the left column and right padding on the right column makes them not lined up with the other objects on the page.

My first attempt to fix this was to put padding on all pins but the first one. The padding turned out very well, but the far left column still needed some extra padding, and I couldn't put that padding anywhere - either the left margin gets to wide or there will be too much space between column 1 and 2.

Margins mayhem

So I tried to adjust the margins, but ended up with more mess than before. The big problem was that added margins pushes columns to the right. The last column won't fit so it is placed underneath the others, leaving a gap.

When I got rid of all padding and margins, everything looks fine and dandy. So I have to figure out what I can do to solve this problem besides margins and padding.

Constant columns

Sluggo Pins columns is based on constant numbers. 1/50 is 50% of the target div, 1/25 is 25% and so on.

To predefine the numbers is a great way to make all columns constant - until you want som space between. And the different kind of space, acts differently.

• Padding will shrink the inner content, because the outline of the div is constant. 
• Margins will push the divs to the side. 

My solution

My solution is to get rid of the constant numbers when I build the columns. The most important issue is that the spaces between the pins is equal to the input from the user. 

My thought is something like this:

(Target Width - (Padding value*(Columns-1)))/Columns = Columns Width

This will get:

1. Space between columns that doesn't push the pins. The pins will shrink equally. 
2. An accurate width of the columns. The width is based on the current target.
3. No padding on the far left or far right side.  

Update

The right calculation is:

var WidthOut = (ColWidth-(PadIn*(Columns-1)))/Columns;

(ColWidth is the value from  $(Target).width();)

Right on spot...

Sluggo Pins Mark II - WIP - Margins

Todays work has been tweeking, tweeking and tweeking the margins for the release of Sluggo Pins Mark II this week. 

More tweeking tomorrow...