Use table-condensed on small screens

This commit is contained in:
Lucas Verney 2016-07-30 01:05:25 +02:00
parent 85ebfa0c55
commit d8a44cdc3c
12 changed files with 57 additions and 41 deletions

View File

@ -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 (

View File

@ -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) {

6
app/dist/1.1.js vendored

File diff suppressed because one or more lines are too long

2
app/dist/1.1.js.map vendored

File diff suppressed because one or more lines are too long

2
app/dist/fix.ie9.js vendored
View File

@ -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

46
app/dist/index.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
app/dist/style.css vendored

File diff suppressed because one or more lines are too long

View File

@ -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";

View File

@ -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;
}
}
}
}
} }

View File

@ -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 */