Merge branch 'develop' into add/todo-items-move-up-down-icons

Emilia-Capital · Nov 13, 2024 · 5ea601f · 5ea601f
2 parents 6480be6 + d3a4fb1
commit 5ea601f
Show file tree

Hide file tree

Showing 28 changed files with 433 additions and 698 deletions.
diff --git a/assets/css/admin.css b/assets/css/admin.css
@@ -451,3 +451,77 @@ button.prpl-info-icon {
 		border-color: transparent var(--prpl-background-green) transparent transparent;
 	}
 }
+
+/*------------------------------------*\
+	Gauges.
+\*------------------------------------*/
+
+.prpl-gauge-container {
+	padding: var(--prpl-padding);
+	background: var(--prpl-background-orange);
+	border-radius: var(--prpl-border-radius);
+	aspect-ratio: 2 / 1;
+	overflow: hidden;
+	position: relative;
+	margin-bottom: var(--prpl-padding);
+
+	.prpl-gauge-0,
+	.prpl-gauge-100 {
+		font-size: var(--prpl-font-size-small);
+		position: absolute;
+		top: 50%;
+		color: var(--prpl-color-gray-5);
+		width: 10%;
+		text-align: center;
+	}
+
+	.prpl-gauge-0 {
+		left: 0;
+	}
+
+	.prpl-gauge-100 {
+		right: 0;
+	}
+
+	.prpl-gauge-number {
+		font-size: var(--prpl-font-size-6xl);
+		top: -1em;
+		display: block;
+		padding-top: 50%;
+		font-weight: 600;
+		text-align: center;
+		position: absolute;
+		color: var(--prpl-color-gray-5);
+		width: 100%;
+		line-height: 1.2;
+	}
+}
+
+.prpl-gauge {
+	--cutout: 57%;
+	--max: 270deg;
+	--start: -135deg;
+	--color: var(--prpl-color-accent-orange);
+	width: 100%;
+	aspect-ratio: 1 / 1;
+	border-radius: 100%;
+	position: relative;
+	background:
+		radial-gradient(var(--background) 0 var(--cutout), transparent var(--cutout) 100%),
+		conic-gradient(from var(--start), var(--color) calc(var(--max) * var(--value)), var(--prpl-color-gray-1) calc(var(--max) * var(--value)) var(--max), transparent var(--max));
+	text-align: center;
+}
+
+.prpl-gauge-badge {
+	top: -1em;
+	display: block;
+	padding-top: 25%;
+	text-align: center;
+	position: absolute;
+	width: 100%;
+
+	img,
+	svg {
+		width: 50%;
+	}
+}
diff --git a/assets/css/dashboard-widgets/score.css b/assets/css/dashboard-widgets/score.css
@@ -1,69 +1,19 @@
 #progress_planner_dashboard_widget_score {
 
