diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 00000000..f3f4132a --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,53 @@ +name: CI test and build + +on: + push: + pull_request: + types: [opened] + branches: + - main + +# env settings for github releases +# docker image push +env: + REGISTRY: ghcr.io + IMAGE_NAME: ${{ github.repository }} + +jobs: + # build and push image to github container registry + build-and-push-image: + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + attestations: write + id-token: write + steps: + - name: Checkout repository + uses: actions/checkout@v4.2.1 + - name: Log in to the Container registry + uses: docker/login-action@v3.3.0 + with: + registry: ${{ env.REGISTRY }} + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + - name: Extract metadata (tags, labels) for Docker + id: meta + uses: docker/metadata-action@v5.5.1 + with: + images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} + - name: Build and push Docker image + id: push + uses: docker/build-push-action@v6.9.0 + with: + context: . + push: true + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + # https://docs.github.com/en/actions/security-guides/using-artifact-attestations-to-establish-provenance-for-builds + - name: Generate artifact attestation + uses: actions/attest-build-provenance@v1.4.3 + with: + subject-name: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME}} + subject-digest: ${{ steps.push.outputs.digest }} + push-to-registry: true diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md new file mode 100644 index 00000000..352ae9a5 --- /dev/null +++ b/DEVELOPMENT.md @@ -0,0 +1,38 @@ +# DEVELOPMENT GUIDE + +## Proxy Project + +The proxy server queries the existing BCT database and manipulates that data to fit into Epochtalk's data models. The backend serves that manipulated data to the frontend project. This version of the project is for a read only mobile deployment of BCT. + +### Continued Development + +* Prequisites + * SSH tunnel to BCT database from localhost if developing locally, this is required to make the proxy queries work +* Checkout each of the three projects and switch to the branch in parentheses + * `epochtalk/epochtalk` (ui-refactor-2020) + * There should be no modifications made to this project, it is just running to stop the frontend from breaking when hitting api routes which have not been ported to the new `epochtalk-server` yet + * `epochtalk/epochtalk-vue` (proxy) + * Changes can be made here when proxy BCT data doesn't quite fit into the current model design scheme of Epochtalk + * `slickage/epochtalk-server` (main) + * This should only be modified if there is an issue with existing proxied routes, or if there is a requirement to proxy more BCT data for the mobile read only site + * Key Files + * `lib/epochtalk_server/smf_query.ex` - used to proxy SMF data into Epochtalk format + * `lib/epochtalk_server_web/controller/*.ex` - to override a standard route with data queried from the proxy, the controller must be modified. See existing examples of using the plug `:check_proxy` the `post.ex` controller is a good example of this. + * `lib/epochtalk_server/bbc_parser.ex` - used to turn the bbcode parser into genserver process which can be deployed as a pool via `poolboy` + * `parsing.php` - bbcode parser + * `parsing_extra.php` - additional settings and functions required to run bbcode parser + +## Main Project + +The main project was initially written in Node/Angular an is in the process of being ported to Vue JS (Frontend) and Elixir (Backend). + +### Continued Development + +* Checkout each of the three projects and switch to the branch in parentheses + * `epochtalk/epochtalk` (ui-refactor-2020) + * There should be no modifications made to this project, it is just running to stop the frontend from breaking when hitting api routes which have not been ported to the new `epochtalk-server` yet. + * `epochtalk/epochtalk-vue` (main) + * Frontend changes should be made here. When new routes are ported to the new elixir server, the front end api/views must be updated as well. + * See `PortRoadMap.md` within this project to view a list of remaining views to be ported. + * `epochtalk/epochtalk-server` (main) + * See `PortRoadmap.md` within the `epochtalk-server` project for a list of which models and features have been ported. diff --git a/Dockerfile b/Dockerfile index 9dabf129..b4ae8f0e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,9 +1,10 @@ # build stage -FROM node:12-alpine as build-stage +FROM node:16-alpine as build-stage ENV JQ_VERSION=1.6 RUN wget --no-check-certificate https://github.com/stedolan/jq/releases/download/jq-${JQ_VERSION}/jq-linux64 -O /tmp/jq-linux64 RUN cp /tmp/jq-linux64 /usr/bin/jq RUN chmod +x /usr/bin/jq +RUN apk add --no-cache git WORKDIR /app COPY . . COPY src/docker-config.json src/config.json diff --git a/PortRoadmap.md b/PortRoadmap.md new file mode 100644 index 00000000..0ed23c71 --- /dev/null +++ b/PortRoadmap.md @@ -0,0 +1,43 @@ +## Port Roadmap + +This document is used to track progress of porting views from the original node/angular `epochtalk/epochtalk` project to the new elixir/vue `epochtalk/epochtalk-vue` + +## Non Authenticated View Port Progress +| View Name | Completed? | +| --------- | ---------- | +| Boards | :white_check_mark: | +| Threads | :white_check_mark: | +| Posts | :white_check_mark: | +| Profile | :white_check_mark: | +| About | :x: | + +## Public Authenticated View Port Progress +| View Name | Completed? | +| --------- | ---------- | +| Boards | :white_check_mark: | +| Threads | :white_check_mark: | +| Posts | :white_check_mark: | +| Profile | :white_check_mark: | +| WatchList | :construction_worker: | +| Messages | :construction_worker: | +| Trust | :white_check_mark: | +| Trust Settings | :white_check_mark: | +| Settings | :white_check_mark: | +| Invite User | :white_check_mark: | + +## Administrative Authenticated View Port Progress +| View Name | Completed? | +| --------- | ---------- | +| General Settings | :x: | +| Advanced Settings | :x: | +| Legal Settings | :x: | +| Theme Settings | :x: | +| Board Management | :x: | +| Users Management | :x: | +| Roles Management | :x: | +| Banned Addresses Management | :x: | +| Users Moderation | :x: | +| Posts Moderation | :x: | +| Messages Moderation | :x: | +| Board Bans Moderation | :x: | +| Moderation Logs | :x: | diff --git a/data/nginx-vue/conf.d/default.conf b/data/nginx-vue/conf.d/default.conf new file mode 100644 index 00000000..796d93d7 --- /dev/null +++ b/data/nginx-vue/conf.d/default.conf @@ -0,0 +1,44 @@ +server { + listen 80; + server_name localhost; + + #access_log /var/log/nginx/host.access.log main; + + location / { + root /usr/share/nginx/html; + index index.html index.htm; + } + + #error_page 404 /404.html; + + # redirect server error pages to the static page /50x.html + # + error_page 500 502 503 504 /50x.html; + error_page 404 =200 /index.html; + location = /50x.html { + root /usr/share/nginx/html; + } + + # proxy the PHP scripts to Apache listening on 127.0.0.1:80 + # + #location ~ \.php$ { + # proxy_pass http://127.0.0.1; + #} + + # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 + # + #location ~ \.php$ { + # root html; + # fastcgi_pass 127.0.0.1:9000; + # fastcgi_index index.php; + # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; + # include fastcgi_params; + #} + + # deny access to .htaccess files, if Apache's document root + # concurs with nginx's one + # + #location ~ /\.ht { + # deny all; + #} +} diff --git a/docker-compose.yml b/docker-compose.yml index 85178dbe..0c643e32 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -4,43 +4,7 @@ services: build: . ports: - "80:80" - links: - - epochtalk - environment: - BASE_URL: "http://localhost:8080" - epochtalk: - image: quay.io/epochtalk/epochtalk:ui-refactor-2020 - ports: - - "8080:8080" - - "23958:23958" - depends_on: - - redis - - postgres - - epoch - links: - - redis - - postgres env_file: - - epochtalk-docker.env - epoch: - image: quay.io/epochtalk/epoch:v1.14.0 - depends_on: - - postgres - links: - - postgres - environment: - MIX_ENV: prod - DATABASE_USER: docker - DATABASE_PASSWORD: docker - DATABASE_NAME: epochtalk - DATABASE_HOST: postgres - redis: - image: redis:4.0.1 - user: redis - postgres: - image: postgres:11.1 - environment: - POSTGRES_USER: docker - POSTGRES_PASSWORD: docker + - epochtalk-vue.env volumes: - - ./db:/var/lib/postgresql/data + - ./data/nginx-vue/conf.d:/etc/nginx/conf.d diff --git a/example.env b/example.env index 22015a43..da684aca 100644 --- a/example.env +++ b/example.env @@ -1,2 +1,8 @@ +# When adding a new env variable, +# make sure to add an entry to: +# src/config.json (dev) +# and +# src/docker-config.json (prod) VUE_APP_BACKEND_URL=http://localhost:4000 VUE_APP_OLD_BACKEND_URL=http://localhost:8080 +VUE_APP_API_KEY=ABC123 diff --git a/package.json b/package.json index 872e2778..155482e0 100644 --- a/package.json +++ b/package.json @@ -19,33 +19,34 @@ "url": "git://github.com/epochtalk/epochtalk-vue" }, "dependencies": { - "@fortawesome/fontawesome-free": "^5.15.1", - "@vueform/multiselect": "^1.2.5", - "axios": "^0.21.0", - "core-js": "^3.6.5", - "dayjs": "^1.9.6", - "emittery": "^0.10.1", - "jquery": "^3.6.0", - "nestable": "git+https://github.com/slickage/Nestable.git", + "@fortawesome/fontawesome-free": "^6.4.0", + "@vueform/multiselect": "^2.6.2", + "axios": "^1.4.0", + "core-js": "^3.32.0", + "dayjs": "^1.11.8", + "emittery": "^1.0.1", + "jquery": "^3.7.0", + "nestable": "https://github.com/epochtalk/Nestable.git", "normalize.css": "^8.0.1", "nprogress": "^0.2.0", - "sass": "^1.55.0", - "slugify": "^1.6.1", - "socketcluster-client": "^14.3.2", - "swrv": "^1.0.0-beta.5", - "vue": "^3.0.0", - "vue-router": "^4.0.6", + "phoenix": "^1.7.7", + "sass": "^1.64.1", + "slugify": "^1.6.6", + "socketcluster-client": "^17.1.1", + "swrv": "^1.0.3", + "vue": "^3.3.4", + "vue-router": "^4.2.2", "vuedraggable": "^4.1.0" }, "devDependencies": { + "@babel/eslint-parser": "^7.21.8", "@vue/cli-plugin-babel": "~5.0.8", "@vue/cli-plugin-eslint": "~5.0.8", "@vue/cli-service": "~5.0.8", - "@vue/compiler-sfc": "^3.0.0", - "babel-eslint": "^10.1.0", - "eslint": "^7.27.0", - "eslint-plugin-vue": "^7.0.0-0", - "sass-loader": "^10" + "@vue/compiler-sfc": "^3.3.4", + "eslint": "^8.46.0", + "eslint-plugin-vue": "^9.14.1", + "sass-loader": "^13.3.1" }, "eslintConfig": { "root": true, @@ -57,9 +58,11 @@ "eslint:recommended" ], "parserOptions": { - "parser": "babel-eslint" + "parser": "@babel/eslint-parser" }, - "rules": {} + "rules": { + "vue/multi-word-component-names": "off" + } }, "browserslist": [ "> 1%", diff --git a/public/index.html b/public/index.html index 4b39f430..4d1748fa 100644 --- a/public/index.html +++ b/public/index.html @@ -5,18 +5,18 @@ - <%= htmlWebpackPlugin.options.title %> + Bitcoin Forum
@@ -594,10 +617,7 @@ export default { width: 100%; flex: 1 0 auto; display: flex; - .editor-column-input { - flex: 1 0 auto; - height: auto; - } + input[type], .editor-input, .editor-preview { @@ -605,11 +625,14 @@ export default { background-color: $base-background-color; border: 0; border-top: 1px solid $border-color; - border-bottom: 1px solid $border-color; padding: 1rem; resize: none; - ul, ol { margin-left: 1.25rem; } - ul { white-space: normal; } + overflow-y: auto; + ul, ol { + @include pad(0 0 0 1.15rem); + white-space: normal; + } + } .editor-drag-container { display: none; @@ -642,12 +665,14 @@ export default { } } + .editor-column-input { border-bottom: 1px solid $border-color; } .editor-column-input, .editor-column-preview { - height: 100%; + flex: 1 0 auto; + height: auto; &.hidden { display: none; } } - .editor-input { + .editor-input, .editor-preview { white-space: pre-wrap; overflow: auto; height: 100%; @@ -658,13 +683,7 @@ export default { line-height: 1.6; } } - .editor-preview { - white-space: pre-wrap; - overflow: auto; - height: 100%; - word-wrap: break-word; - p { margin: 0; } - } + .editor-preview { height: 80vh; } .editor-footer { color: $secondary-font-color-light; font-size: .875rem; diff --git a/src/components/layout/Header.vue b/src/components/layout/HeaderComponent.vue similarity index 95% rename from src/components/layout/Header.vue rename to src/components/layout/HeaderComponent.vue index 09f96700..28edbe91 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/HeaderComponent.vue @@ -56,8 +56,8 @@ Watchlist -
  • - +
  • + Invite Users
    • @@ -74,19 +74,20 @@

    - - Epochtalk Forums + + Bitcoin Forum +  {{decode(revision)}}

    @@ -211,8 +212,8 @@
  • Watchlist
    • -
  • - +
  • + Invite User
    • @@ -267,7 +268,7 @@ import AdminNavigation from '@/components/layout/AdminNavigation.vue' import AdminSubNavigation from '@/components/layout/AdminSubNavigation.vue' import decode from '@/composables/filters/decode' import { AuthStore } from '@/composables/stores/auth' -import { PreferencesStore } from '@/composables/stores/prefs' +import { PreferencesStore, localStoragePrefs} from '@/composables/stores/prefs' import { reactive, toRefs, watch, onMounted, onUnmounted, onBeforeMount, inject } from 'vue' import { debounce } from 'lodash' import { useRouter, useRoute } from 'vue-router' @@ -275,7 +276,7 @@ import BanStore from '@/composables/stores/ban' import NotificationsStore from '@/composables/stores/notifications' import humanDate from '@/composables/filters/humanDate' import { motdApi } from '@/api' -import { watchPublicChannel } from '@/composables/services/websocket' +import { addAnnouncementListener } from '@/composables/services/websocket' export default { components: { AdminNavigation, AdminSubNavigation, Breadcrumbs, LoginModal, InviteModal, RegisterModal, Alert }, @@ -283,7 +284,11 @@ export default { onBeforeMount(() => { let fetchMotd = () => motdApi.get().then(d => v.motdData = d).catch(() => {}) fetchMotd() - watchPublicChannel(d => d.action === 'announcement' ? fetchMotd() : null) + addAnnouncementListener(fetchMotd) + + // set dark mode if in user prefs + if (localStoragePrefs().data.dark_mode) + document.documentElement.classList.add('dark') }) /* Internal Methods */ const scrollHeader = () => { @@ -322,6 +327,12 @@ export default { if (v.searchExpanded) { v.search.focus() } } + const toggleDarkMode = () => { + v.darkMode = !v.darkMode + document.documentElement.classList.toggle('dark') + $prefs.update() + } + const unseenMentionsText = () => { let unseenInList = 0; v.mentionsList.forEach(mention => { if (!mention.viewed) { unseenInList++ } }) @@ -339,6 +350,7 @@ export default { /* Template Data */ const v = reactive({ + darkMode: $prefs.data.dark_mode, showMobileMenu: false, focusSearch: false, searchExpanded: false, @@ -361,6 +373,8 @@ export default { mentionsList: NotificationsStore.mentionsList, notificationMessages: NotificationsStore.messages, notificationMentions: NotificationsStore.mentions, + title: window.title, + revision: window.revision, defaultAvatar: window.default_avatar, defaultAvatarShape: window.default_avatar_shape, breadcrumbs: [{label:'Home', state: '#', opts: {}}] @@ -389,7 +403,7 @@ export default { window.removeEventListener('scroll', debounce(scrollHeader, 10)) }) - return { ...toRefs(v), BanStore, logout, isPatroller, searchForum, dismissNotifications, deleteMention, unseenMentionsText, toggleFocusSearch, decode, humanDate } + return { ...toRefs(v), BanStore, logout, isPatroller, searchForum, dismissNotifications, deleteMention, unseenMentionsText, toggleFocusSearch, toggleDarkMode, decode, humanDate } } } @@ -656,11 +670,16 @@ header { cursor: pointer; } &.signed-out li { padding-left: 1.25rem; } - &.signed-out li a { + &.signed-out li a, &.signed-out li span { display: table-cell; height: inherit; vertical-align: middle; } + li span { + cursor: not-allowed; + color: $secondary-font-color; + font-size: $header-login-font-size; + } li a { color: $header-login-font-color; font-size: $header-login-font-size; @@ -879,7 +898,7 @@ header { height: 2rem; width: 2rem; border: 2px solid $border-color; - object-fit: cover; + object-fit: contain; } } } @@ -1100,6 +1119,7 @@ header { } @include break-mobile-sm { - #header-spacer { margin-bottom: 1.5rem; } + .boards #header-spacer, .posts #header-spacer { margin-bottom: 0.5rem; } + .threads #header-spacer { margin-bottom: 1.5rem; } } diff --git a/src/components/layout/Pagination.vue b/src/components/layout/Pagination.vue index f7b4e5f1..c219497d 100644 --- a/src/components/layout/Pagination.vue +++ b/src/components/layout/Pagination.vue @@ -1,11 +1,21 @@ @@ -17,26 +27,134 @@ export default { props: ['page', 'limit', 'count'], setup(props) { /* View Methods */ - const smoothThumbDrag = e => { - v.currentPage = Math.round(e.target.value) // Round up since were using step = 0.01 + const changePage = page => { + // do nothing if no page is specified, or if page is out of range + if (!page || page > v.pageCount || page < 1) return - updatePageDisplay(e, v.currentPage) - const params = { ...$route.params, saveScrollPos: true } + // update current page var + v.currentPage = page + + // redirect while saving query params + const params = { ...$route.params } let query = { ...$route.query, page: v.currentPage } if (query.page === 1 || !query.page) delete query.page if (query.start) delete query.start if (props.page !== v.currentPage) { - $router.replace({ name: $route.name, params: params, query: query }) + $router.push({ name: $route.name, params: params, query: query }) } } - const updatePageDisplay = (e, value) => { - if (v.pageCount < 2) return - const range = e.target || e // account for passing in ref in nextTick - value = value || range.value // account for passing in custom page - const newVal = Number((value - range.min) * 100 / (range.max - range.min)) - const newPos = 10 - (newVal * 0.625) - v.valueBubble.style.top = `calc(${newVal}% + (${newPos}px))` + const toggleJump = () => { + v.showJump = !v.showJump + if (v.showJump) nextTick(() => v.pageInput.focus()) + } + + const buildPages = () => { + // reset pagination keys + v.paginationKeys = [] + + // close jump to page widget + if (v.showJump) v.showJump = false + + // truncate if more than 15 pages + let truncate = v.pageCount > 15 + + // variable to hold ellipsis positions + let ellipsis + + // Case 1: No Truncation up to 15 pages + // [1] 2 3 4 5 6 7 8 9 10 11 13 14 15 + if (!truncate) + ellipsis = undefined + + // Case 2: Truncate Tail + // 1 2 3 4 5 [6] 7 8 ... 14 15 16 + if (truncate && (v.mobile ? v.currentPage <= 3 : v.currentPage <= 6)) + if (v.mobile) + ellipsis = [{ index: 4, nextIndex: v.pageCount - 2 }] + else + ellipsis = [{ index: 9, nextIndex: v.pageCount - 2 }] + + // Case 3: Truncate Head + // 1 2 3 ... 9 10 [11] 12 13 14 15 16 + else if (truncate && (v.mobile ? v.currentPage >= v.pageCount - 2 : v.currentPage >= v.pageCount - 5)) + if (v.mobile) + ellipsis = [{ index: 4, nextIndex: v.pageCount - 2 }] + else + ellipsis = [{ index: 4, nextIndex: v.pageCount - 8 }] + + // Case 4: Truncate Head and Tail + // 1 2 3 ... 7 8 [9] 10 11 ... 14 15 16 + else if (truncate && (v.mobile ? v.currentPage > 3 : v.currentPage > 6) && (v.mobile ? v.currentPage < v.pageCount - 2 : v.currentPage < v.pageCount - 5)) + if (v.mobile) + ellipsis = [ + { index: 2, nextIndex: v.currentPage - 1 }, + { index: v.currentPage + 2, nextIndex: v.pageCount } + ] + else + ellipsis = [ + { index: 4, nextIndex: v.currentPage - 2 }, + { index: v.currentPage + 3, nextIndex: v.pageCount - 2 } + ] + + generatePageKeys(ellipsis) + } + + const generatePageKeys = (ellipsis) => { + // Add Previous Button + let prevBtnKey = { key: 'prev', val: '❮' } + if (v.currentPage > 1) { + prevBtnKey.class = 'arrow' + prevBtnKey.page = v.currentPage - 1 + v.paginationKeys.push(prevBtnKey) + } + else { + prevBtnKey.class = 'arrow unavailable' + prevBtnKey.page = null + v.paginationKeys.push(prevBtnKey) + } + + // Add Pagination Keys accounting for ellipsis + let ellipsisIndex = 0 + let index = 1 + while (index <= v.pageCount) { + let pageKey + // Insert ellipsis if index matches + if (ellipsis && ellipsis[ellipsisIndex] && ellipsis[ellipsisIndex].index === index) { + pageKey = { + key: index, + val: '…', + page: null, + class: 'unavailable' + } + index = ellipsis[ellipsisIndex].nextIndex + ellipsisIndex++ + } + // Otherwise generate page key + else { + pageKey = { + key: index, + val: index, + page: index, + class: index === v.currentPage ? 'current' : null + } + index++ + } + v.paginationKeys.push(pageKey) + } + + // Add Next Button + let nextBtnKey = { key: 'next', val: '❯' } + if (v.currentPage < v.pageCount) { + nextBtnKey.class = 'arrow' + nextBtnKey.page = v.currentPage + 1 + v.paginationKeys.push(nextBtnKey) + } + else { + nextBtnKey.class = 'arrow unavailable' + nextBtnKey.page = null + v.paginationKeys.push(nextBtnKey) + } } /* Internal Data */ @@ -45,149 +163,157 @@ export default { /* View Data */ const v = reactive({ - rangeInput: null, - valueBubble: null, + showJump: false, + pageInput: null, + paginationKeys: [], currentPage: props.page, - pageCount: computed(() => Math.ceil(props.count / props.limit)), - currentPageDisplay: computed(() => Math.round(v.currentPage)) + pageCount: computed(() => Math.ceil(props.count / props.limit) || 1), + mobile: window.innerWidth <= window.mobile_break_width }) - /* Next Tick - waits for dom to load so refs are populated */ - nextTick(() => updatePageDisplay(v.rangeInput, v.currentPage)) // set init pos of page disp - watch(() => props.page, () => v.currentPage = props.page ) + buildPages() - /* Watch - this handles when query data changes, (e.g. query string for search changes) */ - watch(() => props.count, () => { + /* Watch - this handles when pagination data changes */ + watch(() => props.page, () => reloadPagination()) + watch(() => props.limit, () => reloadPagination()) + watch(() => props.count, () => reloadPagination()) + + let reloadPagination = () => { v.currentPage = props.page - nextTick(() => updatePageDisplay(v.rangeInput, v.currentPage)) - }) + buildPages() + } - return { ...toRefs(v), smoothThumbDrag, updatePageDisplay } + return { ...toRefs(v), changePage, toggleJump } } } diff --git a/src/components/modals/posts/MoveThread.vue b/src/components/modals/posts/MoveThread.vue index 0397d88d..d1c0c1d6 100644 --- a/src/components/modals/posts/MoveThread.vue +++ b/src/components/modals/posts/MoveThread.vue @@ -13,7 +13,7 @@
    -
    @@ -26,6 +26,7 @@ import Modal from '@/components/layout/Modal.vue' import decode from '@/composables/filters/decode' import { reactive, toRefs } from 'vue' +import { useRouter } from 'vue-router' import { threadsApi, boardsApi } from '@/api' import { groupBy } from 'lodash' @@ -45,9 +46,14 @@ export default { threadsApi.move(props.threadId, v.newBoard.id) .then(() => { close() + + // soft reload page, after moving thread + $router.go() }) } + const $router = useRouter() + const v = reactive({ threadId: props.threadId, boardsMovelist: {}, diff --git a/src/components/modals/profile/UpdateAvatar.vue b/src/components/modals/profile/UpdateAvatar.vue index e88eea35..a23e061e 100644 --- a/src/components/modals/profile/UpdateAvatar.vue +++ b/src/components/modals/profile/UpdateAvatar.vue @@ -93,7 +93,7 @@ export default { width: 100%; height: 100%; text-align: center; &.rect { - img { height: 80px; width: 120px; object-fit: cover;} + img { height: 80px; width: 120px; object-fit: contain;} } &.circle { img { height: 120px; width: 120px; border-radius: 100%; object-fit: cover; } diff --git a/src/components/polls/PollViewer.vue b/src/components/polls/PollViewer.vue index 33859fa4..bb39c60c 100644 --- a/src/components/polls/PollViewer.vue +++ b/src/components/polls/PollViewer.vue @@ -1,12 +1,20 @@