User:Arskari/sandbox

WIP Main Page draft

Welcome to the Online Sequencer Wiki, a wiki for using and navigating Online Sequencer. Online Sequencer is a web-based music sequencer that allows users to create music saved online or on their computer and share it with other users.

Getting Started Features Instruments Instrument Options Equalizer

Online Sequencer News test.onlinesequencer.net : Synthesizer instrument added Sequence information moved to sidebar, sequence descriptions added Sustained smooth synth added, old sequences not affected Community Online Sequencer Forum Current Contest (9/1/23 – 9/21/2023) Winners announced on 9/30! Theme: Alternative Rock Last Contest (8/1/23 – 8/21/2023) Theme: Eurobeat Winning entries: blazing heart!! - vocal by LucentTear Power Trip by Mr. Magicman Radiance -End of The Universe - by N4T Pi-canto by Julesvpraag

End Draft

Deploy-ready version on User:Arskari/main page prototype

Eye candy, but for something actually important this time. The main page, right now, is a general overview of the site which makes sense, but doesn't really help with getting around the wiki itself. Userspace pages aren't private, so contribute if you want.

TODO:

• Navigation sections for useful articles
• Link to forum/community sites?
• Current community events bumper (Ongoing, Winner, ?) Needs styling for contests
• Online Sequencer updates/news Started, needs more entries. Changelog documentation page?
• Wiki users/article count?
• Using a single table for both bumpers causes wrapping issues on narrow windows/mobile, hence the div tags. Need a way to set them to the same height each.
  • The bumpers are now a flex box containing two inline elements, each with a single table contained in itself. This handles scaling and wrapping.
• Migrate sections currently on Main Page to their own articles (History, features)

Wikitext Breakdown

__NOTOC__
{|class="wikitable" style="width: 100%; border-spacing: 5px; text-align: center; margin-bottom: .3%;"
| <span style="font-size:125%;">Welcome to the '''{{SITENAME}}''', a wiki for using and navigating [https://onlinesequencer.net/ Online Sequencer].</span>
'''Online Sequencer''' is a web-based music [[wikipedia:Music_sequencer|sequencer]] that allows users to create music saved online or on their computer and share it with other users.
|}

This is the welcome banner, implemented as a wikitable. __NOTOC__ prevents a table of contents from being generated, but a __FORCETOC__ could be used after this if wanted for the rest of the main page.

<div style="display: flex; flex-wrap: wrap; column-gap: .3%;">

Opens a flexbox container to handle the two bumpers. flex-wrap: wrap enables wrapping at narrow screen sizes, such as shrinking a window or on a mobile device. column-gap adds space between items if on the same row.

<div style="display:inline; margin-left: auto; margin-right: auto; margin-bottom: .3%; flex-grow: 1; ">

Creates an inline element inside the flexbox. flex-grow causes the sections to stretch to fill out all possible width; having both at 1 makes them share the width.

{|class="wikitable" style="width: 100%; height: 100%; border-spacing: 5px; margin-top: 0px;"
|-
| style="vertical-align: top;" |

Creates a table inside the inline element, which is what is actually seen. Width and height are set to take up all space in their container. vertical-align must be applied to the row and makes sure content is aligned to the top, rather than centering by default.

{|class="wikitable" style="width: 100%; border-spacing: 5px; margin-top: 3px;"
!style="color:#FFFFFF; background:#254d88; text-align: left;"|'''Getting Started''' <!-- LINK ARTICLES HERE -->
|}

Banner using a table for color and styling.

* [[Features]]
* [[Instruments]]
* [[Equalizer]]
|}
</div>

Content in a list, then close the table, and finally close the inline.

<div style="display:inline; margin-left: auto; margin-right: auto; margin-bottom: .3%; flex-grow: 1;">

Second inline element.

{|class="wikitable" style="width: 100%; height: 100%; border-spacing: 5px; margin-top: 0px;"
|-
| style="vertical-align: top;" |

Second table.

{|class="wikitable" style="width: 100%; border-spacing: 5px; margin-top: 3px;"
!style="color:#FFFFFF; background:#254d88; text-align: left;"|'''Online Sequencer News''' <!-- For news about the site itself -->
|}

Another banner.

'''[https://test.onlinesequencer.net/ test.onlinesequencer.net]''' : Synthesizer instrument added
Sustained smooth synth added, old sequences not affected

Content in a list.

{|class="wikitable" style="width: 100%; border-spacing: 5px;"
!style="color:#FFFFFF; background:#254d88; text-align: left";|'''Community''' <!-- For contests, mod applications, other community stuff -->
|}

Another banner.

[https://test.onlinesequencer.net/forum/ Online Sequencer Forum]

Link to the forum.

----
[https://onlinesequencer.net/forum/thread-8016.html Current Contest] (8/1/23 – 8/21/2023)
Theme: Eurobeat
----
[https://onlinesequencer.net/forum/thread-7942.html Last Contest] (7/1/23 – 7/21/2023)
Theme: Jungle music
Winning entries:

[http://onlinesequencer.net/3509773 jungle jammin'] by [https://onlinesequencer.net/members/26737 Mr. Magicman]
[https://onlinesequencer.net/3519882 I was inspired by traditional African music] by [https://onlinesequencer.net/members/14215 Lopyt]
[https://onlinesequencer.net/3498969 Black Mamba] by [https://onlinesequencer.net/members/36102 JOwen]
|}
</div>

Remainder of the table. ---- creates a horizontal line to separate sections. Listing items by # creates a numbered list. Close the table and inline.

</div>

Close the flexbox.

Instrument Panel Fix

overflow-y: auto on the instrument panel creates a scrollbar that takes up width and makes the instruments arrange into rows of three instead of four like before.

This is a quick tampermonkey script that adds some extra width to the panel to fix this.