VITAS changed the topic of #spacedock to: Problems?: https://github.com/KSP-SpaceDock/SpaceDock/issues | Matrix/Riot Chat: https://im.52k.de +spacedock:52k.de Feel free to ask for help, we only bite a little bit! | If you want to help, please check https://github.com/KSP-SpaceDock/SpaceDock-Backend/issues/5 :) | <VITAS> inet users have the attentionspan of a squirrel...
aradapil_ has quit [Remote host closed the connection]
pacbard has quit [Read error: Connection reset by peer]
pacbard has joined #spacedock
DasSkelett has quit [Ping timeout: 189 seconds]
djerun has quit [Ping timeout: 189 seconds]
HebaruSan has quit [Ping timeout: 206 seconds]
im52kde has quit [Ping timeout: 189 seconds]
VITAS has quit [Ping timeout: 189 seconds]
DasSkelett has joined #spacedock
HebaruSan has joined #spacedock
VITAS has joined #spacedock
djerun has joined #spacedock
im52kde has joined #spacedock
aradapilot has joined #spacedock
DasSkelett[m] has joined #spacedock
<DasSkelett[m]> I'm taking a look at the header / thumbnail stuff right now.
<DasSkelett[m]> It is indeed quite easy to make the image fit in without being cut off vertically. But that leaves white space on the left and right, which IMHO doesn't look very good.
VITAS[m] has joined #spacedock
<VITAS[m]> yes and thats why i originaly didnt do it
<VITAS[m]> i think usability overrules design in this case
<VITAS[m]> you can use white as bg so people can put gradients there
<DasSkelett[m]> Yeah I would go with white, because the row with the mod title and download + follow buttons has a white background too
<DasSkelett[m]> (and the rest of the page too basically, except the info box)
<DasSkelett[m]> I thought about putting the image between the left and the right column in the info box, but I'm not sure if this is really working as it should.
<DasSkelett[m]> It would look something like this
<VITAS[m]> What you can do is make the image align left and put the data on the right with flex so it pops underneath if the screen is to narrow
<VITAS[m]> you could ditch the node design and go with rows (eg with slightly brighter or darker BG than the "real" bg)
<VITAS[m]> or you could make the image larger so the nodes fit as is
<DasSkelett[m]> It already does break with small screens
<VITAS[m]> whats "small"?
<DasSkelett[m]> That was with 685x713, obviously not a ratio you would encounterin reality
<VITAS[m]> no
<VITAS[m]> i would consider chaning layout below 1000px width ok
<VITAS[m]> because its unlikely its a desktop computer
<VITAS[m]> btw the site isnt working with mobile anyways (a thing that could also be fixed at some point)
<DasSkelett[m]> Yep, I know. That's why I didn't go with a smaller width 😛
<VITAS[m]> i had one design where i put a border arround the image and the info on the right
<VITAS[m]> the image looked less lost with it but i had to do quite a lot of "if width" restyling in css
<DasSkelett[m]> Okay, it looks like it breaks the row below just below 1000px width
<DasSkelett[m]> I think that's controlled by bootstrap, and regardless of the image size/ratio
<DasSkelett[m]> But I can't get the image to auto-grow. I can only set a absolute height 😦
<VITAS[m]> image width can accept 100% as width
<VITAS[m]> and if you dont set the height it autogrows
<VITAS[m]> or you set it as bg to fit in a div that has % width
<DasSkelett[m]> The width isn't the problem, that happens automatically with bootstrap since it's a column. (that `col-md-x` stuff)
<VITAS[m]> theres an aspect ratio property i think
<VITAS[m]> if not you need to use js
<DasSkelett[m]> No, please no js 😄
<VITAS[m]> i think if you use 100% height with the image and min height for the sourrounding div it might work
<VITAS[m]> it gets confusing fast to find the right combination
<VITAS[m]> all i know is that i managed it in the past
<DasSkelett[m]> Yep. I don't like frontend dev
<VITAS[m]> i do but i hate not working from scratch
<VITAS[m]> and its heaven compared to the olden days of netscape gold where we had to painted pages on cave walls
<DasSkelett[m]> 😄
<DasSkelett[m]> Woahhh, I think it's working now!
aradapilot has quit [Remote host closed the connection]
aradapilot has joined #spacedock
<VITAS[m]> my hearo!
<VITAS[m]> conquerer of crap CSS!
<DasSkelett[m]> If the image is no background image, and has height + width @ 100% it seems to work. Which sounds rather trivial now reading that.
<DasSkelett[m]> It's not exactly what I want, but at least working.
<VITAS[m]> thats the whole atitude that made SD what it is today
<VITAS[m]> :D
<VITAS[m]> "fuck it im feed up. good enough"
<DasSkelett[m]> For me it's "I'm no webdev, I can count the hours I worked with CSS on my hands, someone else can fix it better if he wants"
<DasSkelett[m]> But since no one else wanted to do it, y'all have to live with my amateur solution 😉
<DasSkelett[m]> What do you think of this?
<VITAS[m]> good
<VITAS[m]> the width of the gap between image and left side and image and top should be the same
<VITAS[m]> also between node to image and node to text
<VITAS[m]> you also could center the whole node and image contruct
<DasSkelett[m]> Yep. I think I'll have to rebase on top of my existing PR for that, because I need a vertical centering mechanism again.
<VITAS[m]> and so the box of pandora opens
<DasSkelett[m]> It would be cool if I could set the image's max height to the height of the right column...
<VITAS[m]> cant you?
<VITAS[m]> if its % image height you can use max-height on the div sourrunding only the image
<DasSkelett[m]> Nah, doesn't work :/
<DasSkelett[m]> If I set the height absolute, it works, but I can't get it to match the other column in CSS.
<DasSkelett[m]> I've got theoretically working js code, but it doesn't execute on page load... 😄
<DasSkelett[m]> Okay, just have to throw areound some flexes 💪
<DasSkelett[m]> Then it works
<DasSkelett[m]> Or not. Ah come on 😒
<VITAS[m]> why dont you test the css for the top in an seperate html file and then merge the css back into the site overwriting everytghing that you dont want?
<VITAS[m]> :D
<VITAS[m]> thats what i did
<DasSkelett[m]> I'm mostly manipulating directly in Firefox and merging back into the source code afterwards.
<VITAS[m]> yes thats how its done
<VITAS[m]> but the existing layers of css can make it hard to get predictable results
<DasSkelett[m]> That's true, you are in permanent priority war with Bootstrap
<VITAS[m]> yes i know
<VITAS[m]> thats why: do it froms cratch in a seperate file and then copy it over and overwrite what breaks it
<VITAS[m]> or...redo the whole css :D
<DasSkelett[m]> Sure! All in for that! Just give me a minute
<VITAS[m]> its your time
<VITAS[m]> i only hope we get what every youre doing finished and into prod
<VITAS[m]> would be a waste if not
<DasSkelett[m]> I'm going to do a PR of what I have now, and maybe someone else can figure out how to solve what's left. It's hopefully just asthetics that's not 100% as I want.
<VITAS[m]> im big on aestehtics :)
<VITAS[m]> but at the same time to lazy to redo the whole frontend
<VITAS[m]> (with a backend im not 100% happy with either)
<VITAS[m]> and RockyTV no! ;D
pacbard has quit [Read error: Connection reset by peer]
pacbard has joined #spacedock
DasSkelett[m] has quit [Quit: Idle timeout reached: 10800s]
<RockyTV> ?
<RockyTV> :P