User:Arskari/sandbox: Difference between revisions

From Online Sequencer Wiki
Jump to navigation Jump to search
No edit summary
(wikitext breakdown of main page prototype)
Line 119: Line 119:
* Navigation sections for useful articles
* Navigation sections for useful articles
* Link to forum/community sites?
* Link to forum/community sites?
* <s>Current community events bumper (Ongoing, Winner, ?)</s> Needs styling
* <s>Current community events bumper (Ongoing, Winner, ?)</s> Needs styling for contests
* <s>Online Sequencer updates/news</s> Started, needs more entries. Changelog documentation page?
* <s>Online Sequencer updates/news</s> Started, needs more entries. Changelog documentation page?
* Wiki users/article count?
* Wiki users/article count?
Line 125: Line 125:
** The bumpers are now a flex box containing two inline elements, each with a single table contained in itself. This handles scaling and wrapping.
** 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)
* Migrate sections currently on [[Main Page]] to their own articles (History, features)
====== Wikitext Breakdown ======
<pre>
__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.
|}
</pre>
This is the welcome banner, implemented as a wikitable. <nowiki>__NOTOC__</nowiki> prevents a table of contents from being generated, but a <nowiki>__FORCETOC__</nowiki> could be used after this if wanted for the rest of the main page.
<pre>
<div style="display: flex; flex-wrap: wrap; column-gap: .3%;">
</pre>
Opens a flexbox container to handle the two bumpers. <code>flex-wrap: wrap</code> enables wrapping at narrow screen sizes, such as shrinking a window or on a mobile device. <code>column-gap</code> adds space between items if on the same row.
<pre>
<div style="display:inline; margin-left: auto; margin-right: auto; margin-bottom: .3%; flex-grow: 1; ">
</pre>
Creates an inline element inside the flexbox. <code>flex-grow</code> causes the sections to stretch to fill out all possible width; having both at 1 makes them share the width.
<pre>
{|class="wikitable" style="width: 100%; height: 100%; border-spacing: 5px; margin-top: 0px;"
|-
| style="vertical-align: top;" |
</pre>
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. <code>vertical-align</code> must be applied to the row and makes sure content is aligned to the top, rather than centering by default.
<pre>
{|class="wikitable" style="width: 100%; border-spacing: 5px; margin-top: 3px;"
!style="color:#FFFFFF; background:#254d88; text-align: left;"|'''Getting Started''' <!-- LINK ARTICLES HERE -->
|}
</pre>
Banner using a table for color and styling.
<pre>
* [[Features]]
* [[Instruments]]
* [[Equalizer]]
|}
</div></pre>Content in a list, then close the table, and finally close the inline.<pre><div style="display:inline; margin-left: auto; margin-right: auto; margin-bottom: .3%; flex-grow: 1;">
</pre>Second inline element.<pre>
{|class="wikitable" style="width: 100%; height: 100%; border-spacing: 5px; margin-top: 0px;"
|-
| style="vertical-align: top;" |
</pre>Second table.<pre>
{|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 -->
|}
</pre>Another banner.<pre>
* '''[https://test.onlinesequencer.net/ test.onlinesequencer.net]''' : Synthesizer instrument added
* Sustained smooth synth added, old sequences not affected
</pre>Content in a list.<pre>
{|class="wikitable" style="width: 100%; border-spacing: 5px;"
!style="color:#FFFFFF; background:#254d88; text-align: left";|'''Community''' <!-- For contests, mod applications, other community stuff -->
|}
</pre>Another banner.<pre>
* [https://test.onlinesequencer.net/forum/ Online Sequencer Forum]
</pre>Link to the forum.<pre>
----
[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>
</pre>Remainder of the table. <code>----</code> creates a horizontal line to separate sections. Listing items by <code>#</code> creates a numbered list. Close the table and inline.<pre>
</div>
</pre>Close the flexbox.

Revision as of 15:27, 3 August 2023

Instrument Options visual

Instrument

Name of the currently selected instrument

Lock

Toggles the instrument lock, which prevents the current instrument from being placed or selected.

Copy

Copies the settings of the current instrument to the clipboard as a string. The settings string is not instrument exclusive.

Load

Reads the contents of the clipboard and parses it to settings, if possible.

Clone

Creates a Clone of the current instrument and its settings.

Delete

Deletes a cloned instance of an instrument.

Mute

Mutes the current instrument.

Solo

Mutes all other instruments.

Reset

Resets all options to their default values.

Volume

Slider that adjusts the instrument's global volume, before note volume or sequence volume.

Delay

Toggles the delay effect.

Panning

Slider that adjusts the instrument's panning, from 100% left to 100% right.

Detune

Set the instrument's detune value, from -1200 (1 octave down) to 1200 (1 octave up). Shift click for finer control.

Reverb

Select the reverb effect to use.

Reverb volume

Slider that controls the amount of reverb for the instrument.

Distort

Select the distort effect to use.

Distort volume

Slider that controls the amount of distort for the instrument.

Equalizer

Toggle that enables equalizer functions.

High EQ

Slider controlling the high EQ pass.

Mid EQ

Slider controlling the mid EQ pass.

Low EQ

Slider controlling the low EQ pass.

this is going to get real ugly to edit if more options are added

Might be useful, but it's really just for eyecandy. Should definitely be added to a template first if it's going to be added.




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
Community

Current Contest (8/1/23 – 8/21/2023)

Theme: Eurobeat


Last Contest (7/1/23 – 7/21/2023)

Theme: Jungle music

Winning entries:

  1. jungle jammin' by Mr. Magicman
  2. I was inspired by traditional African music by Lopyt
  3. Black Mamba by JOwen
End Draft

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:

  1. [http://onlinesequencer.net/3509773 jungle jammin'] by [https://onlinesequencer.net/members/26737 Mr. Magicman]
  2. [https://onlinesequencer.net/3519882 I was inspired by traditional African music] by [https://onlinesequencer.net/members/14215 Lopyt]
  3. [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.