PT Mockup

[Orion Pobursky]

I’ve started a mock-up of the theming for the PT:
http://www.ldraw.org/pt-detail-mockup.html

This is a static page (i.e it won’t change based on votes, etc.)
I chose this one because the link in the comments is breaking my formatting.

I’d like feedback from the regular PT users.

[Orion Pobursky]

I’ve started a mock-up of the theming for the PT:
http://www.ldraw.org/pt-detail-mockup.html

This is a static page (i.e it won’t change based on votes, etc.)
I chose this one because the link in the comments is breaking my formatting.

I’d like feedback from the regular PT users.

Also looks terrible on mobile.

[Philippe Hurbain]

Also looks terrible on mobile.

Yes... otherwise it's nice and clean.

[Magnus Forsberg]

Also looks terrible on mobile.

It only looks good in Edge.

That long link breaks the frame in Chrome.

It looks terrible in Firefox.
The long link breaks the frame. The file-header gets cramed into a very thin frame, about 25% "header" and 75% image.
But I use a sidepanel with bookmarks, and that seems to force the bad behavoir.


Question:
Would it be possible to emphasize the user comment on each post?
Make a difference between the machine text and the user comment.

[Orion Pobursky]

It only looks good in Edge.

That long link breaks the frame in Chrome.

It looks terrible in Firefox.
The long link breaks the frame. The file-header gets cramed into a very thin frame, about 25% "header" and 75% image.
But I use a sidepanel with bookmarks, and that seems to force the bad behavoir.


Question:
Would it be possible to emphasize the user comment on each post?
Make a difference between the machine text and the user comment.

I test in Firefox, Chrome, and mobile Safari. I know about the long line. Haven’t figured out how to fix it yet (which is why I chose it). I’m not seeing the header problem but it may the the bookmark bar you mention.  

As far as the stuff in the comments, I can change it but it has to be via JS since that text is generated by the PT and not easily altered.

[Orion Pobursky]

I test in Firefox, Chrome, and mobile Safari. I know about the long line. Haven’t figured out how to fix it yet (which is why I chose it). I’m not seeing the header problem but it may the the bookmark bar you mention.  

As far as the stuff in the comments, I can change it but it has to be via JS since that text is generated by the PT and not easily altered.

I’m getting a formatting error for the search box on a small computer screen but the header images are fine for me

[Chris Dee]

I test in Firefox, Chrome, and mobile Safari. I know about the long line. Haven’t figured out how to fix it yet (which is why I chose it). I’m not seeing the header problem but it may the the bookmark bar you mention.  

As far as the stuff in the comments, I can change it but it has to be via JS since that text is generated by the PT and not easily altered.

The broken URL is nothing to do with the mockup styling, but a fault in the ptdetail script which wasd too restrictive on what characters are allowed in a URL. That's now fixed on the live Parts Tracker.

[Orion Pobursky]

The broken URL is nothing to do with the mockup styling, but a fault in the ptdetail script which wasd too restrictive on what characters are allowed in a URL. That's now fixed on the live Parts Tracker.

Awesome. It still doesn’t word wrap properly but I haven’t sat down to fix that problem yet.

[Travis Cobbs]

I’d like feedback from the regular PT users.

I'm not exactly a regular PT user, but I have a question. Is it intentional for the subfile entries to use a smaller font?

[Orion Pobursky]

I'm not exactly a regular PT user, but I have a question. Is it intentional for the subfile entries to use a smaller font?

That's caused by legacy CSS that I didn't remove

[Willy Tschager]

You have to get used to it but I love it.

w.

[Gerald Lasser]

HI Orion,

It looks nice and clean.

+ Overall a slightly larger font, better readability


- I like the spacing of the menu items better, there was more space in between  (Prev File | Next File | Download etc.)


> the part image could be slightly bigger, it looks a bit out of size with the larger font.
> can you test how it looks with huge parts: like the 48 long boat hull 50820.dat


Proposal:
> This is concerning the functionality of the PT: what if you mention somebody with an "@" could the mentioned person get a kind of "action Item", (like a PN)

Gerald

