Fix wrapping long code lines in UI (#5927)
Wrapping was initially added in https://github.com/go-gitea/gitea/pull/2789 but it is currently disabled because the rule that applies wrapping to the wrap class did not have enough CSS specificity. Resolved the issue by using a general selector that matches all code boxes. The previous wrap class was removed because it had only been inconsistenly applied to various code boxes and because I found no easy way to add classes to code boxes rendered in Markdown. Also removed a seemingly useless :before on code view and added padding to restore the spacing.
This commit is contained in:
		
							parent
							
								
									af22df8314
								
							
						
					
					
						commit
						12ee544411
					
				
					 5 changed files with 11 additions and 25 deletions
				
			
		
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							|  | @ -27,26 +27,15 @@ pre, code { | ||||||
|         line-height: 1.5; |         line-height: 1.5; | ||||||
|         overflow: auto; |         overflow: auto; | ||||||
|     } |     } | ||||||
|     &.wrap { | } | ||||||
|         white-space: pre-wrap;       /* CSS 3 */ | /* Wrap long lines of code. This will also apply to Markdown code boxes. */ | ||||||
| //      white-space: -moz-normal;    /* Mozilla, since 1999 */ | pre > code { | ||||||
| //      white-space: -normal;        /* Opera 4-6 */ |         white-space: pre-wrap !important; | ||||||
| //      white-space: -o-normal;      /* Opera 7 */ |         word-break: break-all !important; | ||||||
| 
 |         overflow-wrap: break-word !important; | ||||||
|         -ms-word-break: break-all; |  | ||||||
|         word-break: break-all; |  | ||||||
| 
 |  | ||||||
|         /* These are technically the same, but use both */ |  | ||||||
|         overflow-wrap: break-word; |  | ||||||
|         word-wrap: break-word; |  | ||||||
|     } |  | ||||||
| } | } | ||||||
| .dont-break-out { | .dont-break-out { | ||||||
|     /* These are technically the same, but use both */ |  | ||||||
|     overflow-wrap: break-word; |     overflow-wrap: break-word; | ||||||
|     word-wrap: break-word; |  | ||||||
| 
 |  | ||||||
|     -ms-word-break: break-all; |  | ||||||
|     word-break: break-all; |     word-break: break-all; | ||||||
| 
 | 
 | ||||||
|     /* Adds a hyphen where the word breaks, if supported (No Blink) */ |     /* Adds a hyphen where the word breaks, if supported (No Blink) */ | ||||||
|  |  | ||||||
|  | @ -370,13 +370,10 @@ | ||||||
|                         padding: 0 !important; |                         padding: 0 !important; | ||||||
|                         li { |                         li { | ||||||
|                             display: block; |                             display: block; | ||||||
|                             width: 100%; |                             padding: 0 .25em; | ||||||
|                             &.active { |                             &.active { | ||||||
|                                 background: #ffffdd; |                                 background: #ffffdd; | ||||||
|                             } |                             } | ||||||
|                             &:before { |  | ||||||
|                                 content: ' '; |  | ||||||
|                             } |  | ||||||
|                         } |                         } | ||||||
|                     } |                     } | ||||||
|                 } |                 } | ||||||
|  |  | ||||||
|  | @ -127,7 +127,7 @@ | ||||||
| 															{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 2))}} | 															{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 2))}} | ||||||
| 																<a class="ui green button add-code-comment add-code-comment-left" data-path="{{$file.Name}}" data-side="left" data-idx="{{$line.LeftIdx}}">+</a> | 																<a class="ui green button add-code-comment add-code-comment-left" data-path="{{$file.Name}}" data-side="left" data-idx="{{$line.LeftIdx}}">+</a> | ||||||
| 															{{end}} | 															{{end}} | ||||||
| 															<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre> | 															<pre><code class="{{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre> | ||||||
| 														</td> | 														</td> | ||||||
| 														<td class="lines-num lines-num-new"> | 														<td class="lines-num lines-num-new"> | ||||||
| 															<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span> | 															<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span> | ||||||
|  | @ -137,7 +137,7 @@ | ||||||
| 															{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 3))}} | 															{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 3))}} | ||||||
| 																<a class="ui green button add-code-comment add-code-comment-right" data-path="{{$file.Name}}" data-side="right" data-idx="{{$line.RightIdx}}">+</a> | 																<a class="ui green button add-code-comment add-code-comment-right" data-path="{{$file.Name}}" data-side="right" data-idx="{{$line.RightIdx}}">+</a> | ||||||
| 															{{end}} | 															{{end}} | ||||||
| 															<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre> | 															<pre><code class="{{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre> | ||||||
| 														</td> | 														</td> | ||||||
| 													</tr> | 													</tr> | ||||||
| 													{{if gt (len $line.Comments) 0}} | 													{{if gt (len $line.Comments) 0}} | ||||||
|  |  | ||||||
|  | @ -19,7 +19,7 @@ | ||||||
| 				{{if and $.root.SignedUserID $line.CanComment $.root.PageIsPullFiles}} | 				{{if and $.root.SignedUserID $line.CanComment $.root.PageIsPullFiles}} | ||||||
| 					<a class="ui green button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}" data-path="{{$file.Name}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">+</a> | 					<a class="ui green button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}" data-path="{{$file.Name}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">+</a> | ||||||
| 				{{end}} | 				{{end}} | ||||||
| 				<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre> | 				<pre><code class="{{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre> | ||||||
| 			</td> | 			</td> | ||||||
| 		</tr> | 		</tr> | ||||||
| 		{{if gt (len $line.Comments) 0}} | 		{{if gt (len $line.Comments) 0}} | ||||||
|  |  | ||||||
		Loading…
	
		Reference in a new issue