Layout code is garbage

[TeoTwawki]

I made a good mess of it, needs redone.

This was what I tried to do:

This was before planned features were settled on.

In addition to better code, alternative layout suggestions are welcome.

[RavenTactics]

@TeoTwawki I spent some time working on a layout option for your consideration.

1 of 2

2 of 2

If you like it, I'll work on some fluff and getting in game images to fill it out some more. Also I think that I have it all set up in GitHub desktop to be able to push a branch. But I'm not sure if I can do that right now.

What to expect

Overhaul of the index file based on the template Telephasic by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

New folders added: images, assests.

• Assets folder includes: CSS, Fonts, JS, SaSS folders that came with template. Images folder includes: current template image files and new fav.ico

[TeoTwawki]

JS...

I want as much of the site as possible to work without requiring the users JavaScript enabled and so have been avoiding making things dependent on it. auto refreshing the online player counts and who's online info are a good use of JS. making the page layout require it is not.

Other than that, pull requests welcome https://github.com/Demiurge-DSP/demiurge-website.git

[RavenTactics]

For this template, there are a few files in the js folder (that came with it) and most of them look to be related to mobile and desktop scaling, 2 jquerry files, and a folder that deals with people using ie (lawls). I am by no means an expert in web or JS so this may be OK or exactly what you wanted to avoid.

The zip is about 1.2 mbs total (less when I nuke some of the crappy defalut photos) and attached for your review and final yes/no before I do anything further. Web2.0-Raven.zip

[TeoTwawki]

related to mobile and desktop scaling

Sounds like something I want to avoid. However, we may be able to rework just that part and use the rest. Another problem I am not JS proficient, so someone else would need to check into it.

Our current crappy layout I tried to have css handle the scaling, and tried to not use frames. Since I suck at that too it resulted in some elements of the site shifting underneath or beside others that they weren't meant to on some displays but I didn't realize at first because on my desktop and my cellphone for 3 browsers total, it looked fine.

[davismj]

It would take time, and it would probably be easier to build something from scratch honestly.

If someone can make some good mock ups I can look at it. Rather than getting it all working and perfect, I think dreaming up the best ffxi private server website would look like and sketching it on paper is the hard part. If you could get that worked out, Raven, it would be pretty easy to build it.

The PHP yes JavaScript no requirement has scared me off from taking it and running with it.

[RavenTactics]

This isn't anything (much) more than Teo's original layout. But this was my vision for 2.0 with some tweaks cuz I'm not sure how to really explain what I was looking to do in a picture.

It adds some extra sections however so more work to update/maintain vs Teo's layout mockup above.

Header (Red)

• I like the server online/offline status, maybe even adding a lobby status, but that looks like PHP and not web coding so a section for it and the coding for the PHP can be added later?
  • Number of players online also can be pulled with PHP it appears. So just need a section for this as well.
• Logo or just something that says hey you are on the demiurge website.

Navbar (Orange)

• Some form of menu or links should be added and can be expanded on.
• 1+ Future Feater sections for things that are added later such as, account log in from site, bazaar search, etc.
• Another cool feature will be when we can add crafting levels and messages in a limited format (almost like a tweet or so) for wtb/wts and we can self edit it based on our character and maybe after you authenticate on the website or just a list of recent shouts (or whatever it ends up getting called. See https://github.com/Demiurge-DSP/demiurge-website/issues/6 for ideas of what may appear.
• Other features as they are dreamed up can be added into the nav bar.

Main (Grey)

• News/Announcements about whatever is going on with the server. Events, Maintenance, the sky is the limit.
• Online status. Who is online. With/Without refresh button. Prob a call to server so might end up as PHP or something else.

Hero/Leaderbord whatever you want to call it. (Pink)

• The most optional item of the bunch.
• I envisioned this to be a call to action section of the site. So a heading, an image and a short blurb.
• This is what is fancy and special about this server vs others as well as the big things like Server Firsts!

Footer (White)

• Typical footer stuff like links to social media links, discord, DSP links, etc.
• Perhaps the general box (details) from http://www.pyogenes.com/ffxi/timer/v2.html. It'll help folks know when JP Midnight is, Server & IRL Time and added addtions such as Conquest Countdown/Current Nation places. Some sort of script is likely needed to add this. Maybe PHP or JS if approved.
• Copyright and junk

My Notepad list.

I have no clue if this also helps anyone else, but this is my notepad list for the project and phases I was going with. We are back at Phase 1.

1. Corn field.

   • Build Index, CSS, Folder hierarchy. (Root Folder > index/readme/roobot base files. > Folders: Images, Assets, Scripts, etc.)
   • Design Must! Be visible on PC and Mobile via responsive/reactive.
   • Graphics and Short Announcement text to support the images that are added.

2. Website Design Doc added to the project. Maybe a wiki page to host this?

   • Used to explain where X.Y. Z features are located,
   • Where to add files such as scripts/images.
   • Any naming conventions to follow with your work for consistency
   • Core elements such as hex values for color

3. Web 2.0 index soft launch.

   • Open to testing/bugs before any announcements are made.

4. Script building additions from other code languages that the index page will need to display.

   • Online/Status/login other stuff that someone more knowledgeable can build out.

[TeoTwawki]

@davismj & @RavenTactics Just to clarify my stance on JS is that we should save it for the things that really need it to be real time dynamic in any reasonable way and leave the "core" of the site viewable without it. I don't feel the basic layout should be one of those is all. Think of JS as our mage subjob giving us refresh and convert.

The current status and online count are in php because that's the only thing I knew how to do it as. It has the nasty drawback of making you manually refresh the page. This is one of those things that I'd be ok with someone moving to JS and leaving behind a warning (or even falling back to the old version) for ppl who haven't whitelisted us in noscript.

tl;dr if it can't be done without JS you can do it in JS

[davismj]

The current status and online count are in php because that's the only thing I knew how to do it as.

Do you have the php scripts already?

I don't feel the basic layout should be one of those is all.

I'm a JS developer and I agree with you. People losing their minds JSing all the things.

[TeoTwawki]

see modules subdir, I stupidly named it that when I thought I'd compartmentalize all the stuff and things

[RavenTactics]

It makes sense. Only prob (for me) is that most of the examples on other XI sites all seem to have JS. Which is normal given that JS was a huge thing while this game was in the early years. So I just need to keep looking for other examples to help out with some of the other areas of the site.

[TeoTwawki]

I rewrote the entire thing today after trying to port content to the newer set and seeing it all go to hell on me. Only have to adjust some font sizing for mobile users and the layout problems are taken care of finally.

[whasf]

still garbage

[TeoTwawki]

But there's at least 50% less dog doo :hankey: in my site this time.