[Orion Pobursky]

HI Orion,

It looks nice and clean.

+ Overall a slightly larger font, better readability


- I like the spacing of the menu items better, there was more space in between  (Prev File | Next File | Download etc.)


> the part image could be slightly bigger, it looks a bit out of size with the larger font.
> can you test how it looks with huge parts: like the 48 long boat hull 50820.dat


Proposal:
> This is concerning the functionality of the PT: what if you mention somebody with an "@" could the mentioned person get a kind of "action Item", (like a PN)

Gerald

I changed the image. Looks ok. 

As far as additional PT functionality, that’s Chris’s domain. I’m only working on theming.

[Orion Pobursky]

I’ve started a mock-up of the theming for the PT:
http://www.ldraw.org/pt-detail-mockup.html

This is a static page (i.e it won’t change based on votes, etc.)
I chose this one because the link in the comments is breaking my formatting.

I’d like feedback from the regular PT users.

Note that there are a few things I can’t change easily since the text is generated by the PT code. The list of review events is one of them. Those lines of equals marks cant change.

[Steffen]

very nice.

personally, I would need some more "breathing air" between different sections.

i.e., add some more empty space before and after the votes summary at the top etc.

my eyes want to catch and easily grasp the structure of the page.
right now, it is too much a vertically-too-densely-squeezed text fullscreen.

i need more air in it.

[Chris Dee]

very nice.

personally, I would need some more "breathing air" between different sections.

i.e., add some more empty space before and after the votes summary at the top etc.

my eyes want to catch and easily grasp the structure of the page.
right now, it is too much a vertically-too-densely-squeezed text fullscreen.

i need more air in it.

I'd prefer the image width to be restricted - maybe max-width: 40%;
I think the header text <pre>....</pre> coiuld be smaller, maybe only 0.75em.
I think the <hr> between review sections is too strong. With improved markup a CSS border would give greater control over width and colour.

Don't mess around with applying complex CSS selectors to the existing ancient HTML. If it would be easier, I can add semantic markup to the generated HTML.

[Orion Pobursky]

I'd prefer the image width to be restricted - maybe max-width: 40%;
I think the header text <pre>....</pre> coiuld be smaller, maybe only 0.75em.
I think the <hr> between review sections is too strong. With improved markup a CSS border would give greater control over width and colour.

Don't mess around with applying complex CSS selectors to the existing ancient HTML. If it would be easier, I can add semantic markup to the generated HTML.

Limiting the image size is easy. I’m still trying to figure out the menu breaking thing and there’s an error Magnus is getting regarding word wrapping that I’m still trying to solve

I can add to the generated HTML easy enough. The problem is that the PT has the pregenerated text that has to be dealt with. Since regenerating this text for every part doesn’t make sense, I’m just altering via JavaScript. Thankfully, all those equals signs make breaking it up easy.

[Orion Pobursky]

I’ve started a mock-up of the theming for the PT:
http://www.ldraw.org/pt-detail-mockup.html

This is a static page (i.e it won’t change based on votes, etc.)
I chose this one because the link in the comments is breaking my formatting.

I’d like feedback from the regular PT users.

I've done some more tinkering to the review area.

[Gerald Lasser]

I've done some more tinkering to the review area.

Could you format a "HOLD" vote with white letters on red background? (just the word HOLD)

[Steffen]

yes, and "comment" something yellow please
and "certify" something green please

I like the new look with the "paper snippets" for each review

[Orion Pobursky]

I’ve started a mock-up of the theming for the PT:
http://www.ldraw.org/pt-detail-mockup.html

This is a static page (i.e it won’t change based on votes, etc.)
I chose this one because the link in the comments is breaking my formatting.

I’d like feedback from the regular PT users.

A few more tweaks. I think I’m mostly satisfied for now. There are some things that I want to do but aren’t really practical at the moment. 

Any final comments/requests.

[Travis Cobbs]

A few more tweaks. I think I’m mostly satisfied for now. There are some things that I want to do but aren’t really practical at the moment. 

Any final comments/requests.

It seems pretty broken now:

• Only one review shows (out of a bunch)
  
