Domain update on July 2 Saturday between UTC 8:00 and 20:00
(drawings made during this time may potentially be lost)
WARNING
This Strip is Not Safe For Work!
WARNING
Possibly naughty bits ahead!
Scroll down at your own risk!
Strip ID: 1927 Created: 2023-10-30 19:08:36 Last reply: 2023-11-03 01:42:03 Comments: 25
Profile Page Layout
SHOW FRAMES

PREV
XXX
NEXT
Comments
Okay so I was initially going to just provide a sketch of a new profile layout that I'd consider to be nicer than we currently have.
However, considering how you're already preoccupied making the Scraps feature, I figured I'd spend the weekend learning HTML and trying my own hand at making it work, to see if it's even possible!
So here's what I ended up with
[PROFILE PROTOTYPE](https://phoneychutney.neocities.org/)
It's definitely not something you can drag and drop onto the real site, but it has all the layout coding hurdles handled!
It should also work on mobile!
That's very impressive and I would agree that it definitely has some greater advantages over our current setup! Very well done!! I like the sub-menus particularly! Skillful works!!!!!
Thank you! Yeah that sub menus were a big part of why I decided to try to make this cause I wasn't sure it'd work, but I figured they'd really help mitigate the feeling that you need to go through a lot of pages to get somewhere!
good stuff 👍
i'm only not sure about putting friends in a pop-up 🤔
what if I place them in their own tab and make that the default tab when you open a profile? 🤔
(also sorry about having so much pages 😔 - the reason for that was that early on everything was planned around making the site to be archiveable as easily as possible)
Technically, the friends and all the others actually do already exist as separate pages if you either middle-click or right-click and choose "Open in New Tab" in case you want to access the old style view
Tho right now it shows the bare bones version that only has the parts relevant for the iframe
I'm trying to work out how to make it so the page shows up normal when opened in its own window, but has the simplified view when it's opened within an iframe.
{EDIT: I seem to have gotten that working with the friends tab [here](https://phoneychutney.neocities.org/usertest)!}
In short, it SHOULD work pretty much the same on the backend and still has all the separate pages + friends page, while giving the impression of being all on one page!
oh wait I think I misunderstood (maybe?)
so the friends tab in this case should bring up the other user profile?
I think it's that unfriend button that is confusing me 🤔
What I meant is that if you middle-click on the button that brings up the popup with the friends list, it'll instead open it as a separate page instead
Also this is unrelated, but I'm not making another thread for it, plus I did work this out as part of testing my design.
I'm not sure if you've noticed on this site, but even when there isn't enough content on the page to fill out your window, you'll still end up with the footer being off-screen.
Something about you using 100% viewport height for the main body of the page to force it down to the bottom of the page.
Anyhow, here's how to fix that.
First, you need to either remove padding on .foot, or swap it out for padding-top. Otherwise it'll cause problem later, and the padding in other directions besides top isn't doing anything useful anyway.
... okay now that I was double-checking the code, I can see you're already trying to implement the code.
The flex:1 needs to be on MainX, the BodyX you've made is nested too far in. You need the Flex, Flex-Direction, and Min-Height on the Body (yes I know the body already has 100% min-height, but for whatever reason, it doesn't work, it needs 100vh)
oh that is by design
I put the not so important parts on the footer
and it's not fixed to the screen at all
I don't mean it being fixed to the bottom like the header is fixed to the top, I just mean it seems strange to force an empty page to still take up more space than your window!
To illustrate, I mean the difference between [this](https://phoneychutney.neocities.org/footer1) and [this](https://phoneychutney.neocities.org/footer2)
shush 🤫 (as I said it's by design - this makes the complain button harder to find 🤫 )
Alright, what if you just remove the Complain Here button from the footer? Then you have no reason not to fix it, plus it'll make it even harder to find the page!
I really cannot tell if you're kidding or you're actually saying that it's deliberately broken.
Okay, it can be for now.
Back to the main topic, do you have more thoughts on the profile layout? I have more more ideas I want to test in terms of how to group Strips, Panels, etc, but I'm pretty confident in the overall design.
Did you get clarity in terms of how I'm handling the friends list? The main reason I set it aside as it's own thing is cause it didn't intuitively relate to the other categories, and I'd rather draw more attention towards the panels/strips, the main feature of the site.
If you don't like the popup nature of the friends list, I can remove that and make it only open it as a full window. I just figured it would be nice to have both as an option!
I think I should be more pragmatic about this.. 🤔
so for now I'll just rearrange things to look like in your version
and the friends will be on the seperate tab at first because that will be an easier change
and then we will see (so we can put it in a pop-up then if you guys prefer it that way)
Sounds pretty good to me!
If you want, I can do a write-up on how all the placement is achieved, tho you can probably just poke at the code and work it out yourself
I experimented around (and made things considerably worse)
please check if this is a step in the right direction (this goes for everyone) 🤔
I couldn't get this iframe business to work yet (html is all fun and games until you add php to the mix)
and flex just doesn't seem to want to behave the same way as in your page so the user info is now in the header of the profile (last active and level)
edit: and I just noticed I forgot to readd the star counter (oops)
edit2: readded star counter - made things even worse
I actually kinda like your solution for the star placement more than how it is on my site! Main thing would be getting it to play nice with mobile. The fixed coordinates stop working once the avatar starts scaling down.
I'll try to take a deeper inspect into it once I get home.
Definitely hope you can get iframes to work, though. Having picking a page reload the whole page somewhat defeats what my design was going for
it seems there is no easy solution - there will be probably some javascript shenanigans needed to get it to work
(and if only the page scrolling is the problem then we might as well just add a hack for that instead - would be probably faster at least 🤔)
edit: added a quick hack for it (the scroll thing)
but now I'm not sure if it's any better 🤔
It might actually be worse since it jumps around even more now! Are the iframes simply not loading in or what exactly is breaking?
I did some more testing, and in addition to the star not working on mobile, it seems to go offset once you go beyond 4 digit numbers, which you're over a third of the way to!
I made a streamlined version of my design to use a [cheatsheet](https://phoneychutney.neocities.org/1)
It's not ideal on mobile since it no longer has elements on the left to balance it out, but it should work.
Basically, instead of having a div with 100px padding like you do now, which also causes problems on mobile, and also seems to break on long names and descriptions, you can have a flex div that's a column, with 3 elements inside, stars, name+desc, and then the last I put the join/last seen/level in. Span might not work for them tho, I had issues with it earlier with the background overlapping with the text
I simply need to rethink how the navigation works
and somehow resize the frames (to not get double scrolling)
i'm just not in the right headspace for it and bungling about
(with the php framework the site uses I broke down pages to 3 or more parts and need to untangle my mess first so a page has standalone css and can be put in a frame )
I was actually gonna ask about it earlier what the heck is going on with the CSS on this site. I checked the stylesheet.css and it only declared the font and nothing else?
There seems to just be 8 different [style] sections on the page rules/classes just scattered across them.
Is this some PHP thing?
Also it's okay if you need time! I'll try not to be a constant nuisance
the css is stored in the page code itself because there were problems with caching (browsers refused to update them if i changed them and insisted on using an older version)
another reason is the php - I built all pages using a header-body-footer logic and they all have seperate tags for it (so at least 3 sections for each page)
and also some pages are just in need of a cleanup (e.g. the ones that the strips and the forum posts use)
(and of course it's also web page code written by a c++ coder's logic)
I found a new way to hack the scrolling
how is it now?
(to reduce blinking it's seems I would need to do some async page load instead because web tech is still in the dark ages
according to my experiments with iframe it still blinks just in a smaller area)
o.O Oh wow this is looking great!I love the list that shows passing and mentions.