From: Tim Düsterhus <duesterhus@woltlab.com>
Date: Wed, 3 Jun 2020 16:19:03 +0000 (+0200)
Subject: Add fixed headline with toggleButton to codeMetaCode
X-Git-Tag: 5.3.0_Alpha_1~224^2~1
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e587215c4cfc88bc9f9ab3e0d5e648abfbe3b376;p=GitHub%2FWoltLab%2FWCF.git

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 13c5a8aff1..8065ec749f 100644
--- 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 e1db536a42..13dafe1c5c 100644
--- 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 */