secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Using flexbox for cleaner vertical-alignment cross-platform

Browse Source
This commit is contained in:
James Barnsley
2019-07-03 10:20:13 +12:00
parent 23780ef3ef
commit 178ea7f27e
8 changed files with 142 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/js/components/ListItem.js
View File

@ -123,20 +123,22 @@ export default class ListItem extends React.Component{
onClick={e => this.handleClick(e)}
onContextMenu={e => this.handleContextMenu(e)}>
<div className="list__item__column list__item__column--right">
{
(this.props.right_column ? this.props.right_column.map((column, index) => {
return (
<span className={'list__item__column__item list__item__column__item--'+column.replace('.','_')} key={index}>
{this.renderValue(column, item)}
</span>
)
}) : null)
}
{this.props.right_column && !this.props.nocontext &&
<div className="list__item__column list__item__column--right">
{
(this.props.right_column ? this.props.right_column.map((column, index) => {
return (
<span className={'list__item__column__item list__item__column__item--'+column.replace('.','_')} key={index}>
{this.renderValue(column, item)}
</span>
)
}) : null)
}
{this.props.nocontext ? null : <ContextMenuTrigger className="list__item__column__item list__item__column__item--context-menu-trigger subtle" onTrigger={e => this.handleContextMenu(e)} />}
{this.props.nocontext ? null : <ContextMenuTrigger className="list__item__column__item list__item__column__item--context-menu-trigger subtle" onTrigger={e => this.handleContextMenu(e)} />}
</div>
</div>
}
<div className="list__item__column list__item__column--name">

20
src/js/components/Track.js
View File

@ -288,16 +288,6 @@ export default class Track extends React.Component{
onContextMenu={e => this.props.handleContextMenu(e)}
onTouchStart={e => this.handleTouchStart(e)}
onTouchEnd={e => this.handleTouchEnd(e)}>
<div className="list__item__column list__item__column--right">
{drag_zone}
<span className="list__item__column__item list__item__column__item--duration">
{track.duration ? <Dater type="length" data={track.duration} /> : '-'}
</span>
{this.props.show_source_icon ? <span className="list__item__column__item list__item__column__item--source">
<Icon type="fontawesome" name={helpers.sourceIcon(track.uri)} fixedWidth />
</span> : null}
<ContextMenuTrigger className="list__item__column__item--context-menu-trigger subtle" onTrigger={e => this.props.handleContextMenu(e)} />
</div>
<div className="list__item__column list__item__column--name">
<div className="list__item__column__item--name">
{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
@ -309,6 +299,16 @@ export default class Track extends React.Component{
</ul> : null}
</div>
{track_middle_column ? <div className="list__item__column list__item__column--middle">{track_middle_column}</div> : null}
<div className="list__item__column list__item__column--right">
{drag_zone}
<span className="list__item__column__item list__item__column__item--duration">
{track.duration ? <Dater type="length" data={track.duration} /> : '-'}
</span>
{this.props.show_source_icon ? <span className="list__item__column__item list__item__column__item--source">
<Icon type="fontawesome" name={helpers.sourceIcon(track.uri)} fixedWidth />
</span> : null}
<ContextMenuTrigger className="list__item__column__item--context-menu-trigger subtle" onTrigger={e => this.props.handleContextMenu(e)} />
</div>
</div>
</ErrorBoundary>
);

101
src/scss/components/_lists.scss
View File

@ -10,11 +10,12 @@
-ms-user-select: none;
user-select: none;
display: block;
display: flex;
position: relative;
margin: 0 -20px 0 -20px;
padding: 0 20px;
padding: 16px 16px 16px 20px;
border-radius: 3px;
justify-content: space-between;
&:before {
pointer-events: none;
@ -69,13 +70,13 @@
pointer-events: none;
}
}
/*
.icon.source {
color: colour(mid_grey);
position: absolute;
top: 16px;
right: 40px;
}
}*/
&.field {
padding: 0 !important;
@ -137,56 +138,46 @@
}
}
&--has-middle-column {
.list__item {
&__column {
&--name {
width: 60%;
float: left;
}
&--middle {
width: 25%;
float: left;
}
}
}
}
&--has-thumbnail {
.list__item {
&__column {
&--name {
padding-left: 46px;
}
}
}
}
&--has-details {
.list__item {
&__column {
&--name {
padding-top: 14px;
padding-bottom: 10px;
padding-left: 50px;
position: relative;
}
}
}
}
&--directory {
.list__item {
&__column {
padding: 18px 0 10px;
&__item {
&--thumbnail {
&,
&.thumbnail {
width: 40px;
position: absolute;
top: 0;
left: 0;
}
}
}
}
}
}
&__column {
padding: 24px 0 16px;
align-items: center;
&:first-child {
min-width: 40%;
}
&--middle {
display: flex;
margin-left: auto;
}
&--right {
float: right;
display: flex;
margin-left: auto;
z-index: 9;
.list__item__column__item {
padding-left: 10px;
@ -195,28 +186,14 @@
}
&__item {
&--thumbnail {
&,
&.thumbnail {
width: 40px;
position: absolute;
top: 12px;
left: 12px;
@include responsive($bp_medium){
left: 16px;
}
}
}
align-items: center;
&--name {
padding-bottom: 2px;
font-size: 1.1em;
}
&--details {
padding: 0;
padding: 4px 0 0 0;
margin: 0;
opacity: 0.5;
@ -243,9 +220,10 @@
&--context-menu-trigger {
font-size: 16px;
margin: -16px -14px -14px 0;
position: relative;
z-index: 2;
padding-top: 0;
padding-bottom: 0;
&:before {
display: none !important;
@ -311,15 +289,6 @@
}
}
&--has-middle-column {
.list__item__column {
&--name {
width: auto;
float: none;
}
}
}
&__column {
&--middle {