Use table-condensed on small screens
This commit is contained in:
parent
85ebfa0c55
commit
d8a44cdc3c
|
@ -23,14 +23,14 @@ AlbumTrackRow.propTypes = {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export class AlbumTracksTable extends Component {
|
class AlbumTracksTableCSS extends Component {
|
||||||
render () {
|
render () {
|
||||||
var rows = [];
|
var rows = [];
|
||||||
this.props.tracks.forEach(function (item) {
|
this.props.tracks.forEach(function (item) {
|
||||||
rows.push(<AlbumTrackRow track={item} key={item.id} />);
|
rows.push(<AlbumTrackRow track={item} key={item.id} />);
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<table className="table table-hover songs">
|
<table className="table table-hover" styleName="songs">
|
||||||
<tbody>
|
<tbody>
|
||||||
{rows}
|
{rows}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
@ -39,10 +39,12 @@ export class AlbumTracksTable extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
AlbumTracksTable.propTypes = {
|
AlbumTracksTableCSS.propTypes = {
|
||||||
tracks: PropTypes.array.isRequired
|
tracks: PropTypes.array.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export let AlbumTracksTable = CSSModules(AlbumTracksTableCSS, css);
|
||||||
|
|
||||||
class AlbumRowCSS extends Component {
|
class AlbumRowCSS extends Component {
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import React, { Component, PropTypes } from "react";
|
import React, { Component, PropTypes } from "react";
|
||||||
import { Link} from "react-router";
|
import { Link} from "react-router";
|
||||||
|
import CSSModules from "react-css-modules";
|
||||||
import { defineMessages, FormattedMessage } from "react-intl";
|
import { defineMessages, FormattedMessage } from "react-intl";
|
||||||
import Fuse from "fuse.js";
|
import Fuse from "fuse.js";
|
||||||
|
|
||||||
|
@ -10,6 +11,8 @@ import { formatLength, messagesMap } from "../utils";
|
||||||
import commonMessages from "../locales/messagesDescriptors/common";
|
import commonMessages from "../locales/messagesDescriptors/common";
|
||||||
import messages from "../locales/messagesDescriptors/Songs";
|
import messages from "../locales/messagesDescriptors/Songs";
|
||||||
|
|
||||||
|
import css from "../styles/Songs.scss";
|
||||||
|
|
||||||
const songsMessages = defineMessages(messagesMap(Array.concat([], commonMessages, messages)));
|
const songsMessages = defineMessages(messagesMap(Array.concat([], commonMessages, messages)));
|
||||||
|
|
||||||
export class SongsTableRow extends Component {
|
export class SongsTableRow extends Component {
|
||||||
|
@ -35,7 +38,7 @@ SongsTableRow.propTypes = {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export class SongsTable extends Component {
|
class SongsTableCSS extends Component {
|
||||||
render () {
|
render () {
|
||||||
var displayedSongs = this.props.songs;
|
var displayedSongs = this.props.songs;
|
||||||
if (this.props.filterText) {
|
if (this.props.filterText) {
|
||||||
|
@ -57,7 +60,7 @@ export class SongsTable extends Component {
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<div className="table-responsive">
|
<div className="table-responsive">
|
||||||
<table className="table table-hover songs">
|
<table className="table table-hover" styleName="songs">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
@ -85,11 +88,13 @@ export class SongsTable extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SongsTable.propTypes = {
|
SongsTableCSS.propTypes = {
|
||||||
songs: PropTypes.array.isRequired,
|
songs: PropTypes.array.isRequired,
|
||||||
filterText: PropTypes.string
|
filterText: PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export let SongsTable = CSSModules(SongsTableCSS, css);
|
||||||
|
|
||||||
|
|
||||||
export default class FilterablePaginatedSongsTable extends Component {
|
export default class FilterablePaginatedSongsTable extends Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,2 +1,2 @@
|
||||||
!function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="./",t(0)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(585);Object.keys(r).forEach(function(e){"default"!==e&&Object.defineProperty(t,e,{enumerable:!0,get:function(){return r[e]}})})},585:function(e,t){!function(t,n){function r(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function a(){var e=b.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=b.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),b.elements=n+" "+e,s(t)}function c(e){var t=E[e[v]];return t||(t={},y++,e[v]=y,E[y]=t),t}function i(e,t,r){if(t||(t=n),f)return t.createElement(e);r||(r=c(t));var a;return a=r.cache[e]?r.cache[e].cloneNode():g.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!a.canHaveChildren||p.test(e)||a.tagUrn?a:r.frag.appendChild(a)}function l(e,t){if(e||(e=n),f)return e.createDocumentFragment();t=t||c(e);for(var r=t.frag.cloneNode(),o=0,i=a(),l=i.length;o<l;o++)r.createElement(i[o]);return r}function u(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return b.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+a().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(b,t.frag)}function s(e){e||(e=n);var t=c(e);return!b.shivCSS||d||t.hasCSS||(t.hasCSS=!!r(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||u(e,t),e}var d,f,m="3.7.3-pre",h=t.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,g=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,v="_html5shiv",y=0,E={};!function(){try{var e=n.createElement("a");e.innerHTML="<xyz></xyz>",d="hidden"in e,f=1==e.childNodes.length||function(){n.createElement("a");var e=n.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(t){d=!0,f=!0}}();var b={elements:h.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:h.shivCSS!==!1,supportsUnknownElements:f,shivMethods:h.shivMethods!==!1,type:"default",shivDocument:s,createElement:i,createDocumentFragment:l,addElements:o};t.html5=b,s(n),"object"==typeof e&&e.exports&&(e.exports=b)}("undefined"!=typeof window?window:this,document)}});
|
!function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="./",t(0)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(586);Object.keys(r).forEach(function(e){"default"!==e&&Object.defineProperty(t,e,{enumerable:!0,get:function(){return r[e]}})})},586:function(e,t){!function(t,n){function r(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function a(){var e=b.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=b.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),b.elements=n+" "+e,s(t)}function c(e){var t=E[e[v]];return t||(t={},y++,e[v]=y,E[y]=t),t}function i(e,t,r){if(t||(t=n),f)return t.createElement(e);r||(r=c(t));var a;return a=r.cache[e]?r.cache[e].cloneNode():g.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!a.canHaveChildren||p.test(e)||a.tagUrn?a:r.frag.appendChild(a)}function l(e,t){if(e||(e=n),f)return e.createDocumentFragment();t=t||c(e);for(var r=t.frag.cloneNode(),o=0,i=a(),l=i.length;o<l;o++)r.createElement(i[o]);return r}function u(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return b.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+a().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(b,t.frag)}function s(e){e||(e=n);var t=c(e);return!b.shivCSS||d||t.hasCSS||(t.hasCSS=!!r(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||u(e,t),e}var d,f,m="3.7.3-pre",h=t.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,g=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,v="_html5shiv",y=0,E={};!function(){try{var e=n.createElement("a");e.innerHTML="<xyz></xyz>",d="hidden"in e,f=1==e.childNodes.length||function(){n.createElement("a");var e=n.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(t){d=!0,f=!0}}();var b={elements:h.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:h.shivCSS!==!1,supportsUnknownElements:f,shivMethods:h.shivMethods!==!1,type:"default",shivDocument:s,createElement:i,createDocumentFragment:l,addElements:o};t.html5=b,s(n),"object"==typeof e&&e.exports&&(e.exports=b)}("undefined"!=typeof window?window:this,document)}});
|
||||||
//# sourceMappingURL=fix.ie9.js.map
|
//# sourceMappingURL=fix.ie9.js.map
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,5 +1,3 @@
|
||||||
// TODO: Refactor using normalizr
|
|
||||||
// TODO: https://facebook.github.io/immutable-js/ ?
|
|
||||||
import fetch from "isomorphic-fetch";
|
import fetch from "isomorphic-fetch";
|
||||||
import humps from "humps";
|
import humps from "humps";
|
||||||
import X2JS from "x2js";
|
import X2JS from "x2js";
|
||||||
|
|
|
@ -24,4 +24,17 @@
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.songs {
|
||||||
|
> thead,
|
||||||
|
> tbody,
|
||||||
|
> tfoot {
|
||||||
|
> tr {
|
||||||
|
> th,
|
||||||
|
> td {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,5 +9,3 @@
|
||||||
.art {
|
.art {
|
||||||
composes: art from "./elements/Grid.scss";
|
composes: art from "./elements/Grid.scss";
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TODO: Use table-condensed if xs screen */
|
|
||||||
|
|
Loading…
Reference in New Issue