Skip to content

Fix the red line used to identify recent entries on the log pages#2891

Merged
rdwebdesign merged 2 commits into
development-v6from
fix/red_line_width
Dec 21, 2023
Merged

Fix the red line used to identify recent entries on the log pages#2891
rdwebdesign merged 2 commits into
development-v6from
fix/red_line_width

Conversation

@rdwebdesign

@rdwebdesign rdwebdesign commented Dec 2, 2023 •
edited
Loading

Copy link
Copy Markdown
Member

What does this PR aim to accomplish?

As title says.
Fix the issue reported on Discourse.

How does this PR accomplish the above?

CSS changes:

  • use display:grid on the parent;
  • set width:100% on the line element;
  • set margin-bottom to -1px, to avoid a small jump when the line is hidden

Use <div> instead of <span> for each log entry.

By submitting this pull request, I confirm the following:

  1. I have read and understood the contributors guide, as well as this entire template. I understand which branch to base my commits and Pull Requests against.
  2. I have commented my proposed changes within the code and I have tested my changes.
  3. I am willing to help maintain this change if there are issues with it later.
  4. It is compatible with the EUPL 1.2 license
  5. I have squashed any insignificant commits. (git rebase)
  6. I have checked that another pull request for this purpose does not exist.
  7. I have considered, and confirmed that this submission will be valuable to others.
  8. I accept that this submission may not be used, and the pull request closed at the will of the maintainer.
  9. I give this submission freely, and claim no ownership to its content.
  • I have read the above and my PR is ready for review. Check this box to confirm

@rdwebdesign
Fix the red line used to identify recent entries on the log pages
7d2e83c 
- use `display:grid` on the parent;
- set `width:100%` on the line element;
- set margin-bottom to `-1px`, to avoid a small jump when the line is hidden
@rdwebdesign rdwebdesign requested review from a team and DL6ER December 2, 2023 23:08
@yubiuser

yubiuser commented Dec 4, 2023

Copy link
Copy Markdown
Member

What was the issue with the old implementation? Where did it break?

With this branch, there are a lot of empty lines

@rdwebdesign

rdwebdesign commented Dec 4, 2023

Copy link
Copy Markdown
Member Author

What was the issue with the old implementation?

I updated the PR with a link to the issue report.

yubiuser
yubiuser approved these changes Dec 5, 2023
View reviewed changes

@yubiuser yubiuser left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed for me on Chrome and Firefox.

@Th3M3

Th3M3 commented Dec 6, 2023

Copy link
Copy Markdown
Contributor

One small thing:
Every log line is indented by 0.5em, but the *** FTL restarted *** line is not.

Maybe the injected hr element also should have the log-entry class.

image

@rdwebdesign

rdwebdesign commented Dec 6, 2023 •
edited
Loading

Copy link
Copy Markdown
Member Author

I think this was intentional.

Note:
Even if we decide to change this, adding log-entry class won't work.

This class adds padding to the element, but I think your intention is to add a margin to <hr> elements to align them. Also, padding increases the width (pushing the line to the right) and we will need to change the line width to avoid overflow.

This is the comparison: the first one uses the class <hr class="log-entry"> and the second one is the original:
image

@Th3M3

Th3M3 commented Dec 6, 2023

Copy link
Copy Markdown
Contributor

Sorry, i mixed things up 😅.

I ment the div with the *** FTL restarted *** text inside, wich also should have the log-entry class to get aligned with the other lines.

image

@rdwebdesign rdwebdesign merged commit 8b3240e into development-v6 Dec 21, 2023
@rdwebdesign rdwebdesign deleted the fix/red_line_width branch December 21, 2023 19:01
@PromoFaux PromoFaux mentioned this pull request Feb 18, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@yubiuser yubiuser yubiuser approved these changes

@DL6ER DL6ER Awaiting requested review from DL6ER

Assignees

No one assigned

Labels

Pi-hole v6.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@rdwebdesign @yubiuser @Th3M3