0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-10 15:42:39 +00:00

Merge branch 'master' into localSnippetEditor

This commit is contained in:
David Bolack
2025-03-24 15:10:25 -05:00
77 changed files with 1876 additions and 2246 deletions

View File

@@ -30,11 +30,11 @@ const BrewItem = ({
}
request.delete(`/api/${brew.googleId ?? ''}${brew.editId}`).send().end((err, res)=>{
if (err) reportError(err); else window.location.reload();
});
if(err) reportError(err); else window.location.reload();
});
}, [brew, reportError]);
const updateFilter = useCallback((type, term)=> updateListFilter(type, term), [updateListFilter]);
const updateFilter = useCallback((type, term)=>updateListFilter(type, term), [updateListFilter]);
const renderDeleteBrewLink = ()=>{
if(!brew.editId) return null;

View File

@@ -1,148 +1,129 @@
.brewItem{
.brewItem {
position : relative;
box-sizing : border-box;
display : inline-block;
vertical-align : top;
box-sizing : border-box;
box-sizing : border-box;
overflow : hidden;
width : 48%;
min-height : 105px;
margin-right : 15px;
margin-bottom : 15px;
padding : 5px 15px 2px 6px;
padding-right : 15px;
border : 1px solid #c9ad6a;
margin-right : 15px;
margin-bottom : 15px;
overflow : hidden;
vertical-align : top;
background-color : #CAB2802E;
border : 1px solid #C9AD6A;
border-radius : 5px;
box-shadow : 0px 4px 5px 0px #333333;
break-inside : avoid;
-webkit-column-break-inside : avoid;
page-break-inside : avoid;
break-inside : avoid;
box-shadow : 0px 4px 5px 0px #333;
background-color : #cab2802e;
.thumbnail {
position: absolute;
width: 150px;
height: 100%;
top: 0;
right: 0;
z-index: -1;
background-size: contain;
background-repeat: no-repeat;
background-position: right top;
mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
-webkit-mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
opacity: 50%;
.thumbnail {
position : absolute;
top : 0;
right : 0;
z-index : -1;
width : 150px;
height : 100%;
background-repeat : no-repeat;
background-position : right top;
background-size : contain;
opacity : 50%;
-webkit-mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
}
.text {
min-height : 54px;
h4{
h4 {
margin-bottom : 5px;
font-size : 2.2em;
}
}
.info{
position: initial;
bottom: 2px;
font-family : ScalySansRemake;
.info {
position : initial;
bottom : 2px;
font-family : "ScalySansRemake";
font-size : 1.2em;
&>span{
& > span {
margin-right : 12px;
line-height : 1.5em;
a {
color:inherit;
}
a { color : inherit; }
}
}
.brewTags span {
background-color: #c8ac6e3b;
margin: 2px;
padding: 2px;
border: 1px solid #c8ac6e;
border-radius: 4px;
white-space: nowrap;
display: inline-block;
font-weight: bold;
border-color: currentColor;
cursor : pointer;
&:before {
font-family: 'Font Awesome 5 Free';
font-size: 12px;
margin-right: 3px;
display : inline-block;
padding : 2px;
margin : 2px;
font-weight : bold;
white-space : nowrap;
cursor : pointer;
background-color : #C8AC6E3B;
border : 1px solid #C8AC6E;
border-color : currentColor;
border-radius : 4px;
&::before {
margin-right : 3px;
font-family : 'Font Awesome 5 Free';
font-size : 12px;
}
&.type {
background-color: #0080003b;
color: #008000;
&:before{
content: '\f0ad';
}
color : #008000;
background-color : #0080003B;
&::before { content : '\f0ad'; }
}
&.group {
background-color: #5050503b;
color: #000000;
&:before{
content: '\f500';
}
color : #000000;
background-color : #5050503B;
&::before { content : '\f500'; }
}
&.meta {
background-color: #0000803b;
color: #000080;
&:before{
content: '\f05a';
}
color : #000080;
background-color : #0000803B;
&::before { content : '\f05a'; }
}
&.system {
background-color: #8000003b;
color: #800000;
&:before{
content: '\f518';
}
color : #800000;
background-color : #8000003B;
&::before { content : '\f518'; }
}
}
&:hover{
.links{
opacity : 1;
}
&:hover {
.links { opacity : 1; }
}
&:nth-child(2n + 1){
margin-right : 0px;
}
.links{
&:nth-child(2n + 1) { margin-right : 0px; }
.links {
.animate(opacity);
position : absolute;
top : 0px;
right : 0px;
height : 100%;
width : 2em;
opacity : 0;
background-color : fade(black, 60%);
height : 100%;
text-align : center;
a{
background-color : fade(black, 60%);
opacity : 0;
a {
.animate(opacity);
display : block;
margin : 8px 0px;
opacity : 0.6;
font-size : 1.3em;
color : white;
text-decoration : unset;
&:hover{
opacity : 1;
}
i{
cursor : pointer;
}
opacity : 0.6;
&:hover { opacity : 1; }
i { cursor : pointer; }
}
}
.googleDriveIcon {
height : 18px;
height : 18px;
padding : 0px;
margin : -5px;
}
.homebreweryIcon {
mix-blend-mode : darken;
height : 24px;
position : relative;
top : 5px;
left : -5px;
height : 24px;
mix-blend-mode : darken;
}
}

View File

@@ -1,5 +1,5 @@
.noColumns(){
.noColumns() {
column-count : auto;
column-fill : auto;
column-gap : normal;
@@ -13,177 +13,151 @@
height : auto;
min-height : 279.4mm;
margin : 20px auto;
contain : unset;
contain : unset;
}
.listPage{
.content{
.listPage {
.content {
z-index : 1;
.page{
.page {
.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
&::after{
display : none;
}
.noBrews{
&::after { display : none; }
.noBrews {
margin : 10px 0px;
font-size : 1.3em;
font-style : italic;
}
.brewCollection {
h1:hover{
cursor: pointer;
}
h1:hover { cursor : pointer; }
.active::before, .inactive::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 0.6cm;
padding-right: 0.5em;
}
.active {
color: var(--HB_Color_HeaderText);
}
.active::before {
content: '\f107';
}
.inactive {
color: #707070;
}
.inactive::before {
content: '\f105';
padding-right : 0.5em;
font-family : 'Font Awesome 5 Free';
font-size : 0.6cm;
font-weight : 900;
}
.active { color : var(--HB_Color_HeaderText); }
.active::before { content : '\f107'; }
.inactive { color : #707070; }
.inactive::before { content : '\f105'; }
}
}
}
.sort-container {
font-family : 'Open Sans', sans-serif;
position : sticky;
top : 0;
left : 0;
width : 100%;
height : 30px;
background-color : #555;
border-top : 1px solid #666;
border-bottom : 1px solid #666;
color : white;
text-align : center;
z-index : 1;
display : flex;
justify-content : center;
align-items : baseline;
column-gap : 15px;
row-gap : 5px;
flex-wrap : wrap;
h6{
text-transform : uppercase;
position : sticky;
top : 0;
left : 0;
z-index : 1;
display : flex;
flex-wrap : wrap;
row-gap : 5px;
column-gap : 15px;
align-items : baseline;
justify-content : center;
width : 100%;
height : 30px;
font-family : 'Open Sans', sans-serif;
color : white;
text-align : center;
background-color : #555555;
border-top : 1px solid #666666;
border-bottom : 1px solid #666666;
h6 {
font-family : 'Open Sans', sans-serif;
font-size : 11px;
font-weight : bold;
text-transform : uppercase;
}
.sort-option {
display: flex;
align-items: center;
padding: 0 8px;
color: #ccc;
height: 100%;
display : flex;
align-items : center;
height : 100%;
padding : 0 8px;
color : #CCCCCC;
&:hover{
background-color : #444;
}
&:hover { background-color : #444444; }
&.active {
font-weight: bold;
color: #ddd;
background-color: #333;
font-weight : bold;
color : #DDDDDD;
background-color : #333333;
button {
color: white;
font-weight: 800;
height: 100%;
& + .sortDir {
padding-left: 5px;
button {
height : 100%;
font-weight : 800;
color : white;
& + .sortDir { padding-left : 5px; }
}
}
}
}
.filter-option {
margin-left: 20px;
background-color : transparent !important;
margin-left : 20px;
font-size : 11px;
i{
padding-right : 5px;
}
background-color : transparent !important;
i { padding-right : 5px; }
}
button {
padding : 0;
font-family : 'Open Sans', sans-serif;
font-size : 11px;
font-weight : normal;
color : #CCCCCC;
text-transform : uppercase;
background-color : transparent;
}
button{
background-color : transparent;
font-family : 'Open Sans', sans-serif;
text-transform : uppercase;
font-weight : normal;
font-size : 11px;
color : #ccc;
padding : 0;
}
}
.tags-container {
height : 30px;
background-color : #555;
border-top : 1px solid #666;
border-bottom : 1px solid #666;
color : white;
display : flex;
justify-content : center;
align-items : center;
column-gap : 15px;
row-gap : 5px;
flex-wrap : wrap;
row-gap : 5px;
column-gap : 15px;
align-items : center;
justify-content : center;
height : 30px;
color : white;
background-color : #555555;
border-top : 1px solid #666666;
border-bottom : 1px solid #666666;
span {
padding : 3px;
font-family : 'Open Sans', sans-serif;
font-size : 11px;
font-weight : bold;
color : #DFDFDF;
cursor : pointer;
border : 1px solid;
border-radius : 3px;
padding : 3px;
cursor : pointer;
color: #dfdfdf;
&:before {
font-family: 'Font Awesome 5 Free';
font-size: 12px;
margin-right: 3px;
&::before {
margin-right : 3px;
font-family : 'Font Awesome 5 Free';
font-size : 12px;
}
&:after {
content: '\f00d';
font-family: 'Font Awesome 5 Free';
font-size: 12px;
margin-left: 3px;
&::after {
margin-left : 3px;
font-family : 'Font Awesome 5 Free';
font-size : 12px;
content : '\f00d';
}
&.type {
background-color: #008000;
border-color: #00a000;
&:before{
content: '\f0ad';
}
background-color : #008000;
border-color : #00A000;
&::before { content : '\f0ad'; }
}
&.group {
background-color: #505050;
border-color: #000000;
&:before{
content: '\f500';
}
background-color : #505050;
border-color : #000000;
&::before { content : '\f500'; }
}
&.meta {
background-color: #000080;
border-color: #0000a0;
&:before{
content: '\f05a';
}
background-color : #000080;
border-color : #0000A0;
&::before { content : '\f05a'; }
}
&.system {
background-color: #800000;
border-color: #a00000;
&:before{
content: '\f518';
}
background-color : #800000;
border-color : #A00000;
&::before { content : '\f518'; }
}
}
}

View File

@@ -1,7 +1,7 @@
.homebrew {
.uiPage.sitePage {
.content {
width : ~"min(90vw, 1000px)";
width : ~'min(90vw, 1000px)';
padding : 2% 4%;
margin-top : 25px;
margin-right : auto;
@@ -17,19 +17,19 @@
border : 2px solid black;
border-radius : 5px;
button {
width : 125px;
margin-right : 5px;
color : black;
background-color : transparent;
border : 1px solid black;
border-radius : 5px;
width : 125px;
color : black;
margin-right : 5px;
&.active {
background-color: #0007;
color: white;
&:before {
content: '\f00c';
font-family: 'FONT AWESOME 5 FREE';
margin-right: 5px;
color : white;
background-color : #00000077;
&::before {
margin-right : 5px;
font-family : 'FONT AWESOME 5 FREE';
content : '\f00c';
}
}
}
@@ -59,6 +59,11 @@
padding-left : 1.25em;
list-style : square;
}
.blank {
height : 1em;
margin-top : 0;
& + * { margin-top : 0; }
}
}
}
}

View File

@@ -1,29 +1,25 @@
@keyframes glideDown {
0% {transform : translate(-50% + 3px, 0px);
opacity : 0;}
100% {transform : translate(-50% + 3px, 10px);
opacity : 1;}
0% {
opacity : 0;transform : translate(-50% + 3px, 0px);}
100% {
opacity : 1;transform : translate(-50% + 3px, 10px);}
}
.editPage{
.navItem.save{
.editPage {
.navItem.save {
position : relative;
width : 106px;
text-align : center;
position : relative;
&.saved{
&.saved {
color : #666666;
cursor : initial;
color : #666;
}
}
.googleDriveStorage {
position : relative;
}
.googleDriveStorage img{
height : 18px;
.googleDriveStorage { position : relative; }
.googleDriveStorage img {
height : 18px;
padding : 0px;
margin : -5px;
&.inactive {
filter: grayscale(1);
}
&.inactive { filter : grayscale(1); }
}
}

View File

@@ -167,7 +167,7 @@ const errorIndex = (props)=>{
**Requested access:** ${props.brew.accessType}
**Brew ID:** ${props.brew.brewId}`,
// Theme Not Valid
'10' : dedent`
## The selected theme is not tagged as a theme.

View File

@@ -100,32 +100,32 @@ const HomePage = createClass({
return <div className='homePage sitePage'>
<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
{this.renderNavbar()}
<div className="content">
<SplitPane onDragFinish={this.handleSplitMove}>
<Editor
ref={this.editor}
brew={this.state.brew}
onTextChange={this.handleTextChange}
renderer={this.state.brew.renderer}
showEditButtons={false}
themeBundle={this.state.themeBundle}
onCursorPageChange={this.handleEditorCursorPageChange}
onViewPageChange={this.handleEditorViewPageChange}
currentEditorViewPageNum={this.state.currentEditorViewPageNum}
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
/>
<BrewRenderer
text={this.state.brew.text}
style={this.state.brew.style}
renderer={this.state.brew.renderer}
onPageChange={this.handleBrewRendererPageChange}
currentEditorViewPageNum={this.state.currentEditorViewPageNum}
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
themeBundle={this.state.themeBundle}
/>
</SplitPane>
<div className='content'>
<SplitPane onDragFinish={this.handleSplitMove}>
<Editor
ref={this.editor}
brew={this.state.brew}
onTextChange={this.handleTextChange}
renderer={this.state.brew.renderer}
showEditButtons={false}
snippetBundle={this.state.themeBundle.snippets}
onCursorPageChange={this.handleEditorCursorPageChange}
onViewPageChange={this.handleEditorViewPageChange}
currentEditorViewPageNum={this.state.currentEditorViewPageNum}
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
/>
<BrewRenderer
text={this.state.brew.text}
style={this.state.brew.style}
renderer={this.state.brew.renderer}
onPageChange={this.handleBrewRendererPageChange}
currentEditorViewPageNum={this.state.currentEditorViewPageNum}
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
themeBundle={this.state.themeBundle}
/>
</SplitPane>
</div>
<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
Save current <i className='fas fa-save' />

View File

@@ -1,50 +1,40 @@
.homePage{
.homePage {
position : relative;
a.floatingNewButton{
a.floatingNewButton {
.animate(background-color);
position : absolute;
display : block;
right : 70px;
bottom : 50px;
z-index : 100;
z-index : 5001;
display : block;
padding : 1em;
background-color : @orange;
font-size : 1.5em;
color : white;
text-decoration : none;
background-color : @orange;
box-shadow : 3px 3px 15px black;
&:hover{
background-color : darken(@orange, 20%);
}
&:hover { background-color : darken(@orange, 20%); }
}
.floatingSaveButton{
.floatingSaveButton {
.animateAll();
position : absolute;
display : block;
right : 200px;
bottom : 70px;
z-index : 100;
z-index : 5000;
display : block;
padding : 0.8em;
cursor : pointer;
background-color : @blue;
font-size : 0.8em;
color : white;
text-decoration : none;
cursor : pointer;
background-color : @blue;
box-shadow : 3px 3px 15px black;
&:hover{
background-color : darken(@blue, 20%);
}
&.show{
right : 350px;
}
&:hover { background-color : darken(@blue, 20%); }
&.show { right : 350px; }
}
.navItem.save{
background-color: @orange;
&:hover{
background-color: @green;
}
.navItem.save {
background-color : @orange;
&:hover { background-color : @green; }
}
}

View File

@@ -235,7 +235,7 @@ const NewPage = createClass({
render : function(){
return <div className='newPage sitePage'>
{this.renderNavbar()}
<div className="content">
<div className='content'>
<SplitPane onDragFinish={this.handleSplitMove}>
<Editor
ref={this.editor}

View File

@@ -1,8 +1,6 @@
.newPage{
.navItem.save{
background-color: @orange;
&:hover{
background-color: @green;
}
.newPage {
.navItem.save {
background-color : @orange;
&:hover { background-color : @green; }
}
}

View File

@@ -1,9 +1,7 @@
.sharePage{
.sharePage {
nav .navSection.titleSection {
flex-grow: 1;
justify-content: center;
}
.content{
overflow-y : hidden;
flex-grow : 1;
justify-content : center;
}
.content { overflow-y : hidden; }
}