jargonsdev / jargonsdev/jargons.dev

Enhancement: Word Editor - Second Iteration Features

Aperta
#9 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

:arrow_upper_right: medium priority :sparkles: enhancement hacktoberfest
Lingua principale
MDX
Stelle
56
Fork
45
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

The current word editor is basic and lacks important features for user convenience and responsiveness. Enhancements are needed to improve the user experience and usability of the editor and we wish to do this incrementally.

This PR https://github.com/jargonsdev/jargons.dev/pull/6 implemented the `First Iteration`

#### Proposed Features for Second Iteration:
1. **Window Resizer:** Add functionality to resize the side-by-side Editor and Preview panes, allowing users to adjust the size according to their preference.
2. **Mobile Responsiveness:** Ensure that the markdown editor is responsive on mobile devices, providing a seamless experience for users on different screen sizes.
3. **UI Toggle:** Implement a toggle for the Editor and Preview panes, allowing users to display one or both panes on the screen at the same time.

#### Implementation Details:
- **Window Resizer:** Use JavaScript (preferably packed within a custom hook to be consumed inside of the `word-editor` island) to implement a draggable handle that adjusts the width of the Editor and Preview panes dynamically.
- **Mobile Responsiveness:** Use CSS media queries to adjust the layout and styling of the editor for different screen sizes, ensuring readability and usability on mobile devices.
- **UI Toggle:** Implement a button or control that allows users to show/hide the Editor and Preview panes independently or together.

#### Acceptance Criteria:
- Users can resize the Editor and Preview panes by dragging a handle between them.
- The word editor is responsive and displays correctly on mobile devices.
- Users can toggle the visibility of the Editor and Preview panes individually or together.

#### Related Tasks:
- Implement the window resizer functionality using JavaScript.
- Apply CSS media queries to make the editor mobile responsive.
- Implement the UI toggle functionality for showing/hiding panes.

#### Additional Notes:
- This second iteration will significantly improve the usability and flexibility of the word editor, enhancing the overall user experience.

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia dall’isola word-editor esistente e rivedi l’implementazione di First Iteration in PR #6. Suddividi il lavoro tra pannelli ridimensionabili, layout mobile e controlli di visibilità dell’editor e dell’anteprima, quindi verifica ogni criterio di accettazione su dimensioni dello schermo desktop e mobile.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react, tailwindcss
Ambito
design, frontend, web-dev
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.