Skip to content

Commit 202eabe

Browse files
CarterHenningCarterHenning
committed
- Updated the styling on the sizing for the Person Program Step List obsidian block
1 parent efc0c3e commit 202eabe

7 files changed

Lines changed: 22 additions & 81 deletions

File tree

‎Rock.Blocks/Engagement/PersonProgramStepList.cs‎

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -58,34 +58,18 @@ namespace Rock.Blocks.Engagement
5858
Order = 2,
5959
Key = AttributeKey.StepPage )]
6060

61-
[IntegerField(
62-
"Steps Per Row",
63-
Description = "The number of step cards that should be shown on a row",
64-
Order = 3,
65-
IsRequired = true,
66-
Key = AttributeKey.StepsPerRow,
67-
DefaultIntegerValue = AttributeDefault.StepsPerRow )]
68-
69-
[IntegerField(
70-
"Steps Per Row Mobile",
71-
Description = "The number of step cards that should be shown on a row on a mobile screen size",
72-
Order = 4,
73-
IsRequired = true,
74-
Key = AttributeKey.StepsPerRowMobile,
75-
DefaultIntegerValue = AttributeDefault.StepsPerRowMobile )]
76-
7761
[BooleanField(
7862
"Show Campus Column",
7963
Description = "Should the campus should be shown on the grid and card display?",
8064
DefaultBooleanValue = true,
81-
Order = 5,
65+
Order = 3,
8266
Key = AttributeKey.ShowCampusColumn )]
8367

8468
[BooleanField(
8569
"Show Start Date Column",
8670
Description = "Should the step start date be shown on the grid and card display?",
8771
DefaultBooleanValue = true,
88-
Order = 6,
72+
Order = 4,
8973
Key = AttributeKey.ShowStartedDateColumn )]
9074

9175
#endregion Block Attributes
@@ -104,21 +88,10 @@ private static class AttributeKey
10488
{
10589
public const string StepProgram = "StepProgram";
10690
public const string StepPage = "StepPage";
107-
public const string StepsPerRow = "StepsPerRow";
108-
public const string StepsPerRowMobile = "StepsPerRowMobile";
10991
public const string ShowCampusColumn = "ShowCampusColumn";
11092
public const string ShowStartedDateColumn = "ShowStartedDateColumn";
11193
}
11294

113-
/// <summary>
114-
/// Default values for block attributes.
115-
/// </summary>
116-
private static class AttributeDefault
117-
{
118-
public const int StepsPerRow = 5;
119-
public const int StepsPerRowMobile = 1;
120-
}
121-
12295
/// <summary>
12396
/// Keys for page parameters.
12497
/// </summary>
@@ -430,8 +403,6 @@ private PersonProgramStepListOptionsBag GetBoxOptions( StepProgramCache program,
430403
{
431404
ProgramName = program?.Name,
432405
StepTerm = program?.StepTerm ?? "Step",
433-
StepsPerRow = GetAttributeValue( AttributeKey.StepsPerRow ).AsIntegerOrNull() ?? AttributeDefault.StepsPerRow,
434-
StepsPerRowMobile = GetAttributeValue( AttributeKey.StepsPerRowMobile ).AsIntegerOrNull() ?? AttributeDefault.StepsPerRowMobile,
435406
IsCampusColumnVisible = GetIsCampusVisible(),
436407
IsStartDateColumnVisible = GetAttributeValue( AttributeKey.ShowStartedDateColumn ).AsBoolean(),
437408
GridDefinition = GetGridBuilder().BuildDefinition(),

‎Rock.JavaScript.Obsidian.Blocks/src/Engagement/PersonProgramStepList/cardView.partial.obs‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- Copyright by the Spark Development Network; Licensed under the Rock Community License -->
22
<template>
3-
<div class="step-grid">
3+
<div class="step-type-card-grid">
44
<StepTypeCard v-for="stepType in stepTypes"
55
:key="stepType.idKey ?? stepType.id"
66
:stepType="stepType"
@@ -14,17 +14,15 @@
1414
</template>
1515

1616
<style scoped>
17-
.step-grid {
18-
display: grid;
19-
grid-template-columns: repeat(var(--stepsPerRowMobile, 1), minmax(0, 1fr));
20-
gap: var(--spacing-medium);
21-
}
22-
23-
@media (min-width: 1200px) {
24-
.step-grid {
25-
grid-template-columns: repeat(var(--stepsPerRow, 5), minmax(0, 1fr));
26-
}
27-
}
17+
/* Equal columns sized from the min width; auto-fit drops unused columns so a single row of cards can grow to the max. */
18+
.step-type-card-grid {
19+
--step-card-min-width: 240px;
20+
--step-card-max-width: 400px;
21+
display: grid;
22+
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--step-card-min-width)), 1fr));
23+
justify-items: center;
24+
gap: var(--spacing-medium);
25+
}
2826
</style>
2927

3028
<script setup lang="ts">

