User:Arskari/sandbox: Difference between revisions
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. |
|
Current Contest (8/1/23 – 8/21/2023) Theme: Eurobeat Last Contest (7/1/23 – 7/21/2023) Theme: Jungle music Winning entries: |
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 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.