search

Princeton-CDH / startwords

a research periodical irregularly published by the CDH.
https://startwords.cdh.princeton.edu
3 stars 3 forks source link

add custom css for dbv essay #88

Closed thatbudakguy closed 4 years ago

thatbudakguy commented 4 years ago

dev notes

figma design

we need special css to handle:

there's already a style.css file in the content folder for the essay, so we just need to add to that.

thatbudakguy commented 4 years ago

tagged everyone for review on this one, just because it's a big one and more eyes is probably good.

one notable difference from the design is that the margins of the purple section (I call it an "interlude" in the code, not sure what else to call it...) are less tight on desktop...they seemed incredibly restrictive and I was having trouble making the text fit right; went with a margin more similar to the homepage or issue list page instead. @gissoo let me know if this doesn't make sense to you.

haven't tested to see what the pdf looks like, hoping for help from @rlskoeser or @gwijthoff on that.

gissoo commented 4 years ago

@thatbudakguy Thank you!!! So exciting!! I tested on all browsers mobile and desktop. Everything looks fine as far as I noticed, and tested also by clicking on all the icons, feeling a bit dizzy now :D – I think it's all fine, I'll check again tomorrow just in case.

A couple of things I noticed:

  1. The position of the weaving icon above its section heading is off/doesn't match the design on both mobile and desktop. desktop version shown here: Screen Shot 2020-09-30 at 5.35.25 PM.png

  2. The first list of icons the white background should cover the weaving image, right now it's below the weaving image: Screen Shot 2020-09-30 at 5.33.26 PM.png

    • Also, if you notice in this screenshot the icon list looks larger on firefox than on other browsers, this is not happening on mobile, not sure how much it matters, it's just weird.

  3. The hand icon on the purple background is missing the wrist, can we include it? I really appreciated the wrist :D Let me know if it creates any issues or if I can do something about it.

  4. Also, in my designs the list of clickable icons decreased from 4 to 3 to 2 ....I like your logic better that always 4 icons appear, however I'm wondering if at some point we could also use this to visually indicate where on the page the person is (like after icon 2 or 3) ...i.e. what they have read from what they haven't read, is this worth to pursue? @thatbudakguy @rlskoeser

thatbudakguy commented 4 years ago
  1. good catch; I've adjusted it so that it's centered now.
  2. this z-index issue should now be fixed as well.
  3. on very small screens (mobile to about 500px) there's not enough space for the wrist (it runs into the text), but I've now moved the hand out so you can see the wrist on tablet and desktop.
  4. i've thought about this too...i can see including some kind of "active" indicator, but i think it requires further design. i'm also not totally convinced it's necessary, since theoretically you can know where you are because the active heading will always visually be right below the clickable list (see pic). would be curious to hear other's thoughts though.

Screen Shot 2020-10-01 at 12.56.08 PM.png

rlskoeser commented 4 years ago

Regarding #4: In the draft, I had all four icons listed the first time you see "choose an object", and then had imagined the one after a section would say "choose another object" and show you everything but the one you just finished looking at.

@gissoo 's idea about status is pretty appealing. @thatbudakguy could we use :visited to de-emphasize anchor links that have been clicked?

rlskoeser commented 4 years ago

@thatbudakguy is there a reason you haven't tested the PDF? I'm pretty sure you'll need to adapt the custom styles for print, from what I remember of Gissoo's designs. Just did a quick weasyprint run and lots of things are missing or wonky.

thatbudakguy commented 4 years ago

@rlskoeser are there instructions anywhere about how to generate the PDF? I don't have weasyprint installed and have never used it, which is why I tagged you and grant.

rlskoeser commented 4 years ago

@thatbudakguy sorry, when you said you were hoping for help you meant you needed directions? Sorry, thought you wanted help testing/reviewing it. I was wondering about directions.... I may never have written anything up! 😞 Perhaps in part because it wasn't clear where they should go or what we need to document. (Google doc? Theme readme?)

See the weasyprint installation instructions: https://weasyprint.readthedocs.io/en/stable/install.html It's a pip install, but there are some dependencies you need that you may not have.

Once it's installed, you just run it with a url and the pdf filename you want to generate. (There are a lot of warnings, but everything seemed fine to ignore when I was working on it before.)

