This change modifies the onclick event to apply only to the h1 text
within the header section of the blog index page. Previously, the
onclick event was applied to the entire header section, which could
lead to unintended behavior when users interacted with other parts
of the header. By restricting the onclick event to just the h1 text,
we ensure that only the intended element responds to user clicks,
improving the user experience and preventing potential confusion.
Implemented functionality to collapse and expand posts in the
main blog view. Users can now toggle the visibility of a post's
body by clicking on the post header. Additionally, clicking on
the "Posts" header at the top of the page will toggle the
visibility of all posts simultaneously. This enhancement improves
the user experience by allowing users to manage the display of
content more efficiently.
Fixes #FLAS-32
Integrate SimpleMDE editor into the blog create and update
pages to enhance the user experience with a WYSIWYG markdown
editor. This change includes adding the necessary CSS and JS
links to the templates and applying specific styles for both
light and dark modes in the stylesheet.
The SimpleMDE editor provides a more intuitive interface for
users to write and format their blog posts, addressing the
requirement outlined in the issue description. The changes
ensure that the editor is initialized on the textarea elements
for both creating and updating blog posts.
Related to Issue ID: FLAS-30
Implemented markdown support in the post body to enhance the
editor's functionality. The main blog view now renders markdown
content as HTML. This change allows users to format their posts
using markdown syntax, providing a richer text editing experience.
- Imported the markdown module in blog.py.
- Converted post bodies from markdown to HTML in the index view.
- Updated templates to indicate markdown support in the post body
field.
- Ensured safe rendering of HTML content in the blog index view.
Fixes #FLAS-29
This commit addresses the issue of incorrect dark mode icon
placement in the toggle button. Previously, the moon and sun
icons were displayed in the background, which was not the
desired behavior. The icons are now correctly placed inside
the circle of the toggle button.
Changes include:
- Updated CSS to center icons within the toggle button.
- Adjusted HTML to ensure the correct icon is displayed based
on the current theme.
- Modified JavaScript to toggle icons appropriately when
the theme changes.
These changes improve the visual consistency and user
experience of the dark mode toggle.
Fixes #FLAS-5
This commit addresses the issue of improper dark mode implementation.
The background of all pages and form elements in dark mode were
previously displayed in white, which has now been corrected. The
background for input and textarea elements is set to a darker shade
in dark mode, ensuring consistency with the overall theme.
Additionally, the toggle button for switching themes has been
redesigned to resemble iPhone-style toggles, replacing the previous
square button. This enhances the user interface and provides a more
intuitive experience when toggling between light and dark modes.
Fixes #FLAS-3
Implemented dark mode across all pages, allowing users to toggle
between light and dark themes. The default theme is determined by
the operating system or browser settings. A toggle button in the
navigation bar enables users to switch themes, using sun and moon
icons from Font Awesome. User preferences are stored in cookies
and local storage to ensure consistency across sessions and pages.
The changes include:
- Added a before_request function to load theme preference from
cookies or set a default based on user agent.
- Updated CSS to support dark mode styling.
- Modified base.html to include a theme toggle button and
corresponding JavaScript for theme switching.
Fixes #FLAS-2
