Richardsl / heatmap-calendar-obsidian

An Obsidian plugin for displaying data in a calendar similar to the github activity calendar
Apache License 2.0
614 stars 102 forks source link

Wrap the entry content in a `span` element #73

Closed sunyatasattva closed 1 year ago

sunyatasattva commented 1 year ago

By wrapping the entry content in a span element, we can allow more versatile custom styling of the content. See example below:

https://user-images.githubusercontent.com/1847066/221376643-fbc8ffd1-bd1d-4676-9815-ab80e91082e2.mov

kobbled commented 1 year ago

What is your dataviewjs for this? I am using your branch, but cannot get this functionality to work. I am probably doing something wrong...

kobbled commented 1 year ago

I think you are missing the CSS for .heatmap-calendar-content in this pr.

sunyatasattva commented 1 year ago

Oh sorry for the misunderstanding, I have just added the span here, I'm not being opinionated on how people should use that for their own styling. The PR is basically minimally invasive: i.e., it doesn't really change anything for people. Should people (like myself) want to customize it further, however, they now can.

I hope that makes sense.

This is my CSS in case you are curious:

.heatmap-calendar-boxes .hasData .heatmap-calendar-content {
        display: none;
}

        .heatmap-calendar-boxes .hasData:hover .heatmap-calendar-content {
          background-color: #4b4b4b;
          border-radius: 3px;
          color: #fff;
          display: block;
          font-size: 0.75rem;
          padding: 5px;
          pointer-events: none;
          position: absolute;
          white-space: nowrap;
          z-index: 1;
          top: 10px;
        }
kobbled commented 1 year ago

no worries, I understand now. I just got confused and I didn't realize .heatmap-calendar-content wasn't implemented.

Thanks for your contribution, I think this functionality is essential for heatmaps.

sunyatasattva commented 1 year ago

Hello @Richardsl

Are you still maintaining this project, or should I go ahead and create my own Obsidian Heatmap solution? If possible, I'd like to contribute to your work, but if you'd rather not maintain this project anymore, please let us know 🙏

hacker-jerry commented 1 year ago

Interesting work you've done, does it conflict with Hover Editor? I would prefer a Github-like heat map, where the far right side is the current day, and then the left part = current-365, rather than a straight year as a split. The author's heat map would result in the right side being almost always empty, only filling up at the end of the year, and then becoming empty again.

hacker-jerry commented 1 year ago

By wrapping the entry content in a span element, we can allow more versatile custom styling of the content. See example below:

Do you know how to do it? I can only set it like this now, I can't adjust the last day and the first day.

image
sunyatasattva commented 1 year ago

@hacker-jerry unfortunately this is not currently possible with the implementation of this plugin, and this is way out of the scope of this PR. Seeing how @Richardsl seems to be inactive, I may be going to do my own plugin for this soon, unfortunately.