Added visuals for spoilers

diff --git a/com.woltlab.wcf/templates/spoilerBBCodeTag.tpl b/com.woltlab.wcf/templates/spoilerBBCodeTag.tpl
index 7785dc3b2c5997ee220ff4bd6580dffae02fc665..3230c2431cfbf1b4cde667cc8909a545c48a8028 100644 (file)
--- a/com.woltlab.wcf/templates/spoilerBBCodeTag.tpl
+++ b/com.woltlab.wcf/templates/spoilerBBCodeTag.tpl
@@ -1,7 +1,7 @@
 <!-- begin:parser_nonessential -->
 <div class="spoilerBox jsSpoilerBox">
        <header class="jsOnly">
-               <a class="button jsSpoilerToggle"{if $buttonTitle} data-has-custom-label="true"{/if}>{if $buttonTitle}{@$buttonTitle}{else}{lang}wcf.bbcode.spoiler.show{/lang}{/if}</a>
+               <a class="button small jsSpoilerToggle"{if $buttonTitle} data-has-custom-label="true"{/if}>{if $buttonTitle}{@$buttonTitle}{else}{lang}wcf.bbcode.spoiler.show{/lang}{/if}</a>
        </header>
        
        <div style="display: none">
@@ -12,32 +12,23 @@
 {if !$__wcfSpoilerBBCodeJavaScript|isset}
        {assign var='__wcfSpoilerBBCodeJavaScript' value=true}
        <script data-relocate="true">
-               //<![CDATA[
-               $(function() {
-                       $('.jsSpoilerBox').each(function(index, spoilerBox) {
-                               var $toggle = $(spoilerBox).removeClass('jsSpoilerBox').find('> header > .jsSpoilerToggle');
-                               $toggle.click(function() {
-                                       $toggle.toggleClass('active').parent().next().slideToggle({
-                                               complete: function() {
-                                                       var $container = $(this);
-                                                       if ($container.is(':visible')) {
-                                                               WCF.DOMNodeInsertedHandler.execute();
-                                                       }
-                                                       
-                                                       if (!$toggle.data('hasCustomLabel')) {
-                                                               if ($container.is(':visible')) {
-                                                                       $toggle.text('{lang}wcf.bbcode.spoiler.hide{/lang}');
-                                                               }
-                                                               else {
-                                                                       $toggle.text('{lang}wcf.bbcode.spoiler.show{/lang}');
-                                                               }
-                                                       }
-                                               }
-                                       });
-                               });
+               elBySelAll('.jsSpoilerBox', null, function(spoilerBox) {
+                       spoilerBox.classList.remove('jsSpoilerBox');
+                       
+                       var toggleButton = elBySel('.jsSpoilerToggle', spoilerBox);
+                       var container = toggleButton.parentNode.nextElementSibling;
+                       
+                       toggleButton.addEventListener(WCF_CLICK_EVENT, function(event) {
+                               event.preventDefault();
+                               
+                               toggleButton.classList.toggle('active');
+                               window[(toggleButton.classList.contains('active') ? 'elShow' : 'elHide')](container);
+                               
+                               if (!elDataBool(toggleButton, 'has-custom-label')) {
+                                       toggleButton.textContent = (toggleButton.classList.contains('active')) ? '{lang}wcf.bbcode.spoiler.hide{/lang}' : '{lang}wcf.bbcode.spoiler.show{/lang}';
+                               }
                        });
                });
-               //]]>
        </script>
 {/if}
 <!-- end:parser_nonessential -->

diff --git a/wcfsetup/install/files/style/bbcode/spoiler.scss b/wcfsetup/install/files/style/bbcode/spoiler.scss
new file mode 100644 (file)
index 0000000..dcf26b8
--- /dev/null
+++ b/wcfsetup/install/files/style/bbcode/spoiler.scss
@@ -0,0 +1,13 @@
+.spoilerBox > div {
+       border-left: 5px solid $wcfContentBorderInner;
+       margin-top: 10px;
+       padding: 10px 0 10px 20px;
+       
+       > p:first-child {
+               margin-top: 0;
+       }
+       
+       > p:last-child {
+               margin-bottom: 0;
+       }
+}