Go2025/frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed pagination problem: The numbering of aliases were incorrect

Browse Source
This commit is contained in:
Penguin-71630
2025-12-13 00:53:41 +08:00
parent a05adb982f
commit 31598a9c96
29 changed files with 229 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
webpage/spec.md
View File

@@ -1,12 +1,41 @@
# Webpage for Memebot
## Modify the uploadmodal's and imagemodal's alias adding/removing mechanism
Modify the uploadmodal's and imagemodal's alias adding/removing mechanism to the following:
[ (press Enter or click ADD to add alias) ] [ADD]
After typing alias and click ADD
[ test_alias ] [REMOVE]
[ (press Enter or click ADD to add alias) ] [ADD]
The [ADD] and [REMOVE] are buttons, and should both have the same width. Also, the protection mechanism (zero alias = not allow to save modifications / upload images) should be retained.
## Modify the webpage
Modify the webpage: We don't want one page shows only an alias.
We want a paging feature on aliases, so that each page shows a fixed number of aliases and their corresponding images (the fixed number can be stored in a variable in api.ts). And the "next page" and "previous page" buttons should be located at both the top (below search bar) and the bottom of the page.
The sidebar is also modified to show the current page number, the aliases on the current page, and the total number of pages.
## Initial Setup
This webpage is used to manage the images and aliases used by our Discord memebot.
Relationship between images and aliases: many to many.
## Layout
### Layout
React + TypeScript (with Tailwind CSS)
@@ -33,7 +62,7 @@ The top is the Navbar:
- The right side of the Navbar contains function buttons, currently only Upload Image and Login.
### Find
#### Find
Find (Viewing and Searching)
- The left sidebar serves as a table of content for all aliases, similar to the navigation feature in HackMD or mdBook.
@@ -66,7 +95,7 @@ Find (Viewing and Searching)
### Upload Image
#### Upload Image
When the user clicks this button, a floating window (modal) appears:
@@ -89,12 +118,9 @@ When the user clicks this button, a floating window (modal) appears:
======================================
```
## Login (Authentication)
#### Login (Authentication)
Authentication is used to verify the current Discord user operating the frontend. Users who are not logged in can only perform viewing-related operations; they cannot edit, upload, or delete.
<!-- Modify the webpage: We don't want one page shows only an alias.
We want a paging feature on aliases, so that each page shows a fixed number of aliases and their corresponding images (the fixed number can be stored in a variable in api.ts). And the "next page" and "previous page" buttons should be located at both the top (below search bar) and the bottom of the page.
The sidebar is also modified to show the current page number, the aliases on the current page, and the total number of pages. -->