limit search and adapt ui

client/homebrew/pages/archivePage/archivePage.jsx

@@ -25,6 +25,7 @@ const ArchivePage = createClass({
       brewCollection : null,
       searching  : false,
       error      : null,
+      limit      : '',
     };
   },
   componentDidMount : function() {
@@ -38,10 +39,9 @@ const ArchivePage = createClass({
   },
   lookup() {
     this.setState({ searching: true, error: null });
-
     request
       .get(`/archive/${this.state.title}`)
-      .then((res) => this.setState({ brewCollection: res.body }))
+      .then((res) => this.setState({ brewCollection: res.body.brews }, this.setState({ limit: res.body.message})))
       .catch((err) => this.setState({ error: err }))
       .finally(() => this.setState({ searching: false }));
   },
@@ -67,6 +67,9 @@ const ArchivePage = createClass({
     }
     this.updateUrl();
       return <div className="foundBrews">
+        <div className="limit">
+          <p>{this.state.limit}</p>
+        </div>
         {brews.map((brew, index) => (
         <BrewItem brew={brew} key={index} reportError={this.props.reportError}/>
         ))}
@@ -84,11 +87,14 @@ const ArchivePage = createClass({
           type='text'
           value={this.state.title}
           onChange={this.handleChange}
+          onKeyDown={(e) => e.key === 'Enter' && this.lookup()}
           placeholder='v3 Reference Document'
         />
         {/* In the future, we should be able to filter the results by adding tags.
             <label>Tags</label><input type='text' value={this.state.query} placeholder='add a tag to filter'/>
+            <input type="checkbox" id="v3" /><label>v3 only</label>
             */}
+            
         <button onClick={this.lookup}>
           <i
             className={cx('fas', {

client/homebrew/pages/archivePage/archivePage.less

@@ -35,7 +35,7 @@ body {
         .flexGroup {
             height: 100%;
             display: grid;
-            grid-template-columns: 1fr 2fr;
+            grid-template-columns: 500px 2fr;
 
             .dataGroup {
                 width: 100%;
@@ -81,6 +81,7 @@ body {
                     }
 
                     .foundBrews {
+                        position:relative;
                         background-color: #2C3E50;
                         display: flex;
                         flex-direction: column;
@@ -90,6 +91,22 @@ body {
                         padding: 50px;
                         padding-bottom: unset;
 
+                        .limit {
+                            position:fixed;
+                            bottom:0;
+                            left:502px;
+                            font-size: 11px;
+                            font-weight: 800;
+                            color:white;
+                            background-color: #333;
+                            padding: 8px 10px;
+                            z-index: 1000;
+
+                            &:has(p:empty) {
+                                display:none;
+                            }
+                        }
+                        
                         .brewItem {
                             height: 50px;
                             min-height: unset;
@@ -103,14 +120,15 @@ body {
                                 min-height: unset;
                                 width: 20vw;
                                 padding-inline:10px;
+                                height: 1.5em;
                                 
                                 display: grid;
                                 align-content: center;
 
                                 h2 {
                                     text-overflow: ellipsis;
-                                overflow: hidden;
-                                white-space: nowrap;
+                                    overflow: hidden;
+                                    white-space: nowrap;
                                     font-size: 20px;
                                     font-weight: 900;
 
@@ -181,6 +199,7 @@ body {
                                         height: max-content;
                                         z-index: 100;
                                         width:min-content;
+                                        padding:10px;
 
                                         span:nth-of-type(n+4) {
                                             display: block;

server/archive.api.js

@@ -7,7 +7,7 @@ const archive = {
     /* Searches for matching title, also attempts to partial match */
     findBrews: async (req, res, next) => {
         try {
-            const limit = 3;
+            const limit = 100;
             const brews = await HomebrewModel.find({
                 title: { $regex: req.params.query, $options: 'i' },
                 published: true