benjamincoleman
commented
5 years ago @BenDarby changes:
- [x] icon and text should be aligned:
- [x]
<code>block could use some bottom margin
- [x]
<code>block to wrap?
-
[x] More padding on the ¶ to make it easier to click
-
[x] Responsive tables do something odd on smaller widths:
- [ ] Sidebar menu needs the actual content in it. You can get it from this code:
<ul>
<li><a href="#">Organisation Identifiers</a></li>
<li>
<span>↓</span>
<a href="#">Activity Standard</a>
<ul>
<li>
<span>→</span>
<a href="#">Elements</a>
<ul>
<li>
<span>→</span>
<a href="#">iati-activities</a>
<ul>
<li>
<span>→</span>
<a href="#">iati-activity</a>
<ul>
<li><a href="#">iati-identifier</a></li>
<li>
<span>→</span>
<a href="#">reporting-org</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">title</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">participating-org</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">other-identifier</a>
<ul>
<li>
<span>→</span>
<a href="#">owner-org</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">activity-status</a></li>
<li>
<span>→</span>
<a href="#">activity-date</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">contact-info</a>
<ul>
<li>
<span>→</span>
<a href="#">organisation</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">department</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">person-name</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">job-title</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">telephone</a></li>
<li><a href="#">email</a></li>
<li><a href="#">website</a></li>
<li>
<span>→</span>
<a href="#">mailing-address</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">activity-scope</a></li>
<li>
<span>→</span>
<a href="#">recipient-country</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">recipient-region</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">location</a>
<ul>
<li><a href="#">location-reach</a></li>
<li><a href="#">location-id</a></li>
<li>
<span>→</span>
<a href="#">name</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">activity-description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">administrative</a></li>
<li>
<span>→</span>
<a href="#">point</a>
<ul>
<li><a href="#">pos</a></li>
</ul>
</li>
<li><a href="#">exactness</a></li>
<li><a href="#">location-class</a></li>
<li><a href="#">feature-designation</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">sector</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">tag</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">country-budget-items</a>
<ul>
<li>
<span>→</span>
<a href="#">budget-item</a>
<ul>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">humanitarian-scope</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">policy-marker</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">collaboration-type</a></li>
<li><a href="#">default-flow-type</a></li>
<li><a href="#">default-finance-type</a></li>
<li><a href="#">default-aid-type</a></li>
<li><a href="#">default-tied-status</a></li>
<li>
<span>→</span>
<a href="#">budget</a>
<ul>
<li><a href="#">period-start</a></li>
<li><a href="#">period-end</a></li>
<li><a href="#">value</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">planned-disbursement</a>
<ul>
<li><a href="#">period-start</a></li>
<li><a href="#">period-end</a></li>
<li><a href="#">value</a></li>
<li>
<span>→</span>
<a href="#">provider-org</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">receiver-org</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">capital-spend</a></li>
<li>
<span>→</span>
<a href="#">transaction</a>
<ul>
<li><a href="#">transaction-type</a></li>
<li><a href="#">transaction-date</a></li>
<li><a href="#">value</a></li>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">provider-org</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">receiver-org</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">disbursement-channel</a></li>
<li>
<span>→</span>
<a href="#">sector</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">recipient-country</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">recipient-region</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">flow-type</a></li>
<li><a href="#">finance-type</a></li>
<li><a href="#">aid-type</a></li>
<li><a href="#">tied-status</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">document-link</a>
<ul>
<li>
<span>→</span>
<a href="#">title</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">category</a></li>
<li><a href="#">language</a></li>
<li><a href="#">document-date</a></li>
</ul>
</li>
<li><a href="#">related-activity</a></li>
<li><a href="#">legacy-data</a></li>
<li>
<span>→</span>
<a href="#">conditions</a>
<ul>
<li>
<span>→</span>
<a href="#">condition</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">result</a>
<ul>
<li>
<span>→</span>
<a href="#">title</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">document-link</a>
<ul>
<li>
<span>→</span>
<a href="#">title</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">category</a></li>
<li><a href="#">language</a></li>
<li><a href="#">document-date</a></li>
</ul>
</li>
<li><a href="#">reference</a></li>
<li>
<span>→</span>
<a href="#">indicator</a>
<ul>
<li>
<span>→</span>
<a href="#">title</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">document-link</a>
<ul>
<li>
<span>→</span>
<a href="#">title</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">category</a></li>
<li><a href="#">language</a></li>
<li><a href="#">document-date</a></li>
</ul>
</li>
<li><a href="#">reference</a></li>
<li>
<span>→</span>
<a href="#">baseline</a>
<ul>
<li><a href="#">location</a></li>
<li><a href="#">dimension</a></li>
<li>
<span>→</span>
<a href="#">document-link</a>
<ul>
<li>
<span>→</span>
<a href="#">title</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">category</a></li>
<li><a href="#">language</a></li>
<li><a href="#">document-date</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">comment</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">period</a>
<ul>
<li><a href="#">period-start</a></li>
<li><a href="#">period-end</a></li>
<li>
<span>→</span>
<a href="#">target</a>
<ul>
<li><a href="#">location</a></li>
<li><a href="#">dimension</a></li>
<li>
<span>→</span>
<a href="#">comment</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">document-link</a>
<ul>
<li>
<span>→</span>
<a href="#">title</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">category</a></li>
<li><a href="#">language</a></li>
<li><a href="#">document-date</a></li>
</ul>
</li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">actual</a>
<ul>
<li><a href="#">location</a></li>
<li><a href="#">dimension</a></li>
<li>
<span>→</span>
<a href="#">comment</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">document-link</a>
<ul>
<li>
<span>→</span>
<a href="#">title</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">category</a></li>
<li><a href="#">language</a></li>
<li><a href="#">document-date</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">crs-add</a>
<ul>
<li><a href="#">other-flags</a></li>
<li>
<span>→</span>
<a href="#">loan-terms</a>
<ul>
<li><a href="#">repayment-type</a></li>
<li><a href="#">repayment-plan</a></li>
<li><a href="#">commitment-date</a></li>
<li><a href="#">repayment-first-date</a></li>
<li><a href="#">repayment-final-date</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">loan-status</a>
<ul>
<li><a href="#">interest-received</a></li>
<li><a href="#">principal-outstanding</a></li>
<li><a href="#">principal-arrears</a></li>
<li><a href="#">interest-arrears</a></li>
</ul>
</li>
<li><a href="#">channel-code</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">fss</a>
<ul>
<li><a href="#">forecast</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">Organisation Standard</a>
<ul>
<li>
<span>→</span>
<a href="#">Elements</a>
<ul>
<li>
<span>→</span>
<a href="#">iati-organisations</a>
<ul>
<li>
<span>→</span>
<a href="#">iati-organisation</a>
<ul>
<li><a href="#">organisation-identifier</a></li>
<li>
<span>→</span>
<a href="#">name</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">reporting-org</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">total-budget</a>
<ul>
<li><a href="#">period-start</a></li>
<li><a href="#">period-end</a></li>
<li><a href="#">value</a></li>
<li>
<span>→</span>
<a href="#">budget-line</a>
<ul>
<li><a href="#">value</a></li>
<li><a href="#">narrative</a></li>
</ul>
</li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">recipient-org-budget</a>
<ul>
<li>
<span>→</span>
<a href="#">recipient-org</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">period-start</a></li>
<li><a href="#">period-end</a></li>
<li><a href="#">value</a></li>
<li>
<span>→</span>
<a href="#">budget-line</a>
<ul>
<li><a href="#">value</a></li>
<li><a href="#">narrative</a></li>
</ul>
</li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">recipient-region-budget</a>
<ul>
<li>
<span>→</span>
<a href="#">recipient-region</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">period-start</a></li>
<li><a href="#">period-end</a></li>
<li><a href="#">value</a></li>
<li>
<span>→</span>
<a href="#">budget-line</a>
<ul>
<li><a href="#">value</a></li>
<li><a href="#">narrative</a></li>
</ul>
</li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">recipient-country-budget</a>
<ul>
<li>
<span>→</span>
<a href="#">recipient-country</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">period-start</a></li>
<li><a href="#">period-end</a></li>
<li><a href="#">value</a></li>
<li>
<span>→</span>
<a href="#">budget-line</a>
<ul>
<li><a href="#">value</a></li>
<li><a href="#">narrative</a></li>
</ul>
</li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">total-expenditure</a>
<ul>
<li><a href="#">period-start</a></li>
<li><a href="#">period-end</a></li>
<li><a href="#">value</a></li>
<li>
<span>→</span>
<a href="#">expense-line</a>
<ul>
<li><a href="#">value</a></li>
<li><a href="#">narrative</a></li>
</ul>
</li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">document-link</a>
<ul>
<li>
<span>→</span>
<a href="#">recipient-country</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">title</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li>
<span>→</span>
<a href="#">description</a>
<ul>
<li><a href="#">narrative</a></li>
</ul>
</li>
<li><a href="#">category</a></li>
<li><a href="#">language</a></li>
<li><a href="#">document-date</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Namespaces & Extensions</a></li>
<li>
<span>→</span>
<a href="#">Codelists</a>
<ul>
<li><a href="#">IATI Codelist Management</a></li>
<li><a href="#">Codelist API</a></li>
<li><a href="#">Activity Date Type</a></li>
<li><a href="#">Activity Scope</a></li>
<li><a href="#">Activity Status</a></li>
<li><a href="#">Aid Type</a></li>
<li><a href="#">Aid Type (category)</a></li>
<li><a href="#">Aid Type Vocabulary</a></li>
<li><a href="#">Budget Identifier</a></li>
<li><a href="#">Budget Identifier Sector</a></li>
<li><a href="#">Budget Identifier Sector (category)</a></li>
<li><a href="#">Budget Identifier Vocabulary</a></li>
<li><a href="#">Budget Not Provided</a></li>
<li><a href="#">Budget Status</a></li>
<li><a href="#">Budget Type</a></li>
<li><a href="#">CRS Additional Other Flags</a></li>
<li><a href="#">CRS Channel Code</a></li>
<li><a href="#">Cash and Voucher Modalities</a></li>
<li><a href="#">Collaboration Type</a></li>
<li><a href="#">Condition Type</a></li>
<li><a href="#">Contact Type</a></li>
<li><a href="#">Country</a></li>
<li><a href="#">Currency</a></li>
<li><a href="#">Description Type</a></li>
<li><a href="#">Disbursement Channel</a></li>
<li><a href="#">Document Category</a></li>
<li><a href="#">Document Category (category)</a></li>
<li><a href="#">EarmarkingCategory</a></li>
<li><a href="#">File Format</a></li>
<li><a href="#">Finance Type</a></li>
<li><a href="#">Finance Type (category)</a></li>
<li><a href="#">Flow Type</a></li>
<li><a href="#">Gazetteer Agency</a></li>
<li><a href="#">Geographic Exactness</a></li>
<li><a href="#">Geographic Location Class</a></li>
<li><a href="#">Geographic Location Reach</a></li>
<li><a href="#">Geographic Vocabulary</a></li>
<li><a href="#">Geographical Precision</a></li>
<li><a href="#">Humanitarian Scope Type</a></li>
<li><a href="#">Humanitarian Scope Vocabulary</a></li>
<li><a href="#">IATI Organisation Identifier</a></li>
<li><a href="#">Indicator Measure</a></li>
<li><a href="#">Indicator Vocabulary</a></li>
<li><a href="#">Language</a></li>
<li><a href="#">Loan Repayment Period</a></li>
<li><a href="#">Loan Repayment Type</a></li>
<li><a href="#">Location Type</a></li>
<li><a href="#">Location Type (category)</a></li>
<li><a href="#">Organisation Identifier</a></li>
<li><a href="#">Organisation Registration Agency</a></li>
<li><a href="#">Organisation Role</a></li>
<li><a href="#">Organisation Type</a></li>
<li><a href="#">Other Identifier Type</a></li>
<li><a href="#">Policy Marker</a></li>
<li><a href="#">Policy Marker Vocabulary</a></li>
<li><a href="#">Policy Significance</a></li>
<li><a href="#">Publisher Type</a></li>
<li><a href="#">Region</a></li>
<li><a href="#">Region Vocabulary</a></li>
<li><a href="#">Related Activity Type</a></li>
<li><a href="#">Result Type</a></li>
<li><a href="#">Result Vocabulary</a></li>
<li><a href="#">DAC 5 Digit Sector</a></li>
<li><a href="#">DAC 3 Digit Sector</a></li>
<li><a href="#">Sector Vocabulary</a></li>
<li><a href="#">Tag Vocabulary</a></li>
<li><a href="#">Tied Status</a></li>
<li><a href="#">Transaction Type</a></li>
<li><a href="#">UN Sustainable Development Goals (SDG)</a></li>
<li><a href="#">UN Sustainable Development Goals (SDG) Targets</a></li>
<li><a href="#">Verification Status</a></li>
<li><a href="#">Version</a></li>
<li><a href="#">Vocabulary</a></li>
</ul>
</li>
<li><a href="#">Schema</a></li>
<li>
<span>→</span>
<a href="#">Rulesets</a>
<ul>
<li><a href="#">Standard Ruleset</a></li>
<li><a href="#">IATI Ruleset Spec</a></li>
<li><a href="#">Ruleset development</a></li>
</ul>
</li>
</ul>
BenDarby
urlsangel
Ocre42
Sketch - https://marvelapp.com/4cfjg52/screen/59541860
This template is for a page of the reference. It contains:
<code>,<dl>/<dt>Want to use this actual content for the... content.
http://reference.iatistandard.org/203/activity-standard/iati-activities/
And then produce variants of this page for the following different types of content:
Design: http://iati.surge.sh/page-templates/09-1-reference