opendev/gerrit
Code Issues Proposed changes

Merge "Use table instead of flexbox for more predictable layout in diff view"

Browse Source
This commit is contained in:
Dave Borowitz
2015-11-25 02:33:30 +00:00
committed by Gerrit Code Review
parent fc71da47bd 79c86c16a0
commit 0e6830e7eb
1 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
polygerrit-ui/app/elements/gr-diff-view.html
View File

@@ -23,41 +23,41 @@ limitations under the License.
:host {
background-color: var(--view-background-color);
display: block;
margin: 1em 1.25rem;
}
h3 {
border-bottom: 1px solid #eee;
padding: .75em 1em;
margin-top: 1em;
padding: .75em var(--default-horizontal-margin);
}
.mainContainer {
max-width: 100%;
overflow: auto;
border-bottom: 1px solid #eee;
border-collapse: collapse;
border-top: 1px solid #eee;
width: 100%;
}
.diffNumbers,
.diffContent {
vertical-align: top;
}
.diffContainer {
display: flex;
font-family: 'Source Code Pro', monospace;
white-space: pre;
}
.diffNumbers {
background-color: #ddd;
background-color: #eee;
color: #666;
padding: 0 .75em;
text-align: right;
}
.diffContent {
border-right: 1px solid #ddd;
min-width: calc(80ch + 2px);
overflow-x: auto;
padding-left: 2px;
width: calc(80ch + 2px);
min-width: 80ch;
max-width: 120ch;
overflow: hidden;
}
.diffContainer.leftOnly .diffContent,
.diffContainer.rightOnly .diffContent {
overflow: visible;
}
.diffContainer.leftOnly .right {
display: none;
}
.diffContainer.leftOnly .right,
.diffContainer.rightOnly .left {
display: none;
}
@@ -129,14 +129,14 @@ limitations under the License.
<a href$="[[_computeChangePath(_changeNum)]]">[[_changeNum]]</a><span>:</span>
<span>[[_change.subject]]</span> — <span>[[params.path]]</span>
</h3>
<div class="mainContainer">
<div class="diffContainer" id="diffContainer">
<div class="diffNumbers left" id="leftDiffNumbers"></div>
<div class="diffContent left" id="leftDiffContent"></div>
<div class="diffNumbers right" id="rightDiffNumbers"></div>
<div class="diffContent right" id="rightDiffContent"></div>
</div>
</div>
<table class="mainContainer">
<tr class="diffContainer" id="diffContainer">
<td class="diffNumbers left" id="leftDiffNumbers"></td>
<td class="diffContent left" id="leftDiffContent"></td>
<td class="diffNumbers right" id="rightDiffNumbers"></td>
<td class="diffContent right" id="rightDiffContent"></td>
</tr>
</table>
</template>
<script>
(function() {