Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make images sticky by default #904

Open
wants to merge 6 commits into
base: Development
Choose a base branch
from

Conversation

NikitaSalikov
Copy link
Collaborator

Changes Made:

  • added a class to fieldset to default to sticky

  • switched hidden button from anchorFloatDiv to floatImgDiv

Pull Request Checklist:

Pre-Approval

  • There is a description section in the pull request that details what the proposed changes do. It can be very brief if need be, but it ought to exist.
  • [N/A] Hotfixes should be branched off of the master branch and squash and merged back into the master branch.
  • Features and backlog bugs should be merged into the Development branch, NOT master
  • [N/A] All new text is preferably internationalized (i.e., no end-user-visible text is hard-coded on the PHP pages), and the spreadsheet tracking internationalizations has been updated either with a new row or with checkmarks to existing rows.
  • [N/A] There are no linter errors
  • New features have responsive design (i.e., look aesthetically pleasing both full screen and with small or mobile screens)
  • Symbiota coding standards have been followed
  • [N/A] If any files have been reformatted (e.g., by an autoformatter), the reformat is its own, separate commit in the PR
  • Comment which GitHub issue(s), if any does this PR address:
    https://github.com/orgs/BioKIC/projects/6/views/14?pane=issue&itemId=29044724
  • [N/A] If this PR makes any changes that would require additional configuration of any Symbiota portals outside of the files tracked in this repository, make sure that those changes are detailed in this document.

Post-Approval

  • It is the code author's responsibility to merge their own pull request after it has been approved
  • If this PR represents a merge into the Development branch, remember to use the squash & merge option
  • If this PR represents a merge from the Development branch into the master branch, remember to use the merge option
  • If this PR represents a hotfix into the master branch, a subsequent PR from master into Development should be made merge option (i.e., no squash).
  • If the dev team has agreed that this PR represents the last PR going into the Development branch before a tagged release (i.e., before an imminent merge into the master branch), make sure to notify the team and lock the Development branch to prevent accidental merges while QA takes place. Follow the release protocol here.
  • Don't forget to delete your feature branch upon merge. Ignore this step as required.

Thanks for contributing and keeping it clean!

Copy link
Collaborator

@Atticus29 Atticus29 left a comment

Choose a reason for hiding this comment

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

For me, the image doesn't seem to be sticky until I click the anchor button:

Screen Shot 2024-02-12 at 9 52 00 AM

I think that the ticket wants it to start out as sticky (with the user being able to opt of out of this behavior).

Is it different on your side, @NikitaSalikov ?

Copy link
Collaborator

@Atticus29 Atticus29 left a comment

Choose a reason for hiding this comment

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

Ok! Now it sticks by default, but is mis-aligned. Can we justify it right, somehow?

Screen Shot 2024-02-12 at 12 55 41 PM

Copy link

@MarkFisher-USDA MarkFisher-USDA left a comment

Choose a reason for hiding this comment

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

Left a few more comments.

?>

<script>

$(document).ready(function() {

Choose a reason for hiding this comment

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

Is there a way to do this without jQuery?
Also, the left attribute stil doesn't seem to be quite enough on my screen.

Copy link
Collaborator

@Atticus29 Atticus29 left a comment

Choose a reason for hiding this comment

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

I'm really happy with the sticky behavior, and I'm ok with the draggable behavior.
However, when I make my screen really small, the image disappears from the viewport, and I can't scroll to access it. Is there any way to fix that behavior?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants