PT Mockup


PT Mockup
#1
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.
Reply
RE: PT Mockup
#2
(2019-06-05, 16:38)Orion Pobursky Wrote: 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.
Reply
RE: PT Mockup
#3
(2019-06-05, 16:40)Orion Pobursky Wrote: Also looks terrible on mobile.
Yes... otherwise it's nice and clean.
Reply
RE: PT Mockup
#4
(2019-06-05, 16:38)Orion Pobursky Wrote: 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?
Reply
RE: PT Mockup
#5
(2019-06-05, 17:04)Travis Cobbs Wrote: 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
Reply
RE: PT Mockup
#6
You have to get used to it but I love it.

w.
LEGO ergo sum
Reply
RE: PT Mockup
#7
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
Reply
RE: PT Mockup
#8
(2019-06-05, 19:13)Gerald Lasser Wrote: 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.
Reply
RE: PT Mockup
#9
(2019-06-05, 16:38)Orion Pobursky Wrote: 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.
Reply
RE: PT Mockup
#10
(2019-06-05, 16:40)Orion Pobursky Wrote: 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.
Reply
RE: PT Mockup
#11
(2019-06-05, 22:32)Magnus Forsberg Wrote: 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.
Reply
RE: PT Mockup
#12
(2019-06-05, 22:40)Orion Pobursky Wrote: 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
Reply
RE: PT Mockup
#13
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.
Reply
RE: PT Mockup
#14
(2019-06-06, 21:23)Steffen Wrote: 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.
Chris (LDraw Parts Library Admin)
Reply
RE: PT Mockup
#15
(2019-06-07, 20:33)Chris Dee Wrote: 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.
Reply
RE: PT Mockup
#16
(2019-06-05, 22:40)Orion Pobursky Wrote: 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.
Chris (LDraw Parts Library Admin)
Reply
RE: PT Mockup
#17
(2019-06-08, 8:37)Chris Dee Wrote: 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.
Reply
RE: PT Mockup
#18
(2019-06-05, 16:38)Orion Pobursky Wrote: 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.
Reply
RE: PT Mockup
#19
(2019-06-08, 17:33)Orion Pobursky Wrote: 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)
Reply
RE: PT Mockup
#20
yes, and "comment" something yellow please
and "certify" something green please

I like the new look with the "paper snippets" for each review
Reply
RE: PT Mockup
#21
(2019-06-05, 16:38)Orion Pobursky Wrote: 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.
Reply
RE: PT Mockup
#22
(2019-06-10, 17:28)Orion Pobursky Wrote: 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)
Reply
RE: PT Mockup
#23
(2019-06-10, 18:25)Travis Cobbs Wrote: 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.
Reply
RE: PT Mockup
#24
(2019-06-10, 18:30)Orion Pobursky Wrote: 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
Reply
RE: PT Mockup
#25
(2019-06-10, 20:04)Gerald Lasser Wrote: I like how the coloured highlights of the reviews turn out

+1
If nothing goes right, go left.
Reply
RE: PT Mockup
#26
(2019-06-10, 17:28)Orion Pobursky Wrote: 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...
Reply
RE: PT Mockup
#27
(2019-06-10, 21:52)Magnus Forsberg Wrote: 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.
Reply
RE: PT Mockup
#28
Any more “oh by the ways”
Reply
RE: PT Mockup
#29
Oh, BTW... Big Grin
...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...
Reply
RE: PT Mockup
#30
(2019-06-12, 13:37)Philippe Hurbain Wrote: Oh, BTW... Big Grin
...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.
Reply
RE: PT Mockup
#31
(2019-06-12, 13:42)Orion Pobursky Wrote: 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+
Reply
RE: PT Mockup
#32
(2019-06-12, 13:14)Orion Pobursky Wrote: 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)
Reply
RE: PT Mockup
#33
(2019-06-12, 17:38)Orion Pobursky Wrote: Changes to ptdetail have been shipped to Chris for his final review and approval.

Thanks for all the effort you put into this.

w.
LEGO ergo sum
Reply
RE: PT Mockup
#34
I understand only half of it, but I don't have to understand everything.  The result looks really great.  Thank you.
If nothing goes right, go left.
Reply
RE: PT Mockup
#35
(2019-06-12, 17:38)Orion Pobursky Wrote: 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!
Jaco van der Molen
lpub.binarybricks.nl
Reply
RE: PT Mockup
#36
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.
Reply
RE: PT Mockup
#37
(2019-06-13, 14:43)Orion Pobursky Wrote: 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

[Image: RTCkKl1.png]

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

[Image: Zwn2pFE.png]

check the spacing between the lines of the parts they are overlapping .
[Image: HYtO825.png]
Reply
RE: PT Mockup
#38
(2019-06-12, 13:45)Orion Pobursky Wrote: 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
[Image: best-web-browser-w3.png]
Reply
RE: PT Mockup
#39
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
Reply
RE: PT Mockup
#40
(2019-06-13, 14:43)Orion Pobursky Wrote: 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
Reply
RE: PT Mockup
#41
(2019-06-13, 16:10)Gerald Lasser Wrote: 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.
Reply
RE: PT Mockup
#42
(2019-06-13, 16:15)Orion Pobursky Wrote: 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 :-)
Reply
RE: PT Mockup
#43
(2019-06-13, 14:43)Orion Pobursky Wrote: 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.
Reply
RE: PT Mockup
#44
(2019-06-14, 15:24)Orion Pobursky Wrote: 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...
Reply
RE: PT Mockup
#45
(2019-06-14, 15:38)Philippe Hurbain Wrote: I prefer the bordered one...

I also.
If nothing goes right, go left.
Reply
RE: PT Mockup
#46
(2019-06-14, 17:29)Johann Eisner Wrote: I also.

Now that I look at it on mobile, I agree.
Reply
RE: PT Mockup
#47
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.
Reply
RE: PT Mockup
#48
(2019-06-14, 19:18)Magnus Forsberg Wrote: 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.
Reply
RE: PT Mockup
#49
(2019-06-13, 14:43)Orion Pobursky Wrote: 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?
Reply
RE: PT Mockup
#50
(2019-06-14, 19:22)Orion Pobursky Wrote: 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.
Reply
« Next Oldest | Next Newest »



Forum Jump:


Users browsing this thread: 2 Guest(s)