Skip to content

TEMPLATE: Updated Next Step look and feel and some verbiage based on Dev Marketing & Editorial input #1698

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

Merged
merged 3 commits into from
Mar 11, 2025
Merged

TEMPLATE: Updated Next Step look and feel and some verbiage based on Dev Marketing & Editorial input #1698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9aa802c
Updated Look/Feel of Next Steps and some verbiage around Next Step co…
Mar 11, 2025
7279432
update
Mar 11, 2025
2db6b2f
Merge branch 'ArmDeveloperEcosystem:main' into main
zachlasiuk Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion assets/css/feedback.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@

#feedback-container {
min-height: 200px;

}

/****************************************************/
Expand Down
6 changes: 5 additions & 1 deletion themes/arm-design-system-hugo-theme/layouts/install-guides/installtoolsall.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,11 @@ <h3 class="multi-tool-selection-title">{{.Title}}</h3>
{{if not .Params.multi_install}}
<br>
<div style="min-height: 350px;">
{{partial "general-formatting/feedback.html" (dict "context" . "learningpath_or_toolinstall" "tool quick-install guide") }}
<div class="c-row">
<div class="c-col">
{{partial "general-formatting/feedback.html" (dict "context" . "learningpath_or_toolinstall" "tool quick-install guide") }}
</div>
</div>
</div>
{{end}}
</div>
Expand Down
153 changes: 74 additions & 79 deletions themes/arm-design-system-hugo-theme/layouts/partials/general-formatting/feedback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,89 +22,84 @@
{{ $issuesURL := printf "%s/issues/new?title=Feedback - %s" $gh_repo (safeURL .context.Parent.Title ) -}}


<!-- Give an independent row -->
<div class="c-row">
<div class="c-col">
<div id="feedback-container">
<div id="feedback-container">

<h2>Feedback</h2>
<h2>Give Feedback</h2>

<!-- 1) Stars -->
<div id="feedback-1-stars">
<p>How would you rate the overall quality of this {{.learningpath_or_toolinstall}}?</p>
<div class="rating" style="float: left">
<input id="rating-5" type="radio" name="rating" value="5" onclick="starRatingGiven(this)"/><label title="Excellent" for="rating-5"><i class="fa-regular fa-2x fa-star"></i></label>
<input id="rating-4" type="radio" name="rating" value="4" onclick="starRatingGiven(this)"/><label title="Good" for="rating-4"><i class="fa-regular fa-2x fa-star"></i></label>
<input id="rating-3" type="radio" name="rating" value="3" onclick="starRatingGiven(this)"/><label title="Okay" for="rating-3"><i class="fa-regular fa-2x fa-star"></i></label>
<input id="rating-2" type="radio" name="rating" value="2" onclick="starRatingGiven(this)"/><label title="Bad" for="rating-2"><i class="fa-regular fa-2x fa-star"></i></label>
<input id="rating-1" type="radio" name="rating" value="1" onclick="starRatingGiven(this)"/><label title="Very Bad" for="rating-1"><i class="fa-regular fa-2x fa-star"></i></label>
<!-- 1) Stars -->
<div id="feedback-1-stars">
<p>How would you rate this {{.learningpath_or_toolinstall}}?</p>
<div class="rating" style="float: left">
<input id="rating-5" type="radio" name="rating" value="5" onclick="starRatingGiven(this)"/><label title="Excellent" for="rating-5"><i class="fa-regular fa-2x fa-star"></i></label>
<input id="rating-4" type="radio" name="rating" value="4" onclick="starRatingGiven(this)"/><label title="Good" for="rating-4"><i class="fa-regular fa-2x fa-star"></i></label>
<input id="rating-3" type="radio" name="rating" value="3" onclick="starRatingGiven(this)"/><label title="Okay" for="rating-3"><i class="fa-regular fa-2x fa-star"></i></label>
<input id="rating-2" type="radio" name="rating" value="2" onclick="starRatingGiven(this)"/><label title="Bad" for="rating-2"><i class="fa-regular fa-2x fa-star"></i></label>
<input id="rating-1" type="radio" name="rating" value="1" onclick="starRatingGiven(this)"/><label title="Very Bad" for="rating-1"><i class="fa-regular fa-2x fa-star"></i></label>
</div>
</div>

