diff --git a/changelog.d/action-button-extra-counter.add b/changelog.d/action-button-extra-counter.add new file mode 100644 index 000000000..7d5c77447 --- /dev/null +++ b/changelog.d/action-button-extra-counter.add @@ -0,0 +1 @@ +Display counter for status action buttons when they are on the menu diff --git a/changelog.d/bookmark-button-align.fix b/changelog.d/bookmark-button-align.fix new file mode 100644 index 000000000..64bc2c807 --- /dev/null +++ b/changelog.d/bookmark-button-align.fix @@ -0,0 +1 @@ +Fix bookmark button alignment in the extra actions menu diff --git a/changelog.d/csp.add b/changelog.d/csp.add new file mode 100644 index 000000000..260337b97 --- /dev/null +++ b/changelog.d/csp.add @@ -0,0 +1 @@ +Compatibility with stricter CSP (Akkoma backend) diff --git a/index.html b/index.html index 86d15971b..96c20c4b7 100644 --- a/index.html +++ b/index.html @@ -10,135 +10,13 @@ - - - - + + + + - +
diff --git a/package.json b/package.json index 3d6b08d73..5e71a3996 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@fortawesome/free-regular-svg-icons": "6.7.2", "@fortawesome/free-solid-svg-icons": "6.7.2", "@fortawesome/vue-fontawesome": "3.0.8", - "@kazvmoe-infra/pinch-zoom-element": "1.2.0", + "@floatingghost/pinch-zoom-element": "1.3.1", "@kazvmoe-infra/unicode-emoji-json": "0.4.0", "@ruffle-rs/ruffle": "0.1.0-nightly.2025.1.13", "@vuelidate/core": "2.0.3", diff --git a/public/static/empty.css b/public/static/empty.css new file mode 100644 index 000000000..3dfa88151 --- /dev/null +++ b/public/static/empty.css @@ -0,0 +1 @@ +// nothing here // diff --git a/public/static/splash.css b/public/static/splash.css new file mode 100644 index 000000000..abdc19fc2 --- /dev/null +++ b/public/static/splash.css @@ -0,0 +1,126 @@ +body { + margin: 0; + padding: 0; +} + +#splash { + --scale: 1; + width: 100vw; + height: 100vh; + display: grid; + grid-template-rows: auto; + grid-template-columns: auto; + align-content: center; + align-items: center; + justify-content: center; + justify-items: center; + flex-direction: column; + background: #0f161e; + font-family: sans-serif; + color: #b9b9ba; + position: absolute; + z-index: 9999; + font-size: calc(1vw + 1vh + 1vmin); +} + +#splash-credit { + position: absolute; + font-size: 14px; + bottom: 16px; + right: 16px; +} + +#splash-container { + align-items: center; +} + +#mascot-container { + display: flex; + align-items: flex-end; + justify-content: center; + perspective: 60em; + perspective-origin: 0 -15em; + transform-style: preserve-3d; +} + +#mascot { + width: calc(10em * var(--scale)); + height: calc(10em * var(--scale)); + object-fit: contain; + object-position: bottom; + transform: translateZ(-2em); +} + +#throbber { + display: grid; + width: calc(5em * 0.5 * var(--scale)); + height: calc(8em * 0.5 * var(--scale)); + margin-left: 4.1em; + z-index: 2; + grid-template-rows: repeat(8, 1fr); + grid-template-columns: repeat(5, 1fr); + grid-template-areas: "P P . L L" + "P P . L L" + "P P . L L" + "P P . L L" + "P P . . ." + "P P . . ." + "P P . E E" + "P P . E E"; + + --logoChunkSize: calc(2em * 0.5 * var(--scale)) +} + +.chunk { + background-color: #e2b188; + box-shadow: 0.01em 0.01em 0.1em 0 #e2b188; +} + +#chunk-P { + grid-area: P; + border-top-left-radius: calc(var(--logoChunkSize) / 2); +} + +#chunk-L { + grid-area: L; + border-bottom-right-radius: calc(var(--logoChunkSize) / 2); +} + +#chunk-E { + grid-area: E; + border-bottom-right-radius: calc(var(--logoChunkSize) / 2); +} + +#status { + margin-top: 1em; + line-height: 2; + width: 100%; + text-align: center; +} + +#statusError { + display: none; + margin-top: 1em; + font-size: calc(1vw + 1vh + 1vmin); + line-height: 2; + width: 100%; + text-align: center; +} + +#statusStack { + display: none; + margin-top: 1em; + font-size: calc((1vw + 1vh + 1vmin) / 2.5); + width: calc(100vw - 5em); + padding: 1em; + text-overflow: ellipsis; + overflow-x: hidden; + text-align: left; + line-height: 2; +} + +@media (prefers-reduced-motion) { + #throbber { + animation: none !important; + } +} diff --git a/src/App.scss b/src/App.scss index 704d51cea..6e837a0e7 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,6 +2,9 @@ /* stylelint-disable no-descending-specificity */ @use "panel"; +@import '@fortawesome/fontawesome-svg-core/styles.css'; +@import '@floatingghost/pinch-zoom-element/dist/pinch-zoom.css'; + :root { --status-margin: 0.75em; --post-line-height: 1.4; @@ -30,6 +33,7 @@ body { font-family: sans-serif; font-family: var(--font); margin: 0; + padding: 0; color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 05ddda982..c5be7781f 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -6,6 +6,8 @@ import VueVirtualScroller from 'vue-virtual-scroller' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome' +import { config } from '@fortawesome/fontawesome-svg-core'; +config.autoAddCss = false import App from '../App.vue' import routes from './routes' diff --git a/src/components/pinch_zoom/pinch_zoom.js b/src/components/pinch_zoom/pinch_zoom.js index 82670ddfa..b7e8f673e 100644 --- a/src/components/pinch_zoom/pinch_zoom.js +++ b/src/components/pinch_zoom/pinch_zoom.js @@ -1,4 +1,4 @@ -import PinchZoom from '@kazvmoe-infra/pinch-zoom-element' +import PinchZoom from '@floatingghost/pinch-zoom-element' export default { methods: { diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss index 828b81cd1..a166e2196 100644 --- a/src/components/popover/popover.scss +++ b/src/components/popover/popover.scss @@ -60,11 +60,14 @@ } .extra-button { - border-left: 1px solid var(--icon); + border-left: 1px solid; + border-image-source: linear-gradient(to bottom, transparent 0%, var(--icon) var(--__horizontal-gap) calc(100% - var(--__horizontal-gap)), transparent 100%); + border-image-slice: 1; padding-left: calc(var(--__horizontal-gap) - 1px); - border-right: var(--__horizontal-gap) solid transparent; - border-top: var(--__horizontal-gap) solid transparent; - border-bottom: var(--__horizontal-gap) solid transparent; + padding-right: var(--__horizontal-gap); + padding-top: var(--__horizontal-gap); + padding-bottom: var(--__horizontal-gap); + max-width: fit-content; } .main-button { diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss index c0a9824df..8c6924871 100644 --- a/src/components/status_action_buttons/action_button.scss +++ b/src/components/status_action_buttons/action_button.scss @@ -102,4 +102,20 @@ } } } + + &.-extra { + .action-counter { + justify-self: end; + margin-right: 1em; + } + + .chevron-icon { + justify-self: end; + } + + .extra-button { + justify-self: end; + justify-content: end; + } + } } diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue index ad2d349c6..a9aedb9e3 100644 --- a/src/components/status_action_buttons/action_button.vue +++ b/src/components/status_action_buttons/action_button.vue @@ -60,7 +60,7 @@ /> {{ button.counter?.(funcArg) }} diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index ef4a6f5c4..3d85db3aa 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -234,20 +234,14 @@ export const applyConfig = (input) => { return } - const head = document.head - const rules = Object .entries(config) .filter(([, v]) => v) .map(([k, v]) => `--${k}: ${v}`).join(';') - document.getElementById('style-config')?.remove() const styleEl = document.getElementById('theme-holder') - styleEl.id = 'style-config' - head.appendChild(styleEl) const styleSheet = styleEl.sheet - styleSheet.toString() styleSheet.insertRule(`:root { ${rules} }`, 'index-max') // TODO find a way to make this not apply to theme previews diff --git a/vite.config.js b/vite.config.js index 0b4d0db90..d25dfa3aa 100644 --- a/vite.config.js +++ b/vite.config.js @@ -136,7 +136,7 @@ export default defineConfig(async ({ mode, command }) => { '@ungap/event-target', 'lodash.merge', 'body-scroll-lock', - '@kazvmoe-infra/pinch-zoom-element' + '@floatingghost/pinch-zoom-element' ] }, css: { diff --git a/yarn.lock b/yarn.lock index ac78d4d08..216dac8ae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1446,6 +1446,13 @@ "@eslint/core" "^0.13.0" levn "^0.4.1" +"@floatingghost/pinch-zoom-element@1.3.1": + version "1.3.1" + resolved "https://registry.yarnpkg.com/@floatingghost/pinch-zoom-element/-/pinch-zoom-element-1.3.1.tgz#5f327ad17ddf1f56777098aca088fdbf99cbd049" + integrity sha512-KnE7aBQdd/Fj1TzU5uzgwD9YAQ58DTMUks/PoTEBFW4zi0lBM9cN/j45wzcnzsT2VXG1S6qM7NMmq7NGm2//Fg== + dependencies: + pointer-tracker "^2.0.3" + "@fortawesome/fontawesome-common-types@6.7.2": version "6.7.2" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz#7123d74b0c1e726794aed1184795dbce12186470" @@ -1602,13 +1609,6 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" -"@kazvmoe-infra/pinch-zoom-element@1.2.0": - version "1.2.0" - resolved "https://registry.yarnpkg.com/@kazvmoe-infra/pinch-zoom-element/-/pinch-zoom-element-1.2.0.tgz#eb3ca34c53b4410c689d60aca02f4a497ce84aba" - integrity sha512-HBrhH5O/Fsp2bB7EGTXzCsBAVcMjknSagKC5pBdGpKsF8meHISR0kjDIdw4YoE0S+0oNMwJ6ZUZyIBrdywxPPw== - dependencies: - pointer-tracker "^2.0.3" - "@kazvmoe-infra/unicode-emoji-json@0.4.0": version "0.4.0" resolved "https://registry.yarnpkg.com/@kazvmoe-infra/unicode-emoji-json/-/unicode-emoji-json-0.4.0.tgz#555bab2f8d11db74820ef0a2fbe2805b17c22587"