• The image is for the wrong part (since it is now showing info from a new part)
  

[Orion Pobursky]

It seems pretty broken now:

• Only one review shows (out of a bunch)
  
• The image is for the wrong part (since it is now showing info from a new part)
  

No that’s fine. This is a static mock-up. It’s not pulling any real-time data. I changed the image to test large images and I truncated the reviews and added some extra lines to them to test styling.

[Gerald Lasser]

No that’s fine. This is a static mock-up. It’s not pulling any real-time data. I changed the image to test large images and I truncated the reviews and added some extra lines to them to test styling.

One more thing:

Can you make the coloured square at the STATUS the same height as the neighbouring capital letter?

I like how the coloured highlights of the reviews turn out

[Johann Eisner]

I like how the coloured highlights of the reviews turn out

+1

[Magnus Forsberg]

A few more tweaks. I think I’m mostly satisfied for now. There are some things that I want to do but aren’t really practical at the moment. 

Any final comments/requests.

Now I see that narrow layout in Firefox again. It's like it doesn't fit the page when I have the sidepanel on.
It looked better yesterday...

[Orion Pobursky]

Now I see that narrow layout in Firefox again. It's like it doesn't fit the page when I have the sidepanel on.
It looked better yesterday...

Hmm. Ok. I did change how the image is handled so maybe that’s what’s causing the problem.

[Steffen]

Any final comments/requests.

Could you add a list of reviews at the bottom of the page
so we can see how that would look? Mockup of course is enough.

[Orion Pobursky]

Any more “oh by the ways”

[Philippe Hurbain]

Oh, BTW...
...I tried with all the browsers/devices I had available here, everything works fine. The only browser that was not working (at all) was a neanderthal era Internet Exploder, but that was somehow expected...

[Orion Pobursky]

Oh, BTW...
...I tried with all the browsers/devices I had available here, everything works fine. The only browser that was not working (at all) was a neanderthal era Internet Exploder, but that was somehow expected...

Nope. Not supporting that. Even MS is urging people to switch.

[Orion Pobursky]

Nope. Not supporting that. Even MS is urging people to switch.

IE 11 should be fine though. 

Supported;

• Last 2 Versions FF, Chrome, Safari Mac
  
  
• IE 11+
  
  
• Android 4.4+, Chrome for Android 44+
  
  
• iOS Safari 7+
  
  
• Microsoft Edge 12+
  

[Victor Di Rienzo]

IE 11 should be fine though. 

Supported;

• Last 2 Versions FF, Chrome, Safari Mac
  
  
• IE 11+
  
  
• Android 4.4+, Chrome for Android 44+
  
  
• iOS Safari 7+
  
  
• Microsoft Edge 12+
  

2019

[Orion Pobursky]

Any more “oh by the ways”

Changes to ptdetail have been shipped to Chris for his final review and approval. Once that’s done, the header, menu, content, and footer will all be changed at once. The other PT output scripts (like ptactivity or ptscan) are less complex and should play well with the new markup until they can be updated (there may be some outliers but those can be fixed on “as found” basis)

[Willy Tschager]

Changes to ptdetail have been shipped to Chris for his final review and approval.

Thanks for all the effort you put into this.

w.

[Jaco van der Molen]

Changes to ptdetail have been shipped to Chris for his final review and approval. Once that’s done, the header, menu, content, and footer will all be changed at once. The other PT output scripts (like ptactivity or ptscan) are less complex and should play well with the new markup until they can be updated (there may be some outliers but those can be fixed on “as found” basis)

Great. Looks good, better then before!

[Damien Roux]

Any more “oh by the ways”

I think I'm a bit late, but would it be complicated to add an option to choose to display part picture on the Parts List and on the Activity pages?

But actually, I must say I love this new layout, great job!

[Orion Pobursky]

I think I'm a bit late, but would it be complicated to add an option to choose to display part picture on the Parts List and on the Activity pages?

But actually, I must say I love this new layout, great job!

This would require new code. This project focused on changing the markup.

[Johann Eisner]

