+ {{ $t('update.big_update_content') }} +
+
+
diff --git a/build/dev-server.js b/build/dev-server.js
index c06192bd..854efa0b 100644
--- a/build/dev-server.js
+++ b/build/dev-server.js
@@ -29,18 +29,20 @@ var devMiddleware = require('webpack-dev-middleware')(compiler, {
})
var hotMiddleware = require('webpack-hot-middleware')(compiler)
-// force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
- compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
- // FIXME: This supposed to reload whole page when index.html is changed,
- // however now it reloads entire page on every breath, i suppose the order
- // of plugins changed or something. It's a minor thing and douesn't hurt
- // disabling it, constant reloads hurt much more
- // hotMiddleware.publish({ action: 'reload' })
- // cb()
- })
-})
+// FIXME: The statement below gives error about hooks being required in webpack 5.
+// force page reload when html-webpack-plugin template changes
+// compiler.plugin('compilation', function (compilation) {
+// compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+// // FIXME: This supposed to reload whole page when index.html is changed,
+// // however now it reloads entire page on every breath, i suppose the order
+// // of plugins changed or something. It's a minor thing and douesn't hurt
+// // disabling it, constant reloads hurt much more
+
+// // hotMiddleware.publish({ action: 'reload' })
+// // cb()
+// })
+// })
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
@@ -48,7 +50,7 @@ Object.keys(proxyTable).forEach(function (context) {
if (typeof options === 'string') {
options = { target: options }
}
- app.use(proxyMiddleware(context, options))
+ app.use(proxyMiddleware.createProxyMiddleware(context, options))
})
// handle fallback for HTML5 history API
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index d8a4228d..78b75e3f 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -2,7 +2,7 @@ var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
-var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
+var ServiceWorkerWebpackPlugin = require('serviceworker-webpack5-plugin')
var CopyPlugin = require('copy-webpack-plugin');
var { VueLoaderPlugin } = require('vue-loader')
var ESLintPlugin = require('eslint-webpack-plugin');
@@ -42,6 +42,10 @@ module.exports = {
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
+ },
+ fallback: {
+ 'querystring': require.resolve('querystring-es3'),
+ 'url': require.resolve('url/')
}
},
module: {
@@ -78,22 +82,16 @@ module.exports = {
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
- use: {
- loader: 'url-loader',
- options: {
- limit: 10000,
- name: utils.assetsPath('img/[name].[hash:7].[ext]')
- }
+ type: 'asset',
+ generator: {
+ filename: utils.assetsPath('img/[name].[hash:7][ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
- use: {
- loader: 'url-loader',
- options: {
- limit: 10000,
- name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
- }
+ type: 'asset',
+ generator: {
+ filename: utils.assetsPath('fonts/[name].[hash:7][ext]')
}
},
{
@@ -117,9 +115,8 @@ module.exports = {
new CopyPlugin({
patterns: [
{
- from: "node_modules/@ruffle-rs/ruffle/*",
- to: "static/ruffle",
- flatten: true
+ from: "node_modules/@ruffle-rs/ruffle/**/*",
+ to: "static/ruffle/[name][ext]"
},
],
options: {
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
index 4605b93d..97799f82 100644
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -16,7 +16,7 @@ module.exports = merge(baseWebpackConfig, {
},
mode: 'development',
// eval-source-map is faster for development
- devtool: '#eval-source-map',
+ devtool: 'eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env,
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
index a67ed2f6..7de93721 100644
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -5,6 +5,7 @@ var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
var HtmlWebpackPlugin = require('html-webpack-plugin')
var env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
@@ -19,12 +20,16 @@ var webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true })
},
- devtool: config.build.productionSourceMap ? '#source-map' : false,
+ devtool: config.build.productionSourceMap ? 'source-map' : false,
optimization: {
minimize: true,
splitChunks: {
chunks: 'all'
- }
+ },
+ minimizer: [
+ `...`,
+ new CssMinimizerPlugin()
+ ]
},
output: {
path: config.build.assetsRoot,
@@ -60,9 +65,7 @@ var webpackConfig = merge(baseWebpackConfig, {
ignoreCustomComments: [/server-generated-meta/]
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
- },
- // necessary to consistently work with multiple chunks via CommonsChunkPlugin
- chunksSortMode: 'dependency'
+ }
}),
// split vendor js into its own file
// extract webpack runtime and module manifest to its own file in order to
diff --git a/package.json b/package.json
index e7033b75..a8cbaa3f 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,8 @@
"@fortawesome/free-solid-svg-icons": "6.1.2",
"@fortawesome/vue-fontawesome": "3.0.1",
"@kazvmoe-infra/pinch-zoom-element": "1.2.0",
- "@ruffle-rs/ruffle": "^0.1.0-nightly.2022.7.12",
- "@vuelidate/core": "2.0.0-alpha.43",
+ "@ruffle-rs/ruffle": "0.1.0-nightly.2022.7.12",
+ "@vuelidate/core": "2.0.0-alpha.44",
"@vuelidate/validators": "2.0.0-alpha.31",
"body-scroll-lock": "3.1.5",
"chromatism": "3.0.0",
@@ -32,95 +32,95 @@
"cropperjs": "1.5.12",
"diff": "3.5.0",
"escape-html": "1.0.3",
- "js-cookie": "^3.0.1",
+ "js-cookie": "3.0.1",
"localforage": "1.10.0",
- "parse-link-header": "1.0.1",
+ "parse-link-header": "2.0.0",
"phoenix": "1.6.2",
"punycode.js": "2.1.0",
- "qrcode": "1",
- "utf8": "^3.0.0",
+ "qrcode": "1.5.0",
+ "querystring-es3": "0.2.1",
+ "url": "0.11.0",
+ "utf8": "3.0.0",
"vue": "3.2.37",
- "vue-i18n": "9.2.0",
+ "vue-i18n": "9.2.2",
"vue-router": "4.1.3",
- "vue-template-compiler": "2.7.8",
+ "vue-template-compiler": "2.7.9",
"vuex": "4.0.2"
},
"devDependencies": {
- "@babel/core": "7.18.9",
- "@babel/plugin-transform-runtime": "7.18.9",
- "@babel/preset-env": "7.18.9",
- "@babel/register": "7.18.9",
+ "@babel/core": "7.18.10",
"@babel/eslint-parser": "7.18.9",
- "@intlify/vue-i18n-loader": "^5.0.0",
+ "@babel/plugin-transform-runtime": "7.18.10",
+ "@babel/preset-env": "7.18.10",
+ "@babel/register": "7.18.9",
+ "@intlify/vue-i18n-loader": "5.0.0",
"@ungap/event-target": "0.2.3",
"@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
"@vue/babel-plugin-jsx": "1.1.1",
"@vue/compiler-sfc": "3.2.37",
"@vue/test-utils": "2.0.2",
- "autoprefixer": "6.7.7",
+ "autoprefixer": "10.4.8",
"babel-loader": "8.2.5",
"babel-plugin-lodash": "3.3.4",
- "chai": "3.5.0",
+ "chai": "4.3.6",
"chalk": "1.1.3",
- "chromedriver": "103.0.0",
- "connect-history-api-fallback": "1.6.0",
- "copy-webpack-plugin": "6.4.1",
- "cross-spawn": "4.0.2",
- "css-loader": "0.28.11",
+ "chromedriver": "104.0.0",
+ "connect-history-api-fallback": "2.0.0",
+ "copy-webpack-plugin": "11.0.0",
+ "cross-spawn": "7.0.3",
+ "css-loader": "6.7.1",
+ "css-minimizer-webpack-plugin": "4.0.0",
"custom-event-polyfill": "1.0.7",
- "eslint": "8.20.0",
+ "eslint": "8.22.0",
"eslint-config-standard": "17.0.0",
"eslint-formatter-friendly": "7.0.0",
- "eslint-webpack-plugin": "2.7.0",
"eslint-plugin-import": "2.26.0",
- "eslint-plugin-n": "15.2.4",
+ "eslint-plugin-n": "15.2.5",
"eslint-plugin-promise": "6.0.0",
"eslint-plugin-vue": "9.3.0",
+ "eslint-webpack-plugin": "3.2.0",
"eventsource-polyfill": "0.9.6",
"express": "4.18.1",
- "file-loader": "3.0.1",
"function-bind": "1.1.1",
- "html-webpack-plugin": "3.2.0",
- "http-proxy-middleware": "0.21.0",
- "inject-loader": "2.0.1",
+ "html-webpack-plugin": "5.5.0",
+ "http-proxy-middleware": "2.0.6",
"iso-639-1": "2.1.15",
"isparta-loader": "2.0.0",
"json-loader": "0.5.7",
"karma": "6.4.0",
- "karma-coverage": "1.1.2",
- "karma-firefox-launcher": "1.3.0",
+ "karma-coverage": "2.2.0",
+ "karma-firefox-launcher": "2.1.2",
"karma-mocha": "2.0.1",
"karma-mocha-reporter": "2.2.5",
"karma-sinon-chai": "2.0.2",
"karma-sourcemap-loader": "0.3.8",
"karma-spec-reporter": "0.0.34",
- "karma-webpack": "4.0.2",
+ "karma-webpack": "5.0.0",
"lodash": "4.17.21",
"lolex": "1.6.0",
- "mini-css-extract-plugin": "0.12.0",
- "mocha": "3.5.3",
- "nightwatch": "0.9.21",
+ "mini-css-extract-plugin": "2.6.1",
+ "mocha": "10.0.0",
+ "nightwatch": "2.3.3",
"opn": "4.0.2",
"ora": "0.4.1",
- "postcss-loader": "3.0.0",
- "raw-loader": "0.5.1",
- "sass": "1.54.0",
- "sass-loader": "7.3.1",
+ "postcss": "8.4.16",
+ "postcss-loader": "7.0.1",
+ "sass": "1.54.5",
+ "sass-loader": "13.0.2",
"selenium-server": "2.53.1",
"semver": "5.7.1",
- "serviceworker-webpack-plugin": "1.0.1",
+ "serviceworker-webpack5-plugin": "2.0.0",
"shelljs": "0.8.5",
"sinon": "2.4.1",
"sinon-chai": "2.14.0",
"stylelint": "13.13.1",
"stylelint-config-standard": "20.0.0",
"stylelint-rscss": "0.4.0",
- "url-loader": "1.1.2",
- "vue-loader": "^16.0.0",
+ "vue-loader": "17.0.0",
"vue-style-loader": "4.1.3",
- "webpack": "4.46.0",
+ "webpack": "5.74.0",
"webpack-dev-middleware": "3.7.3",
- "webpack-hot-middleware": "2.25.1",
+ "webpack-hot-middleware": "2.25.2",
"webpack-merge": "0.20.0"
},
"engines": {
diff --git a/src/App.js b/src/App.js
index 0b63b242..e272f808 100644
--- a/src/App.js
+++ b/src/App.js
@@ -34,6 +34,7 @@ export default {
MobileNav,
DesktopNav,
SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')),
+ UpdateNotification: defineAsyncComponent(() => import('./components/update_notification/update_notification.vue')),
UserReportingModal,
PostStatusModal,
EditStatusModal,
@@ -63,6 +64,13 @@ export default {
'-' + this.layoutType
]
},
+ navClasses () {
+ const { navbarColumnStretch } = this.$store.getters.mergedConfig
+ return [
+ '-' + this.layoutType,
+ ...(navbarColumnStretch ? ['-column-stretch'] : [])
+ ]
+ },
currentUser () { return this.$store.state.users.currentUser },
userBackground () { return this.currentUser.background_image },
instanceBackground () {
diff --git a/src/App.scss b/src/App.scss
index ab025d63..dec187af 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -5,12 +5,12 @@
--navbar-height: 3.5rem;
--post-line-height: 1.4;
// Z-Index stuff
- --ZI_media_modal: 90000;
- --ZI_modals_popovers: 85000;
- --ZI_modals: 80000;
- --ZI_navbar_popovers: 75000;
- --ZI_navbar: 70000;
- --ZI_popovers: 60000;
+ --ZI_media_modal: 9000;
+ --ZI_modals_popovers: 8500;
+ --ZI_modals: 8000;
+ --ZI_navbar_popovers: 7500;
+ --ZI_navbar: 7000;
+ --ZI_popovers: 6000;
}
html {
@@ -141,6 +141,11 @@ nav {
grid-area: sidebar;
}
+#modal {
+ position: absolute;
+ z-index: var(--ZI_modals);
+}
+
.column.-scrollable {
top: var(--navbar-height);
position: sticky;
@@ -182,13 +187,18 @@ nav {
.app-layout {
--miniColumn: 25rem;
- --maxiColumn: minmax(var(--miniColumn), 45rem);
+ --maxiColumn: 45rem;
--columnGap: 1em;
--status-margin: 0.75em;
+ --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
+ --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
+ --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));
position: relative;
display: grid;
- grid-template-columns: var(--miniColumn) var(--maxiColumn);
+ grid-template-columns:
+ var(--effectiveSidebarColumnWidth)
+ var(--effectiveContentColumnWidth);
grid-template-areas: "sidebar content";
grid-template-rows: 1fr;
box-sizing: border-box;
@@ -282,15 +292,24 @@ nav {
}
&.-reverse:not(.-wide):not(.-mobile) {
- grid-template-columns: var(--maxiColumn) var(--miniColumn);
+ grid-template-columns:
+ var(--effectiveContentColumnWidth)
+ var(--effectiveSidebarColumnWidth);
grid-template-areas: "content sidebar";
}
&.-wide {
- grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
+ grid-template-columns:
+ var(--effectiveSidebarColumnWidth)
+ var(--effectiveContentColumnWidth)
+ var(--effectiveNotifsColumnWidth);
grid-template-areas: "sidebar content notifs";
&.-reverse {
+ grid-template-columns:
+ var(--effectiveNotifsColumnWidth)
+ var(--effectiveContentColumnWidth)
+ var(--effectiveSidebarColumnWidth);
grid-template-areas: "notifs content sidebar";
}
}
@@ -752,7 +771,7 @@ option {
}
.fa-old-padding {
- &.svg-inline--fa {
+ &.svg-inline--fa, &-layer {
padding: 0 0.3em;
}
}
diff --git a/src/App.vue b/src/App.vue
index 9869e835..fdef153d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,10 @@
class="app-bg-wrapper"
/>
+ {{ $t('update.big_update_content') }} +
+
+