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.

Sign up for GitHub

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

Jump to bottom

Code copy button overlaps code at smaller screen sizes #574

Open
talha131 opened this issue Feb 3, 2020 · 9 comments
Open

Code copy button overlaps code at smaller screen sizes #574

talha131 opened this issue Feb 3, 2020 · 9 comments
Labels
enhancement pull request welcome Not a priority right now, but if you provide a pull request, we would merge it. released
Milestone
Roadmap

Comments

@talha131
Copy link
Member

talha131 commented Feb 3, 2020

I am not sure how to fix this issue. Suggestions are welcome.

Related to #525
@talha131 talha131 added enhancement pull request welcome Not a priority right now, but if you provide a pull request, we would merge it. labels Feb 3, 2020
@talha131 talha131 added this to the Roadmap milestone Feb 3, 2020
@talha131
Copy link
Member Author

talha131 commented Feb 3, 2020

I guess user can just change the orientation of his screen.

@talha131 talha131 closed this as completed Feb 3, 2020
@talha131 talha131 modified the milestones: Roadmap, 2020 - Q1 Feb 3, 2020
talha131 added a commit that referenced this issue Feb 3, 2020
@talha131
feat(syntax): add copy to clipboard button for every code snippet
6f73317 
Fix #574
Fix #525
talha131 pushed a commit that referenced this issue Feb 3, 2020
@semantic-release-bot
chore(release): 5.2.0 [skip ci]
f57da89 
# [5.2.0](V5.1.0...V5.2.0) (2020-02-03)

### Bug Fixes

* regression introduced due to cache busting ([b953a38](b953a38))
* **archives:** at smaller screen layout does not make the best use of available space ([a289e9d](a289e9d))
* **syntax:** code blocks with line numbers do not have the correct border radius ([3a34a3e](3a34a3e))
* **syntax:** improve the font size and height of download button ([07595b3](07595b3))
* **typography:** fix font size and style of TOC ([2d597ab](2d597ab)), closes [#509](#509)
* Categories and Tags pages do not have space below the header ([d78f4e5](d78f4e5))
* remove invalid CSS rule ([368cb2c](368cb2c))
* use consistent color for border ([c85b7b8](c85b7b8))
* use darker color for the site name ([19f37ca](19f37ca))
* **article:** use loclate_date attribute instead of hardcoding the date format ([1da552c](1da552c)), closes [#552](#552)
* **bootstrap:** WIP. add Bootstrapv2.3.2 sources file to the project ([43ee8eb](43ee8eb)), closes [#429](#429)
* **seo:** regression introduced in PR [#556](#556) ([28bcb85](28bcb85)), closes [#505](#505)
* **typography:** about me and my projects heading is not on one line ([6a7989c](6a7989c))
* **typography:** font size of superscript number in categories and tags page ([d0a7162](d0a7162))
* **typography:** override Bootstrap base font ([f6a83a6](f6a83a6)), closes [#429](#429)
* **typography:** top menu bar does not have correct height ([d30ce82](d30ce82))
* **typography:** use consistent font and color for project list ([477a467](477a467))
* **typography:** use consistent font in the footer ([eeb0e30](eeb0e30))

### Features

* add support cache busting ([cde0dc5](cde0dc5))
* **categories:** change background color of uncollapsed Category ([6cc11b8](6cc11b8))
* **gallery:** add support for PhotoSwipe image gallery using raw HTML ([ad1bcea](ad1bcea)), closes [#567](#567)
* **js:** combine and minify all JS files into one to improve load speed ([f5047d4](f5047d4))
* **search:** improve search results page look ([73fa743](73fa743)), closes [#573](#573) [#275](#275)
* **search:** replace tipue_search with lunr.js ([9d60af1](9d60af1)), closes [#275](#275)
* **SEO:** Add header and documentation for Claiming Website on Yandex ([2bb691d](2bb691d))
* **SEO:** add SEO and SMO meta keywords in site's home page ([c5be0eb](c5be0eb))
* **sharing:** Enable customizing the sharing links ([f3e262f](f3e262f))
* **syntax:** add copy to clipboard button for every code snippet ([6f73317](6f73317)), closes [#574](#574) [#525](#525)
* **syntax:** add support for highlighting lines in code snippets ([ba2de8c](ba2de8c)), closes [#520](#520)
* **syntax:** add support for liquid_tags.include_code plugin ([0550a3a](0550a3a)), closes [#518](#518)
* **syntax:** use Gruvbox syntax highlighting theme ([0b50ab1](0b50ab1))
* **typography:** use consistent fonts ([8b7a8bd](8b7a8bd)), closes [#429](#429)
* **typography:** use consistent style for timestamps in tags, categories and archives pages ([a421dcd](a421dcd))
* **typography:** use dns-prefetch and preconnect to improve font load time ([e4bd582](e4bd582))
* **typography:** use responsive fonts ([39acdbf](39acdbf))
@talha131
Copy link
Member Author

talha131 commented Feb 3, 2020

🎉 This issue has been resolved in version 5.2.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@iranzo
Copy link
Member

iranzo commented Feb 24, 2020

@talha131 have a look at https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/ they put the copy button 'outside' the code block

@talha131
Copy link
Member Author

Yeah, I don't think it will fit the UI we have for include code plugin.

https://elegant.oncrashreboot.com/code-snippets-include-code-from-file

@neirbowj
Copy link

This also appears to affect typical and large screen sizes where the first line in the code block is long. I think I will prepare a separate issue to request a feature to disable the copy button per site, per page, and/or per code-block.

@neirbowj neirbowj mentioned this issue Mar 26, 2020
Open
@talha131
Copy link
Member Author

@neirbowj, I agree. UI needs improvement. Perhaps, we will have to use @iranzo suggestion.

I decided to release the current UI for a couple of reasons,

  1. Most languages have formating tools that break down long lines into smaller chunks. I expect most users will not have long lines if they format their code using such tools
  2. I had to release this feature to get user feedback

Now that you have pointed out issues, I will try to fix it in future releases. I am open to suggestions.

For now, an easy (and temporary) workaround is to have a short comment line at the beginning of the code snippet or break the line.

@talha131 talha131 modified the milestones: 2020 - Q1, Roadmap Mar 26, 2020
@talha131 talha131 reopened this Mar 26, 2020
@silverhook
Copy link
Member

I agree with @iranzo that it might make sense to put it outside of the box.

How about hanging it off the top-right edge? See attached mock-ups:

elegant_code_snippets_copy_icon_tag

elegant_code_snippets_copy_word_tag

@iranzo
Copy link
Member

iranzo commented Dec 26, 2021

I like the 2nd one :-)

@silverhook
Copy link
Member

That should be doable with just CSS, no?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement pull request welcome Not a priority right now, but if you provide a pull request, we would merge it. released
Milestone
Roadmap
Development

No branches or pull requests
4 participants
@iranzo @talha131 @neirbowj @silverhook