Fix: box layout with suggestion from issue #118

build/manifest.json

@@ -0,0 +1,10 @@
+{
+	"id": "heatmap-calendar",
+	"name": "Heatmap Calendar",
+	"version": "0.6.0",
+	"minAppVersion": "0.12.0",
+	"description": "Activity Year Overview for DataviewJS, Github style – Track Goals, Progress, Habits, Tasks, Exercise, Finances, \"Dont Break the Chain\" etc.",
+	"author": "Richard Slettevoll",
+	"authorUrl": "https://richard.sl",
+	"isDesktopOnly": false
+}

build/styles.css

@@ -0,0 +1,139 @@
+/* Obsidian/DataviewJS Github inspired calendar by Richard Slettevoll - https://richard.sl/ */
+
+.heatmap-calendar-graph > * {
+	padding: 0px;
+	margin: 0px;
+	list-style: none;
+}
+
+.heatmap-calendar-graph {
+	font-size: 0.65em;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-template-areas:
+		"year months"
+		"days boxes";
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
+		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	width: 100%;
+}
+
+.heatmap-calendar-months {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	grid-area: months;
+	margin-top: 0.1em;
+	margin-bottom: 0.3em;
+	grid-gap: 0.3em;
+}
+
+.heatmap-calendar-days {
+	grid-area: days;
+	margin-left: 0.1em;
+	margin-right: 0.3em;
+	white-space: nowrap;
+}
+
+.heatmap-calendar-boxes {
+	grid-auto-flow: column;
+	grid-template-columns: repeat(53, minmax(0, 1fr));
+	grid-area: boxes;
+}
+
+.heatmap-calendar-days,
+.heatmap-calendar-boxes {
+	display: grid;
+	grid-gap: 0.3em;
+	grid-template-rows: repeat(7, minmax(0, 1fr));
+}
+
+.heatmap-calendar-year {
+	grid-area: year;
+	font-weight: bold;
+	font-size: 1.2em;
+}
+
+/* only label three days of the week */
+.heatmap-calendar-days li:nth-child(odd) {
+	visibility: hidden;
+}
+
+.heatmap-calendar-boxes li {
+	position: relative;
+	font-size: 0.75em;
+	background-color: #ebedf0;
+}
+
+.theme-dark .heatmap-calendar-boxes .isEmpty {
+	background: #333;
+}
+
+.isEmpty {
+	width: 1em !important;
+}
+
+.hasData {
+	width: 1em !important;
+}
+
+.heatmap-calendar-boxes li:not(.task-list-item)::before {
+	content: unset;
+}
+
+.heatmap-calendar-boxes .internal-link {
+	text-decoration: none;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+}
+
+.heatmap-calendar-boxes .today {
+	border: solid 1px rgb(61, 61, 61);
+}
+
+/* Settings */
+
+.heatmap-calendar-settings-colors__color-box {
+	width: 10px;
+	height: 10px;
+	display: inline-block;
+	margin: 0 5px;
+}
+
+.heatmap-calendar-settings-colors__color-box:first-child {
+	margin-left: 0;
+}
+
+.heatmap-calendar-settings-colors__color-name {
+	display: inline-block;
+}
+
+.heatmap-calendar-settings-colors__container {
+	align-items: center;
+	border-top: 1px solid var(--background-modifier-border);
+	display: flex;
+	justify-content: space-between;
+	padding: 0.5em 0;
+}
+
+.heatmap-calendar-settings-colors__container h4 {
+	margin: 0.5em 0;
+}
+
+.heatmap-calendar-settings-colors__new-color-input-container {
+	display: flex;
+	justify-content: space-between;
+}
+
+.heatmap-calendar-settings-colors__new-color-input-container input {
+	margin-right: 1em;
+}
+
+.heatmap-calendar-settings-colors__new-color-input-container input {
+	margin-right: 1em;
+}
+
+.heatmap-calendar-settings-colors__new-color-input-value {
+	flex-grow: 1;
+}

styles.css

@@ -70,6 +70,7 @@
   position: relative;
   font-size: 0.75em;
   background-color: #ebedf0;
+  margin-inline-start: 0 !important;
 }
 
 .theme-dark .heatmap-calendar-boxes .isEmpty {
@@ -168,4 +169,4 @@
 
 /* ----
 /* ---- DEV Only /END ---- */
-/* ----
+/* ----