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. |
|
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 contestsOnline Sequencer updates/newsStarted, 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.