‎Rock.JavaScript.Obsidian.Blocks/src/Engagement/PersonProgramStepList/gridView.partial.obs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,25 +38,25 @@
3838
title="Campus"
3939
field="campus"
4040
:filter="pickExistingValueFilter"
41-
visiblePriority="md" />
41+
visiblePriority="xs" />
4242

4343
<DateColumn v-if="options.isStartDateColumnVisible"
4444
name="startDateTime"
4545
title="Start Date"
4646
field="startDateTime"
4747
:filter="dateValueFilter"
48-
visiblePriority="sm" />
48+
visiblePriority="xs" />
4949

5050
<DateColumn name="completedDateTime"
5151
title="Completion Date"
5252
field="completedDateTime"
5353
:filter="dateValueFilter"
54-
visiblePriority="sm" />
54+
visiblePriority="xs" />
5555

5656
<HtmlColumn name="summary"
5757
title="Summary"
5858
field="summary"
59-
visiblePriority="md" />
59+
visiblePriority="xs" />
6060

6161
<Column name="status"
6262
title="Status"

‎Rock.JavaScript.Obsidian.Blocks/src/Engagement/PersonProgramStepList/stepTypeCard.partial.obs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,10 @@
7070
position: relative;
7171
display: flex;
7272
flex-direction: column;
73+
/* Fills its grid column up to the max width set by the card view, so every card stops at the same size. */
74+
width: 100%;
75+
max-width: var(--step-card-max-width);
7376
aspect-ratio: 4 / 5;
74-
max-height: 500px;
7577
padding: var(--spacing-small) var(--spacing-small) var(--spacing-large);
7678
text-align: center;
7779
border: 1px solid var(--color-interface-soft);

‎Rock.JavaScript.Obsidian.Blocks/src/Engagement/personProgramStepList.obs‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@
1111
</NotificationBox>
1212

1313
<Panel v-if="isCardView"
14-
:title="options.programName ?? ''"
15-
:style="stepsPerRowStyle">
14+
:title="options.programName ?? ''">
1615
<template #headerActions>
1716
<button type="button"
1817
class="btn btn-panel-action"
@@ -43,7 +42,7 @@
4342
</template>
4443

4544
<script setup lang="ts">
46-
import { computed, ref } from "vue";
45+
import { ref } from "vue";
4746
import NotificationBox from "@Obsidian/Controls/notificationBox.obs";
4847
import Panel from "@Obsidian/Controls/panel.obs";
4948
import { onConfigurationValuesChanged, useConfigurationValues, useInvokeBlockAction, usePersonPreferences, useReloadBlock } from "@Obsidian/Utility/block";
@@ -65,9 +64,7 @@
6564

6665
const options: PersonProgramStepListOptionsBag = config.options ?? {
6766
isCampusColumnVisible: false,
68-
isStartDateColumnVisible: false,
69-
stepsPerRow: 5,
70-
stepsPerRowMobile: 1
67+
isStartDateColumnVisible: false
7168
};
7269

7370
/** Load-time failure from the server; replaces the whole block. */
@@ -82,17 +79,6 @@
8279

8380
// #endregion Values
8481

85-
// #region Computed Values
86-
87-
const stepsPerRowStyle = computed((): Record<string, string> => {
88-
return {
89-
"--stepsPerRow": `${options.stepsPerRow ?? 5}`,
90-
"--stepsPerRowMobile": `${options.stepsPerRowMobile ?? 1}`
91-
};
92-
});
93-
94-
// #endregion Computed Values
95-
9682
// #region Event Handlers
9783

9884
/**

‎Rock.JavaScript.Obsidian/Framework/ViewModels/Blocks/Engagement/PersonProgramStepList/personProgramStepListOptionsBag.d.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,6 @@ export type PersonProgramStepListOptionsBag = {
4747
*/
4848
stepEntryUrlTemplate?: string | null;
4949

50-
/** Gets or sets the number of step cards shown per row on desktop. */
51-
stepsPerRow: number;
52-
53-
/** Gets or sets the number of step cards shown per row on mobile. */
54-
stepsPerRowMobile: number;
55-
5650
/** Gets or sets the term the program uses for its steps (defaults to "Step"). */
5751
stepTerm?: string | null;
5852
};

‎Rock.ViewModels/Blocks/Engagement/PersonProgramStepList/PersonProgramStepListOptionsBag.cs‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,6 @@ public class PersonProgramStepListOptionsBag
3434
/// </summary>
3535
public string StepTerm { get; set; }
3636

37-
/// <summary>
38-
/// Gets or sets the number of step cards shown per row on desktop.
39-
/// </summary>
40-
public int StepsPerRow { get; set; }
41-
42-
/// <summary>
43-
/// Gets or sets the number of step cards shown per row on mobile.
44-
/// </summary>
45-
public int StepsPerRowMobile { get; set; }
46-
4737
/// <summary>
4838
/// Gets or sets a value indicating whether the campus column is
4939
/// visible. False when the setting is off or only one campus exists.

0 commit comments

Comments
 (0)