I understand only half of it, but I don't have to understand everything.  The result looks really great.  Thank you.

[Orion Pobursky]

So the next challenge is the patterned part summary. It’s still ok with the new header and footer markup but needs some love. I’ve put a mock-up here:
http://www.ldraw.org/pt-pattern-mockup.html

Right now it look terrible but that because it’s in an intermediate state while I play around with the markup.

[Victor Di Rienzo]

So the next challenge is the patterned part summary. It’s still ok with the new header and footer markup but needs some love. I’ve put a mock-up here:
http://www.ldraw.org/pt-pattern-mockup.html

Right now it look terrible but that because it’s in an intermediate state while I play around with the markup.

Showing the thumbnails bigger in all the section of part tracker its a must.

Something i don't like is, that when you click on the image of the brick it shows you the jpg file. it should take you to the details page of that brick. also you can add a 3d preview of the brick



also you can add a download link of that part. into the pt pattern page.



check the spacing between the lines of the parts they are overlapping .

[Orion Pobursky]

All your suggestions are good. Thanks

The overlap problem is just because I’m still playing around with how to lay things out. Right now there’s a mixture of new markup and old markup and those 2 systems sometimes conflict. Rest assured there will be no overlap in the finalize product. 

The biggest challenge right now is making the images appear full size without overlap in all resolutions

[Gerald Lasser]

So the next challenge is the patterned part summary. It’s still ok with the new header and footer markup but needs some love. I’ve put a mock-up here:
http://www.ldraw.org/pt-pattern-mockup.html

Right now it look terrible but that because it’s in an intermediate state while I play around with the markup.

First feedback:

• I would remove the "Quick Look-Up", this is just the standard PT search available in the top bar (at the real PT site)
  

• I would like a "Filter" instead, so that you can quickly scan the shown patterns quickly for a keyword, e.g. "Eye" the result will only shown pictures where the search matches, the others shall be greyed out/empty box
  Search might be relevant for parts with a huge number of parts (heads, tiles)
• The part-code of an official part should link to the .dat file for download
  
• As an option a "display as list" possibility to e.g. quickly and cleanly copy the data to Excel
  This should then shown Picture, PartNo, Description, PT Status
  

Not too much I hope for now

[Orion Pobursky]

First feedback:

• I would remove the "Quick Look-Up", this is just the standard PT search available in the top bar (at the real PT site)
  

• I would like a "Filter" instead, so that you can quickly scan the shown patterns quickly for a keyword, e.g. "Eye" the result will only shown pictures where the search matches, the others shall be greyed out/empty box
  Search might be relevant for parts with a huge number of parts (heads, tiles)
  
• The part-code of an official part should link to the .dat file for download
  
• As an option a "display as list" possibility to e.g. quickly and cleanly copy the data to Excel
  This should then shown Picture, PartNo, Description, PT Status
  

Not too much I hope for now

Unfortunately, most of your suggestions require more than just adjusting the theming of this page. Instead these would require rewriting or adding to the underlying script which is beyond the scope of this project.

[Gerald Lasser]

Unfortunately, most of your suggestions require more than just adjusting the theming of this page. Instead these would require rewriting or adding to the underlying script which is beyond the scope of this project.

I forgot the only one that can be done: Making the sub-headrs bold, (00 - 0z : General/Miscellaneous and Town) to make them more prominent

I'll keep the others in my mind :-)

[Orion Pobursky]

So the next challenge is the patterned part summary. It’s still ok with the new header and footer markup but needs some love. I’ve put a mock-up here:
http://www.ldraw.org/pt-pattern-mockup.html

Right now it look terrible but that because it’s in an intermediate state while I play around with the markup.

Quick request for feedback:

What is the perference for item separtion? The way the first box is presented with a border or the way the rest of the row is with no border.

[Philippe Hurbain]

What is the perference for item separtion? The way the first box is presented with a border or the way the rest of the row is with no border.

I prefer the bordered one...

[Johann Eisner]

I prefer the bordered one...

I also.

[Orion Pobursky]

I also.

Now that I look at it on mobile, I agree.

[Orion Pobursky]

