From 2867560fede59b73be89a9ac00b56abda1762abb Mon Sep 17 00:00:00 2001 From: Jeremy Kauffman Date: Mon, 8 Aug 2016 00:47:48 -0400 Subject: [PATCH] unify item tiles --- js/page/discover.js | 108 ++++++++++---------------------------------- js/page/show.js | 76 ++++++++++++++----------------- scss/_canvas.scss | 9 +++- scss/_gui.scss | 15 +++++- scss/_table.scss | 50 ++++++++++++++++++++ scss/all.scss | 1 + 6 files changed, 130 insertions(+), 129 deletions(-) create mode 100644 scss/_table.scss diff --git a/js/page/discover.js b/js/page/discover.js index c385075bc..5c6d9bba4 100644 --- a/js/page/discover.js +++ b/js/page/discover.js @@ -1,11 +1,4 @@ -var searchInputStyle = { - width: '400px', - display: 'block', - marginBottom: '48px', - marginLeft: 'auto', - marginRight: 'auto' - }, - fetchResultsStyle = { +var fetchResultsStyle = { color: '#888', textAlign: 'center', fontSize: '1.2em' @@ -56,9 +49,13 @@ var SearchResults = React.createClass({ }); var + searchRowStyle = { + height: '160px', + overflowY: 'hidden' + }, searchRowImgStyle = { maxWidth: '100%', - maxHeight: '250px', + maxHeight: '16 0px', display: 'block', marginLeft: 'auto', marginRight: 'auto', @@ -69,19 +66,11 @@ var }, searchRowCostStyle = { float: 'right', - marginLeft: '20px', - marginTop: '5px', - display: 'inline-block' - }, - searchRowNameStyle = { - fontSize: '0.9em', - color: '#666', - marginBottom: '24px', - clear: 'both' }, searchRowDescriptionStyle = { color : '#444', marginBottom: '24px', + marginTop: '12px', fontSize: '0.9em' }; @@ -94,8 +83,9 @@ var SearchResultRow = React.createClass({ }, render: function() { return ( +
-
+
{'Photo
@@ -103,14 +93,13 @@ var SearchResultRow = React.createClass({ -

{this.props.title}

-
lbry://{this.props.name}
-

{this.props.description}

+
lbry://{this.props.name}
+

{this.props.title}

- { ' ' } - +
+

{this.props.description}

@@ -118,34 +107,13 @@ var SearchResultRow = React.createClass({ } }); -var featuredContentItemStyle = { - height: '120px', - overflowY: 'hidden' -}, featuredContentItemImgStyle = { - maxWidth: '100%', - maxHeight: '120px', - display: 'block', - marginLeft: 'auto', - marginRight: 'auto' -}, featuredContentHeaderStyle = { - fontWeight: 'bold', - marginBottom: '5px' -}, featuredContentSubheaderStyle = { - marginBottom: '10px', - fontSize: '0.9em' -}, featuredContentItemDescriptionStyle = { - color: '#444', - fontSize: '0.9em', -}, featuredContentItemCostStyle = { - float: 'right' -}; + var FeaturedContentItem = React.createClass({ - _maxDescriptionLength: 250, - propTypes: { name: React.PropTypes.string, }, + getInitialState: function() { return { metadata: null, @@ -153,6 +121,7 @@ var FeaturedContentItem = React.createClass({ amount: 0.0, }; }, + componentWillMount: function() { lbry.resolveName(this.props.name, (metadata) => { this.setState({ @@ -166,45 +135,14 @@ var FeaturedContentItem = React.createClass({ }); }); }, + render: function() { if (this.state.metadata == null) { // Still waiting for metadata return null; } - - var metadata = this.state.metadata; - - if ('narrow' in this.props) { - // Workaround -- narrow thumbnails look a bit funky without some extra left margin. - // Find a way to do this in CSS. - - var thumbStyle = Object.assign({}, featuredContentItemImgStyle, { - position: 'relative', - maxHeight: '102px', - left: '13px', - }); - } else { - var thumbStyle = featuredContentItemImgStyle; - } - - return ( -
-
-
- {'Photo -
-
-

{this.state.title}

-
-
- -     - -
-

{metadata.description}

-
-
-
); + return ; } }); @@ -244,7 +182,7 @@ var DiscoverPage = React.createClass({ componentDidUpdate: function() { if (this.props.query) { - lbry.search(this.props.query, this.searchCallback.bind(this, this.props.query)); + lbry.search(this.props.query, this.searchCallback); } }, @@ -255,18 +193,20 @@ var DiscoverPage = React.createClass({ getInitialState: function() { return { results: [], + query: this.props.query, searching: this.props.query && this.props.query.length > 0 }; }, - searchCallback: function(originalQuery, results) { + searchCallback: function(results) { console.log('search callback'); console.log(this.state); + console.log(this.props); if (this.state.searching) //could have canceled while results were pending, in which case nothing to do { this.setState({ results: results, - searching: this.props.query != originalQuery, //multiple searches can be out, we're only done if we receive one we actually care about + searching: false //multiple searches can be out, we're only done if we receive one we actually care about }); } }, diff --git a/js/page/show.js b/js/page/show.js index f905edb9a..ca7a28927 100644 --- a/js/page/show.js +++ b/js/page/show.js @@ -1,30 +1,10 @@ -var formatItemStyle = { - fontSize: '0.95em', - marginTop: '10px', - maxHeight: '220px' -}, formatItemImgStyle = { +var formatItemImgStyle = { maxWidth: '100%', maxHeight: '100%', display: 'block', marginLeft: 'auto', marginRight: 'auto', marginTop: '5px', -}, formatHeaderStyle = { - fontWeight: 'bold', - marginBottom: '5px' -}, formatSubheaderStyle = { - marginBottom: '10px', - fontSize: '0.9em' -}, formatItemDescriptionStyle = { - color: '#444', - marginBottom: '5px', - fontSize: '1.2em', -}, formatItemMetadataStyle = { - color: '#444', - marginBottom: '5px', - fontSize: '0.9em', -}, formatItemCostStyle = { - float: 'right' }; var FormatItem = React.createClass({ @@ -34,7 +14,6 @@ var FormatItem = React.createClass({ name: React.PropTypes.string, }, render: function() { - var name = this.props.name; var claimInfo = this.props.claimInfo; var thumbnail = claimInfo.thumbnail; @@ -48,25 +27,33 @@ var FormatItem = React.createClass({ var amount = this.props.amount || 0.0; return ( -
+
{'Photo
-

Address: {name}

-

Content-Type: {fileContentType}

-
-
- -     - -
-

{description}

-
- Author: {author}
- Language: {language}
- License: {license}
-
+

{description}

+ + + + + + + + + + + + + + + + + + +
Content-Type{fileContentType}
Cost
Author{author}
Language{language}
License{license}
+ +
); @@ -88,17 +75,18 @@ var FormatsSection = React.createClass({ { return (
-

Sorry, no results found for "{name}".

+

Sorry, no results found for "{name}".

); } return (
-

{title}

+
lbry://{name}
+

{title}

{/* In future, anticipate multiple formats, just a guess at what it could look like // var formats = this.props.claimInfo.formats // return ({formats.map(function(format,i){ */} - + {/* })}); */}
); } @@ -116,6 +104,8 @@ var DetailPage = React.createClass({ }; }, componentWillMount: function() { + document.title = 'lbry://' + this.props.name; + lbry.getClaimInfo(this.props.name, (claimInfo) => { this.setState({ claimInfo: claimInfo.value, @@ -140,8 +130,10 @@ var DetailPage = React.createClass({ var amount = this.state.amount; return ( -
- +
+
+ +
); } }); \ No newline at end of file diff --git a/scss/_canvas.scss b/scss/_canvas.scss index 4b21f4b55..8f220c2b6 100644 --- a/scss/_canvas.scss +++ b/scss/_canvas.scss @@ -16,7 +16,7 @@ $drawer-width: 240px; #drawer { width: $drawer-width; - position: absolute; + position: fixed; min-height: 100vh; left: 0; top: 0; @@ -122,6 +122,13 @@ $drawer-width: 240px; margin-top: 0; } } + .meta + { + + h2, + h3, + h4 + { + margin-top: 0; + } + } } $header-icon-size: 1.5em; diff --git a/scss/_gui.scss b/scss/_gui.scss index 8468977c2..812917691 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -110,7 +110,6 @@ input[type="text"], input[type="search"], textarea display: inline-block; height: $spacing-vertical * 1.5; line-height: $spacing-vertical * 1.5; - padding: 0 30px; text-decoration: none; border: 0 none; text-align: center; @@ -118,7 +117,7 @@ input[type="text"], input[type="search"], textarea text-transform: uppercase; + .button-block { - margin-left: 20px; + margin-left: 12px; } .icon { @@ -139,11 +138,17 @@ input[type="text"], input[type="search"], textarea color: white; background-color: $color-primary; box-shadow: $default-box-shadow; + padding: 0 12px; } .button-alt { background-color: rgba(0,0,0,.15); box-shadow: $default-box-shadow; + padding: 0 12px; +} +.button-cancel +{ + padding: 0 12px; } .button-text { @@ -185,6 +190,12 @@ input[type="text"], input[type="search"], textarea color: $color-help; } +.meta +{ + font-size: 0.9em; + color: $color-meta-light; +} + .form-row { + .form-row diff --git a/scss/_table.scss b/scss/_table.scss new file mode 100644 index 000000000..ada7f9c1b --- /dev/null +++ b/scss/_table.scss @@ -0,0 +1,50 @@ +table.table-standard { + margin-bottom: $spacing-vertical; + word-wrap: break-word; + max-width: 100%; + + th, td { + padding: $spacing-vertical/2 8px; + } + th { + font-weight: bold; + font-size: 0.9em; + } + td { + vertical-align: top; + } + thead th, > tr:first-child th { + vertical-align: bottom; + font-weight: bold; + font-size: 0.9em; + padding: $spacing-vertical/4+1 8px $spacing-vertical/4-2; + text-align: left; + border-bottom: 1px solid #e2e2e2; + img { + vertical-align: text-bottom; + } + } + tr.thead:not(:first-child) th { + border-top: 1px solid #e2e2e2; + } + tfoot td { + padding: $spacing-vertical / 2 8px; + font-size: .85em; + } + tbody { + tr { + &:nth-child(even):not(.odd) { + background-color: #f4f4f4; + } + &:nth-child(odd):not(.even) { + background-color: white; + } + &.thead { + background: none; + } + td { + border: 0 none; + } + } + } +} \ No newline at end of file diff --git a/scss/all.scss b/scss/all.scss index 5101926a3..cbaf6d901 100644 --- a/scss/all.scss +++ b/scss/all.scss @@ -3,4 +3,5 @@ @import "_icons"; @import "_mediaelement"; @import "_canvas"; +@import "_table"; @import "_gui"; \ No newline at end of file