Add fixed headline with toggleButton to codeMetaCode

Resolves #3235

diff --git a/com.woltlab.wcf/templates/codeMetaCode.tpl b/com.woltlab.wcf/templates/codeMetaCode.tpl
index 13c5a8aff11eb00a320d130055e03f18d9e13c73..8065ec749ffecb7eafe05644efcfa573681f13e8 100644 (file)
--- a/com.woltlab.wcf/templates/codeMetaCode.tpl
+++ b/com.woltlab.wcf/templates/codeMetaCode.tpl
@@ -1,16 +1,19 @@
 <div class="codeBox collapsibleBbcode jsCollapsibleBbcode {if $lines > 10} collapsed{/if}">
-       <div>
-               <div class="codeBoxHeader">
-                       <div class="codeBoxHeadline">{$title}{if $filename}: {$filename}{/if}</div>
-               </div>
+       <div class="codeBoxHeader">
+               <div class="codeBoxHeadline">{$title}{if $filename}: {$filename}{/if}</div>
                
-               {assign var='lineNumber' value=$startLineNumber}
-               <pre class="codeBoxCode"><code{if $language} class="language-{$language}"{/if}>{foreach from=$content item=line}{*
-                       *}{assign var='codeLineID' value='codeLine_'|concat:$lineNumber:'_':$codeID}{*
-                       *}<div class="codeBoxLine" id="{$codeLineID}"><a href="{@$__wcf->getAnchor($codeLineID)}" class="lineAnchor" title="{@$lineNumber}"></a><span>{$line}</span></div>{*
-                       *}{assign var='lineNumber' value=$lineNumber+1}{*
-               *}{/foreach}</code></pre>
+               {if !$isAmp && $lines > 10}
+                       <span class="toggleButton icon icon24 fa-expand jsTooltip pointer" title="{lang}wcf.bbcode.button.showAll{/lang}" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}"></span>
+               {/if}
        </div>
+       
+       {assign var='lineNumber' value=$startLineNumber}
+       <pre class="codeBoxCode collapsibleBbcodeOverflow"><code{if $language} class="language-{$language}"{/if}>{foreach from=$content item=line}{*
+               *}{assign var='codeLineID' value='codeLine_'|concat:$lineNumber:'_':$codeID}{*
+               *}<div class="codeBoxLine" id="{$codeLineID}"><a href="{@$__wcf->getAnchor($codeLineID)}" class="lineAnchor" title="{@$lineNumber}"></a><span>{$line}</span></div>{*
+               *}{assign var='lineNumber' value=$lineNumber+1}{*
+       *}{/foreach}</code></pre>
+       
        {if !$isAmp && $lines > 10}
                <span class="toggleButton" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}">{lang}wcf.bbcode.button.showAll{/lang}</span>
        {/if}

diff --git a/wcfsetup/install/files/style/bbcode/code.scss b/wcfsetup/install/files/style/bbcode/code.scss
index e1db536a4209b54cf71f68f21ab5e9cbc83535df..13dafe1c5c1f7195bd2f78cd189a94b873bfc34d 100644 (file)
--- a/wcfsetup/install/files/style/bbcode/code.scss
+++ b/wcfsetup/install/files/style/bbcode/code.scss
@@ -48,12 +48,14 @@
        border-radius: 2px;
        clear: both;
        margin: 1em 0;
-       overflow: hidden;
        padding: 10px;
        position: relative;
        
        &.collapsed {
-               max-height: 200px;
+               .codeBoxCode {
+                       max-height: 200px;
+                       overflow: hidden;
+               }
                
                > .toggleButton {
                        bottom: 0;
@@ -66,55 +68,61 @@
                }
        }
        
-       > div {
-               > .codeBoxHeader {
-                       align-items: center;
-                       display: flex;
-                       
-                       /* required to avoid layout jumping caused by the dynamically added 24px button */
-                       min-height: 24px;
+       .codeBoxHeader {
+               position: sticky;
+               top: 50px;
+               z-index: 1;
+               padding: 10px 10px 10px;
+               margin: -10px -10px 0;
+               background-color: $wcfContentBackground;
+               
+               align-items: center;
+               display: flex;
+               
+               /* required to avoid layout jumping caused by the dynamically added 24px button */
+               min-height: 24px;
+               
+               > .codeBoxHeadline {
+                       flex: 1 1 auto;
+                       padding: 0 10px;
                        
-                       > .codeBoxHeadline {
-                               flex: 1 1 auto;
-                               padding: 0 10px;
-                               
-                               @include wcfFontHeadline;
-                       }
+                       @include wcfFontHeadline;
                }
+       }
+       
+       .codeBoxCode {
+               position: relative;
+               padding-left: 7ch;
                
-               > .codeBoxCode {
-                       padding-left: 7ch;
+               > code {
+                       display: block;
+                       overflow-x: auto;
+                       font-family: Consolas, 'Courier New', monospace;
                        
-                       > code {
-                               display: block;
-                               overflow-x: auto;
-                               font-family: Consolas, 'Courier New', monospace;
-                               
-                               .codeBoxLine {
-                                       > a {
-                                               margin-left: -7ch;
-                                               overflow: hidden;
-                                               position: absolute;
-                                               text-align: right;
-                                               text-overflow: ellipsis;
-                                               white-space: nowrap;
-                                               /* No one has line numbers greater than 999999 */
-                                               width: 6ch;
-               
-                                               &::before {
-                                                       content: attr(title);
-                                               }
-                                       }
-                                       
-                                       > span {
-                                               white-space: pre-wrap;
-                                               word-break: break-all;
-                                       }
-                                       
-                                       &:target {
-                                               background-color: rgba(255, 255, 102, 1);
+                       .codeBoxLine {
+                               > a {
+                                       margin-left: -7ch;
+                                       overflow: hidden;
+                                       position: absolute;
+                                       text-align: right;
+                                       text-overflow: ellipsis;
+                                       white-space: nowrap;
+                                       /* No one has line numbers greater than 999999 */
+                                       width: 6ch;
+       
+                                       &::before {
+                                               content: attr(title);
                                        }
                                }
+                               
+                               > span {
+                                       white-space: pre-wrap;
+                                       word-break: break-all;
+                               }
+                               
+                               &:target {
+                                       background-color: rgba(255, 255, 102, 1);
+                               }
                        }
                }
        }
@@ -130,6 +138,10 @@
        }
 }
 
+.anchorFixedHeader:not(.disableAnchorFixedHeader):target .codeBoxHeader {
+       top: -30px; /* see wsc31.scss */
+}
+
 
 /* PrismJS 1.15.0
 https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript&plugins=autoloader */