<!-- 2) Multiple-choice feedback -->
<div id="feedback-2-choice" hidden>
<p class="u-margin-bottom-0">What is the primary reason for your feedback <span id="specific-stars"></span>?</p>
<form id='feedback-choice-form' action='javascript:choiceFeedbackGiven()'>
<!-- Bad options, 1-3 stars given -->
<div id="1-2-3-star-options" class="u-margin-left-1" hidden>
<div class="choice ads-radio-style">
<input type="radio" class="" id="poor-1" value="Missing information" name="feedback-choice"></input>
<label for="poor-1">Missing information</label>
</div>
<br>
<div class="choice ads-radio-style">
<input type="radio" class="" id="poor-2" value="Too complicated / unclear steps" name="feedback-choice"></input>
<label for="poor-2">Too complicated / unclear steps</label>
</div>
<br>
<div class="choice ads-radio-style">
<input type="radio" class="" id="poor-3" value="Code problems" name="feedback-choice"></input>
<label for="poor-3">Code problems</label>
</div>
<br>
<div class="choice ads-radio-style">
<input type="radio" class="" id="poor-4" value="Out of date" name="feedback-choice"></input>
<label for="poor-4">Out of date</label>
</div>
</div>

<!-- 2) Multiple-choice feedback -->
<div id="feedback-2-choice" hidden>
<p class="u-margin-bottom-0">What is the primary reason for your feedback <span id="specific-stars"></span>?</p>
<form id='feedback-choice-form' action='javascript:choiceFeedbackGiven()'>
<!-- Bad options, 1-3 stars given -->
<div id="1-2-3-star-options" class="u-margin-left-1" hidden>
<div class="choice ads-radio-style">
<input type="radio" class="" id="poor-1" value="Missing information" name="feedback-choice"></input>
<label for="poor-1">Missing information</label>
</div>
<br>
<div class="choice ads-radio-style">
<input type="radio" class="" id="poor-2" value="Too complicated / unclear steps" name="feedback-choice"></input>
<label for="poor-2">Too complicated / unclear steps</label>
</div>
<br>
<div class="choice ads-radio-style">
<input type="radio" class="" id="poor-3" value="Code problems" name="feedback-choice"></input>
<label for="poor-3">Code problems</label>
</div>
<br>
<div class="choice ads-radio-style">
<input type="radio" class="" id="poor-4" value="Out of date" name="feedback-choice"></input>
<label for="poor-4">Out of date</label>
</div>
</div>

<!-- Good options, 4-5 stars given -->
<div id="4-5-star-options" class="u-margin-left-1" hidden>
<div class="choice ads-radio-style">
<input type="radio" class="" id="good-1" value="Easy to understand" name="feedback-choice"></input>
<label for="good-1">Easy to understand</label>
</div>
<br>
<div class="choice ads-radio-style">
<input type="radio" class="" id="good-2" value="Solved my problem" name="feedback-choice"></input>
<label for="good-2">Solved my problem</label>
</div>
<br>
<div class="choice ads-radio-style">
<input type="radio" class="" id="good-3" value="Helpful code snippets" name="feedback-choice"></input>
<label for="good-3">Excellent code snippets</label>
</div>
</div>

<!-- Error message if submit without selection; hidden by default. -->
<span>
<input class="u-margin-top-1 u-margin-bottom-1" type="submit" value="Submit Feedback" id="submit-feedback-btn">
<div id="choice-select-option-error" hidden>
<p id="error-text">&nbsp;&nbsp;&nbsp;Please select a reason before submitting.</p>
</div>
</span>

</form>

<!-- Good options, 4-5 stars given -->
<div id="4-5-star-options" class="u-margin-left-1" hidden>
<div class="choice ads-radio-style">
<input type="radio" class="" id="good-1" value="Easy to understand" name="feedback-choice"></input>
<label for="good-1">Easy to understand</label>
</div>
<br>
<div class="choice ads-radio-style">
<input type="radio" class="" id="good-2" value="Solved my problem" name="feedback-choice"></input>
<label for="good-2">Solved my problem</label>
</div>
<br>
<div class="choice ads-radio-style">
<input type="radio" class="" id="good-3" value="Helpful code snippets" name="feedback-choice"></input>
<label for="good-3">Excellent code snippets</label>
</div>
</div>

<!-- Error message if submit without selection; hidden by default. -->
<span>
<input class="u-margin-top-1 u-margin-bottom-1" type="submit" value="Submit Feedback" id="submit-feedback-btn">
<div id="choice-select-option-error" hidden>
<p id="error-text">&nbsp;&nbsp;&nbsp;Please select a reason before submitting.</p>
</div>
</span>

