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
GitHub
parent
e58b9de431
commit
18605d9d05
|
|
@ -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,
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
|
||||
.user-actions-menu.fade-out {
|
||||
animation-duration: 0.01s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue