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

124
mopidy_iris/static/app.css
View File

@ -3935,11 +3935,19 @@ select {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
display: flex;
position: relative;
margin: 0 -20px 0 -20px;
padding: 0 20px;
border-radius: 3px; }
padding: 16px 16px 16px 20px;
border-radius: 3px;
justify-content: space-between;
/*
.icon.source {
color: colour(mid_grey);
position: absolute;
top: 16px;
right: 40px;
}*/ }
.list__item::after {
content: '';
clear: both;
@ -3981,11 +3989,6 @@ select {
.list__item .select-zone *,
.list__item .drag-zone * {
pointer-events: none; }
.list__item .icon.source {
color: #a3a19f;
position: absolute;
top: 16px;
right: 40px; }
.list__item.field {
padding: 0 !important; }
.list__item.field > label {
@ -4015,65 +4018,61 @@ select {
width: 35px;
padding-top: 22px;
text-align: center; }
.list__item--has-middle-column .list__item__column--name {
width: 60%;
float: left; }
.list__item--has-middle-column .list__item__column--middle {
width: 25%;
float: left; }
.list__item--has-thumbnail .list__item__column--name {
padding-left: 46px; }
.list__item--has-details .list__item__column--name {
padding-top: 14px;
padding-bottom: 10px; }
.list__item--directory .list__item__column {
padding: 18px 0 10px; }
padding-left: 50px;
position: relative; }
.list__item--has-thumbnail .list__item__column__item--thumbnail, .list__item--has-thumbnail .list__item__column__item--thumbnail.thumbnail {
width: 40px;
position: absolute;
top: 0;
left: 0; }
.list__item__column {
padding: 24px 0 16px; }
align-items: center; }
.list__item__column:first-child {
min-width: 40%; }
.list__item__column--middle {
display: flex;
margin-left: auto; }
.list__item__column--right {
float: right; }
display: flex;
margin-left: auto;
z-index: 9; }
.list__item__column--right .list__item__column__item {
padding-left: 10px;
display: inline-block; }
.list__item__column__item--thumbnail, .list__item__column__item--thumbnail.thumbnail {
width: 40px;
position: absolute;
top: 12px;
left: 12px; }
@media (max-width: 799px) {
.list__item__column__item--thumbnail, .list__item__column__item--thumbnail.thumbnail {
left: 16px; } }
.list__item__column__item--name {
padding-bottom: 2px;
font-size: 1.1em; }
.list__item__column__item--details {
padding: 0;
margin: 0;
opacity: 0.5; }
.list__item__column__item--details .details__item {
display: inline;
overflow-wrap: break-word; }
.list__item__column__item--details .details__item:not(:first-child) {
padding-left: 14px; }
.list__item__column__item--details .details__item:not(:first-child):before {
content: '\2022' !important;
display: inline-block;
margin-left: -8px;
padding-right: 6px; }
.list__item__column__item--added .from:before {
content: '('; }
.list__item__column__item--added .from:after {
content: ')'; }
.list__item__column__item--context-menu-trigger {
font-size: 16px;
margin: -16px -14px -14px 0;
position: relative;
z-index: 2; }
.list__item__column__item--context-menu-trigger:before {
display: none !important; }
.light-theme .list__item__column__item .flag {
background: #cecac4;
color: #FFFFFF; }
.list__item__column__item {
align-items: center; }
.list__item__column__item--name {
font-size: 1.1em; }
.list__item__column__item--details {
padding: 4px 0 0 0;
margin: 0;
opacity: 0.5; }
.list__item__column__item--details .details__item {
display: inline;
overflow-wrap: break-word; }
.list__item__column__item--details .details__item:not(:first-child) {
padding-left: 14px; }
.list__item__column__item--details .details__item:not(:first-child):before {
content: '\2022' !important;
display: inline-block;
margin-left: -8px;
padding-right: 6px; }
.list__item__column__item--added .from:before {
content: '('; }
.list__item__column__item--added .from:after {
content: ')'; }
.list__item__column__item--context-menu-trigger {
font-size: 16px;
position: relative;
z-index: 2;
padding-top: 0;
padding-bottom: 0; }
.list__item__column__item--context-menu-trigger:before {
display: none !important; }
.light-theme .list__item__column__item .flag {
background: #cecac4;
color: #FFFFFF; }
.list--tracks .list__item {
cursor: pointer; }
@ -4108,9 +4107,6 @@ select {
-moz-transform: scale(0.98);
-webkit-transform: scale(0.98);
transform: scale(0.98); }
.list__item--has-middle-column .list__item__column--name {
width: auto;
float: none; }
.list__item__column--middle {
display: none; }
.list__item__column__item--source {

2
mopidy_iris/static/app.css.map
View File

File diff suppressed because one or more lines are too long

40
mopidy_iris/static/app.js
View File

@ -59293,7 +59293,7 @@ var ListItem = function (_React$Component) {
onContextMenu: function onContextMenu(e) {
return _this2.handleContextMenu(e);
} },
_react2.default.createElement(
this.props.right_column && !this.props.nocontext && _react2.default.createElement(
'div',
{ className: 'list__item__column list__item__column--right' },
this.props.right_column ? this.props.right_column.map(function (column, index) {
@ -62954,24 +62954,6 @@ var Track = function (_React$Component) {
onTouchEnd: function onTouchEnd(e) {
return _this2.handleTouchEnd(e);
} },
_react2.default.createElement(
'div',
{ className: 'list__item__column list__item__column--right' },
drag_zone,
_react2.default.createElement(
'span',
{ className: 'list__item__column__item list__item__column__item--duration' },
track.duration ? _react2.default.createElement(_Dater2.default, { type: 'length', data: track.duration }) : '-'
),
this.props.show_source_icon ? _react2.default.createElement(
'span',
{ className: 'list__item__column__item list__item__column__item--source' },
_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: helpers.sourceIcon(track.uri), fixedWidth: true })
) : null,
_react2.default.createElement(_ContextMenuTrigger2.default, { className: 'list__item__column__item--context-menu-trigger subtle', onTrigger: function onTrigger(e) {
return _this2.props.handleContextMenu(e);
} })
),
_react2.default.createElement(
'div',
{ className: 'list__item__column list__item__column--name' },
@ -63000,7 +62982,25 @@ var Track = function (_React$Component) {
'div',
{ className: 'list__item__column list__item__column--middle' },
track_middle_column
) : null
) : null,
_react2.default.createElement(
'div',
{ className: 'list__item__column list__item__column--right' },
drag_zone,
_react2.default.createElement(
'span',
{ className: 'list__item__column__item list__item__column__item--duration' },
track.duration ? _react2.default.createElement(_Dater2.default, { type: 'length', data: track.duration }) : '-'
),
this.props.show_source_icon ? _react2.default.createElement(
'span',
{ className: 'list__item__column__item list__item__column__item--source' },
_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: helpers.sourceIcon(track.uri), fixedWidth: true })
) : null,
_react2.default.createElement(_ContextMenuTrigger2.default, { className: 'list__item__column__item--context-menu-trigger subtle', onTrigger: function onTrigger(e) {
return _this2.props.handleContextMenu(e);
} })
)
)
);
}

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -100,7 +100,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1561671136";
var build = "1562098984";
var version = "3.39.0";
// Construct the script tag

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 {