<!-- 3) Thank you message -->
<div id="feedback-3-thanks" hidden>
<p>Thank you. We're grateful for your feedback on how to improve this {{.learningpath_or_toolinstall}}.</p>
<ul>
<li>Have more detailed feedback about what to improve or add next? <a href="{{$issuesURL}}" target="_blank">Log an issue on GitHub.{{partial "general-formatting/external-link.html" }}</a></li>
<li>Want to discuss this topic with fellow developers and Arm Experts? <a href="https://discord.com/invite/armsoftwaredev" target="_blank">Collaborate in the Arm Developer Discord server.{{partial "general-formatting/external-link.html" }}</a></li>
</ul>
</div>
</div>
</form>
</div>

<!-- 3) Thank you message -->
<div id="feedback-3-thanks" hidden>
<p>Thank you! We're grateful for your feedback.</p>
<ul>
<li>Have more feedback? <a href="{{$issuesURL}}" target="_blank">Log an issue on GitHub.{{partial "general-formatting/external-link.html" }}</a></li>
<li>Want to collaborate? <a href="https://discord.com/invite/armsoftwaredev" target="_blank">Join our Discord server.{{partial "general-formatting/external-link.html" }}</a></li>
</ul>
</div>
</div>
</div>
41 changes: 25 additions & 16 deletions themes/arm-design-system-hugo-theme/layouts/partials/learning-paths/next-steps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,10 @@
</style>


<div class="c-row">
<div class="c-row u-margin-bottom-0">
<div class="c-col">
<h2>Share</h2>
<p>Share what you've learned.</p>
<p>Bring your insights to the conversation.</p>
<div class="social-sharing">
<div id="social-share-icon-div" class="social-icons">
<a id="linkedin-link" class="share-button" name="LinkedIn"
Expand Down Expand Up @@ -103,6 +103,12 @@ <h2>Share</h2>
</div>
</div>
</div>
<div class="c-col">
<!-- Feedback -->
{{partial "general-formatting/feedback.html" (dict "context" .context "learningpath_or_toolinstall" "Learning Path") }}


</div>
</div>

<script>
Expand Down Expand Up @@ -196,18 +202,11 @@ <h2>Share</h2>
window.open(linkedinShareUrl, '_blank', 'width=900,height=650');
});

</script>

<br>

<!-- Feedback -->
{{partial "general-formatting/feedback.html" (dict "context" .context "learningpath_or_toolinstall" "Learning Path") }}

</script>




<div class="c-row">
<div class="c-row u-margin-top-0">
<div class="c-col">
<!-- Main CTA for next learning path: -->
<h2>Continue Learning</h2>
Expand Down Expand Up @@ -254,19 +253,23 @@ <h4>Talk with Arm Experts</h4>
</script>
-->

<h4>Join Developer Program</h4>
<p>Join the Arm Developer Program to share ideas, ask questions, and explore solutions with the support of the developer community.</p>
<h4>Join the Arm Developer Program</h4>
<p>
Connect, upskill, and build with the Arm Developer Community. Join today for hands-on technical resources and education materials, along with the support of Arm engineers and the broader ecosystem.
</p>

<ads-modal id="modal-custom-trigger">
<div slot="body">
<div id="form-display">
<h2 class="modal-title u-margin-right-1/2" style="margin-top: 0px; margin-bottom: 16px;">Join Arm Developer Program</h2>
<h2 class="modal-title u-margin-right-1/2" style="margin-top: 0px; margin-bottom: 16px;">Join the Arm Developer Program</h2>
<div class="c-row" style="max-width: 650px;">
<p>By signing up, you will receive member news and email updates on topics that interest you. You can manage your subscription preferences anytime.</p>
</div>

<div class="c-row lg:u-display-block u-hide u-margin-bottom-1 u-margin-right-1/2">
<img src="/img/arm_dev_program_half.jpg" alt="Developer Program" style="width: 98%; max-width: 650px; display: block;">
</div>
<img src="/img/dev_prog.png" alt="Developer Program" style="width: 98%; max-width: 650px; display: block;">
</div>

<hr class="u-margin-right-1/2">
<div id="marketo-form-container"></div>
</div>
Expand Down Expand Up @@ -389,6 +392,12 @@ <h2 class="modal-title">Program Registration Success</h2>
.mktoField {

}
.mktoFormCol {
width:100%;
}
.mktoFieldWrap {
width:90%;
}


`;
Expand Down
2 changes: 1 addition & 1 deletion themes/arm-design-system-hugo-theme/layouts/partials/navigation/nav-buttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@


<!-- Row for buttons -->
<div class="c-row u-margin-top-2">
<div class="c-row u-margin-top-2 u-margin-bottom-2">
{{ $counter := 0 }} <!-- Counter to track index -->
{{ range .learningpathfiles }}
{{ if eq .Weight $.context.Weight }}
Expand Down
Binary file added themes/arm-design-system-hugo-theme/static/img/dev_prog.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.