diff --git a/README.md b/README.md index 2d8a6e3..ef2a1c2 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,8 @@ [DiscordReimaginedPreview1]: https://minidiscordthemes.github.io/Snippets/DiscordReimagined/preview.avif [DiscordReimaginedPreview2]: https://minidiscordthemes.github.io/Snippets/DiscordReimagined/previewColor.avif [EfficientSettingsPreview]: https://minidiscordthemes.github.io/Snippets/EfficientSettings/preview.avif +[ForumImprovementsPreview1]: https://minidiscordthemes.github.io/Snippets/ForumImprovements/newpost-after.avif +[ForumImprovementsPreview2]: https://minidiscordthemes.github.io/Snippets/ForumImprovements/tagfilter-after.avif [ImageLinkPreview]: https://minidiscordthemes.github.io/Snippets/ImageLink/preview.avif [MessageBarGreyEmojiPreview]: https://minidiscordthemes.github.io/Snippets/MessageBarGreyEmoji/preview.avif [MinimalAuthAppsPreview]: https://minidiscordthemes.github.io/Snippets/MinimalAuthApps/preview.avif @@ -64,6 +66,7 @@ | [Channel List Width](themes/ChannelListWidth) | ![preview][ChannelListWidthPreview1] ![preview][ChannelListWidthPreview2] | | [Clippy Status](themes/ClippyStatus) | ![preview][ClippyStatusPreview1] ![preview][ClippyStatusPreview2] | | [Efficient Settings](themes/EfficientSettings) | ![preview][EfficientSettingsPreview] | +| [Forum Improvements](themes/ForumImprovements) | ![preview][ForumImprovementsPreview1] ![preview][ForumImprovementsPreview2] | | [Image Link](themes/ImageLink) | ![preview][ImageLinkPreview] | | [Message Bar Grey Emoji](themes/MessageBarGreyEmoji) | ![preview][MessageBarGreyEmojiPreview] | | [Minimal Auth Apps](themes/MinimalAuthApps) | ![preview][MinimalAuthAppsPreview] | @@ -140,7 +143,7 @@ See each snippet's README for the import, Replugged install link, Vencord online See [CONTRIBUTING.md](.github/CONTRIBUTING.md). ## License -[MIT license](LICENSE) +This collection of snippets is licensed under the [MIT license](LICENSE). ### Credits See each snippet's README for credits. diff --git a/themes/ForumImprovements/README.md b/themes/ForumImprovements/README.md new file mode 100644 index 0000000..31e40e4 --- /dev/null +++ b/themes/ForumImprovements/README.md @@ -0,0 +1,34 @@ +[newpost-1]: https://minidiscordthemes.github.io/Snippets/ForumImprovements/newpost-before.avif +[newpost-2]: https://minidiscordthemes.github.io/Snippets/ForumImprovements/newpost-after.avif +[tagfilter-1]: https://minidiscordthemes.github.io/Snippets/ForumImprovements/tagfilter-before.avif +[tagfilter-2]: https://minidiscordthemes.github.io/Snippets/ForumImprovements/tagfilter-after.avif + +# Forum Improvements +![Status: working](https://img.shields.io/badge/status-working-green?style=flat-square) + +Various forum improvements. +- Hover to show all tags in post filter bar and new post tagging. +- Switch smoothly between markdown and preview in the post editor. +- View and edit post attachments easily. +- View the whole image without clicking in gallery view. +- No more jittering hovered posts. +- ...and various bug fixes. + +| Post editor | Tag filter | +| :------------------------------: | :-------------------------------: | +| ![Post editor][newpost-1] Before | ![Tag filter][tagfilter-1] Before | +| ![Post editor][newpost-2] After | ![Tag filter][tagfilter-2] After | + +## Usage +### `@import` +```css +@import url("https://minidiscordthemes.github.io/Snippets/ForumImprovements/main.css"); +``` +### Replugged automatic theme +[Install now](https://replugged.dev/install?identifier=net.saltssaumure.ForumImprovements) +### Replugged manual theme +[Download now](https://github.com/MiniDiscordThemes/Snippets/releases/latest/download/net.saltssaumure.ForumImprovements.asar) +### Vencord online theme +``` +https://minidiscordthemes.github.io/Snippets/ForumImprovements/main.css +``` \ No newline at end of file diff --git a/themes/ForumImprovements/manifest.json b/themes/ForumImprovements/manifest.json new file mode 100644 index 0000000..1770692 --- /dev/null +++ b/themes/ForumImprovements/manifest.json @@ -0,0 +1,25 @@ +{ + "id": "net.saltssaumure.ForumImprovements", + "name": "Forum Improvements", + "description": "A collection of forum improvements, details listed on GitHub.", + "author": [ + { + "name": "Saltssaumure", + "discordID": "134142022092062720", + "github": "Saltssaumure" + } + ], + "version": "1.1.1", + "updater": { + "type": "store", + "id": "net.saltssaumure.ForumImprovements" + }, + "license": "MIT", + "type": "replugged-theme", + "main": "scss/main.scss", + "source": "https://github.com/MiniDiscordThemes/Snippets/blob/main/themes/ForumImprovements", + "image": [ + "https://minidiscordthemes.github.io/Snippets/ForumImprovements/newpost-after.avif", + "https://minidiscordthemes.github.io/Snippets/ForumImprovements/tagfilter-after.avif" + ] +} diff --git a/themes/ForumImprovements/preview/newpost-after.png b/themes/ForumImprovements/preview/newpost-after.png new file mode 100644 index 0000000..9b04def Binary files /dev/null and b/themes/ForumImprovements/preview/newpost-after.png differ diff --git a/themes/ForumImprovements/preview/newpost-before.png b/themes/ForumImprovements/preview/newpost-before.png new file mode 100644 index 0000000..00c1cc2 Binary files /dev/null and b/themes/ForumImprovements/preview/newpost-before.png differ diff --git a/themes/ForumImprovements/preview/tagfilter-after.png b/themes/ForumImprovements/preview/tagfilter-after.png new file mode 100644 index 0000000..9ae85a4 Binary files /dev/null and b/themes/ForumImprovements/preview/tagfilter-after.png differ diff --git a/themes/ForumImprovements/preview/tagfilter-before.png b/themes/ForumImprovements/preview/tagfilter-before.png new file mode 100644 index 0000000..9247610 Binary files /dev/null and b/themes/ForumImprovements/preview/tagfilter-before.png differ diff --git a/themes/ForumImprovements/scss/_actionsbar.scss b/themes/ForumImprovements/scss/_actionsbar.scss new file mode 100644 index 0000000..3426dc3 --- /dev/null +++ b/themes/ForumImprovements/scss/_actionsbar.scss @@ -0,0 +1,15 @@ +// Make post actions bar actually sticky +.scrollerInner_e2e187 { + overflow: unset; + + // Hide divider + .divider_af45f8 { + display: none; + } + + // Actions bar always acts as header + .container_b385c8 { + box-shadow: var(--elevation-low); + border-top-color: transparent; + } +} diff --git a/themes/ForumImprovements/scss/_attachment.scss b/themes/ForumImprovements/scss/_attachment.scss new file mode 100644 index 0000000..51a9bea --- /dev/null +++ b/themes/ForumImprovements/scss/_attachment.scss @@ -0,0 +1,47 @@ +// New post attachments +.popout_a15d29 { + height: calc(18px + var(--custom-forum-composer-attachments-attachment-size) + 24px); + + @at-root .uploadContainer_df1eaf { + // Image attachment + .imageSmall_f847a3 { + border-radius: 12px 12px 0 0; + + .spoilerContainer_a3d0f7 { + border-radius: 12px 12px 0 0; + } + } + + // Attachment options + @at-root .actionBarContainer_df1eaf { + top: unset; + bottom: 0; + + @at-root .smallActionBar_df1eaf { + transform: none; + opacity: 1; + + @at-root .wrapper_ef319f { + border-radius: 0 0 12px 12px; + } + } + } + } +} + +// Small attachments +.imageSmall_f847a3 { + // Non-image attachments + &.icon_f847a3 { + background-color: var(--background-primary); + background-size: 60%; + } + + .spoilerContainer_a3d0f7 { + border-radius: 12px; + + .spoilerWarning_a3d0f7 { + zoom: 0.7; + } + } +} diff --git a/themes/ForumImprovements/scss/_card.scss b/themes/ForumImprovements/scss/_card.scss new file mode 100644 index 0000000..ff5b6bf --- /dev/null +++ b/themes/ForumImprovements/scss/_card.scss @@ -0,0 +1,48 @@ +// Forum posts +.mainCard_a6d69a { + &:hover { + transform: none; + } + + // Image attachment in gallery view + // Don't stretch the image + .imageCover_a57509 { + object-fit: contain; + background: var(--background-secondary); + } + + // Gif indicator, post tags + @at-root :is(.mediaIconsRow_a57509, .tagsRow_a57509) { + transition: opacity 0.2s; + + // Hide content overlays on hover + .postBody_a57509:hover & { + opacity: 0; + } + + // Replace gif icon with modern gif icon + .mediaIcon_a57509 { + background-image: url("https://discord.com/assets/c5a74fc51ff67682b11a.svg"); + height: 22px; + path { + fill: transparent; + } + } + } + + // Thumbnail attachment in list view + @at-root .thumbnailContainer_d331f1 { + // Center the thumbnail + .loadingOverlay_d4597d { + display: flex; + align-items: center; + justify-content: center; + } + + // Stop alt text pushing thumbnail up + .altText_cf58b5 { + position: absolute; + z-index: -1; + } + } +} diff --git a/themes/ForumImprovements/scss/_preview.scss b/themes/ForumImprovements/scss/_preview.scss new file mode 100644 index 0000000..0d1353e --- /dev/null +++ b/themes/ForumImprovements/scss/_preview.scss @@ -0,0 +1,23 @@ +// New post preview +// Match position as closely as possible to the post editor +.previewForm_c1668f { + padding: 0; + margin: 1px 12px 0 0; + border: 0; + outline: 2px solid var(--background-modifier-selected); + border-radius: var(--radius-xs); + + // Prevent long no-whitespace text from overflowing + width: calc(100% - 24px - 78px - (2 * 12px)); + .contentContainer_c1668f { + width: 100%; + } + + // Do not add extra space for preview indicator + .previewModeIndicator_c1668f { + position: absolute; + pointer-events: none; + bottom: 4px; + right: 4px; + } +} diff --git a/themes/ForumImprovements/scss/main.scss b/themes/ForumImprovements/scss/main.scss new file mode 100644 index 0000000..63b4586 --- /dev/null +++ b/themes/ForumImprovements/scss/main.scss @@ -0,0 +1,6 @@ +@forward "./tagbar/"; + +@forward "./actionsbar"; +@forward "./attachment"; +@forward "./card"; +@forward "./preview"; diff --git a/themes/ForumImprovements/scss/tagbar/_filter.scss b/themes/ForumImprovements/scss/tagbar/_filter.scss new file mode 100644 index 0000000..96cadbc --- /dev/null +++ b/themes/ForumImprovements/scss/tagbar/_filter.scss @@ -0,0 +1,39 @@ +// Tag filter bar +.tagsContainer_a6d69a { + gap: 16px; + align-items: flex-start; + + // Post sort order + .sortDropdown_a6d69a { + } + + // Divider + .divider_a6d69a { + display: none; + } + + // Tag list + .tagList_a6d69a { + height: auto; + max-height: 32px; + transition: max-height 0.2s ease; + &:is(:hover, :has(.selected_c993da)) { + max-height: 256px; + } + + .tagListInner_a6d69a { + justify-content: center; + } + } + + // See all tags + .tagsButton_a6d69a { + position: static; + margin-left: 0; + } + + // See more tags (currently does nothing) + @at-root .tagsButtonPlaceholder_a6d69a { + display: none; + } +} diff --git a/themes/ForumImprovements/scss/tagbar/_newpost.scss b/themes/ForumImprovements/scss/tagbar/_newpost.scss new file mode 100644 index 0000000..54c29cf --- /dev/null +++ b/themes/ForumImprovements/scss/tagbar/_newpost.scss @@ -0,0 +1,30 @@ +// New post tags bar +.tagsContainer_c1668f { + align-items: flex-start; + + // Tag icon + .tagsIcon_c1668f { + height: 24px; + } + + // Tags list + .tagList_c1668f { + height: auto; + max-height: 24px; + transition: max-height 0.2s ease; + &:is(:hover, :has(.selected_c993da)) { + max-height: 192px; + } + } + + // See more tags + .tagsButton_c1668f { + position: static; + margin-left: 0; + } + + // ??? (currently does nothing) + @at-root .tagsButtonPlaceholder_c1668f { + display: none; + } +} diff --git a/themes/ForumImprovements/scss/tagbar/index.scss b/themes/ForumImprovements/scss/tagbar/index.scss new file mode 100644 index 0000000..4afc62c --- /dev/null +++ b/themes/ForumImprovements/scss/tagbar/index.scss @@ -0,0 +1,2 @@ +@forward "./filter"; +@forward "./newpost";