Skip to content
This repository has been archived by the owner on Sep 12, 2019. It is now read-only.

Add new section to About page https://github.com/18F/eregs-platform/issues/57 #443

Merged
merged 3 commits into from
Sep 21, 2016
Merged

Add new section to About page https://github.com/18F/eregs-platform/issues/57 #443

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
4aa4806
Add new image and text to About page per https://github.com/18F/eregs…
tadhg-ohiggins Sep 19, 2016
e192671
Merge branch 'master' into tadhg-about-misc
tadhg-ohiggins Sep 20, 2016
1f9c0a2
Greatly simplify CSS thanks to CM's pointing out that I should use cf…
tadhg-ohiggins Sep 20, 2016
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
13 changes: 13 additions & 0 deletions atf_eregs/static/regulations/css/scss/module/custom/_about.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,19 @@
background: $atf_carrots;
}

.about-stopcompare {
margin-top: 80px;
margin-left: 20px;
}

.icon-red {
color: #d14124;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a shame we're using a hard-coded color in -site here, but thanks for highlighting that. Created eregs/regulations-site#463

}

img.about-stopcompare-img {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NBD, but per https://pages.18f.gov/frontend/#css-specificity, this shouldn't include the img

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point; addressed here #445

margin-top: 35px;
}

@media only screen and ( min-width: 780px ) {
#related-info .content-secondary {
/* Overrides value set in layout.scss */
Expand Down
Binary file added atf_eregs/static/regulations/img/regtimeline-03.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.
30 changes: 30 additions & 0 deletions atf_eregs/templates/regulations/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,33 @@ <h3>Related information</h3>
</div>
</section>
{% endblock %}

{% block about-timeline %}
<section class="about-section group" id="timeline">
<div class="inner-wrap">
<h3>Regulation timeline</h3>

<div class="content-secondary column-l">
<img src="{%static "regulations/img/regtimeline-01.png" %}" class="s-bump" alt="eRegulations timeline navigation screenshot">

<img src="{%static "regulations/img/regtimeline-03.png" %}" class="s-bump about-stopcompare-img" alt="eRegulations timeline navigation screenshot">
</div>

<div class="content-primary column-r">
<p class="about-timeline">The <strong>regulation timeline</strong> shows recent revisions of the regulation organized by latest effective date.</p>

<ol class="about-ol bump">
<li>The <strong>date picker</strong> allows users to find what revision was effective on a specific date.</li>
<li><strong>Federal Register notice(s)</strong> associated with a revision are presented and organized by publication date. These links will
take you to the notice on the Office of the Federal Register’s website.</li>
<li><strong>Compare</strong> any two revisions of the regulation, word for word, by selecting a date in the menu and clicking “Show Differences”.</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Solid

</ol>

<img src="{%static "regulations/img/regtimeline-02.png" %}" alt="eRegulations revision comparison screenshot">

<p class="about-stopcompare"><strong>To stop comparing</strong>, return to the regulation timeline tab — <span class="cf-icon cf-icon-history icon-red"> </span> — at the top left side of the screen. Click the “Stop Comparing” button under the second of the two revisions being compared.</p>

</div>
</div>
</section>
{% endblock %}