So the next challenge is the patterned part summary. It’s still ok with the new header and footer markup but needs some love. I’ve put a mock-up here:
http://www.ldraw.org/pt-pattern-mockup.html

Right now it look terrible but that because it’s in an intermediate state while I play around with the markup.

I’m fairly satisfied with the current design. I’ll wait until we have the rest of the framework live and post a beta page to test out the various patterns. 

One question:
Should there be placeholder text in the blank spaces (like “Open pattern 973p0e.dat”), leave them as is, or get rid of them?

[Magnus Forsberg]

Why does the page change from day to day?
Every other day it looks good, and then it looks to be to narrow again.

Today it is bad, yesterday it looked good.

[Orion Pobursky]

Why does the page change from day to day?
Every other day it looks good, and then it looks to be to narrow again.

Today it is bad, yesterday it looked good.

Which page? The mock-up ones scale based on window size. There are 4 resize breakpoints: mobile, tablet, small monitor, and large monitor.

[Magnus Forsberg]

Which page? The mock-up ones scale based on window size. There are 4 resize breakpoints: mobile, tablet, small monitor, and large monitor.

All of them. Ldraw.org and the mock-ups are all treated as being "small monitors" on my 17" laptop.
I disagree.
I have to either swap to another browser, or buy a bigger screen/laptop if I want to use Firefox.

[Orion Pobursky]

All of them. Ldraw.org and the mock-ups are all treated as being "small monitors" on my 17" laptop.
I disagree.
I have to either swap to another browser, or buy a bigger screen/laptop if I want to use Firefox.

The break points are adjustable. How small is the Firefox viewport on your laptop?

[Orion Pobursky]

The break points are adjustable. How small is the Firefox viewport on your laptop?

I lowered the breakpoint by 100px. Is that better?

[Magnus Forsberg]

I lowered the breakpoint by 100px. Is that better?

Yes, that's it. It instantly looked so much better.
But it seems to be right on the limit. If I change the width of the window, or the sidepanel, it flips to the more narrow layout.

[Orion Pobursky]

Yes, that's it. It instantly looked so much better.
But it seems to be right on the limit. If I change the width of the window, or the sidepanel, it flips to the more narrow layout.

I adjusted down another 25 px.

[Magnus Forsberg]

I adjusted down another 25 px.

Hard to tell, but Yes, I think it is a little bit better now.

[Steffen]

2 suggestions:
- can we get rid of the "File Header:" heading? I think it is just wasting vertical space.
- can we lower the image so that its top border aligns with the top border of the first line of the file header?

see here:

[Orion Pobursky]

I’ve started a mock-up of the theming for the PT:
http://www.ldraw.org/pt-detail-mockup.html

This is a static page (i.e it won’t change based on votes, etc.)
I chose this one because the link in the comments is breaking my formatting.

I’d like feedback from the regular PT users.

A couple of small tweaks to the new ptdetail based on off-forum feedback.

Specifically:
- Cut down on some of the excessive white space
- Moved the ptdetail menu to the top
- Changed the releated/required list

[Orion Pobursky]

A couple of small tweaks to the new ptdetail based on off-forum feedback.

Specifically:
- Cut down on some of the excessive white space
- Moved the ptdetail menu to the top
- Changed the releated/required list

We are now live. The only glaring error I can find is history which I’ll look at fixing tonight.

[Orion Pobursky]

We are now live. The only glaring error I can find is history which I’ll look at fixing tonight.

Activity and ptlist also break formatting on mobile (but are fine on large screens) . I’ll fix that tonight as well.

[Orion Pobursky]

Activity and ptlist also break formatting on mobile (but are fine on large screens) . I’ll fix that tonight as well.

Activity on mobile is fixed. Turns out it was a mobile Safari quirk.

[Orion Pobursky]

Activity and ptlist also break formatting on mobile (but are fine on large screens) . I’ll fix that tonight as well.

part list is now fixed. Pattern summary update coming soon.

[Gerald Lasser]

We are now live. The only glaring error I can find is history which I’ll look at fixing tonight.

Orion,

