diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx index 3ec986689..cd140ad07 100644 --- a/client/components/codeEditor/codeEditor.jsx +++ b/client/components/codeEditor/codeEditor.jsx @@ -12,6 +12,7 @@ const CodeEditor = createReactClass({ getDefaultProps : function() { return { language : '', + tab : 'brewText', value : '', wrap : true, onChange : ()=>{}, @@ -186,6 +187,22 @@ const CodeEditor = createReactClass({ this.updateSize(); }, + // Use for GFM tabs that use common hot-keys + isGFM : function() { + if((this.isGFM()) || (this.props.tab === 'brewSnippets')) return true; + return false; + }, + + isBrewText : function() { + if(this.isGFM()) return true; + return false; + }, + + isBrewSnippets : function() { + if(this.props.tab === 'brewSnippets') return true; + return false; + }, + indent : function () { const cm = this.codeMirror; if(cm.somethingSelected()) { @@ -200,6 +217,7 @@ const CodeEditor = createReactClass({ }, makeHeader : function (number) { + if(!this.isGFM()) return; const selection = this.codeMirror?.getSelection(); const header = Array(number).fill('#').join(''); this.codeMirror?.replaceSelection(`${header} ${selection}`, 'around'); @@ -208,6 +226,7 @@ const CodeEditor = createReactClass({ }, makeBold : function() { + if(!this.isGFM()) return; const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '**' && selection.slice(-2) === '**'; this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `**${selection}**`, 'around'); if(selection.length === 0){ @@ -217,7 +236,8 @@ const CodeEditor = createReactClass({ }, makeItalic : function() { - const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*'; + if(!this.isGFM()) return; + const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*'; this.codeMirror?.replaceSelection(t ? selection.slice(1, -1) : `*${selection}*`, 'around'); if(selection.length === 0){ const cursor = this.codeMirror?.getCursor(); @@ -226,7 +246,8 @@ const CodeEditor = createReactClass({ }, makeSuper : function() { - const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^'; + if(!this.isGFM()) return; + const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^'; this.codeMirror?.replaceSelection(t ? selection.slice(1, -1) : `^${selection}^`, 'around'); if(selection.length === 0){ const cursor = this.codeMirror?.getCursor(); @@ -235,7 +256,8 @@ const CodeEditor = createReactClass({ }, makeSub : function() { - const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^'; + if(!this.isGFM()) return; + const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^'; this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around'); if(selection.length === 0){ const cursor = this.codeMirror?.getCursor(); @@ -245,10 +267,12 @@ const CodeEditor = createReactClass({ makeNbsp : function() { + if(!this.isGFM()) return; this.codeMirror?.replaceSelection(' ', 'end'); }, makeSpace : function() { + if(!this.isGFM()) return; const selection = this.codeMirror?.getSelection(); const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}'; if(t){ @@ -260,6 +284,7 @@ const CodeEditor = createReactClass({ }, removeSpace : function() { + if(!this.isGFM()) return; const selection = this.codeMirror?.getSelection(); const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}'; if(t){ @@ -269,10 +294,12 @@ const CodeEditor = createReactClass({ }, newColumn : function() { + if(!this.isGFM()) return; this.codeMirror?.replaceSelection('\n\\column\n\n', 'end'); }, newPage : function() { + if(!this.isGFM()) return; this.codeMirror?.replaceSelection('\n\\page\n\n', 'end'); }, @@ -286,7 +313,8 @@ const CodeEditor = createReactClass({ }, makeUnderline : function() { - const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 3) === '' && selection.slice(-4) === ''; + if(!this.isGFM()) return; + const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '' && selection.slice(-4) === ''; this.codeMirror?.replaceSelection(t ? selection.slice(3, -4) : `${selection}`, 'around'); if(selection.length === 0){ const cursor = this.codeMirror?.getCursor(); @@ -295,7 +323,8 @@ const CodeEditor = createReactClass({ }, makeSpan : function() { - const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}'; + if(!this.isGFM()) return; + const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}'; this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{ ${selection}}}`, 'around'); if(selection.length === 0){ const cursor = this.codeMirror?.getCursor(); @@ -304,7 +333,8 @@ const CodeEditor = createReactClass({ }, makeDiv : function() { - const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}'; + if(!this.isGFM()) return; + const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}'; this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{\n${selection}\n}}`, 'around'); if(selection.length === 0){ const cursor = this.codeMirror?.getCursor(); @@ -317,7 +347,7 @@ const CodeEditor = createReactClass({ let cursorPos; let newComment; const selection = this.codeMirror?.getSelection(); - if(this.props.language === 'gfm'){ + if(this.isGFM()){ regex = /^\s*()\s*$/gs; cursorPos = 4; newComment = ``; @@ -334,6 +364,7 @@ const CodeEditor = createReactClass({ }, makeLink : function() { + if(!this.isGFM()) return; const isLink = /^\[(.*)\]\((.*)\)$/; const selection = this.codeMirror?.getSelection().trim(); let match; @@ -351,7 +382,8 @@ const CodeEditor = createReactClass({ }, makeList : function(listType) { - const selectionStart = this.codeMirror?.getCursor('from'), selectionEnd = this.codeMirror?.getCursor('to'); + if(!this.isGFM()) return; + const selectionStart = this.codeMirror.getCursor('from'), selectionEnd = this.codeMirror.getCursor('to'); this.codeMirror?.setSelection( { line: selectionStart.line, ch: 0 }, { line: selectionEnd.line, ch: this.codeMirror?.getLine(selectionEnd.line).length } diff --git a/client/components/combobox.jsx b/client/components/combobox.jsx index 16122eafd..5060b8ecf 100644 --- a/client/components/combobox.jsx +++ b/client/components/combobox.jsx @@ -11,6 +11,7 @@ const Combobox = createReactClass({ trigger : 'hover', default : '', placeholder : '', + tooltip: '', autoSuggest : { clearAutoSuggestOnClick : true, suggestMethod : 'includes', @@ -70,11 +71,13 @@ const Combobox = createReactClass({ return (
{this.handleDropdown(true);} : undefined} - onClick= {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}> + onClick= {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined} + {...(this.props.tooltip ? { 'data-tooltip-right': this.props.tooltip } : {})}> this.handleInput(e)} value={this.state.value || ''} + title='' pattern={this.props.valuePatterns} placeholder={this.props.placeholder} onBlur={(e)=>{ diff --git a/client/components/combobox.less b/client/components/combobox.less index 27f78356b..a3c7527f2 100644 --- a/client/components/combobox.less +++ b/client/components/combobox.less @@ -10,6 +10,7 @@ position : absolute; z-index : 100; width : 100%; + height : max-content; max-height : 200px; overflow-y : auto; background-color : white; diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index be0842f33..97d996633 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -99,18 +99,18 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa return ( ), - )} - - - submitTag(value)} - onEntry={(e)=>{ - if(e.key === 'Enter') { - console.log('submit'); - e.preventDefault(); - submitTag(e.target.value); - } - }} - /> - {smallText.length !== 0 && {smallText}} -
+ )} + ); }; diff --git a/client/homebrew/editor/tagInput/tagInput.less b/client/homebrew/editor/tagInput/tagInput.less index 3165b3935..e986c6cc7 100644 --- a/client/homebrew/editor/tagInput/tagInput.less +++ b/client/homebrew/editor/tagInput/tagInput.less @@ -1,21 +1,30 @@ -.list input { - border-radius: 5px; -} +.tags { -.tagInput-dropdown { - .dropdown-options { - .item { - &.type { - background-color: #00800035; - } - &.group { - background-color: #50505035; - } - &.meta { - background-color: #00008035; - } - &.system { - background-color: #80000035; + .tagInputWrap { + display:grid; + grid-template-columns: 200px 3fr; + gap:10px; + } + + .list input { + border-radius: 5px; + } + + .tagInput-dropdown { + .dropdown-options { + .item { + &.type { + background-color: #00800035; + } + &.group { + background-color: #50505035; + } + &.meta { + background-color: #00008035; + } + &.system { + background-color: #80000035; + } } } } diff --git a/client/homebrew/pages/homePage/welcome_msg.md b/client/homebrew/pages/homePage/welcome_msg.md index 49d1918f0..d4d6bed05 100644 --- a/client/homebrew/pages/homePage/welcome_msg.md +++ b/client/homebrew/pages/homePage/welcome_msg.md @@ -36,7 +36,7 @@ After clicking the "Print" item in the navbar a new page will open and a print d If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,fa-tint}} Ink Friendly** snippet to your brew! }} -![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px} +![homebrew mug](https://homebrewery.naturalcrit.com/assets/homebrewerymug.png) {position:absolute,bottom:20px,left:130px,width:220px} {{artist,bottom:160px,left:100px ##### Homebrew Mug @@ -77,16 +77,16 @@ If you wish to sell or in some way gain profit for what's created on this site, If you'd like to credit us in your brew, we'd be flattered! Just reference that you made it with The Homebrewery. ### More Homebrew Resources -[![Discord](/assets/discordOfManyThings.svg){width:50px,float:right,padding-left:10px}](https://discord.gg/by3deKx) +[![Discord](https://homebrewery.naturalcrit.com/assets/discordOfManyThings.svg){width:50px,float:right,padding-left:10px}](https://discord.gg/by3deKx) If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The [Discord Of Many Things](https://discord.gg/by3deKx) is another great resource to connect with fellow homebrewers for help and feedback. {{position:absolute;top:20px;right:20px;width:auto -[![Discord](/assets/discord.png){height:30px}](https://discord.gg/by3deKx) -[![Github](/assets/github.png){height:30px}](https://github.com/naturalcrit/homebrewery) -[![Patreon](/assets/patreon.png){height:30px}](https://patreon.com/NaturalCrit) -[![Reddit](/assets/reddit.png){height:30px}](https://www.reddit.com/r/homebrewery/) +[![Discord](https://homebrewery.naturalcrit.com/assets/discord.png){height:30px}](https://discord.gg/by3deKx) +[![Github](https://homebrewery.naturalcrit.com/assets/github.png){height:30px}](https://github.com/naturalcrit/homebrewery) +[![Patreon](https://homebrewery.naturalcrit.com/assets/patreon.png){height:30px}](https://patreon.com/NaturalCrit) +[![Reddit](https://homebrewery.naturalcrit.com/assets/reddit.png){height:30px}](https://www.reddit.com/r/homebrewery/) }} \page @@ -162,7 +162,7 @@ Images must be hosted online somewhere, like [Imgur](https://www.imgur.com). You Using *Curly Injection* you can assign an id, classes, or inline CSS properties to the Markdown image syntax. -![alt-text](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:100px,border:"2px solid",border-radius:10px} +![alt-text](https://homebrewery.naturalcrit.com/assets/catwarrior.jpg) {width:100px,border:"2px solid",border-radius:10px} \* *When using Imgur-hosted images, use the "direct link", which can be found when you click into your image in the Imgur interface.* diff --git a/package-lock.json b/package-lock.json index db6143f52..2b3892c88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -73,7 +73,7 @@ "globals": "^16.4.0", "jest": "^30.2.0", "jest-expect-message": "^1.1.3", - "jsdom": "^28.0.0", + "jsdom": "^28.1.0", "jsdom-global": "^3.0.2", "postcss-less": "^6.0.0", "stylelint": "^16.25.0", @@ -3245,13 +3245,13 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "25.2.3", - "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.3.tgz", - "integrity": "sha512-m0jEgYlYz+mDJZ2+F4v8D1AyQb+QzsNqRuI7xg1VQX/KlKS0qT9r1Mo16yo5F/MtifXFgaofIFsdFMox2SxIbQ==", + "version": "25.3.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.0.tgz", + "integrity": "sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==", "dev": true, "license": "MIT", "dependencies": { - "undici-types": "~7.16.0" + "undici-types": "~7.18.0" } }, "node_modules/@types/stack-utils": { @@ -4121,9 +4121,9 @@ } }, "node_modules/asn1.js/node_modules/bn.js": { - "version": "4.12.2", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.2.tgz", - "integrity": "sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==", + "version": "4.12.3", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz", + "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==", "license": "MIT" }, "node_modules/assert": { @@ -4497,9 +4497,9 @@ } }, "node_modules/bn.js": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.2.tgz", - "integrity": "sha512-v2YAxEmKaBLahNwE1mjp4WON6huMNeuDvagFZW+ASCuA/ku0bXR9hSMw0XpiqMoA3+rmnyck/tPRSFQkoC9Cuw==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.3.tgz", + "integrity": "sha512-EAcmnPkxpntVL+DS7bO1zhcZNvCkxqtkd0ZY53h06GNQ3DEkkGZ/gKgmDv6DdZQGj9BgfSPKtJJ7Dp1GPP8f7w==", "license": "MIT" }, "node_modules/body-parser": { @@ -5511,9 +5511,9 @@ } }, "node_modules/create-ecdh/node_modules/bn.js": { - "version": "4.12.2", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.2.tgz", - "integrity": "sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==", + "version": "4.12.3", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz", + "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==", "license": "MIT" }, "node_modules/create-hash": { @@ -5960,9 +5960,9 @@ } }, "node_modules/diffie-hellman/node_modules/bn.js": { - "version": "4.12.2", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.2.tgz", - "integrity": "sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==", + "version": "4.12.3", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz", + "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==", "license": "MIT" }, "node_modules/dir-glob": { @@ -6067,9 +6067,9 @@ } }, "node_modules/elliptic/node_modules/bn.js": { - "version": "4.12.2", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.2.tgz", - "integrity": "sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==", + "version": "4.12.3", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz", + "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==", "license": "MIT" }, "node_modules/emittery": { @@ -7913,9 +7913,9 @@ } }, "node_modules/hashery": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/hashery/-/hashery-1.4.0.tgz", - "integrity": "sha512-Wn2i1In6XFxl8Az55kkgnFRiAlIAushzh26PTjL2AKtQcEfXrcLa7Hn5QOWGZEf3LU057P9TwwZjFyxfS1VuvQ==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/hashery/-/hashery-1.5.0.tgz", + "integrity": "sha512-nhQ6ExaOIqti2FDWoEMWARUqIKyjr2VcZzXShrI+A3zpeiuPWzx6iPftt44LhP74E5sW36B75N6VHbvRtpvO6Q==", "dev": true, "license": "MIT", "dependencies": { @@ -10326,9 +10326,9 @@ } }, "node_modules/miller-rabin/node_modules/bn.js": { - "version": "4.12.2", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.2.tgz", - "integrity": "sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==", + "version": "4.12.3", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz", + "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==", "license": "MIT" }, "node_modules/mime": { @@ -10413,10 +10413,10 @@ } }, "node_modules/minipass": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", - "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", - "license": "ISC", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz", + "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==", + "license": "BlueOak-1.0.0", "engines": { "node": ">=16 || 14 >=14.17" } @@ -11911,9 +11911,9 @@ } }, "node_modules/public-encrypt/node_modules/bn.js": { - "version": "4.12.2", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.2.tgz", - "integrity": "sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==", + "version": "4.12.3", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz", + "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==", "license": "MIT" }, "node_modules/punycode": { @@ -14636,9 +14636,9 @@ } }, "node_modules/undici-types": { - "version": "7.16.0", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz", - "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==", + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz", + "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==", "dev": true, "license": "MIT" }, @@ -15360,9 +15360,9 @@ } }, "node_modules/whatwg-url": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.0.tgz", - "integrity": "sha512-9CcxtEKsf53UFwkSUZjG+9vydAsFO4lFHBpJUtjBcoJOCJpKnSJNwCw813zrYJHpCJ7sgfbtOe0V5Ku7Pa1XMQ==", + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz", + "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==", "dev": true, "license": "MIT", "dependencies": { diff --git a/shared/naturalcrit/styles/tooltip.less b/shared/naturalcrit/styles/tooltip.less index b21439486..3150aa789 100644 --- a/shared/naturalcrit/styles/tooltip.less +++ b/shared/naturalcrit/styles/tooltip.less @@ -3,18 +3,23 @@ @arrowSize : 6px; @arrowPosition : 18px; [data-tooltip] { + position:relative; .tooltip(attr(data-tooltip)); } [data-tooltip-top] { + position:relative; .tooltipTop(attr(data-tooltip-top)); } [data-tooltip-bottom] { + position:relative; .tooltipBottom(attr(data-tooltip-bottom)); } [data-tooltip-left] { + position:relative; .tooltipLeft(attr(data-tooltip-left)); } [data-tooltip-right] { + position:relative; .tooltipRight(attr(data-tooltip-right)); } .tooltip(@content) { @@ -30,6 +35,7 @@ &::before, &::after { bottom : 100%; left : 50%; + translate: -50% 0; } &:hover::after, &:hover::before, &:focus::after, &:focus::before { .transform(translateY(-(@arrowSize + 2))); @@ -45,6 +51,7 @@ &::before, &::after { top : 100%; left : 50%; + translate: -50% 0; } &:hover::after, &:hover::before, &:focus::after, &:focus::before { .transform(translateY(@arrowSize + 2)); @@ -57,7 +64,10 @@ margin-bottom : -@arrowSize; border-left-color : @tooltipColor; } - &::after { margin-bottom : -14px;} + &::after { + margin-bottom : -14px; + max-width : 50ch; + } &::before, &::after { right : 100%; bottom : 50%; @@ -73,10 +83,14 @@ margin-left : -@arrowSize * 2; border-right-color : @tooltipColor; } - &::after { margin-bottom : -14px;} + &::after { + margin-bottom : -14px; + max-width : 50ch; + } &::before, &::after { - bottom : 50%; + top : 50%; left : 100%; + translate:0 -50%; } &:hover::after, &:hover::before, &:focus::after, &:focus::before { .transform(translateX(@arrowSize + 2)); @@ -106,9 +120,12 @@ font-size : 12px; line-height : 12px; color : white; - white-space : nowrap; content : @content; background : @tooltipColor; + max-width : 60ch; + width :max-content; + word-break : break-word; + overflow-wrap : break-word; } &:hover::before, &:hover::after { visibility : visible; diff --git a/themes/Legacy/5ePHB/snippets.js b/themes/Legacy/5ePHB/snippets.js index c5a864e89..a6a9dbe88 100644 --- a/themes/Legacy/5ePHB/snippets.js +++ b/themes/Legacy/5ePHB/snippets.js @@ -40,7 +40,7 @@ export default [ icon : 'fas fa-image', gen : [ '', 'Credit: Kyounghwan Kim' ].join('\n') @@ -50,7 +50,7 @@ export default [ icon : 'fas fa-tree', gen : [ '' ].join('\n') }, diff --git a/themes/V3/5ePHB/snippets/coverpage.gen.js b/themes/V3/5ePHB/snippets/coverpage.gen.js index 9a0adaaa7..96fc91cbd 100644 --- a/themes/V3/5ePHB/snippets/coverpage.gen.js +++ b/themes/V3/5ePHB/snippets/coverpage.gen.js @@ -84,7 +84,7 @@ export default { return dedent` {{frontCover}} - {{logo ![](/assets/naturalCritLogoRed.svg)}} + {{logo ![](https://homebrewery.naturalcrit.com/assets/naturalCritLogoRed.svg)}} # ${_.sample(titles)} ## ${_.sample(subtitles)} @@ -96,7 +96,7 @@ export default { ${_.sample(footnote)} }} - ![background image](https://i.imgur.com/IwHRrbF.jpg){position:absolute,bottom:0,left:0,height:100%} + ![background image](https://homebrewery.naturalcrit.com/assets/demontemple.jpg){position:absolute,bottom:0,left:0,height:100%} \page`; }, @@ -110,10 +110,10 @@ export default { ___ {{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0 - ![background image](https://i.imgur.com/IsfUnFR.jpg){position:absolute,bottom:0,left:0,height:100%} + ![background image](https://homebrewery.naturalcrit.com/assets/mountaincottage.jpg){position:absolute,bottom:0,left:0,height:100%} }} - {{logo ![](/assets/naturalCritLogoRed.svg)}} + {{logo ![](https://homebrewery.naturalcrit.com/assets/naturalCritLogoRed.svg)}} \page`; }, @@ -126,7 +126,7 @@ export default { ## ${_.sample(subtitles)} {{imageMaskEdge${_.random(1, 8)},--offset:10cm,--rotation:180 - ![Background image](https://i.imgur.com/9TU96xY.jpg){position:absolute,bottom:0,left:0,height:100%} + ![Background image](https://homebrewery.naturalcrit.com/assets/nightchapel.jpg){position:absolute,bottom:0,left:0,height:100%} }} \page`; @@ -143,10 +143,10 @@ export default { For use with any fantasy roleplaying ruleset. Play the best game of your life! - ![background image](https://i.imgur.com/MJ4YHu7.jpg){position:absolute,bottom:0,left:0,height:100%} + ![background image](https://homebrewery.naturalcrit.com/assets/shopvials.jpg){position:absolute,bottom:0,left:0,height:100%} {{logo - ![](/assets/naturalCritLogoWhite.svg) + ![](https://homebrewery.naturalcrit.com/assets/naturalCritLogoWhite.svg) Homebrewery.Naturalcrit.com }}`; diff --git a/themes/V3/Blank/snippets.js b/themes/V3/Blank/snippets.js index 1f44e95e1..0b61c0fd6 100644 --- a/themes/V3/Blank/snippets.js +++ b/themes/V3/Blank/snippets.js @@ -645,25 +645,25 @@ export default [ name : 'Image', icon : 'fas fa-image', gen : dedent` - ![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px,mix-blend-mode:multiply}` + ![cat warrior](https://homebrewery.naturalcrit.com/assets/catwarrior.jpg) {width:325px,mix-blend-mode:multiply}` }, { name : 'Image Wrap Left', icon : 'fac image-wrap-left', gen : dedent` - ![homebrewery_mug](http://i.imgur.com/hMna6G0.png) {width:280px,margin-right:-3cm,wrapLeft}` + ![homebrewery_mug](https://homebrewery.naturalcrit.com/assets/homebrewerymug.png) {width:280px,margin-right:-3cm,wrapLeft}` }, { name : 'Image Wrap Right', icon : 'fac image-wrap-right', gen : dedent` - ![homebrewery_mug](http://i.imgur.com/hMna6G0.png) {width:280px,margin-left:-3cm,wrapRight}` + ![homebrewery_mug](https://homebrewery.naturalcrit.com/assets/homebrewerymug.png) {width:280px,margin-left:-3cm,wrapRight}` }, { name : 'Background Image', icon : 'fas fa-tree', gen : dedent` - ![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}` + ![homebrew mug](https://homebrewery.naturalcrit.com/assets/homebrewerymug.png) {position:absolute,top:50px,right:30px,width:280px}` }, { name : 'Watercolor Splatter', diff --git a/themes/V3/Blank/snippets/imageMask.gen.js b/themes/V3/Blank/snippets/imageMask.gen.js index d84568f35..670d2de98 100644 --- a/themes/V3/Blank/snippets/imageMask.gen.js +++ b/themes/V3/Blank/snippets/imageMask.gen.js @@ -5,7 +5,7 @@ export default { center : ()=>{ return dedent` {{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0 - ![](https://i.imgur.com/GZfjDWV.png){height:100%} + ![](https://homebrewery.naturalcrit.com/assets/dragoninflight.jpg){height:100%} }} \n\n`; @@ -32,7 +32,7 @@ export default { const offsetY = (y == 'top' ? '50%' : '-50%'); return dedent` {{imageMaskCorner${_.random(1, 37)},--offsetX:${offsetX},--offsetY:${offsetY},--rotation:0 - ![](https://i.imgur.com/GZfjDWV.png){height:100%} + ![](https://homebrewery.naturalcrit.com/assets/dragoninflight.jpg){height:100%} }}