unify item tiles

2016-08-08 00:47:48 -04:00 · 2016-08-08 00:47:48 -04:00 · 2867560fed
parent 201a1989d9
commit 2867560fed
6 changed files with 130 additions and 129 deletions
--- 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 (
+
      <section className="card">
-        <div className="row-fluid">
+        <div className="row-fluid" style={searchRowStyle}>
          <div className="span3">
            <img src={this.props.imgUrl} alt={'Photo for ' + (this.props.title || this.props.name)} style={searchRowImgStyle} />
          </div>
@ -103,14 +93,13 @@ var SearchResultRow = React.createClass({
            <span style={searchRowCostStyle}>
              <CreditAmount amount={this.props.cost_est} isEstimate={true}/>
            </span>
-            <h2 style={searchRowTitleStyle}><a href={'/?show=' + this.props.name}>{this.props.title}</a></h2>
-            <div style={searchRowNameStyle}>lbry://{this.props.name}</div>
-            <p style={searchRowDescriptionStyle}><TruncatedText>{this.props.description}</TruncatedText></p>
+            <div className="meta">lbry://{this.props.name}</div>
+            <h3 style={searchRowTitleStyle}><a href={'/?show=' + this.props.name}>{this.props.title}</a></h3>
            <div>
              <WatchLink streamName={this.props.name} button="primary" />
-              { ' ' }
-              <DownloadLink streamName={this.props.name} button="alt" />
+              <DownloadLink streamName={this.props.name} button="text" />
            </div>
+            <p style={searchRowDescriptionStyle}>{this.props.description}</p>
          </div>
        </div>
      </section>
@ -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 (
-      <section className="card">
-        <div className="row-fluid" style={featuredContentItemStyle}>
-          <div className="span4">
-            <img src={metadata.thumbnail} alt={'Photo for ' + this.state.title} style={thumbStyle} />
-          </div>
-          <div className="span8">
-            <h4 style={featuredContentHeaderStyle}><a href={'/?show=' + this.props.name}>{this.state.title}</a></h4>
-            <div style={featuredContentSubheaderStyle}>
-              <div style={featuredContentItemCostStyle}><CreditAmount amount={this.state.amount} isEstimate={true}/></div>
-              <WatchLink streamName={this.props.name} />
-              &nbsp;&nbsp;&nbsp;
-              <DownloadLink streamName={this.props.name} />
-            </div>
-            <p style={featuredContentItemDescriptionStyle}><TruncatedText>{metadata.description}</TruncatedText></p>
-          </div>
-        </div>
-      </section>);
+    return <SearchResultRow name={this.props.name} title={this.state.title} imgUrl={this.state.metadata.thumbnail}
+                     description={this.state.metadata.description} cost_est={this.state.amount} />;
  }
 });

@ -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
      });
    }
  },
--- 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 (
-      <div className="row-fluid" style={formatItemStyle}>
+      <div className="row-fluid">
        <div className="span4">
          <img src={thumbnail} alt={'Photo for ' + title} style={formatItemImgStyle} />
        </div>
        <div className="span8">
-          <h4 style={formatItemMetadataStyle}><b>Address:</b> {name}</h4>
-          <h4 style={formatItemMetadataStyle}><b>Content-Type:</b> {fileContentType}</h4>
-          <div style={formatSubheaderStyle}>
-            <div style={formatItemCostStyle}><CreditAmount amount={amount} isEstimate={true}/></div>
-            <WatchLink streamName={name} />
-            &nbsp;&nbsp;&nbsp;
-            <DownloadLink streamName={name} />
-          </div>
-          <p style={formatItemDescriptionStyle}>{description}</p>
-          <div>
-            <span style={formatItemMetadataStyle}><b>Author:</b> {author}</span><br />
-            <span style={formatItemMetadataStyle}><b>Language:</b> {language}</span><br />
-            <span style={formatItemMetadataStyle}><b>License:</b> {license}</span><br />
-          </div>
+          <p>{description}</p>
+          <table className="table-standard">
+            <tbody>
+              <tr>
+                <td>Content-Type</td><td>{fileContentType}</td>
+              </tr>
+              <tr>
+                <td>Cost</td><td><CreditAmount amount={amount} isEstimate={true}/></td>
+              </tr>
+              <tr>
+                <td>Author</td><td>{author}</td>
+              </tr>
+              <tr>
+                <td>Language</td><td>{language}</td>
+              </tr>
+              <tr>
+                <td>License</td><td>{license}</td>
+              </tr>
+            </tbody>
+          </table>
+          <WatchLink streamName={this.props.name} button="primary" />
+          <DownloadLink streamName={this.props.name} button="alt" />
        </div>
      </div>
      );
@ -88,17 +75,18 @@ var FormatsSection = React.createClass({
    {
      return (
        <div>
-          <h1 style={formatHeaderStyle}>Sorry, no results found for "{name}".</h1>
+          <h2>Sorry, no results found for "{name}".</h2>
        </div>);
    }

    return (
      <div>
-        <h1 style={formatHeaderStyle}>{title}</h1>
+        <div className="meta">lbry://{name}</div>
+        <h2>{title}</h2>
      {/* In future, anticipate multiple formats, just a guess at what it could look like
      // var formats = this.props.claimInfo.formats
      // return (<tbody>{formats.map(function(format,i){ */}
-          <FormatItem name={name} claimInfo={format} amount={this.props.amount} />
+          <FormatItem claimInfo={format} amount={this.props.amount} />
      {/*  })}</tbody>); */}
      </div>);
  }
@ -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 (
-      <main className="page">
-        <FormatsSection name={name} claimInfo={claimInfo} amount={amount} />
+      <main>
+        <section className="card">
+          <FormatsSection name={name} claimInfo={claimInfo} amount={amount} />
+        </section>
      </main>);
  }
 });
--- 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;
--- 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
--- a/scss/_table.scss
+++ 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;
+      }
+    }
+  }
+}
--- a/scss/all.scss
+++ b/scss/all.scss
@ -3,4 +3,5 @@
@import "_icons";
@import "_mediaelement";
@import "_canvas";
+@import "_table";
@import "_gui";