Fixed email preview UI bugs

This commit is contained in:
Peter Zimon 2021-02-22 21:14:16 +01:00
parent da04b2dc4d
commit 87dddd5ae9
3 changed files with 20 additions and 16 deletions

View File

@ -1,8 +1,10 @@
<header class="modal-header gh-pe-header gh-pe-header-border" data-test-modal="preview-email" style="display:flex">
<h2 class="f6 fw6">{{this.subject}}</h2>
<div class="gh-contentfilter gh-btn-group gh-pe-btn-group" style="display:flex;flex-grow:1;justify-content:center">
<button class="gh-btn {{if (eq this.type "desktop") "gh-btn-group-selected"}}" {{action "changeType" "desktop"}}><span>Desktop</span></button>
<button class="gh-btn {{if (eq this.type "mobile") "gh-btn-group-selected"}}" {{action "changeType" "mobile"}}><span>Mobile</span></button>
<div>
<div class="gh-contentfilter gh-btn-group gh-pe-btn-group" style="display:flex;flex-grow:1;justify-content:center">
<button class="gh-btn {{if (eq this.type "desktop") "gh-btn-group-selected"}}" {{action "changeType" "desktop"}}><span>Desktop</span></button>
<button class="gh-btn {{if (eq this.type "mobile") "gh-btn-group-selected"}}" {{action "changeType" "mobile"}}><span>Mobile</span></button>
</div>
</div>
<div class="gh-pe-close">
<button class="close" href title="Close" {{on "click" this.closeModal}}>

View File

@ -695,13 +695,13 @@ textarea.gh-member-details-textarea {
background: var(--red);
}
.gh-member-feed-row {
display: flex;
padding: 0 2rem;
.gh-member-feed {
margin-top: -12px;
}
.gh-member-feed-row:hover {
background: var(--whitegrey-l2);
.gh-member-feed-row {
display: flex;
padding: 0;
}
.gh-member-feed-activity {
@ -720,10 +720,11 @@ textarea.gh-member-details-textarea {
vertical-align: middle;
color: var(--darkgrey);
text-align: left;
font-weight: 500;
}
.gh-member-feed-title:hover {
color: var(--blue-d2);
color: var(--black);
}
.gh-member-feed-date {

View File

@ -37,7 +37,8 @@
.gh-pe-header h2 {
margin: 0;
margin-right: auto;
flex: 1;
position: absolute;
left: 24px;
}
.gh-pe-header .gh-btn-group {
@ -69,24 +70,21 @@
}
.gh-pe-btn-group button span {
border: 1px solid var(--whitegrey);
border-radius: 0;
}
.gh-pe-btn-group button:first-of-type span {
border-right: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.gh-pe-btn-group button:last-of-type span {
border-left: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.fullscreen-modal-email-preview .gh-pe-desktop-container {
height: calc(100vh - 135px);
height: calc(100vh - 119px);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
@ -152,6 +150,9 @@
align-items: center;
background: var(--whitegrey-l1);
padding: 30px 30px 45px;
height: calc(100vh - 119px);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.gh-pe-mobile-bezel {