-	.prpl-dashboard-widget.show-badges {
+	.prpl-dashboard-widget {
 		display: grid;
-		grid-template-columns: 1fr 1px 140px;
+		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 		grid-gap: calc(var(--prpl-gap) / 2);
 	}
 
-	.prpl-activities-gauge-container {
-		padding-bottom: calc(var(--prpl-padding) * 2);
-		background-color: #fff;
-	}
-
-	.prpl-badge-wrapper {
-		background: none;
-		display: grid;
-		grid-template-columns: 1fr max-content;
-		grid-gap: 1em;
-		align-items: center;
-		border: none;
-		padding: 0 0 1em 0;
-		width: auto;
-
-		> * {
-			align-self: center;
-		}
-
-		.progress-percent {
-			font-size: 28px;
-			font-weight: 600;
-			padding-top: 0;
-			color: var(--prpl-color-gray-5);
-		}
-	}
-
-	.prpl-gauge-0,
-	.prpl-gauge-100 {
-		font-size: var(--prpl-font-size-small);
-		position: absolute;
-		top: 50%;
-		color: var(--prpl-color-gray-5);
-	}
-
-	.prpl-gauge-0 {
-		left: 6px;
-	}
-
-	.prpl-gauge-100 {
-		right: 0;
+	.prpl-gauge-number {
+		font-size: var(--prpl-font-size-4xl);
 	}
 
 	h3 {
 		font-weight: 500;
 	}
 
-	.grid-separator {
-		background: #c3c4c7; /* same color as the one WP-Core uses */
-		width: 0.5px;
-		height: 100%;
-	}
-
-	.prpl-badge-gauge {
-		width: 64px;
-		height: auto;
-	}
-
 	.prpl-dashboard-widget-latest-activities {
 		margin-top: 1em;
 		padding-top: 1em;
@@ -83,17 +33,4 @@
 		gap: 1em;
 		align-items: center;
 	}
-
-	.prpl-gauge-number {
-		font-size: var(--prpl-font-size-4xl);
-		top: -1em;
-		display: block;
-		padding-top: 50%;
-		font-weight: 600;
-		text-align: center;
-		position: absolute;
-		color: var(--prpl-color-gray-5);
-		width: 100%;
-		line-height: 1.2;
-	}
 }
diff --git a/assets/css/page-widgets/activity-scores.css b/assets/css/page-widgets/activity-scores.css
@@ -3,47 +3,6 @@
 	.prpl-graph-wrapper {
 		max-height: 300px;
 	}
-
-	.prpl-gauge-number {
-		font-size: var(--prpl-font-size-6xl);
-		top: -1em;
-		display: block;
-		padding-top: 50%;
-		font-weight: 600;
-		text-align: center;
-		position: absolute;
-		color: var(--prpl-color-gray-5);
-		width: 100%;
-		line-height: 1.2;
-	}
-}
-
-.prpl-activities-gauge-container.activities-scores {
-	padding: var(--prpl-padding);
-	background: var(--prpl-background-orange);
-	border-radius: var(--prpl-border-radius);
-	aspect-ratio: 2 / 1;
-	overflow: hidden;
-	position: relative;
-	margin-bottom: var(--prpl-padding);
-
-	.prpl-gauge-0,
-	.prpl-gauge-100 {
-		font-size: var(--prpl-font-size-small);
-		position: absolute;
-		top: 50%;
-		color: var(--prpl-color-gray-5);
-		width: 10%;
-		text-align: center;
-	}
-
-	.prpl-gauge-0 {
-		left: 0;
-	}
-
-	.prpl-gauge-100 {
-		right: 0;
-	}
 }
 
 .prpl-personal-record-content.prpl-counter-big-wrapper {

diff --git a/assets/css/page-widgets/badge-streak.css b/assets/css/page-widgets/badge-streak.css
@@ -1,63 +1,5 @@
 
 
-.prpl-badge-wrapper {
-	width: calc(100% - var(--prpl-padding) * 2);
-	display: flex;
-	flex-wrap: nowrap;
-	justify-content: center;
-	align-items: center;
-	gap: var(--prpl-gap);
-	background: var(--prpl-background-blue);
-	padding: var(--prpl-padding);
-	border-radius: calc(var(--prpl-border-radius) * 2);
-	position: relative;
-	overflow: hidden;
-	margin-bottom: var(--prpl-padding);
-
-	* {
-		z-index: 1;
-	}
-
-	.prpl-badge {
-
-		.prpl-badge-gauge {
-			width: 80px;
-			height: 80px;
-		}
-	}
-
-	.progress-percent {
-		font-size: var(--prpl-font-size-3xl);
-		line-height: 1;
-		font-weight: 600;
-		display: block;
-		text-align: center;
-		padding-top: calc(var(--prpl-padding) / 2);
-	}
-}
-
-
-.prpl-badge-gauge,
-.prpl-activities-gauge {
-	--cutout: 57%;
-	--max: 270deg;
-	--start: -135deg;
-	--color: var(--prpl-color-accent-orange);
-	width: 100%;
-	aspect-ratio: 1 / 1;
-	border-radius: 100%;
-	position: relative;
-	background:
-		radial-gradient(var(--background) 0 var(--cutout), transparent var(--cutout) 100%),
-		conic-gradient(from var(--start), var(--color) calc(var(--max) * var(--value)), var(--prpl-color-gray-1) calc(var(--max) * var(--value)) var(--max), transparent var(--max));
-	text-align: center;
-}
-
-.prpl-badge-gauge img {
-	aspect-ratio: 1.15;
-	filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.4));
-}
-
 #popover-badge-streak-content,
 #popover-badge-streak-maintenance {
 	display: grid;

diff --git a/assets/css/page-widgets/latest-badge.css b/assets/css/page-widgets/latest-badge.css
@@ -1,4 +1,24 @@
-.prpl-widget-wrapper.prpl-latest-badge img {
-	border: 1px solid var(--prpl-color-gray-2);
-	border-radius: var(--prpl-border-radius);
+.prpl-widget-wrapper.prpl-latest-badge {
+
+	img {
+		border: 1px solid var(--prpl-color-gray-2);
+		border-radius: var(--prpl-border-radius);
+	}
+
+	.share-badge-wrapper {
+		padding-top: 1rem;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.prpl-button-share-badge {
+		display: flex;
+		align-items: center;
+		gap: 0.5em;
+		text-decoration: none;
+		color: var(--prpl-color-gray-7);
+		border: 1px solid var(--prpl-color-gray-2);
+		border-radius: var(--prpl-border-radius);
+		padding: 0.5em 1em;
+	}
 }
diff --git a/assets/css/page-widgets/published-content-density.css b/assets/css/page-widgets/published-content-density.css
diff --git a/assets/css/page-widgets/published-words.css b/assets/css/page-widgets/published-words.css
diff --git a/assets/css/page-widgets/suggested-tasks.css b/assets/css/page-widgets/suggested-tasks.css
@@ -87,49 +87,6 @@
 		}
 	}
 
-	.prpl-gauge-badge {
-		top: -1em;
-		display: block;
-		padding-top: 25%;
-		text-align: center;
-		position: absolute;
-		width: 100%;
-
-		img,
-		svg {
-			width: 50%;
-		}
-	}
-
-	.prpl-activities-gauge-container {
-		padding: var(--prpl-padding);
-		background: var(--prpl-background-orange);
-		border-radius: var(--prpl-border-radius);
-		aspect-ratio: 2 / 1;
-		overflow: hidden;
-		position: relative;
-		margin-bottom: var(--prpl-padding);
-
-		.prpl-gauge-0,
-		.prpl-gauge-100 {
-			font-size: var(--prpl-font-size-small);
-			position: absolute;
-			top: 50%;
-			color: var(--prpl-color-gray-5);
-			width: 10%;
-			text-align: center;
-		}
-
-		.prpl-gauge-0 {
-			left: 0;
-		}
-
-		.prpl-gauge-100 {
-			right: 0;
-
-		}
-	}
-
 	.prpl-widget-content-points {
 		display: flex;
 		justify-content: space-between;
@@ -372,10 +329,6 @@
 			.prpl-widget-content {
 				margin-bottom: 1em;
 			}
-
-			.prpl-badge-wrapper {
-				background: var(--background, var(--prpl-background-red));
-			}
 		}
 	}