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
This commit updates the font family in the file
flaskr/static/style.css to FontAwesome as per the
review comment. The previous font family was not
rendering the icons correctly, leading to visual
inconsistencies. By switching to FontAwesome, we
ensure that the icons are displayed as intended.
Additionally, the icon previously set in the
background has been removed to avoid duplication
and potential rendering issues. This change
simplifies the styling and aligns with the
reviewer's feedback.
This commit addresses the issue where the icon was incorrectly
placed in the center of the toggle's background. The icon should
be positioned inside the circle part that moves with the toggle.
This change ensures that the icon moves along with the toggle,
providing a more intuitive and visually consistent user
experience.
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
This commit updates the font style in the file flaskr/static/style.css
to include sans-serif. This change was made in response to a pull
request review comment suggesting that the font should also be
sans-serif. The update ensures consistency in the font style across
the application, enhancing the overall visual appearance and
readability.
Replace the previously used font in the style.css file with
Roboto. The original font was not widely supported across
different platforms and browsers, which could lead to
inconsistent user experiences. By switching to Roboto, we
ensure better compatibility and a more uniform appearance
for users accessing the application.
This commit updates the entire site to follow Material design
guidelines, providing a more modern look and feel. The font has
been changed to 'Roboto' and 'Roboto Slab' for a cleaner
typography. The color scheme has been adjusted to match the
provided palette, enhancing the visual appeal and consistency
across the site.
Additional changes include:
- Updated background and text colors for better contrast.
- Added box shadows and border-radius for a softer appearance.
- Improved button styling with hover effects for better
interactivity.
These changes aim to improve user experience by aligning with
current design standards and making the interface more
intuitive and visually appealing.
Fixes #FLAS-4
