f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-05 10:12:41 +00:00
Code Wiki Activity

Merge branch 'createUIBasePage' of https://github.com/G-Ambatte/homebrewery into createUIBasePage

Browse Source
This commit is contained in:
G.Ambatte
2022-09-26 18:44:45 +13:00
parent d9228b8c4b 5a3daf8ffd
commit 891bde6990
12 changed files with 167 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
client/homebrew/editor/metadataEditor/metadataEditor.jsx
View File

@@ -231,21 +231,25 @@ const MetadataEditor = createClass({
value={this.props.metadata.title} value={this.props.metadata.title}
onChange={(e)=>this.handleFieldChange('title', e)} /> onChange={(e)=>this.handleFieldChange('title', e)} />
</div> </div>
<div className='field description'> <div className='field-group'>
<label>description</label> <div className='field-column'>
<textarea value={this.props.metadata.description} className='value' <div className='field description'>
onChange={(e)=>this.handleFieldChange('description', e)} /> <label>description</label>
</div> <textarea value={this.props.metadata.description} className='value'
<div className='field thumbnail'> onChange={(e)=>this.handleFieldChange('description', e)} />
<label>thumbnail</label> </div>
<input type='text' <div className='field thumbnail'>
value={this.props.metadata.thumbnail} <label>thumbnail</label>
placeholder='my.thumbnail.url' <input type='text'
className='value' value={this.props.metadata.thumbnail}
onChange={(e)=>this.handleFieldChange('thumbnail', e)} /> placeholder='my.thumbnail.url'
<button className='display' onClick={this.toggleThumbnailDisplay}> className='value'
<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} /> onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
</button> <button className='display' onClick={this.toggleThumbnailDisplay}>
<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
</button>
</div>
</div>
{this.renderThumbnail()} {this.renderThumbnail()}
</div> </div>

62
client/homebrew/editor/metadataEditor/metadataEditor.less
View File

@@ -7,23 +7,41 @@
width : 100%; width : 100%;
padding : 25px; padding : 25px;
background-color : #999; background-color : #999;
height : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar. probably a better way to dynamic get this.
overflow-y : auto;
& > div {
margin-bottom: 10px;
}
.field-group {
display: flex;
width: 100%;
flex-wrap: wrap;
gap: 10px;
}
.field-column {
display: flex;
flex-direction: column;
flex: 5 0 200px;
gap: 10px;
}
.field{ .field{
display : flex; display : flex;
width : 100%; width : 100%;
margin-bottom : 10px; min-width : 200px;
&>label{ &>label{
display : inline-block;
vertical-align : top;
width : 80px; width : 80px;
font-size : 11px; font-size : 11px;
font-weight : 800; font-weight : 800;
line-height : 1.8em; line-height : 1.8em;
text-transform : uppercase; text-transform : uppercase;
flex : 0 0 auto;
} }
&>.value{ &>.value{
flex : 1 1 auto; flex : 1 1 auto;
min-width : 200px; width : 50px;
} }
&.thumbnail{ &.thumbnail{
height : 1.4em; height : 1.4em;
@@ -43,22 +61,32 @@
background-color: #777; background-color: #777;
} }
} }
.thumbnail-preview{ }
position : relative;
width : 80px; &.description {
height : min-content; flex: 1;
border : 2px solid white; textarea.value {
margin-left : 5px; resize : none;
max-height : 115px; height : auto;
font-family : 'Open Sans', sans-serif;
font-size : 0.8em;
} }
} }
} }
.description.field textarea.value{
resize : none;
height : 5em; .thumbnail-preview {
font-family : 'Open Sans', sans-serif; position: relative;
font-size : 0.8em; justify-self: center;
width: 80px;
height: min-content;
flex: 1 1;
max-height: 115px;
aspect-ratio: 1 / 1;
object-fit: contain;
background-color: #AAA;
} }
.systems.field .value{ .systems.field .value{
label{ label{
vertical-align : middle; vertical-align : middle;

5
client/homebrew/homebrew.less
View File

@@ -11,7 +11,10 @@
position : relative; position : relative;
height : calc(~"100% - 29px"); //Navbar height height : calc(~"100% - 29px"); //Navbar height
flex : auto; flex : auto;
overflow-y : hidden;
}
&.listPage .content {
overflow-y : scroll; overflow-y : scroll;
} }
} }
} }

2
client/homebrew/navbar/navbar.less
View File

