Browse Source

truncate artist/title rather than breaking Item rows at small page widths

py3-upgrade
noah 2 years ago
parent
commit
52330da922
2 changed files with 16 additions and 5 deletions
  1. +1
    -1
      frontend/src/components/Item/Item.jsx
  2. +15
    -4
      frontend/src/components/Item/item.scss

+ 1
- 1
frontend/src/components/Item/Item.jsx View File

@ -80,7 +80,7 @@ class Item extends React.Component {
return (
<li className="queueItem" style={style}>
<FontAwesome name={platform} className="icon" fixedWidth />
<FontAwesome name={platform} className="icon platform-icon" size="lg" fixedWidth />
<span className="info" title={text}>
{text}
</span>


+ 15
- 4
frontend/src/components/Item/item.scss View File

@ -7,9 +7,23 @@
padding-left: 1em;
padding-top: .5em;
padding-bottom: .5em;
display: flex;
* {
flex-wrap:nowrap;
}
.platform-icon {
line-height: 1.5em;
flex: none;
}
span.info {
display: block;
flex: auto;
margin-left: 1em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@ -21,11 +35,8 @@
}
.itemControls {
flex: none;
margin-right: 1em;
float: right;
&:after {
clear: both;
}
button {
display: inline-block;
margin-top: 0;


Loading…
Cancel
Save