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

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:

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.