Commit Graph

155 Commits

Author SHA1 Message Date
shiran 3efe032ebf style(topic-cards): 移除卡片背景遮罩层并重置列表区域背景色
Discourse Theme / ci (push) Failing after 1s
- 移除了卡片元素的负z-index背景遮罩层
- 为列表区域添加了背景色重置样式
- 解决了背景颜色覆盖问题
- 优化了卡片显示效果
2026-02-20 13:19:24 +08:00
shiran 7cdbcb539e feat(theme): 添加首页背景图片功能
Discourse Theme / ci (push) Failing after 0s
- 在设置中新增 home_bg_image 配置选项
- 实现主题 SCSS 中的背景图片样式逻辑
- 添加对首页背景图片的条件渲染支持
- 集成上传功能以支持自定义背景图片
- 设置默认值为空字符串以避免初始加载问题
- 添加中文描述文档以便用户理解功能用途
2026-02-20 13:16:48 +08:00
shiran ddf40963aa style(topic-cards): 优化卡片样式和过渡效果
Discourse Theme / ci (push) Failing after 1s
- 将过渡属性从特定属性改为 all 以简化动画效果
- 移除复杂的径向渐变背景和遮罩组合效果
- 添加列表容器的基础样式定义
- 为列表容器添加半透明白色背景层
2026-02-20 13:11:43 +08:00
shiran 9e9ec24d56 style(topic-cards): 更新话题卡片样式以增强视觉效果
Discourse Theme / ci (push) Failing after 1s
- 移除话题列表项的底部边框
- 替换原有的阴影效果为更现代的多层阴影设计
- 移除卡片边框并添加渐变背景遮罩层
- 添加悬停时的变换动画和阴影过渡效果
- 优化选中状态的阴影和高亮显示
- 调整悬停和选中状态的颜色与透明度参数
2026-02-20 09:36:53 +08:00
chapoi 35d4103757 UX: hide category image on categories page (#192) 2025-06-27 18:25:48 +02:00
Martin Brennan abf22a6668 UX: Only hide welcome banner on mobile devices (#189) 2025-06-23 12:02:35 +02:00
chapoi ffa86a0c46 UX: hide welcome banner (#188)
Until we move forward with the search-banner on mobile, the
welcome-message feels out of place. Hiding it for now.
2025-06-20 11:39:20 +02:00
Martin Brennan bb512645d1 UX: Unhide topics footer-message (#180)
This needs to be unhidden so the changes in the following core PR are
visible in horizon:

https://github.com/discourse/discourse/pull/32669
2025-06-19 12:56:37 +02:00
chapoi dac23d544c UX: Categories restyling (#184)
Some CSS sprinkling for our most used category list formats:
### Desktop: Categories and Latest Topics 
| Default | Horizon |
|--------|--------|
| ![CleanShot 2025-06-17 at 17 28
45@2x](https://github.com/user-attachments/assets/4babf4d4-9c25-4780-bb72-c37b13d6f843)|
![CleanShot 2025-06-17 at 17 28
08@2x](https://github.com/user-attachments/assets/741a24fe-fca4-4eb8-97c9-96f5eb30b575)
|

### Desktop: Boxes with Subcategories
| Default | Horizon |
|--------|--------|
| ![CleanShot 2025-06-17 at 15 09
07@2x](https://github.com/user-attachments/assets/21e71f3b-b795-44d8-b56c-7edbe8fc465c)
| ![CleanShot 2025-06-17 at 17 29
46@2x](https://github.com/user-attachments/assets/41707610-cd09-4ebd-8fee-0f637e154fbf)
|

### Mobile: Categories with Featured Topics
| Default | Horizon |
|--------|--------|
| ![CleanShot 2025-06-17 at 17 30
53@2x](https://github.com/user-attachments/assets/665b6f19-c3d3-4438-8960-2170d0c69af3)
| ![CleanShot 2025-06-17 at 17 30
27@2x](https://github.com/user-attachments/assets/ca0fd595-1b0d-4ee9-b805-c538e4cdbc90)
|
2025-06-18 15:23:24 +02:00
chapoi 1e5f71473a UX: remove default select state for keyboard nav on topic cards (#186)
The left-border select state when using keyboard navigation is already
overruled in Horizon, but when bulk-select is enabled, this still showed
up:

![CleanShot 2025-06-18 at 12 28
16@2x](https://github.com/user-attachments/assets/e1b9bfbc-aceb-429a-8890-fb56f7e12048)

Fixed:
![CleanShot 2025-06-18 at 12 29
09@2x](https://github.com/user-attachments/assets/40572de6-a316-4f7b-8786-9040f513b6c8)
2025-06-18 15:22:31 +02:00
chapoi 6d8415579e UX: fix topic cards layout for messages with has-replies class (#183)
The `grid-template-areas` were not correct on the messages page

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Co-authored-by: Martin Brennan <martin@discourse.org>
2025-06-18 13:34:26 +10:00
chapoi 2bcd04d4f4 UX: topic cards v3 (#182)
* Bringing back the OP
* Removed reason why topic appears (again) in topic list (="activity")
* Removed likes
* New layout with indention + moved all elements left (on desktop)

| Mobile | Desktop |
|--------|--------|
| ![CleanShot 2025-06-13 at 11 00
19@2x](https://github.com/user-attachments/assets/f43a773d-c8ba-4573-b16a-940e9fc3d901)
| ![CleanShot 2025-06-13 at 11 05
10@2x](https://github.com/user-attachments/assets/6bb152df-9ed3-4866-8c0a-95ddf94cd773)
|
| ![CleanShot 2025-06-13 at 11 02
25@2x](https://github.com/user-attachments/assets/3d9fb41c-a894-4b07-8737-6bd03e513f2f)
| ![CleanShot 2025-06-13 at 11 06
59@2x](https://github.com/user-attachments/assets/c54b9efe-fd1d-40aa-b8ad-2e4eab54eb90)
|
| ![CleanShot 2025-06-13 at 11 03
28@2x](https://github.com/user-attachments/assets/cdad49e8-ae6d-4f2c-9ef5-f6fa42705764)
| ![CleanShot 2025-06-13 at 11 07
10@2x](https://github.com/user-attachments/assets/91fee5ad-71b7-400c-a2c7-80339438b8de)
|
| ![CleanShot 2025-06-13 at 11 04
09@2x](https://github.com/user-attachments/assets/85296a16-f052-4787-a260-81fa54cd6191)
| ![CleanShot 2025-06-13 at 11 07
24@2x](https://github.com/user-attachments/assets/ffcaecb0-767a-4a72-8244-a3baa56d3cc2)
|
| ![CleanShot 2025-06-13 at 11 04
26@2x](https://github.com/user-attachments/assets/48a05ef5-366f-4543-bf0e-441ecae39877)
| ![CleanShot 2025-06-13 at 11 04
48@2x](https://github.com/user-attachments/assets/50499b4d-60bf-4b41-8a42-6fba8e0a41d8)
|

---------

Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
2025-06-13 11:08:57 +02:00
chapoi 14aa72ad99 UX: Mini fixes and tweaks (#179)
* Changing the category & tag dropdown back into their original form.
The breadcrumb idea isn't working well.

| BC | AC |
|--------|--------|
| ![CleanShot 2025-06-09 at 18 59
37@2x](https://github.com/user-attachments/assets/cbeb3aaf-ad0e-4085-8548-58ea0a521c95)
| ![CleanShot 2025-06-09 at 18 57
33@2x](https://github.com/user-attachments/assets/15db752b-4983-4b7f-b6f8-9a8ded9e6f9f)
|

* Alignment fix in chat navbar drawer

| BC | AC |
|--------|--------|
| ![CleanShot 2025-06-09 at 18 59
18@2x](https://github.com/user-attachments/assets/38c7dcee-dc77-4a44-ae8d-5ecb7910536b)
| ![CleanShot 2025-06-09 at 18 58
36@2x](https://github.com/user-attachments/assets/be699f88-4e5e-4d8c-ab4d-f6d1eca93037)
|
2025-06-09 19:41:18 +02:00
Jarek Radosz bf9fe07f67 DEV: Update linting config and run gjs-codemod (#177) 2025-06-06 12:15:57 +01:00
Jordan Vidrine 31249c4f27 UX: Remove unused line & fix ipad safari browser (#176) 2025-06-04 14:55:25 -05:00
Kris 581332c001 UX: fix mobile timeline in PWA (#174) 2025-06-04 14:55:02 -04:00
chapoi f5c4403423 UX: increase spacing of topic cards (#175)
Slightly bigger spacing to match the bigger avatars (bigger elements =>
more spacing to balance it out)
2025-06-04 16:04:11 +02:00
chapoi b72a3c1e95 UX: Topic cards v2 (#173)
This is the second iteration on the topic card design, in which we bring
back the OP and change the layout.

**Changes**:
* Show OP avatar
* Remove activity avatar and replace by reply icon
* Remove activity icon background
* Move category tag to top left
* Replace long activity copy ("…replied at…") with dot separator
* Change date formatting to `tiny`
* Adjust bulk select styling to new layout + align checkbox to top on
mobile VS keep centred on desktop

* Why: On desktop, the avatar is taking 2 lines (usually) and aligning
the checkbox vertically looks nice. Exception for excerpts, but since
that's only available for pinned topics atm that's a low occurrence. On
mobile, the topic card is 3 lines, with a smaller avatar, which makes
the checkbox "float" around a bit when centred. Hence aligning it to the
top, which for solid avatars aligns nicely too.

* CSS refactor: grid, breakpoints

Messages/bookmarks have not been changed.

| Description | Visual |
|--------|--------|
| Large topic list | ![CleanShot 2025-06-02 at 17 37
35@2x](https://github.com/user-attachments/assets/f232058e-dbf6-4689-abe3-65970464a3e3)|
| Large bulk edit | ![CleanShot 2025-06-02 at 17 37
17@2x](https://github.com/user-attachments/assets/03d86b5f-d62b-4449-9c0b-452ceb8be60c)
|
| Medium topic list | ![CleanShot 2025-06-02 at 17 39
01@2x](https://github.com/user-attachments/assets/80739641-cf8f-4095-938f-9781cac57a7d)
|
| Medium bulk edit | ![CleanShot 2025-06-02 at 17 39
24@2x](https://github.com/user-attachments/assets/6e9045af-734a-4f3f-830a-e03a2f06fdd8)
|
| Small topic list | ![CleanShot 2025-06-02 at 17 39
44@2x](https://github.com/user-attachments/assets/eeca80bc-6863-4026-8f19-b1b5cf6848f3)
|
| Small bulk edit | ![CleanShot 2025-06-02 at 17 40
00@2x](https://github.com/user-attachments/assets/cde7be08-cde2-4ff2-b81b-328d3d7be848)
|
| Messages page (remains unchanged) | ![CleanShot 2025-06-02 at 17 20
37@2x](https://github.com/user-attachments/assets/6512bfe9-a699-4c67-b709-166540ee6fde)
|
| Bookmark page (remains unchanged) | ![CleanShot 2025-06-02 at 17 21
01@2x](https://github.com/user-attachments/assets/f8f43638-e911-49cb-a0d5-ebcb51ccfba4)
|
2025-06-04 14:50:41 +02:00
Jordan Vidrine 0ed3912d63 UX: Fix topic card messages (#172) 2025-05-30 08:39:39 -05:00
Jordan Vidrine fc6d1b5b9d UX: RTL positioning of boxed view (#170) 2025-05-28 15:42:57 -05:00
Kris 04d8684b59 UX: fix new topic badge in topic list (#167)
The theme implements this in a centralized way, so we need to remove the
core implementation.

before:


![image](https://github.com/user-attachments/assets/a9b37f79-d464-43e9-9298-3607180162ec)


after:


![image](https://github.com/user-attachments/assets/bd3c79b5-6371-4439-86a2-5f91e44f04ca)
2025-05-21 10:54:24 -04:00
Kris 79be7731b7 UX: adjust event date alignment with topic titles (#165)
this regressed slightly with core changes 

before:

![image](https://github.com/user-attachments/assets/550df0f8-fb8d-4af3-b4ec-5a61834d8a45)


after:

![image](https://github.com/user-attachments/assets/5c06f32d-ee31-444e-90f7-c31f9c44f642)
2025-05-21 09:59:21 -04:00
David Taylor fe1cb262dc UX: Allow clicking anywhere on the topic-list card (#166) 2025-05-21 13:37:21 +01:00
chapoi 25cc070a5b UX: fix low z-index for popup after changes to composer-drawer interaction (#164)
Fixing:
![CleanShot 2025-05-20 at 11 58
11@2x](https://github.com/user-attachments/assets/68611ead-71bf-42bf-bd87-183f589f4b82)

Consequence of #161
2025-05-20 14:22:21 +02:00
Kris 7982d60967 UX: add compatibility with the top contributors sidebar (#162)
Improves compatibility with
https://meta.discourse.org/t/top-contributors-sidebar/215110

Before:

![image](https://github.com/user-attachments/assets/08994458-0322-4725-a66b-0c91712e3a2a)


After: 

![image](https://github.com/user-attachments/assets/de231b57-d6da-42c0-852e-2bf915ee929e)

---------

Co-authored-by: Jarek Radosz <jarek@cvx.dev>
2025-05-19 11:26:11 -04:00
chapoi 90eae2d3f1 Chat drawer and peakmode (#161)
To avoid very strange positioning and sizing, I'm opting to keep the
chat in front of the composer, when in peak-mode.
Still not ideal, but better than before.

![CleanShot 2025-05-14 at 13 11
16@2x](https://github.com/user-attachments/assets/9b28f097-a63b-4bbb-a016-68cbcd04ee3c)
⬇️ 
![CleanShot 2025-05-14 at 13 10
57@2x](https://github.com/user-attachments/assets/10b9c17e-1207-4775-8933-0f6aca8c3ab6)

Due to the way peakmode positions itself, it's impossible to place the
chat flush next to it. And due to the way resizing works (frop the top
left, anchored right), it also can't be placed on any left-handed
alignment.
2025-05-16 12:24:05 +02:00
Kris 86d0c03b03 UX: handle opening composer from slide-in hamburger menu (#159) 2025-05-12 12:04:38 -04:00
Kris d749920db7 UX: improve mobile event badge positioning (#156) 2025-05-10 13:46:15 -04:00
Keegan George eda0db294d UX: Improve styles for add translation composer view (#158)
## 🔍 Overview
This update ensures styles in composer look appropriate for the new
composer add translation view (recently added here:
https://github.com/discourse/discourse/pull/32564)


## 📷 Screenshots

### ← Before
<img width="1473" alt="Screenshot 2025-05-08 at 11 58 54"
src="https://github.com/user-attachments/assets/76fec3f6-1cbf-4b57-a765-c2cf003ba177"
/>

### → After
<img width="1476" alt="Screenshot 2025-05-08 at 11 58 42"
src="https://github.com/user-attachments/assets/f17e8dc5-3230-4a1f-9072-28a3c7415958"
/>
2025-05-08 12:17:42 -07:00
Jarek Radosz c2b71c04a8 DEV: Update linting (#153) 2025-05-06 16:53:12 +01:00
Kris ec532d356e UX: exclude wizard from #main-outlet background styling (#155)
Only a tiny sliver of the background shows currently, which seems
accidental

Before:

![image](https://github.com/user-attachments/assets/815b9dec-7708-44a1-b360-7394e42cc4f6)


After:

![image](https://github.com/user-attachments/assets/b2eaf893-3e41-4321-b836-873b691589c5)
2025-05-05 12:35:14 -04:00
Kris 755a666dae UX: hide bootstrap mode from header (#154)
There are multiple header elements that get in the way, and we can't
really manage the position of this button well without a better
full-width solution... so I think it makes sense to hide it for now


Before:

![image](https://github.com/user-attachments/assets/07009232-d188-4a5f-9381-0e1d4479512b)

After: 

![image](https://github.com/user-attachments/assets/91a0f01a-3d12-4f89-9d7f-0050abdd47e9)
2025-05-05 12:35:00 -04:00
Keegan George 4b159e9296 UX: New topic button shouldn't appear in AI conversations page (#152)
## 🔍 Overview
This update ensures that the sidebar new topic button isn't shown on the
AI conversations sidebar. It also styles the new conversation button to
make use of Horizon's accent color

## 📸 Screenshots

### ← Before
<img width="1228" alt="Screenshot 2025-05-02 at 14 16 41"
src="https://github.com/user-attachments/assets/b187d31e-881a-4c34-b663-f4b55b8bc565"
/>

### → After
<img width="1232" alt="Screenshot 2025-05-02 at 14 15 34"
src="https://github.com/user-attachments/assets/987cfba3-ad7c-49a9-80d8-14c3e52dd5c0"
/>
2025-05-05 09:27:28 -07:00
Kris e53184ac28 UX: fix experimental new new positioning (#151)
These styles were added for bulk select positioning, but turns out they
weren't needed anyway

before:

![image](https://github.com/user-attachments/assets/bf752846-cb51-4872-9cb7-2d98ab7f5c8f)

after:

![image](https://github.com/user-attachments/assets/4a25c776-b88c-4be6-b186-31973c6b5e05)
2025-04-25 11:35:00 -04:00
Kris a6293aa24b UX: text logo line-height fix (#150)
Minor adjustment to avoid clipping descenders 


before:

![image](https://github.com/user-attachments/assets/bc68416b-ab04-4a62-8bff-ec8164284380)


after: 

![image](https://github.com/user-attachments/assets/30296e9c-4e8d-446f-8ee4-f0583e6c3e68)
2025-04-24 14:22:07 -04:00
Kris 45cc99a2e0 UX: better full-width support for wide logos (#149)
Helps avoid situations like this:


![image](https://github.com/user-attachments/assets/78adec74-8fb7-457f-b592-da1b56a98b1a)


Some examples...


text-logos

![image](https://github.com/user-attachments/assets/c87333cb-727a-4167-af76-a5db0b3cd20c)

![image](https://github.com/user-attachments/assets/8cc62ab9-4f3e-4697-a763-851dc21aa2ec)

![image](https://github.com/user-attachments/assets/e36ffa7e-a3a9-463a-b448-833da2b3bc69)

image-logos

![image](https://github.com/user-attachments/assets/962f33c1-d83c-4d74-a707-ec1fb867d557)

![image](https://github.com/user-attachments/assets/0014505a-bfab-4616-962a-c1a5fa30938e)

![image](https://github.com/user-attachments/assets/32d9730a-1a43-49ac-b160-b6dd610f4482)
2025-04-24 14:04:06 -04:00
Jordan Vidrine 806b800f1f UX: adjust styles to meet core changes (#148) 2025-04-23 14:44:00 -05:00
Jordan Vidrine 70af5fc68a UX: Adjust spacing for more room (#146) 2025-04-21 16:36:03 -05:00
Kris b1a9389a04 UX: minor breakpoint gap fix (#147)
Reported here:
https://meta.discourse.org/t/help-us-test-horizon-our-newest-theme/360484/55?u=awesomerobot

We have a 1px gap here where we get kind of a half-container 

Before:

![image](https://github.com/user-attachments/assets/0d355156-c579-418d-a1d1-9d624c61bc12)



After:

![image](https://github.com/user-attachments/assets/ce96bf6b-c8a8-4fd2-b5b0-56d37382284d)
2025-04-18 14:08:34 -04:00
Martin Brennan f9603a24ea DEV: Rename search -> welcome banner (#144)
Horizon is targeting the welcome banner not the search component
anymore, update CSS class names and rename the file to make this clearer
2025-04-18 12:23:44 +10:00
Jordan Vidrine bf2fb463ae UX: Modernize spacing a bit (#145) 2025-04-17 21:16:43 -05:00
Kris d67ec3ac5f FIX: remove SCSS mixed declarations (#143)
This fixes the SCSS mixed declaration errors (most noticeable while
running rspec)
2025-04-17 17:27:13 -04:00
Kris cf9fd864dd DEV: implement composer peek mode directly in theme (#141)
This implements the [composer
peek](https://github.com/discourse/composer-peek) component directly
into the theme, and makes some minor adjustments to match theme styles:


![image](https://github.com/user-attachments/assets/e4272a11-6570-4392-945f-c509cf4debd6)
2025-04-16 17:10:23 -04:00
Kris 36899bbbaa UX: make theme compatible with AI gists (#140)
Before (only pinned topic excerpts, no gist toggle):

![image](https://github.com/user-attachments/assets/7a1b78b8-e115-4c96-9ebf-52d2c1237eea)


After (gists can be toggled on): 

![image](https://github.com/user-attachments/assets/9e6786be-3817-4420-8142-1c5f7cad54ea)


This puts the gists in the same place as the theme places excerpts and
uses the same styles. It also follows the theme pattern of hiding
excerpts/gists on mobile.
2025-04-16 15:34:52 -04:00
Jordan Vidrine 651cf2794c UX: remove square avatar from topic posts (#139) 2025-04-16 12:04:41 -05:00
Jordan Vidrine e9e166ca3a FIX: Search header index (#138) 2025-04-15 20:46:27 -05:00
Martin Brennan b23c4764a2 DEV: Put full width styles into their own file (#132)
Followup f1d5b69293

We want to make it super clear that this is to be removed when we merge
full width into core, keeping it in desktop.scss together with other
styles will make that harder.
2025-04-15 13:46:20 +10:00
Jordan Vidrine 7ab29303dd UX: Mobile composer fixes (#136) 2025-04-14 16:33:30 -05:00
Kris 776071fdb0 UX: adjust disabled create button tooltip styles (#135) 2025-04-14 16:22:17 -05:00
Jordan Vidrine 2d193b4d7a UX: Quick fixes (#134) 2025-04-14 15:52:12 -05:00