V3 css fixes (#1377)

* Fixed Firefox bug for input groups
* Moved from `rem` based responsive styles to `px` based
* Fixed invisible clickable menus for member/user list
* Added responsive CSS for meembers list header
* Updated member list responsive styles
* Fix list header responsive style
This commit is contained in:
Peter Zimon 2019-10-21 13:09:56 +02:00 committed by GitHub
parent 38482311da
commit 5bfe1c2095
8 changed files with 117 additions and 18 deletions

View File

@ -10,7 +10,7 @@ export default Component.extend({
router: service(),
tagName: 'li',
classNames: ['gh-list-row'],
classNames: ['gh-list-row', 'gh-members-list-item'],
active: false,

View File

@ -45,6 +45,101 @@ p.gh-members-list-email {
.gh-member-actions-menu.fade-out {
animation-duration: .001s;
pointer-events: none;
}
@media (max-width: 1000px) {
.members-list .gh-list-header, .gh-list-hidecell-m {
display: table-cell;
}
}
@media (max-width: 900px) {
.members-list .gh-list-header, .gh-list-hidecell-m {
display: none;
}
.gh-members-list-item {
display: flex;
position: relative;
flex-wrap: wrap;
border-bottom: 1px solid var(--lightgrey);
margin: 0;
}
.gh-members-list-item:nth-of-type(2) {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.gh-members-list-item .gh-list-data {
border-top: none !important;
}
.gh-members-list-item:hover {
background: var(--whitegrey-l2);
}
.gh-members-list-item:hover .gh-list-data {
background: none !important;
}
.gh-members-list-basic {
display: block;
flex: 1 1 100%;
}
.gh-members-list-subscribed-at {
display: inline-block;
width: unset;
padding: 0 0 16px 64px;
margin-top: -7px;
font-size: 1.2rem;
}
.gh-members-list-chevron {
display: block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
.gh-list h3.gh-members-name-noname {
margin-top: -14px;
}
.gh-members-subscribed-noname {
display: inline-block;
margin-top: -32px;
padding-bottom: 16px;
}
}
@media (max-width: 450px) {
.members-header {
justify-content: flex-end;
min-height: 120px;
}
.members-header .gh-canvas-title {
position: absolute;
top: 29px;
left: 21px;
}
.members-header .view-actions {
margin-top: 62px;
width: 100%;
}
.members-header .view-actions .gh-members-header-search {
width: 100%;
}
.view-actions input.gh-members-list-searchfield {
min-width: 0;
}
}

View File

@ -28,6 +28,7 @@
.user-actions-menu.fade-out {
animation-duration: 0.01s;
pointer-events: none;
}

View File

@ -501,6 +501,7 @@ textarea {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding-right: 0;
min-width: 0; /* Firefox fix */
}
.gh-input-group .gh-input:focus + .gh-input-append {

View File

@ -23,6 +23,6 @@
*/
/* Media Queries */
@custom-media --breakpoint-not-small screen and (min-width: 44rem);
@custom-media --breakpoint-medium screen and (min-width: 44rem) and (max-width: 66rem);
@custom-media --breakpoint-large screen and (min-width: 66rem);
@custom-media --breakpoint-not-small screen and (min-width: 700px);
@custom-media --breakpoint-medium screen and (min-width: 700px) and (max-width: 1080px);
@custom-media --breakpoint-large screen and (min-width: 1080px);

View File

@ -64,8 +64,8 @@
</div>
{{#liquid-if membersPricingOpen}}
<div class="w-50 flex mt8">
<div class="w-50 mr3">
<div class="w-100 w-50-l flex flex-column flex-row-ns mt8">
<div class="w-100 w-50-ns mr3-ns">
{{#gh-form-group}}
<label class="fw6 f8">Monthly price</label>
@ -79,7 +79,7 @@
</div>
{{/gh-form-group}}
</div>
<div class="w-50 ml2">
<div class="w-100 w-50-ns ml2-ns">
{{#gh-form-group class="description-container"}}
<label class="fw6 f8">Yearly price</label>
<div class="flex items-center justify-center mt1 gh-input-group gh-labs-price-label">
@ -172,7 +172,7 @@
</div>
{{#liquid-if membersEmailOpen}}
<div class="flex flex-column w-40 flex mt8">
<div class="flex flex-column w-100 w-50-l flex mt8">
{{#gh-form-group}}
<label class="fw6 f8">From Address</label>
<div class="flex items-center justify-center mt1 gh-input-group">

View File

@ -1,8 +1,8 @@
{{#link-to "member" member class="gh-list-data" title="Member details"}}
<LinkTo @route="member" @model={{this.member}} title="Member details" class="gh-list-data gh-members-list-basic">
<div class="flex items-center">
<GhMemberAvatar @member={{member}} class="w9 h9 mr3" />
<div>
<h3 class="ma0 pa0 gh-members-list-name">
<h3 class="ma0 pa0 gh-members-list-name {{if (not member.name) "gh-members-name-noname"}}">
{{#if this.name}}
{{this.name}}
{{else}}
@ -14,12 +14,14 @@
{{/if}}
</div>
</div>
{{/link-to}}
</LinkTo>
{{#link-to "member" member class="gh-list-data gh-members-list-subscribed-at gh-list-cellwidth-20 nowrap middarkgrey f8 nowrap" title="Member details" }}
<LinkTo @route="member" @model={{this.member}} title="Member details" class="gh-list-data gh-members-list-subscribed-at gh-list-cellwidth-20 nowrap middarkgrey f8 {{if (not member.name) "gh-members-subscribed-noname"}}">
{{this.createdDate}} <span class="midgrey-l2">({{this.memberSince}})</span>
{{/link-to}}
</LinkTo>
{{#link-to "member" member class="gh-list-data gh-list-cellwidth-chevron align-right" title="Member details"}}
{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1 nr2"}}
{{/link-to}}
<LinkTo @route="member" @model={{this.member}} title="Member details" class="gh-list-data gh-list-cellwidth-chevron gh-members-list-chevron">
<div class="flex items-center justify-end w-100 h-100">
<span class="nr2">{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}</span>
</div>
</LinkTo>

View File

@ -1,5 +1,5 @@
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<GhCanvasHeader class="gh-canvas-header members-header">
<h2 class="gh-canvas-title" data-test-screen-title>Members</h2>
<section class="view-actions">
<span class="dropdown">
@ -22,7 +22,7 @@
</li>
{{/gh-dropdown}}
</span>
<div class="relative">
<div class="relative gh-members-header-search">
{{svg-jar "search" class="gh-input-search-icon"}}
<GhTextInput placeholder="Search members..." @value={{this.searchText}} @input={{action (mut this.searchText) value="target.value"}} class="gh-members-list-searchfield {{if this.searchText "active"}}" />
</div>