Concerning the alignment of the parts, I think this was everything on the top (Pic top below the cert-status) thus the pics were in one line. Have a look at the Minifig Heads 
Can you make them in a line again?

thanks!

[Jaco van der Molen]

We are now live.

Looks very good Orion!

[Orion Pobursky]

Looks very good Orion!

Thanks. I just realized that we have now rid ourselves of the last vestige of the PostNuke CMS well over 10 years after we switched.

[Johann Eisner]

We are now live.....

PT looks great.

Another question:
Is it normal that the Forum is not so width as the PT?
I have only a 15,6" Notebook, maybe that's the reason.

[Orion Pobursky]

PT looks great.

Another question:
Is it normal that the Forum is not so width as the PT?
I have only a 15,6" Notebook, maybe that's the reason.

Yes. The forum is using different theming and markup.

[Magnus Forsberg]

We are now live.

The pages feels longer, I need to scroll more.

I like that some words have been emphasized.
Could we have the same on the words "a new version" of the file was submitted ?

[Orion Pobursky]

The pages feels longer, I need to scroll more.

I like that some words have been emphasized.
Could we have the same on the words "a new version" of the file was submitted ?

They are a bit longer. There’s more whitespace for one. Not a lot more but it’s there. Also the fonts are a bit bigger as well. Third, the actual page is constrained to a smaller small. Again, not hugely small except for the largest of monitors. All in all I think it’s a small price to pay to be able to use the tracker on mobile and to have modern markup that is unified across the PT and main site.

[Steffen]

I also like the new look a lot.
I have some minor improvement suggestions, but they can wait.

Here is one that I would like to ask right now:
can we modify the text that is displayed for a part as heading
- for the required files
- for its parent files?

Currently, the PT displays the texts
- "Required (unofficial) subfiles:" and
- "Related (unofficial) subfiles:"

, and both do not make sense. I would like to see that changed to:
- "Required Files:"
- "Parent Files:"

The reasoning is this:
1. nowadays, not all required files are "subparts" anymore. For example, for aliases, the required file is a normal part. See 55707c as example. So the wording "subfiles" for the required files is wrong IMHO.
2. the addition "(unofficial)" is completely unnecessary, because only such files are displayed. Official ones are not shown on the PT as dependency. The word only adds clutter.
3. for parent files, the wording "subfiles" makes no sense at all, it never did. We all just got used to the ever same text on the PT pages.

[Orion Pobursky]

I also like the new look a lot.
I have some minor improvement suggestions, but they can wait.

Here is one that I would like to ask right now:
can we modify the text that is displayed for a part as heading
- for the required files
- for its parent files?

Currently, the PT displays the texts
- "Required (unofficial) subfiles:" and
- "Related (unofficial) subfiles:"

, and both do not make sense. I would like to see that changed to:
- "Required Files:"
- "Parent Files:"

The reasoning is this:
1. nowadays, not all required files are "subparts" anymore. For example, for aliases, the required file is a normal part. See 55707c as example. So the wording "subfiles" for the required files is wrong IMHO.
2. the addition "(unofficial)" is completely unnecessary, because only such files are displayed. Official ones are not shown on the PT as dependency. The word only adds clutter.
3. for parent files, the wording "subfiles" makes no sense at all, it never did. We all just got used to the ever same text on the PT pages.

Im not sure about "Parent". Any other suggestion?

Since I'm curious, PM me you other minor suggestions.

[Damien Roux]

I’ve started a mock-up of the theming for the PT:
http://www.ldraw.org/pt-detail-mockup.html

This is a static page (i.e it won’t change based on votes, etc.)
I chose this one because the link in the comments is breaking my formatting.

I’d like feedback from the regular PT users.

On Firefox, the history graph is too large and I can't see the right part of it (it is out of the screen) and I got no way to scroll horizontally.

[Orion Pobursky]

On Firefox, the history graph is too large and I can't see the right part of it (it is out of the screen) and I got no way to scroll horizontally.

Yah. I noted that above. It’s the last major error I need to fix. Should prolly have that done in a few days. The rest of the work is finding and fixing errors on mobile and updating old markup.