From 1fb3ec405748b0ca10713ceff4afd0e24e85749d Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 4 Sep 2022 00:18:08 +1200 Subject: [PATCH 01/79] Add thumbnail to UserPage data --- server/app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/server/app.js b/server/app.js index cbbc3e3fe..27326caf4 100644 --- a/server/app.js +++ b/server/app.js @@ -179,6 +179,7 @@ app.get('/user/:username', async (req, res, next)=>{ 'createdAt', 'updatedAt', 'lastViewed', + 'thumbnail', 'tags' ]; From 0f1c585567e3dde8ff71b0980197965766800d2c Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 4 Sep 2022 00:19:05 +1200 Subject: [PATCH 02/79] Add thumbnail functionality to BrewItem --- .../homebrew/pages/basePages/listPage/brewItem/brewItem.jsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx index fc69466f1..f81066d8f 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx @@ -98,6 +98,12 @@ const BrewItem = createClass({ const dateFormatString = 'YYYY-MM-DD HH:mm:ss'; return
+ {brew.thumbnail ? +
+ +
: + <> + }

{brew.title}

{brew.description}

From 3975c74b2bcdba17cf92d8ccd169356dd030d6f7 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 4 Sep 2022 00:19:26 +1200 Subject: [PATCH 03/79] Add thumbnail styling to BrewItem.less --- .../basePages/listPage/brewItem/brewItem.less | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 762a0b8d5..40799c1d5 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -10,7 +10,7 @@ min-height : 105px; margin-right : 15px; margin-bottom : 15px; - padding : 5px 15px 2px 8px; + padding : 5px 15px 2px 6px; padding-right : 15px; border : 1px solid #c9ad6a; border-radius : 5px; @@ -19,6 +19,20 @@ break-inside : avoid; box-shadow : 0px 4px 5px 0px #333; background-color : #cab2802e; + .thumbnail { + width: 80px; + height: 100px; + border: 2px solid #58180D; + border-radius: 8px; + float: left; + margin-right: 5px; + display: flex; + img.thumbnailImage { + max-width: 100%; + max-height: 100%; + margin: auto; + } + } .text { min-height : 54px; h4{ From 4a89d73f731006490e03f461a3de766ad4d432a0 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 4 Sep 2022 16:44:18 +1200 Subject: [PATCH 04/79] Update brewItem.less Co-authored-by: Trevor Buckner --- .../pages/basePages/listPage/brewItem/brewItem.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 40799c1d5..8746c61d3 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -28,9 +28,10 @@ margin-right: 5px; display: flex; img.thumbnailImage { - max-width: 100%; - max-height: 100%; - margin: auto; + width : 100%; + height : 100%; + object-fit : cover; + border-radius : inherit; } } .text { From 46a45a85360e6588b87c3724ef848f3dede39e18 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Tue, 13 Sep 2022 10:57:28 -0500 Subject: [PATCH 05/79] replace sort table with divs and give UI styling --- .../pages/basePages/listPage/listPage.jsx | 28 ++++---- .../pages/basePages/listPage/listPage.less | 66 ++++++++++--------- 2 files changed, 45 insertions(+), 49 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index 0969b9f2a..b81f9c8e0 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -114,7 +114,7 @@ const ListPage = createClass({ }, renderSortOption : function(sortTitle, sortValue){ - return + return
- ; +
; }, handleFilterTextChange : function(e){ @@ -150,7 +150,7 @@ const ListPage = createClass({ }, renderFilterOption : function(){ - return + return
- ; +
; }, renderSortOptions : function(){ return
- - - - {this.renderSortOption('Title', 'alpha')} {this.renderSortOption('Created Date', 'created')} {this.renderSortOption('Updated Date', 'updated')} {this.renderSortOption('Views', 'views')} {/* {this.renderSortOption('Latest', 'latest')} */} - - + {this.renderFilterOption()} - - -
Sort by :
-
+
Direction :
-
+ -
+ + +
; }, @@ -233,10 +227,10 @@ const ListPage = createClass({ return
{this.props.navItems} + {this.renderSortOptions()}
- {this.renderSortOptions()} {this.renderBrewCollection(this.state.brewCollection)}
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index d4efbe445..a6d465420 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -12,8 +12,8 @@ -moz-column-gap : auto; } .listPage{ + height : unset !important; .content{ - overflow-y : overlay; .phb{ .noColumns(); height : auto; @@ -32,47 +32,49 @@ } .sort-container{ font-family : 'Open Sans', sans-serif; - position : fixed; - top : 35px; - left : calc(50vw - 400px); - border : 2px solid #58180D; - width : 800px; - background-color : #EEE5CE; + position : sticky; + top : 0; + left : 0; + width : 100%; + background-color : #555; + border-top : 1px solid #666; + color : white; padding : 2px; text-align : center; - z-index : 15; + z-index : 500; + display : flex; + justify-content : center; + align-items : center; h6{ text-transform : uppercase; font-family : 'Open Sans', sans-serif; font-size : 11px; font-weight : bold; - color : #58180D; } - table{ - margin : 0px; - vertical-align : middle; - tbody tr{ - background-color: transparent !important; - i{ - padding-right : 5px - } - button{ - background-color : transparent; - color : #58180D; - font-family : 'Open Sans', sans-serif; - font-size : 11px; - text-transform : uppercase; - font-weight : normal; - &.active{ - font-weight : bold; - border : 2px solid #58180D; - } - &.sortDir{ - width : 75px; - } - } + .filter-option { + background-color: transparent !important; + i{ + padding-right : 5px } } + button{ + background-color : transparent; + font-family : 'Open Sans', sans-serif; + font-size : 11px; + text-transform : uppercase; + font-weight : normal; + color : #888; + &.active{ + font-weight : bold; + text-decoration : underline; + color : unset; + } + &.sortDir{ + width : 75px; + } + } + + } h1 { cursor: pointer; From cfdbe06d07cb71145f7f937b53d4d0f1c4ff1ffe Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Tue, 13 Sep 2022 12:26:28 -0500 Subject: [PATCH 06/79] move dir button next to active sort option --- .../pages/basePages/listPage/listPage.jsx | 48 +++++++++---------- .../pages/basePages/listPage/listPage.less | 44 +++++++---------- 2 files changed, 40 insertions(+), 52 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx index b81f9c8e0..98451d54f 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.jsx +++ b/client/homebrew/pages/basePages/listPage/listPage.jsx @@ -114,14 +114,23 @@ const ListPage = createClass({ }, renderSortOption : function(sortTitle, sortValue){ - return
- + return
+ + {this.state.sortType == sortValue ? + + : '' + }
; }, @@ -165,26 +174,17 @@ const ListPage = createClass({ renderSortOptions : function(){ return
-
Sort by :
- {this.renderSortOption('Title', 'alpha')} - {this.renderSortOption('Created Date', 'created')} - {this.renderSortOption('Updated Date', 'updated')} - {this.renderSortOption('Views', 'views')} - {/* {this.renderSortOption('Latest', 'latest')} */} +
Sort by :
+ {this.renderSortOption('Title', 'alpha')} + {this.renderSortOption('Created Date', 'created')} + {this.renderSortOption('Updated Date', 'updated')} + {this.renderSortOption('Views', 'views')} + {/* {this.renderSortOption('Latest', 'latest')} */} -
Direction :
+ {this.renderFilterOption()} - - {this.renderFilterOption()} - -
; }, diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less index a6d465420..6ee160fdc 100644 --- a/client/homebrew/pages/basePages/listPage/listPage.less +++ b/client/homebrew/pages/basePages/listPage/listPage.less @@ -45,6 +45,9 @@ display : flex; justify-content : center; align-items : center; + column-gap : 15px; + row-gap : 5px; + flex-wrap : wrap; h6{ text-transform : uppercase; font-family : 'Open Sans', sans-serif; @@ -52,50 +55,35 @@ font-weight : bold; } .filter-option { - background-color: transparent !important; + margin-left: 20px; + background-color : transparent !important; + font-size : 11px; i{ - padding-right : 5px + padding-right : 5px; } } button{ background-color : transparent; font-family : 'Open Sans', sans-serif; - font-size : 11px; text-transform : uppercase; font-weight : normal; + font-size : 11px; color : #888; + padding : 0; &.active{ font-weight : bold; - text-decoration : underline; - color : unset; + color : white; + border-bottom : 1px solid white; } &.sortDir{ - width : 75px; + width : auto; + padding: 5px; + &:hover { + color: white; + } } } } - h1 { - cursor: pointer; - &.active { - color: #58180D; - } - &.inactive { - color: #707070; - - } - &.active::before, &.inactive::before { - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - font-size: 0.6cm; - padding-right: 0.5em; - } - &.active::before { - content: '\f107'; - } - &.inactive::before { - content: '\f105'; - } - } } From bb25d30663bfe543ee9d4a1119238bb8c753799d Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Thu, 15 Sep 2022 12:29:25 -0500 Subject: [PATCH 07/79] flex working, but odd vertical spacing --- .../editor/metadataEditor/metadataEditor.jsx | 34 +++++++------ .../editor/metadataEditor/metadataEditor.less | 50 +++++++++++++------ 2 files changed, 54 insertions(+), 30 deletions(-) diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx index 29c193323..a793c4f3f 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx +++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx @@ -231,23 +231,25 @@ const MetadataEditor = createClass({ value={this.props.metadata.title} onChange={(e)=>this.handleFieldChange('title', e)} />
-
- -