UX: Adding a sticky footer to the post history modal, removing bootstrap columns

This commit is contained in:
Kris
2018-01-29 15:15:50 -05:00
parent fcc86d5be3
commit 2eef9b3295
7 changed files with 24 additions and 21 deletions

View File

@ -1,4 +1,4 @@
{{#d-modal-body title="history" maxHeight="80%"}} {{#d-modal-body title="history" maxHeight="70%"}}
<div id="revision"> <div id="revision">
<div id="revision-controls"> <div id="revision-controls">
{{d-button action="loadFirstVersion" icon="fast-backward" title="post.revisions.controls.first" disabled=loadFirstDisabled}} {{d-button action="loadFirstVersion" icon="fast-backward" title="post.revisions.controls.first" disabled=loadFirstDisabled}}
@ -119,9 +119,9 @@
{{#links-redirect class="row"}} {{#links-redirect class="row"}}
{{{bodyDiff}}} {{{bodyDiff}}}
{{/links-redirect}} {{/links-redirect}}
</div>
<hr> {{/d-modal-body}}
<div class="modal-footer">
{{#if displayRevert}} {{#if displayRevert}}
{{d-button action="revertToVersion" icon="undo" label="post.revisions.controls.revert" class="btn-danger" disabled=loading}} {{d-button action="revertToVersion" icon="undo" label="post.revisions.controls.revert" class="btn-danger" disabled=loading}}
{{/if}} {{/if}}
@ -140,4 +140,3 @@
label=editButtonLabel}} label=editButtonLabel}}
{{/if}} {{/if}}
</div> </div>
{{/d-modal-body}}

View File

@ -15,6 +15,14 @@
display: inline-block; display: inline-block;
} }
.revision-content {
width: 47.5%;
float: left;
&:nth-of-type(2) {
margin-left: 5%;
}
}
#revisions .row:first-of-type { #revisions .row:first-of-type {
margin-top: 10px; margin-top: 10px;
} }

View File

@ -115,8 +115,11 @@
margin-bottom: 0; margin-bottom: 0;
} }
.modal-footer { .modal-footer {
padding: 14px 15px 15px; padding: 14px 15px 10px;
border-top: 1px solid $primary-low; border-top: 1px solid $primary-low;
.btn {
margin: 0 5px 5px 0;
}
} }
.modal-footer:before, .modal-footer:before,
.modal-footer:after { .modal-footer:after {
@ -151,6 +154,8 @@
} }
.modal-body { .modal-body {
box-sizing: border-box;
width: 100%;
&.full-height-modal { &.full-height-modal {
max-height: calc(100vh - 150px); max-height: calc(100vh - 150px);
} }

View File

@ -64,9 +64,10 @@
white-space: pre-wrap; white-space: pre-wrap;
} }
} }
.span8, .markdown { .revision-content, .markdown {
img { img {
max-width: 400px; max-width: 100%;
box-sizing: border-box;
} }
} }
.modal-header { .modal-header {

View File

@ -27,10 +27,6 @@
padding: 15px; padding: 15px;
} }
.modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
}
.modal-footer .btn.right { .modal-footer .btn.right {
float: right; float: right;
} }

View File

@ -30,13 +30,7 @@
// we need a little extra room on mobile for the // we need a little extra room on mobile for the
// stuff inside the footer to fit // stuff inside the footer to fit
.modal-footer { .modal-footer {
padding-left: 7px; padding: 15px 7px 10px 7px;
padding-right: 7px;
}
.modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
} }
.modal-close { .modal-close {

View File

@ -85,7 +85,7 @@ class DiscourseDiff
i += 1 i += 1
end end
"<div class=\"span8\">#{left.join}</div><div class=\"span8 offset1\">#{right.join}</div>" "<div class=\"revision-content\">#{left.join}</div><div class=\"revision-content\">#{right.join}</div>"
end end
def side_by_side_markdown def side_by_side_markdown