Added proper styling for code

diff --git a/wcfsetup/install/files/js/WCF.Message.js b/wcfsetup/install/files/js/WCF.Message.js
index d76dae7589173949e6a990d990dd8799b9cc983e..c3772e026209ab17192c43d957d4b617b27870e7 100644 (file)
--- a/wcfsetup/install/files/js/WCF.Message.js
+++ b/wcfsetup/install/files/js/WCF.Message.js
@@ -43,7 +43,7 @@ WCF.Message.BBCode.CodeViewer = Class.extend({
                $('.codeBox:not(.jsCodeViewer)').each($.proxy(function(index, codeBox) {
                        var $codeBox = $(codeBox).addClass('jsCodeViewer');
                        
-                       $('<span class="icon icon16 fa-files-o pointer jsTooltip" title="' + WCF.Language.get('wcf.message.bbcode.code.copy') + '" />').appendTo($codeBox.find('div > h3')).click($.proxy(this._click, this));
+                       $('<span class="codeBoxPlainSource icon icon16 fa-files-o pointer jsTooltip" title="' + WCF.Language.get('wcf.message.bbcode.code.copy') + '" />').appendTo($codeBox.find('.codeBoxHeader')).click($.proxy(this._click, this));
                }, this));
        },
        
@@ -64,7 +64,7 @@ WCF.Message.BBCode.CodeViewer = Class.extend({
                });
                
                if (this._dialog === null) {
-                       this._dialog = $('<div><textarea cols="60" rows="12" readonly="readonly" /></div>').hide().appendTo(document.body);
+                       this._dialog = $('<div><textarea cols="60" rows="12" readonly></textarea></div>').hide().appendTo(document.body);
                        this._dialog.children('textarea').val($content);
                        this._dialog.wcfDialog({
                                title: WCF.Language.get('wcf.message.bbcode.code.copy')

diff --git a/wcfsetup/install/files/style/bbcode/code.scss b/wcfsetup/install/files/style/bbcode/code.scss
index 1660df226cd07d60eeb2c31751d6ecce106ac1c1..33eb57db993f6cb842549440847428da41facccf 100644 (file)
--- a/wcfsetup/install/files/style/bbcode/code.scss
+++ b/wcfsetup/install/files/style/bbcode/code.scss
@@ -25,26 +25,82 @@
        box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
        border-radius: 2px;
        margin-top: 1em;
+       overflow: hidden;
        padding: 10px;
+       position: relative;
+       
+       &.collapsed {
+               max-height: 200px;
+               
+               > .toggleButton {
+                       bottom: 0;
+                       box-shadow: 0 -10px 50px 10px opacify($wcfContentBackground, .9);
+                       left: 0;
+                       padding-bottom: 10px;
+                       position: absolute;
+                       right: 0;
+               }
+       }
        
        > div {
+               > .codeBoxHeader {
+                       align-items: center;
+                       display: flex;
+                       
+                       > .codeBoxHeadline {
+                               flex: 1 1 auto;
+                               padding: 0 10px;
+                               
+                               @include wcfFontHeadline;
+                       }
+                       
+                       > .codeBoxPlainSource {
+                               flex: 0 0 auto;
+                               margin-left: 10px;
+                       }
+               }
+               
                > ol {
-                       margin-left: 3.4em !important;
+                       margin: 20px 0 0 3.4em !important;
                        position: relative;
                        
                        &::before {
                                border-right: 1px solid $wcfContentBorderInner;
                                bottom: 0;
                                content: "";
+                               left: -5px;
                                position: absolute;
                                top: 0;
                        }
                        
                        > li {
+                               font-family: Consolas, 'Courier New', monospace;
                                padding-left: 5px;
+                               position: relative;
+                               white-space: pre-wrap;
+                               word-break: break-all;
+                               word-wrap: break-word;
+                               
+                               .lineAnchor {
+                                       bottom: 0;
+                                       left: -3.4em;
+                                       position: absolute;
+                                       top: 0;
+                                       width: 3.4em;
+                               }
                        }
                }
        }
+       
+       > .toggleButton {
+               background-color: opacify($wcfContentBackground, .9);
+               cursor: pointer;
+               display: block;
+               padding: 10px 20px 0 10px;
+               text-align: center;
+               
+               @include wcfFontSmall;
+       }
 }
 
 /* ############## Code Styles ############## */

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index fb95574c9cdebeaf672e962fbc558e4ebfdf999c..7b696fc5590b07e2c0ef48883f9e237c27881914 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -1775,6 +1775,8 @@ Erlaubte Dateiendungen: {', '|implode:$attachmentHandler->getFormattedAllowedExt
        </category>
        
        <category name="wcf.bbcode">
+               <item name="wcf.bbcode.button.collapse"><![CDATA[Weniger anzeigen]]></item>
+               <item name="wcf.bbcode.button.showAll"><![CDATA[Alles anzeigen]]></item>
                <item name="wcf.bbcode.code"><![CDATA[Code]]></item>
                <item name="wcf.bbcode.code.bash.title"><![CDATA[Shell-Script]]></item>
                <item name="wcf.bbcode.code.c.title"><![CDATA[C]]></item>

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index c4ad3104af1513576ba4eef47e4138da7d4ee788..63472ec81a07933577515bf4e108a4e95378b346 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -1782,6 +1782,8 @@ Allowed extensions: {', '|implode:$attachmentHandler->getFormattedAllowedExtensi
        </category>
        
        <category name="wcf.bbcode">
+               <item name="wcf.bbcode.button.collapse"><![CDATA[Display Less]]></item>
+               <item name="wcf.bbcode.button.showAll"><![CDATA[Display More]]></item>
                <item name="wcf.bbcode.code"><![CDATA[Code]]></item>
                <item name="wcf.bbcode.code.bash.title"><![CDATA[Shell-Script]]></item>
                <item name="wcf.bbcode.code.c.title"><![CDATA[C]]></item>