ULOG #23: Adding the Ulog-Stories Quick Post Editor

This is a contribution to this task request by @surpassinggoogle. This adds the quick post editor for Ulog Stories.

1. Repository

https://github.com/surpassinggoogle/UlogsV2

2. Task Request/Issue

@surpassinggoogle/task-request-we-modified-our-task-request-to-add-core-features-and-communities-to-ulogs-org-simplifying-the-1-5-task-drastically
https://github.com/surpassinggoogle/UlogsV2/issues/185

3. Pull Requests

https://github.com/surpassinggoogle/UlogsV2/pull/241

4. Testing

These were the tests manually done in Chrome:

  1. Click the Add A Ulog-Story button on the right side panel
    • the Quick Ulog Story Editor modal should display
    • the #ulog subtag dropdown should display between the upload photo icon and the "Post" button
  2. Write content then select a #ulog subtag from the dropdown
    • post should successfully published
    • user should be redirected to the post upon publish
    • post's first tag should be #ulog
    • post's second tag should be the selected subtag

5. Implementation

  1. src/client/components/Sidebar/UlogStories.js - added the UlogStoryEditor component to modal
    image.png
  2. src/client/components/UlogStoryEditor/UlogStoryEditor.js - the main Ulog Story Editor component
    image.png
  3. src/client/components/UlogStoryEditor/UlogStoryEditorFooter.js - footer for ulog story editor; contains the ulog-subtag dropdown
    image.png
  4. src/client/components/UlogStoryEditor/UlogStoryEditor.less - style sheet for ulog story editor
    image.png
  5. src/client/components/UlogStoryEditor/UlogStoryEditor-nightmode.less - night-mode style sheet for ulog story editor
    image.png

6. Feature in Action

ulog-quick-post-editor.gif

7. Lesson Learned

One of the issues I encountered while doing this was that the dropdown options were not displaying when I clicked on the ulog-subtag dropdown. I was able to investigate the cause using Chrome's developer console and element inspector and eventually found out that it's related with the dropdown's z-index which was set around 1000+.

I was able to resolve this by overriding the .ant-select-dropdown style.

image.png

8. GitHub Account

https://github.com/eastmaels

This post was made from https://ulogs.org

H2
H3
H4
Upload from PC
Video gallery
3 columns
2 columns
1 column
5 Comments