@@ -78,6 +78,8 @@
width : 100%; width : 100%;
overflow : hidden auto; overflow : hidden auto;
max-height : ~"calc(100vh - 28px)"; max-height : ~"calc(100vh - 28px)";
scrollbar-color : #666 #333;
scrollbar-width : thin;
h4{ h4{
display : block; display : block;
box-sizing : border-box; box-sizing : border-box;

63
client/homebrew/pages/basePages/listPage/listPage.jsx
View File

@@ -114,15 +114,17 @@ const ListPage = createClass({
}, },
renderSortOption : function(sortTitle, sortValue){ renderSortOption : function(sortTitle, sortValue){
return <td> return <div className={`sort-option ${(this.state.sortType == sortValue ? 'active' : '')}`}>
<button <button
value={`${sortValue}`} value={`${sortValue}`}
onClick={this.handleSortOptionChange} onClick={this.state.sortType == sortValue ? this.handleSortDirChange : this.handleSortOptionChange}
className={`${(this.state.sortType == sortValue ? 'active' : '')}`} >
> {`${sortTitle}`}
{`${sortTitle}`} </button>
</button> {this.state.sortType == sortValue &&
</td>; <i className={`sortDir fas ${this.state.sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>
}
</div>;
}, },
handleFilterTextChange : function(e){ handleFilterTextChange : function(e){
@@ -150,7 +152,7 @@ const ListPage = createClass({
}, },
renderFilterOption : function(){ renderFilterOption : function(){
return <td> return <div className='filter-option'>
<label> <label>
<i className='fas fa-search'></i> <i className='fas fa-search'></i>
<input <input
@@ -160,37 +162,22 @@ const ListPage = createClass({
value={this.state.filterString} value={this.state.filterString}
/> />
</label> </label>
</td>; </div>;
}, },
renderSortOptions : function(){ renderSortOptions : function(){
return <div className='sort-container'> return <div className='sort-container'>
<table> <h6>Sort by :</h6>
<tbody> {this.renderSortOption('Title', 'alpha')}
<tr> {this.renderSortOption('Created Date', 'created')}
<td> {this.renderSortOption('Updated Date', 'updated')}
<h6>Sort by :</h6> {this.renderSortOption('Views', 'views')}
</td> {/* {this.renderSortOption('Latest', 'latest')} */}
{this.renderSortOption('Title', 'alpha')}
{this.renderSortOption('Created Date', 'created')} {this.renderFilterOption()}
{this.renderSortOption('Updated Date', 'updated')}
{this.renderSortOption('Views', 'views')}
{/* {this.renderSortOption('Latest', 'latest')} */}
<td>
<h6>Direction :</h6>
</td>
<td>
<button
onClick={this.handleSortDirChange}
className='sortDir'
>
{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
</button>
</td>
{this.renderFilterOption()}
</tr>
</tbody>
</table>
</div>; </div>;
}, },
@@ -233,10 +220,10 @@ const ListPage = createClass({
return <div className='listPage sitePage'> return <div className='listPage sitePage'>
<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/> <link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
{this.props.navItems} {this.props.navItems}
{this.renderSortOptions()}
<div className='content V3'> <div className='content V3'>
<div className='phb page'> <div className='phb page'>
{this.renderSortOptions()}
{this.renderBrewCollection(this.state.brewCollection)} {this.renderBrewCollection(this.state.brewCollection)}
</div> </div>
</div> </div>

109
client/homebrew/pages/basePages/listPage/listPage.less
View File

@@ -13,7 +13,6 @@
} }
.listPage{ .listPage{
.content{ .content{
overflow-y : overlay;
.phb{ .phb{
.noColumns(); .noColumns();
height : auto; height : auto;
@@ -32,68 +31,74 @@
} }
.sort-container{ .sort-container{
font-family : 'Open Sans', sans-serif; font-family : 'Open Sans', sans-serif;
position : fixed; position : sticky;
top : 35px; top : 0;
left : calc(50vw - 400px); left : 0;
border : 2px solid #58180D; width : 100%;
width : 800px; height : 30px;
background-color : #EEE5CE; background-color : #555;
padding : 2px; border-top : 1px solid #666;
border-bottom : 1px solid #666;
color : white;
text-align : center; text-align : center;
z-index : 15; z-index : 500;
display : flex;
justify-content : center;
align-items : baseline;
column-gap : 15px;
row-gap : 5px;
flex-wrap : wrap;
h6{ h6{
text-transform : uppercase; text-transform : uppercase;
font-family : 'Open Sans', sans-serif; font-family : 'Open Sans', sans-serif;
font-size : 11px; font-size : 11px;
font-weight : bold; font-weight : bold;
color : #58180D;
} }
table{ .sort-option {
margin : 0px; display: flex;
vertical-align : middle; align-items: center;
tbody tr{ padding: 0 8px;
background-color: transparent !important; color: #ccc;
i{ height: 100%;
padding-right : 5px
} &:hover{
button{ background-color : #444;
background-color : transparent; }
color : #58180D;
font-family : 'Open Sans', sans-serif; &.active {
font-size : 11px; font-weight: bold;
text-transform : uppercase; color: #ddd;
font-weight : normal; background-color: #333;
&.active{
font-weight : bold; button {
border : 2px solid #58180D; color: white;
} font-weight: 800;
&.sortDir{ height: 100%;
width : 75px; & + .sortDir {
} padding-left: 5px;
} }
} }
} }
}
h1 {
cursor: pointer;
&.active {
color: #58180D;
} }
&.inactive { .filter-option {
color: #707070; margin-left: 20px;
background-color : transparent !important;
} font-size : 11px;
&.active::before, &.inactive::before { i{
font-family: 'Font Awesome 5 Free'; padding-right : 5px;
font-weight: 900; }
font-size: 0.6cm;
padding-right: 0.5em;
}
&.active::before {
content: '\f107';
}
&.inactive::before {
content: '\f105';
} }
button{
background-color : transparent;
font-family : 'Open Sans', sans-serif;
text-transform : uppercase;
font-weight : normal;
font-size : 11px;
color : #ccc;
padding : 0;
}
} }
} }

14
package-lock.json generated
View File

@@ -24,7 +24,7 @@
"express-async-handler": "^1.2.0", "express-async-handler": "^1.2.0",
"express-static-gzip": "2.1.7", "express-static-gzip": "2.1.7",
"fs-extra": "10.1.0", "fs-extra": "10.1.0",
"googleapis": "107.0.0", "googleapis": "108.0.0",
"js-yaml": "^4.1.0", "js-yaml": "^4.1.0",
"jwt-simple": "^0.5.6", "jwt-simple": "^0.5.6",
"less": "^3.13.1", "less": "^3.13.1",
@@ -6173,9 +6173,9 @@
} }
}, },
"node_modules/googleapis": { "node_modules/googleapis": {
"version": "107.0.0", "version": "108.0.0",
"resolved": "https://registry.npmjs.org/googleapis/-/googleapis-107.0.0.tgz", "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-108.0.0.tgz",
"integrity": "sha512-emMvsOEPvE9/DxrOVCMblQzKAhaar37c5JPAqYXoo+hxPpzFefkpN5ayIJFgatDpUWCSMvWtP3CcEWfFhFA7QA==", "integrity": "sha512-wQuBzCObtjpfg3CksOfUlX3yT8clw/vJFdGSfs9cpn84WSxNK3U5sxYxEH3mPM+d+SrA8znKM9G8sOuwQceGIA==",
"dependencies": { "dependencies": {
"google-auth-library": "^8.0.2", "google-auth-library": "^8.0.2",
"googleapis-common": "^6.0.0" "googleapis-common": "^6.0.0"
@@ -17565,9 +17565,9 @@
} }
}, },
"googleapis": { "googleapis": {
"version": "107.0.0", "version": "108.0.0",
"resolved": "https://registry.npmjs.org/googleapis/-/googleapis-107.0.0.tgz", "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-108.0.0.tgz",
"integrity": "sha512-emMvsOEPvE9/DxrOVCMblQzKAhaar37c5JPAqYXoo+hxPpzFefkpN5ayIJFgatDpUWCSMvWtP3CcEWfFhFA7QA==", "integrity": "sha512-wQuBzCObtjpfg3CksOfUlX3yT8clw/vJFdGSfs9cpn84WSxNK3U5sxYxEH3mPM+d+SrA8znKM9G8sOuwQceGIA==",
"requires": { "requires": {
"google-auth-library": "^8.0.2", "google-auth-library": "^8.0.2",
"googleapis-common": "^6.0.0" "googleapis-common": "^6.0.0"

2
package.json
View File

@@ -65,7 +65,7 @@
"express-async-handler": "^1.2.0", "express-async-handler": "^1.2.0",
"express-static-gzip": "2.1.7", "express-static-gzip": "2.1.7",
"fs-extra": "10.1.0", "fs-extra": "10.1.0",
"googleapis": "107.0.0", "googleapis": "108.0.0",
"js-yaml": "^4.1.0", "js-yaml": "^4.1.0",
"jwt-simple": "^0.5.6", "jwt-simple": "^0.5.6",
"less": "^3.13.1", "less": "^3.13.1",

10
server/googleActions.js
View File

@@ -125,8 +125,7 @@ const GoogleActions = {
description : file.description, description : file.description,
views : parseInt(file.properties.views), views : parseInt(file.properties.views),
published : file.properties.published ? file.properties.published == 'true' : false, published : file.properties.published ? file.properties.published == 'true' : false,
systems : [], systems : []
thumbnail : file.properties.thumbnail
}; };
}); });
return brews; return brews;
@@ -146,8 +145,7 @@ const GoogleActions = {
editId : brew.editId || nanoid(12), editId : brew.editId || nanoid(12),
pageCount : brew.pageCount, pageCount : brew.pageCount,
renderer : brew.renderer || 'legacy', renderer : brew.renderer || 'legacy',
isStubbed : true, isStubbed : true
thumbnail : brew.thumbnail
} }
}, },
media : { media : {
@@ -185,8 +183,7 @@ const GoogleActions = {
pageCount : brew.pageCount, pageCount : brew.pageCount,
renderer : brew.renderer || 'legacy', renderer : brew.renderer || 'legacy',
isStubbed : true, isStubbed : true,
version : 1, version : 1
thumbnail : brew.thumbnail || ''
} }
}; };
@@ -265,7 +262,6 @@ const GoogleActions = {
views : parseInt(obj.data.properties.views) || 0, //brews with no view parameter will return undefined views : parseInt(obj.data.properties.views) || 0, //brews with no view parameter will return undefined
version : parseInt(obj.data.properties.version) || 0, version : parseInt(obj.data.properties.version) || 0,
renderer : obj.data.properties.renderer ? obj.data.properties.renderer : 'legacy', renderer : obj.data.properties.renderer ? obj.data.properties.renderer : 'legacy',
thumbnail : obj.data.properties.thumbnail || '',
googleId : id googleId : id
}; };

2
server/homebrew.api.js
View File

@@ -108,7 +108,7 @@ const excludePropsFromUpdate = (brew)=>{
const excludeGoogleProps = (brew)=>{ const excludeGoogleProps = (brew)=>{
const modified = _.clone(brew); const modified = _.clone(brew);
const propsToExclude = ['tags', 'systems', 'published', 'authors', 'owner', 'views']; const propsToExclude = ['tags', 'systems', 'published', 'authors', 'owner', 'views', 'thumbnail'];
for (const prop of propsToExclude) { for (const prop of propsToExclude) {
delete modified[prop]; delete modified[prop];
} }

3
shared/naturalcrit/splitPane/splitPane.jsx
View File

@@ -69,7 +69,8 @@ const SplitPane = createClass({
this.setState({ isDragging: false }); this.setState({ isDragging: false });
}, },
handleDown : function(){ handleDown : function(e){
e.preventDefault();
this.setState({ isDragging: true }); this.setState({ isDragging: true });
//this.unFocus() //this.unFocus()
}, },

2
themes/V3/5ePHB/style.less
View File

@@ -8,7 +8,7 @@
--HB_Color_HeaderUnderline : #C0AD6A; // Gold --HB_Color_HeaderUnderline : #C0AD6A; // Gold
--HB_Color_HorizontalRule : #9C2B1B; // Maroon --HB_Color_HorizontalRule : #9C2B1B; // Maroon
--HB_Color_HeaderText : #58180D; // Dark Maroon --HB_Color_HeaderText : #58180D; // Dark Maroon
--HB_Color_MonsterStatBackground : #EEDBAB; // Light orange parchment --HB_Color_MonsterStatBackground : #F2E5B5; // Light orange parchment
--HB_Color_CaptionText : #766649; // Brown --HB_Color_CaptionText : #766649; // Brown
--HB_Color_WatercolorStain : #BBAD82; // Light brown --HB_Color_WatercolorStain : #BBAD82; // Light brown
--HB_Color_Footnotes : #C9AD6A; // Gold --HB_Color_Footnotes : #C9AD6A; // Gold