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

Tweaking font sizes and grid BEM

Browse Source
This commit is contained in:
James Barnsley
2018-12-05 17:00:52 +13:00
parent 3d714eda7f
commit 55ad003e36
11 changed files with 141 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
mopidy_iris/static/app.css
View File

@ -4950,13 +4950,13 @@ aside {
position: relative;
border-radius: 3px;
font-family: "Overpass";
font-weight: 500;
font-weight: 600;
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 10px 10px 8px;
margin: 0 16px;
padding: 12px 10px 10px;
margin: 0 18px;
border-radius: 3px; }
aside nav a:before {
-webkit-transition: all 0.2s ease-in-out;
@ -5056,45 +5056,45 @@ aside {
aside nav section title {
padding-bottom: 2px; } }
.grid .grid-item-wrapper {
display: inline-block; }
.grid .grid-item {
.grid__item {
display: inline-block;
vertical-align: top;
border-bottom: 0;
position: relative; }
.grid .grid-item .thumbnail {
.grid__item__wrapper {
display: inline-block; }
.grid__item__thumbnail {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
max-width: 100%; }
.grid .grid-item .name {
.grid__item__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 8px; }
.grid .grid-item .secondary {
padding-top: 12px;
font-size: 15px; }
.grid__item__secondary {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 2px;
color: #888888; }
.grid .grid-item .secondary .source {
.grid__item__secondary .source {
padding-right: 6px; }
.grid .grid-item:hover {
.grid__item:hover {
cursor: pointer; }
.grid .grid-item:hover .thumbnail {
.grid__item:hover__thumbnail {
opacity: 0.75; }
.grid .grid-item:active, .grid .grid-item:focus {
.grid__item:active, .grid__item:focus {
-moz-transform: scale(0.98);
-webkit-transform: scale(0.98);
transform: scale(0.98); }
.grid.category-grid .grid-item {
.grid--categories .grid__item {
position: relative; }
.grid.category-grid .grid-item .name {
.grid--categories .grid__item__name {
position: absolute;
bottom: 15%;
left: 0;
@ -5105,157 +5105,157 @@ aside {
color: #FFFFFF; }
@media (min-width: 1000px) {
.grid.category-grid .grid-item .name {
.grid--categories .grid__item__name {
font-size: 16px; } }
@media (min-width: 1900px) {
.grid.mini .grid-item {
.grid--mini .grid__item {
width: 30.66667%;
box-sizing: border-box;
margin: 0 2% 3%; }
.grid.mini .grid-item:nth-child(3n-3) {
.grid--mini .grid__item:nth-child(3n-3) {
margin-right: 0; }
.grid.mini .grid-item:nth-child(3n-3)::after {
.grid--mini .grid__item:nth-child(3n-3)::after {
content: '';
clear: both;
display: block; }
.grid.mini .grid-item:nth-child(3n-2) {
.grid--mini .grid__item:nth-child(3n-2) {
margin-left: 0; }
.grid.mini.single-row .grid-item:nth-child(1n+4) {
.grid--mini--single-row .grid-item:nth-child(1n+4) {
display: none; }
.grid:not(.mini) .grid-item {
.grid:not(.grid--mini) .grid__item {
width: 16.8%;
box-sizing: border-box;
margin: 0 2% 3%; }
.grid:not(.mini) .grid-item:nth-child(5n-5) {
.grid:not(.grid--mini) .grid__item:nth-child(5n-5) {
margin-right: 0; }
.grid:not(.mini) .grid-item:nth-child(5n-5)::after {
.grid:not(.grid--mini) .grid__item:nth-child(5n-5)::after {
content: '';
clear: both;
display: block; }
.grid:not(.mini) .grid-item:nth-child(5n-4) {
.grid:not(.grid--mini) .grid__item:nth-child(5n-4) {
margin-left: 0; }
.grid:not(.mini).single-row .grid-item:nth-child(1n+6) {
.grid:not(.grid--mini)\--single-row .grid-item:nth-child(1n+6) {
display: none; } }
@media (max-width: 1899px) and (min-width: 1200px) {
.grid.mini .grid-item {
.grid--mini .grid__item {
width: 48%;
box-sizing: border-box;
margin: 0 2% 3%; }
.grid.mini .grid-item:nth-child(2n-2) {
.grid--mini .grid__item:nth-child(2n-2) {
margin-right: 0; }
.grid.mini .grid-item:nth-child(2n-2)::after {
.grid--mini .grid__item:nth-child(2n-2)::after {
content: '';
clear: both;
display: block; }
.grid.mini .grid-item:nth-child(2n-1) {
.grid--mini .grid__item:nth-child(2n-1) {
margin-left: 0; }
.grid.mini.single-row .grid-item:nth-child(1n+3) {
.grid--mini--single-row .grid-item:nth-child(1n+3) {
display: none; }
.grid:not(.mini) .grid-item {
.grid:not(.grid--mini) .grid__item {
width: 22%;
box-sizing: border-box;
margin: 0 2% 3%; }
.grid:not(.mini) .grid-item:nth-child(4n-4) {
.grid:not(.grid--mini) .grid__item:nth-child(4n-4) {
margin-right: 0; }
.grid:not(.mini) .grid-item:nth-child(4n-4)::after {
.grid:not(.grid--mini) .grid__item:nth-child(4n-4)::after {
content: '';
clear: both;
display: block; }
.grid:not(.mini) .grid-item:nth-child(4n-3) {
.grid:not(.grid--mini) .grid__item:nth-child(4n-3) {
margin-left: 0; }
.grid:not(.mini).single-row .grid-item:nth-child(1n+5) {
.grid:not(.grid--mini)\--single-row .grid-item:nth-child(1n+5) {
display: none; } }
@media (max-width: 1199px) and (min-width: 800px) {
.grid.mini .grid-item {
.grid--mini .grid__item {
width: 48%;
box-sizing: border-box;
margin: 0 2% 3%; }
.grid.mini .grid-item:nth-child(2n-2) {
.grid--mini .grid__item:nth-child(2n-2) {
margin-right: 0; }
.grid.mini .grid-item:nth-child(2n-2)::after {
.grid--mini .grid__item:nth-child(2n-2)::after {
content: '';
clear: both;
display: block; }
.grid.mini .grid-item:nth-child(2n-1) {
.grid--mini .grid__item:nth-child(2n-1) {
margin-left: 0; }
.grid.mini.single-row .grid-item:nth-child(1n+3) {
.grid--mini--single-row .grid-item:nth-child(1n+3) {
display: none; }
.grid:not(.mini) .grid-item {
.grid:not(.grid--mini) .grid__item {
width: 22%;
box-sizing: border-box;
margin: 0 2% 3%; }
.grid:not(.mini) .grid-item:nth-child(4n-4) {
.grid:not(.grid--mini) .grid__item:nth-child(4n-4) {
margin-right: 0; }
.grid:not(.mini) .grid-item:nth-child(4n-4)::after {
.grid:not(.grid--mini) .grid__item:nth-child(4n-4)::after {
content: '';
clear: both;
display: block; }
.grid:not(.mini) .grid-item:nth-child(4n-3) {
.grid:not(.grid--mini) .grid__item:nth-child(4n-3) {
margin-left: 0; }
.grid:not(.mini).single-row .grid-item:nth-child(1n+5) {
.grid:not(.grid--mini)\--single-row .grid-item:nth-child(1n+5) {
display: none; } }
@media (max-width: 799px) and (min-width: 500px) {
.grid.mini .grid-item {
.grid--mini .grid__item {
width: 13.33333%;
box-sizing: border-box;
margin: 0 2% 4%; }
.grid.mini .grid-item:nth-child(6n-6) {
.grid--mini .grid__item:nth-child(6n-6) {
margin-right: 0; }
.grid.mini .grid-item:nth-child(6n-6)::after {
.grid--mini .grid__item:nth-child(6n-6)::after {
content: '';
clear: both;
display: block; }
.grid.mini .grid-item:nth-child(6n-5) {
.grid--mini .grid__item:nth-child(6n-5) {
margin-left: 0; }
.grid.mini.single-row .grid-item:nth-child(1n+7) {
.grid--mini--single-row .grid-item:nth-child(1n+7) {
display: none; }
.grid:not(.mini) .grid-item {
.grid:not(.grid--mini) .grid__item {
width: 30.66667%;
box-sizing: border-box;
margin: 0 2% 4%; }
.grid:not(.mini) .grid-item:nth-child(3n-3) {
.grid:not(.grid--mini) .grid__item:nth-child(3n-3) {
margin-right: 0; }
.grid:not(.mini) .grid-item:nth-child(3n-3)::after {
.grid:not(.grid--mini) .grid__item:nth-child(3n-3)::after {
content: '';
clear: both;
display: block; }
.grid:not(.mini) .grid-item:nth-child(3n-2) {
.grid:not(.grid--mini) .grid__item:nth-child(3n-2) {
margin-left: 0; }
.grid:not(.mini).single-row .grid-item:nth-child(1n+4) {
.grid:not(.grid--mini)\--single-row .grid-item:nth-child(1n+4) {
display: none; } }
@media (max-width: 499px) {
.grid.mini .grid-item {
.grid--mini .grid__item {
width: 30.66667%;
box-sizing: border-box;
margin: 0 2% 4%; }
.grid.mini .grid-item:nth-child(3n-3) {
.grid--mini .grid__item:nth-child(3n-3) {
margin-right: 0; }
.grid.mini .grid-item:nth-child(3n-3)::after {
.grid--mini .grid__item:nth-child(3n-3)::after {
content: '';
clear: both;
display: block; }
.grid.mini .grid-item:nth-child(3n-2) {
.grid--mini .grid__item:nth-child(3n-2) {
margin-left: 0; }
.grid.mini.single-row .grid-item:nth-child(1n+4) {
.grid--mini--single-row .grid-item:nth-child(1n+4) {
display: none; }
.grid:not(.mini) .grid-item {
.grid:not(.grid--mini) .grid__item {
width: 48%;
box-sizing: border-box;
margin: 0 2% 4%; }
.grid:not(.mini) .grid-item:nth-child(2n-2) {
.grid:not(.grid--mini) .grid__item:nth-child(2n-2) {
margin-right: 0; }
.grid:not(.mini) .grid-item:nth-child(2n-2)::after {
.grid:not(.grid--mini) .grid__item:nth-child(2n-2)::after {
content: '';
clear: both;
display: block; }
.grid:not(.mini) .grid-item:nth-child(2n-1) {
.grid:not(.grid--mini) .grid__item:nth-child(2n-1) {
margin-left: 0; }
.grid:not(.mini).single-row .grid-item:nth-child(1n+5) {
.grid:not(.grid--mini)\--single-row .grid-item:nth-child(1n+5) {
display: none; } }
.tiles {

22
mopidy_iris/static/app.js
View File

@ -20887,9 +20887,9 @@ var ArtistGrid = function (_React$Component) {
var _this2 = this;
if (this.props.artists) {
var className = "grid artist-grid";
var className = "grid grid--artists";
if (this.props.className) className += ' ' + this.props.className;
if (this.props.single_row) className += ' single-row';
if (this.props.single_row) className += ' grid--single-row';
return _react2.default.createElement(
'div',
@ -21133,15 +21133,15 @@ var GridItem = function (_React$Component) {
return _react2.default.createElement(
'div',
{ className: "grid-item " + this.props.type + "-grid-item", onClick: function onClick(e) {
{ className: "grid__item grid__item--" + this.props.type, onClick: function onClick(e) {
return _this2.handleClick(e);
}, onContextMenu: function onContextMenu(e) {
return _this2.handleContextMenu(e);
} },
_react2.default.createElement(_Thumbnail2.default, { size: 'medium', images: images }),
_react2.default.createElement(_Thumbnail2.default, { size: 'medium', className: 'grid__item__thumbnail', images: images }),
_react2.default.createElement(
'div',
{ className: 'name' },
{ className: 'grid__item__name' },
item.name ? item.name : _react2.default.createElement(
'span',
{ className: 'opaque-text' },
@ -21150,7 +21150,7 @@ var GridItem = function (_React$Component) {
),
_react2.default.createElement(
'div',
{ className: 'secondary' },
{ className: 'grid__item__secondary' },
this.props.show_source_icon ? _react2.default.createElement(_Icon2.default, { name: helpers.sourceIcon(item.uri), type: 'fontawesome', className: 'source' }) : null,
this.renderSecondary(item)
)
@ -21363,9 +21363,9 @@ var AlbumGrid = function (_React$Component) {
var _this2 = this;
if (this.props.albums) {
var className = "grid album-grid";
var className = "grid grid--albums";
if (this.props.className) className += ' ' + this.props.className;
if (this.props.single_row) className += ' single-row';
if (this.props.single_row) className += ' grid--single-row';
return _react2.default.createElement(
'div',
@ -21483,9 +21483,9 @@ var PlaylistGrid = function (_React$Component) {
if (!this.props.playlists) return null;
var className = "grid playlist-grid";
var className = "grid grid--playlists";
if (this.props.className) className += ' ' + this.props.className;
if (this.props.single_row) className += ' single-row';
if (this.props.single_row) className += ' grid--single-row';
return _react2.default.createElement(
'div',
{ className: className },
@ -81180,7 +81180,7 @@ var CategoryGrid = function (_React$Component) {
value: function render() {
if (!this.props.categories) return null;
var className = "grid category-grid";
var className = "grid grid--categories";
if (this.props.className) className += ' ' + this.props.className;
return _react2.default.createElement(
'div',

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

@ -98,7 +98,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1543456773";
var build = "1543962408";
var version = "3.31.2";
// Construct the script tag

4
src/js/components/AlbumGrid.js
View File

@ -28,9 +28,9 @@ class AlbumGrid extends React.Component{
render(){
if (this.props.albums){
var className = "grid album-grid"
var className = "grid grid--albums"
if (this.props.className) className += ' '+this.props.className
if (this.props.single_row) className += ' single-row'
if (this.props.single_row) className += ' grid--single-row'
return (
<div className={className}>

4
src/js/components/ArtistGrid.js
View File

@ -36,9 +36,9 @@ class ArtistGrid extends React.Component{
render(){
if (this.props.artists){
var className = "grid artist-grid"
var className = "grid grid--artists"
if (this.props.className) className += ' '+this.props.className
if (this.props.single_row) className += ' single-row'
if (this.props.single_row) className += ' grid--single-row'
return (
<div className={className}>

2
src/js/components/CategoryGrid.js
View File

@ -13,7 +13,7 @@ export default class CategoryGrid extends React.Component{
render(){
if (!this.props.categories ) return null
var className = "grid category-grid"
var className = "grid grid--categories"
if (this.props.className ) className += ' '+this.props.className
return (
<div className={className}>

8
src/js/components/GridItem.js
View File

@ -108,12 +108,12 @@ export default class GridItem extends React.Component{
}
return (
<div className={"grid-item "+this.props.type+"-grid-item"} onClick={e => this.handleClick(e)} onContextMenu={e => this.handleContextMenu(e)}>
<Thumbnail size="medium" images={images} />
<div className="name">
<div className={"grid__item grid__item--"+this.props.type} onClick={e => this.handleClick(e)} onContextMenu={e => this.handleContextMenu(e)}>
<Thumbnail size="medium" className="grid__item__thumbnail" images={images} />
<div className="grid__item__name">
{item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
</div>
<div className="secondary">
<div className="grid__item__secondary">
{this.props.show_source_icon ? <Icon name={helpers.sourceIcon(item.uri)} type="fontawesome" className="source" /> : null}
{this.renderSecondary(item)}
</div>

4
src/js/components/PlaylistGrid.js
View File

@ -29,9 +29,9 @@ class PlaylistGrid extends React.Component{
render(){
if (!this.props.playlists ) return null
var className = "grid playlist-grid"
var className = "grid grid--playlists"
if (this.props.className) className += ' '+this.props.className
if (this.props.single_row) className += ' single-row'
if (this.props.single_row) className += ' grid--single-row'
return (
<div className={className}>
{

91
src/scss/components/_grid.scss
View File

@ -1,27 +1,28 @@
.grid {
.grid-item-wrapper {
display: inline-block;
}
.grid-item {
&__item {
display: inline-block;
vertical-align: top;
border-bottom: 0;
position: relative;
.thumbnail {
&__wrapper {
display: inline-block;
}
&__thumbnail {
@include animate();
max-width: 100%;
}
.name {
&__name {
@include one_line_text;
padding-top: 8px;
padding-top: 12px;
font-size: 15px;
}
.secondary {
&__secondary {
@include one_line_text;
padding-top: 2px;
color: colour(secondary_grey);
@ -34,7 +35,7 @@
&:hover{
cursor: pointer;
.thumbnail {
&__thumbnail {
opacity: 0.75;
}
}
@ -47,11 +48,11 @@
}
}
&.category-grid {
.grid-item {
&--categories {
.grid__item {
position: relative;
.name {
&__name {
position: absolute;
bottom: 15%;
left: 0;
@ -64,8 +65,8 @@
}
@include responsive(null, $bp_wide){
.grid-item {
.name {
.grid__item {
&__name {
font-size: 16px;
}
}
@ -73,21 +74,21 @@
}
@include responsive(null, 1900px){
&.mini {
.grid-item {
&--mini {
.grid__item {
@include grid_item(3)
}
&.single-row {
&--single-row {
.grid-item:nth-child(1n+4){
display: none;
}
}
}
&:not(.mini){
.grid-item {
&:not(.grid--mini){
.grid__item {
@include grid_item(5 )
}
&.single-row {
&--single-row {
.grid-item:nth-child(1n+6){
display: none;
}
@ -96,21 +97,21 @@
}
@include responsive(1899px, 1200px){
&.mini {
.grid-item {
&--mini {
.grid__item {
@include grid_item(2 )
}
&.single-row {
&--single-row {
.grid-item:nth-child(1n+3){
display: none;
}
}
}
&:not(.mini){
.grid-item {
&:not(.grid--mini){
.grid__item {
@include grid_item(4 )
}
&.single-row {
&--single-row {
.grid-item:nth-child(1n+5){
display: none;
}
@ -119,21 +120,21 @@
}
@include responsive(1199px, 800px){
&.mini {
.grid-item {
&--mini {
.grid__item {
@include grid_item(2 )
}
&.single-row {
&--single-row {
.grid-item:nth-child(1n+3){
display: none;
}
}
}
&:not(.mini){
.grid-item {
&:not(.grid--mini){
.grid__item {
@include grid_item(4 )
}
&.single-row {
&--single-row {
.grid-item:nth-child(1n+5){
display: none;
}
@ -142,21 +143,21 @@
}
@include responsive(799px, 500px){
&.mini{
.grid-item {
&--mini{
.grid__item {
@include grid_item(6, 2%, 4% )
}
&.single-row {
&--single-row {
.grid-item:nth-child(1n+7){
display: none;
}
}
}
&:not(.mini){
.grid-item {
&:not(.grid--mini){
.grid__item {
@include grid_item(3, 2%, 4% )
}
&.single-row {
&--single-row {
.grid-item:nth-child(1n+4){
display: none;
}
@ -165,21 +166,21 @@
}
@include responsive(499px){
&.mini{
.grid-item {
&--mini{
.grid__item {
@include grid_item(3, 2%, 4% )
}
&.single-row {
&--single-row {
.grid-item:nth-child(1n+4){
display: none;
}
}
}
&:not(.mini){
.grid-item {
&:not(.grid--mini){
.grid__item {
@include grid_item(2, 2%, 4% )
}
&.single-row {
&--single-row {
.grid-item:nth-child(1n+5){
display: none;
}

6
src/scss/components/_sidebar.scss
View File

@ -52,13 +52,13 @@ aside{
a {
@include gradient_overlay(3px);
font-family: "Overpass";
font-weight: 500;
font-weight: 600;
font-size: 14px;
color: colour(white);
text-decoration: none;
display: block;
padding: 10px 10px 8px;
margin: 0 16px;
padding: 12px 10px 10px;
margin: 0 18px;
border-radius: 3px;
.light-theme & {