Notes
Comments, clarification and additional info about how I intend things to be.
Page list here.
Structure
- The subfolders in the
css
directory represent different site schemes, and are split up in
desktop
and mobile
versions each.
General
- In the user menu at the top, the "PM" and "Notice" submenus should only appear when there are new items
to view, and never show more than three entries.
- See the notes on usercp.php for a list of notices.
- The site logo is just a placeholder for now.
- The box below the ad could probably serve the same purpose as the ropebox (i.e. display the tip of the
day), but we need to keep in mind it's limited to one line. Also, it'd probably a good place for big fat
countdowns like C3 STARTING IN 2 DAYS.
- The icon next to a heading changes depending on what page it's for, and is controlled by its CSS class.
Use
.site
for SMWC-related pages, and .smw
/ .yi
/
.smas
/ .sm64
/ .smrpg
/ .nsmbwii
for sections for
their respective games.
- Headings for submission titles also have icons controlled through classes. The game classes
mentioned above can be combined with
.hack
/ .tool
/ .graphic
/
.music
/ .block
/ .sprite
/ .patch
to provide the
desired icon (example: <h3 class="submission smas music">
). Lots of icons for the
more modern games are just placeholders though. :<
- Tab views obviously require JavaScript. If it's disabled, only the first tab content will show and no
other tabs will be clickable. To provide a fallback for important tab views, add the
.show-if-no-js
class to the .tab-view
box - that way, if JavaScript is
disabled, all tab contents will be visible at once.
- CuteEdit will have to be modified to support inline spoilers and Youtube tags, as well as look good on
mobile screens. (Kieran?)
- I was able to implement neat dropdown menus myself using a jQuery plugin, but, I failed to implement
multi-select boxes (for tags etc.), so in this mockup they'll just be represented as plain textareas. I
think properly implementing these boxes is better off being the coders' job, since there's a large
amount of data behind it (all the tags, all the users) that I'm not sure how to handle. Just keep in
mind that wherever I envision a multi-select box I will say so in the notes.
- The "Featured Content" box auto-cycles through its content, switching every 7 seconds, and stops when
the user clicks on a tab themself. If the cycling is a good idea, I'm not sure.
- We need to figure out what to display in the "Featured Content" box. Should every section have a
"featured" flag for their submission? I don't think so, but then again, what content should go
in that box? I was thinking of something like "random selection of highest-rated content",
maybe.
- Announcements include Caffie Radio info and a C3 project showcase. That spot should also
definitely be used to prevent alarmist threads during site changes, such as "why is everyone's
name rainbows?"
- The message at the top has to be left-aligned since otherwise it'd be hidden from view on mobile
screens. (The desktop version has a max-width of 960 pixels, and having the text centered or
right-aligned means you'd have to scroll right to see it. Not ideal.)
- The "burger menu" icon next to the username in the top right corner turns yellow when there are new PMs
or notices. This is done by adding the
.new
class to the #user-menu-button
link.
- We probably need to figure out where to put the ad in the mobile version. Below the banner seems like
the obvious solution, but also like a waste of precious space.
- Clicking on "Watch Thread" in the top right adds the thread to your watch list. The link text should be
different on threads you're already watching. ("Unwatch Thread"?)
- The only staff action directly accessible from the thread page is "Close
[/open]
thread". I felt the other actions (moving, trashing, stickying) are rarely used and would do little but
cause clutter on the thread page - I've moved them to the "edit the first
post" page instead.
- Posts with a layout have the
.has-layout
class applied to the .content
divs.
- The "Report" link at the top of each post is used to report specific posts to the staff. I imagine
clicking them will open a JavaScript prompt saying something like "enter reason here", and the reports
will end up in the Staff Control Panel.
- The hammer icon in the bottom left corner of each post toggles the QP menu. Needless to say, it's only
visible to staff members.
- When the target is a staff member, instead of the "time ban" and "forum ban" links there should be one
that says "Kamikaze".
- Large images no longer stretch the page! Instead, they shrink to fit the post box's size. Additionally,
images that shrunk are automatically turned into a link leading to the full image. (Although that won't
always work? No clue why.)
- The following elements are disabled in the mobile version because a) they're an unnecessary distraction
and b) they can still be viewed on a user's profile if desired:
- Signatures
- Layouts
- Custom titles
- "Location" fields
- Ranksets
- Everything to the right of the avatar has a fixed left margin of 58 pixels. Of course, when a user has
no avatar, that would look ugly (not to mention waste space). To remove the margin in boxes with no
avatars, remember to add the
.no-avatar
class to the .topbar
div.
- The "Staff options" tab is only visible to staff members. (duh)
- The "Move thread" dropdown menu should only be there when editing the first post of a thread. (I put it
on there just to demonstrate what it looks like.)
- Clicking "Preview Thread" will lead to a page that looks the same, except with a preview of the post at
the bottom. (Also the poll, if there is one.)
- I've never understood why we needed both news posts and an "Announcements" forum, so the way I imagine
things, news posts should be equivalent to threads. Making a news post is the same as posting a thread
in the "Announcements" forum, and the newest threads from there will appear in the "Recent News" box on
the main page. Instead of a comment system for news posts, people would just reply to the threads like
usual.
- Stickied threads correspond to stickied news posts, and are denoted on the main page by a "Sticky:" in
front of the title.
- News posts can be marked as "internal", which means they won't be shown on the main page unless you're
logged in. (They will still appear in the Announcements forum though.) This is for news like "Quick note
on replying to spam", "Last year's C3 Trophies finally handed out", or "Regarding drama and staff
complaints", which only matter to registered users, and might confuse or even put off the rest.
- There's little differences between this and the "new thread" page. The "Importance" dropdown menu is
removed, and there's an extra "mark as internal" checkbox, but other than that it's pretty much the
same. (Not even sure why I bothered making this page for the mockup.)
- The post box is no different from the one on the thread page, except the line at the top says "sent"
instead of "posted" and has different action links.
- The textarea in the quick reply box is pre-filled with the PM text enclosed in a quote tag (just like
the old SMWC does it).
- Since there's no subject field in the quick reply box, the subject would just be automatically set to
"Re: [whatever]" (or "Re (n): [whatever]").
- The "recipient(s)" field is supposed to be a user multi-select box. (Multiple recipients are cool,
right?)
- There's an "F.A.Q." link for each game in the menu, and clicking them should bring you to the
corresponding section of the FAQ.
- The "new blog entry" button is only visible if it's your own blog page you're viewing. (Who would've
thought?)
- The "edit" and "delete" links are visible to both the author and staff members. (Or perhaps staff
members should just see the "delete" link?)
- Notice how the icon next to the heading is the SMW icon now. (See the "General" notes above.)
- The "Quick Filter" field should probably trigger some AJAX that auto-updates the list below. (Also,
focusing it with Ctrl-F would be a good idea, assuming users can turn that feature off.)
- I'm not sure if clicking the "gallery" link should load a separate page or just change the view
inline.
-
It's pretty much inevitable to leave some information out in the submission list. (One can always check
the submission page if needed.) I chose to keep date, author, size and number of downloads, though
that's debatable.
- In general, clicking on a tag (no matter on what page) should lead to the corresponding section page
with the filter pre-set to that tag.
- The average rating should be displayed as stars as well, not just as a number. I think the best way to
display fractions is to use a single image that's dynamically generated.
- I moved the "your rating" part to the bottom, near the download button.
- After you've rated, the rating box should show the corresponding number of stars if you're not hovering
over it (just like it does now).
- The "remove rating" link is only visible after rating.
- I think I'll leave the screenshot handling (slideshow functionality etc.) to the coders.
- The "nominate for featured status" button shouldn't be there when the hack is featured.
- I'm unsure about what to do with the "mark as played" button when you've clicked it. (Either make it
disappear forever or change it into an "undo" button? I'm leaning towards the latter.)
- For reviews, I'm reusing the
.blog.post
class defined in profile.css. Not the most
semantically pleasant solution, but eh, it works.
- For hacks, ratings and reviews are linked - the rating is publicly shown in the review box, and deleting
a review also removes the corresponding rating.
- For profile comments, I'm reusing the
#comments
ID defined in section.css.
- The pagination on profile comments should probably be handled via JavaScript instead of reloading the
entire page. (The same goes for comments on submissions, incidentally.) I'm thinking five comments per
page.
- I think you should be able to delete comments on your own profile. (Though not edit them.)
- For convenience, the "collapsed/expended" status of the boxes should be remembered across sessions.
(Like the forums do.)
- The tab view in the "submission guidelines" box isn't fleshed out. I trust you know what to do.
- Obviously, the deletion checkbox, the "delete selected link" and the "upload file" button should only
appear if it's your own file bin you're viewing.
- There is no equivalent of
pm.css
in the mobile version — instead, the PM list is
handled by filebin.css
because the two are virtually identical on mobile.
- The "authors" and "tags" fields should be those multi-select AJAX fields I talked about earlier. (Same
goes for mobile.)
- Maybe, on this page, the tags in the toggle-able list should not lead to a "all submissions with this
tag" page when clicked, but instead add that tag to the "tag" field? That seems more intuitive here.
- Just like rules.php, the tab view on this page isn't fleshed out.
- User selection, too, should be a multi-select/AJAX/whatever field.
- The same kind of voting page should probably apply to the Mosts as well.
- Is a "manage voting categories" page in the staff CP necessary? If so, how should it be handled?
- The "staff-related information" tab, as well as the "custom title" and "custom color" fields, should
only be visible to staff members. (blasphemy amirite)
-
Types of notices, as far as I can tell:
- New post in a thread you're watching
- Your name has been changed
- Your <submission> has been removed/accepted
- Your <submission> is being moderated
- Warning (following a report)
- You have been banned
- Your thread has been moved/trashed
- Happy birthday!
- You received a badge
- Your hack has been featured
- New review for your hack!
- New comment on your <submission>
- (staff-only) New submission in your section
- (staff-only) It's been a week since you claimed <submission> for moderation
- (staff-only) New post/user reported
- (staff-only) New IP ban appeal
- (staff-only) New <thing (review etc.?)> waiting for approval
- (admin-only) New staff feedback
-
For the future, we may or may not want to consider letting the user choose which notices they want to
get. I didn't account for it now, though.
- In the todo list, I imagine that items disappear from the list once they're marked as done.
- In the "reported users & posts" tab, maybe the "warn" and "ban" links should bring up JS popups asking
you to enter some text (which will appear in the notice the warned/banned user gets).
- The "tags" page could potentially be extended to cover all section-related settings (such as submission
guidelines). In the future, I mean. (Or hey, maybe staff could edit the "all tags" page directly? All
something to consider for later, I'd say.)
- Not sure if the "feedback" page is necessary; I've never seen the admin panel.
- I'm thinking we could have a whole forum dedicated to the wiki, with each thread being linked to one
article. The "discuss" link on the wiki page should lead to its corresponding thread (or create one if
it doesn't already exist).
- Unlike the desktop version, you can't select which two versions you want to compare — instead, you
can only compare the selected version to the previous one. Looks like the mobile Wikipedia does the
same.
- This page is especially half-assed. I couldn't figure out a way how to represent side-by-side comparison
on mobile (not without too much work anyway), so I left it the same as in the desktop version, that is,
two columns. It's pretty narrow, but eh fine whatever it does the job.