I found it difficult to inspect the PDF styles (and it's also slow to regenerate every time you change things); you can get a lot of mileage out of simulating it in the browser. Chrome has a way to simulate print rendering, I imagine FF does too. It doesn't display everything the same way weasyprint will render it, but still very helpful.

rlskoeser commented 4 years ago

@thatbudakguy I noticed the deep zoom viewer is missing on the DBV essay. I don't know if it's related to the changes you made or not, but hoped you could check when you return to the styles.

gissoo commented 4 years ago

@thatbudakguy thank you for working on this, as we mentioned on Slack, would you please revise this issue that I found last week with the stacking icon before I review?

thatbudakguy commented 4 years ago

@gissoo ok, I've addressed the the icon issue.

gissoo commented 4 years ago 
1. good catch; I've adjusted it so that it's centered now.
2. this z-index issue should now be fixed as well.
3. on very small screens (mobile to about 500px) there's not enough space for the wrist (it runs into the text), but I've now moved the hand out so you can see the wrist on tablet and desktop.
4. i've thought about this too...i can see including some kind of "active" indicator, but i think it requires further design. i'm also not totally convinced it's necessary, since theoretically you can know where you are because the active heading will always visually be right below the clickable list (see pic). would be curious to hear other's thoughts though.

Screen Shot 2020-10-01 at 12.56.08 PM.png

thatbudakguy commented 4 years ago

In the designs it's not centered, just like the other icons it's at the most right edge of the rectangular background.

oooooops good catch. should be fixed now

To your point, even though they are always visually right below the clickable list, only one of them is immediately seen below, but there is not an immediate way to know all of which haven't been viewed yet.

for #150 I've switched it to show the icons for all of the sections except the one you're currently viewing in the icon nav; you can see the preview of that here. the first set of icons shows all of them, and after that you will see sets of 3. i think it's tough to actually know what the user has seen, since if we do something like "if a link has a been clicked", it will stay that way forever once clicked, and doing something like "if the content has been scrolled into view" is complicated and requires javascript. so this might be the simplest solution for now. lmk what you think.

Is this the place where we should discuss the max line length for various screens?

that's #145, i think

Also, do you know by any chance why (in my screenshots above) the size of the icons in the list is different on firefox vs the other two browsers? The icons look smaller on the other two browsers – this is not a big deal but wondered if you intended that?

i don't know why and it's not intentional. :/ just a rendering difference that I haven't had time to investigate

gissoo commented 4 years ago

In the designs it's not centered, just like the other icons it's at the most right edge of the rectangular background.

oooooops good catch. should be fixed now

To your point, even though they are always visually right below the clickable list, only one of them is immediately seen below, but there is not an immediate way to know all of which haven't been viewed yet.

for #150 I've switched it to show the icons for all of the sections except the one you're currently viewing in the icon nav; you can see the preview of that here. the first set of icons shows all of them, and after that you will see sets of 3. i think it's tough to actually know what the user has seen, since if we do something like "if a link has a been clicked", it will stay that way forever once clicked, and doing something like "if the content has been scrolled into view" is complicated and requires javascript. so this might be the simplest solution for now. lmk what you think.

Is this the place where we should discuss the max line length for various screens?

that's #145, i think

Also, do you know by any chance why (in my screenshots above) the size of the icons in the list is different on firefox vs the other two browsers? The icons look smaller on the other two browsers – this is not a big deal but wondered if you intended that?

i don't know why and it's not intentional. :/ just a rendering difference that I haven't had time to investigate

thatbudakguy commented 4 years ago

Would you please make it full height too? It was full height before, now it's not, sorry.

done; you might need to hard refresh to see the change (it took a minute or two for me)

This is awesome and really smart

I can't take any credit, i think this was @rlskoeser's idea from the beginning!

gissoo commented 4 years ago

Would you please make it full height too? It was full height before, now it's not, sorry.

done; you might need to hard refresh to see the change (it took a minute or two for me)

This is awesome and really smart

I can't take any credit, i think this was @rlskoeser's idea from the beginning!

thatbudakguy commented 4 years ago

I just viewed it but it looks distorted/resized disproportionately for some reason :( it looks like it's stretched vertically, if it can't be fixed don't spend too much time plz.

try now*

*in about two minutes

gissoo commented 4 years ago

I just viewed it but it looks distorted/resized disproportionately for some reason :( it looks like it's stretched vertically, if it can't be fixed don't spend too much time plz.

try now*

*in about two minutes