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.

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

[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

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

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

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

[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+
  

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

[Johann Eisner]

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

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

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

[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]

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.

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

[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]

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.