Skip to content

Commit

Permalink
First pass at marking up a Pocket template for Fluent
Browse files Browse the repository at this point in the history 
There's more work to be done to wire it all up - the views aren't aware of the
Fluent side, yet
  • Loading branch information
@stevejalim
stevejalim committed Apr 27, 2022
1 parent 6f15ba8 commit 72e2437
Show file tree
Hide file tree
Showing 9 changed files with 207 additions and 65 deletions.
45 changes: 27 additions & 18 deletions bedrock/pocket/templates/pocket/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@

{% extends "pocket/base.html" %}

{% block page_title %}About Us{% endblock %}
{% block page_title %}{{ ftl('pocket-about-us') }}{% endblock %}

{% block page_desc %}Pocket empowers people to keep their minds focused, stimulated, and nourished. We’re powered by a community of interesting people with curious minds.{% endblock %}
{% block page_desc %}{{ ftl('pocket-about-us-page-desc') }}{% endblock %}

{% block pocket_css %}
{{ css_bundle('pocket-about') }}
Expand All @@ -20,45 +20,54 @@
<div class="intro-wrapper">
<section class="about-section first">
<div class="about-section-text-wrapper">
<h1 class="about-section-heading">Hi, we're Pocket.</h1>
<p class="about-section-body"> We’re powered by a community of interesting people with curious minds, and we empower people to keep their minds focused, stimulated, and nourished. Which makes us a refreshing change from other digital spaces.</p>
<h1 class="about-section-heading">{{ ftl('pocket-about-us-hi') }}</h1>
<p class="about-section-body">{{ ftl('pocket-about-powered-by-community-of-interesting-people') }}</p>
</div>
</section>
</div>
<section class="about-section second">
<div class="about-section-text-wrapper">
<h3 class="about-section-heading">Save your inspirations</h3>
<p class="about-section-body">If something catches your interest, there’s probably something to it. With our <a id="save-button-for-the-internet" href="https://getpocket.com/save-to-pocket"> save button for the internet</a> and our award-winning <a id="top-pocket-app" href="https://getpocket.com/add">Pocket app</a> you can save anything from across the web in a distraction free space, for you to focus and let the ideas flow.</p>
<h3 class="about-section-heading">{{ ftl('pocket-about-us-save-inspirations') }}</h3>
<p class="about-section-body">{{ ftl('pocket-about-if-something-catches-your-interest',
savetopocket='/save-to-pocket',
addtopocket='/add' ) }}
</p>
</div>
</section>
<section class="about-section third">
<div class="about-section-text-wrapper">
<h3 class="about-section-heading">Find hidden gems</h3>
<p class="about-section-body">The internet is filled with buried treasures and our vibrant, well-read community has a real knack for finding them. Through the act of saving and consuming content, Pocket users signal where fascination can be found.</p>
<p class="about-section-body">Our curators vet the most fascinating finds to ensure they’re from a diverse range of publications with a track record of trustworthy and accurate coverage, and we share them on <a id="home-page" href="https://getpocket.com/">GetPocket.com</a>, <a id="pocket-and-firefox" href="https://getpocket.com/pocket-and-firefox">Pocket for Firefox</a>, in our <a id="daily-newsletter" href="https://getpocket.com/explore/pocket-hits-signup">daily newsletter</a>, and within the <a id="bottom-pocket-app" href="https://getpocket.com/add">Pocket app</a>. Our recommendations are available primarily in English and German, though we look forward to sharing in more languages in the future.</p>
<h3 class="about-section-heading">{{ ftl('pocket-about-find-hidden-gems')}}</h3>
<p class="about-section-body">{{ ftl('pocket-about-internet-filled-with-buried-treasures') }}</p>
<p class="about-section-body">{{ ftl('pocket-about-our-curators-vet-the-most-fascinating',
pockethome='/',
pockethomedomain='GetPocket.com',
pocketandfirefox='/pocket-and-firefox',
pocketdailynewsletter='/explore/pocket-hits-signup',
addtopocket='/add' ) }}
</p>
</div>
</section>
<section class="about-section fourth">
<div class="about-section-text-wrapper">
<h3 class="about-section-heading">Use Pocket your way</h3>
<p class="about-section-body">There are lots of ways you can use Pocket. Some people use it to save stories throughout the day to read when they’re ready. Hunter-gatherer types use it to save all the things they want to read, watch, listen to, or buy. Others use Pocket to highlight key passages to help them grow, learn, and thrive.</p>
<p class="about-section-body">And some folks love exploring Pocket’s recommendations to find inspiration, challenge their views, and see the occasional cat (or dog) story. </p>
<h3 class="about-section-heading">{{ ftl('pocket-about-use-pocket-your-way') }}</h3>
<p class="about-section-body">{{ ftl('pocket-about-there-are-lots-of-ways') }}</p>
<p class="about-section-body">{{ ftl('pocket-about-some-folks-love-exploring') }}</p>
</div>
</section>
<section class="about-section fifth">
<div class="about-section-text-wrapper">
<h3 class="about-section-heading">Know it's good</h3>
<p class="about-section-body"> The internet’s only as good as the content you encounter, so — by saving and consuming with intent — together we make Pocket a brighter corner of the internet. And, as part of the Mozilla and Firefox family, we do all this with the same dedication to privacy you’ve come to expect from Firefox and Mozilla. </p>
<h3 class="about-section-heading">{{ ftl('pocket-about-know-its-good') }}</h3>
<p class="about-section-body">{{ ftl('pocket-about-internets-only-as-good-as') }}</p>
</div>
</section>
<section class="about-cta-section">
<h2 class="about-cta-heading">Welcome to the sunny side of the web.</h2>
<h2 class="about-cta-heading">{{ ftl('pocket-about-welcome-to-the-sunny-side') }}</h2>
<div class="cta-wrapper">
<a id="start-using-pocket" href="https://getpocket.com/signup">Start using Pocket</a>
<a id="start-using-pocket" href="https://getpocket.com/signup">{{ ftl('pocket-about-start-using-pocket') }}</a>
</div>
<hr/>
<p class="about-cta-body">Contact us for press inquiries at <a href="mailto:press@getpocket.com">press@getpocket.com</a>.</p>
<p class="about-cta-body">Download our images and press kit <a id="press-page" href="https://blog.getpocket.com/press/">here</a>.</p>
<p class="about-cta-body">{{ ftl('pocket-about-contact-us-press', pressemail='press@getpocket.com') }}</p>
<p class="about-cta-body">{{ ftl('pocket-about-download-press-kit', downloadurl='https://blog.getpocket.com/press/')}}</p>
</section>

{% include 'pocket/includes/footer.html' %}
Expand Down
53 changes: 27 additions & 26 deletions bedrock/pocket/templates/pocket/includes/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,94 +8,95 @@
<div class="pocket-footer-content">
<nav class="pocket-footer-primary">
<section class="pocket-footer-section">
<h6 class="pocket-footer-heading">Products</h6>
<h6 class="pocket-footer-heading">{{ ftl('pocket-footer-products') }}</h6>
<ul class="pocket-footer-list">
<li>
<a href="https://getpocket.com/explore" rel="external noopener" target="_blank">Must-read articles</a>
<a href="https://getpocket.com/explore" rel="external noopener" target="_blank">{{ ftl('pocket-footer-must-read-articles') }}</a>
</li>
<li>
<a href="https://getpocket.com/explore/pocket-hits" rel="external noopener" target="_blank">Daily newsletter</a>
<a href="https://getpocket.com/explore/pocket-hits" rel="external noopener" target="_blank">{{ ftl('pocket-footer-daily-newsletter')}}</a>
</li>
<li>
<a href="https://getpocket.com/premium" rel="external noopener" target="_blank">Pocket Premium</a>
<a href="https://getpocket.com/premium" rel="external noopener" target="_blank">{{ ftl('pocket-footer-pocket-premium') }}</a>
</li>
<li>
<a href="https://getpocket.com/welcome" rel="external noopener" target="_blank">Save to Pocket extensions</a>
<a href="https://getpocket.com/welcome" rel="external noopener" target="_blank">{{ ftl('pocket-footer-save-to-pocket-extensions') }}</a>
</li>
</ul>
</section>
<section class="pocket-footer-section">
<h6 class="pocket-footer-heading">Company</h6>
<h6 class="pocket-footer-heading">{{ ftl('pocket-footer-company') }}</h6>
<ul class="pocket-footer-list">
<li>
<a href="https://getpocket.com/about" rel="external noopener" target="_blank">About</a>
<a href="https://getpocket.com/about" rel="external noopener" target="_blank">{{ ftl('pocket-footer-about') }}</a>
</li>
<li>
<a href="https://getpocket.com/jobs" rel="external noopener" target="_blank">Careers</a>
<a href="https://getpocket.com/jobs" rel="external noopener" target="_blank">{{ ftl('pocket-footer-careers') }}</a>

</li>
<li>
<a href="https://getpocket.com/blog" rel="external noopener" target="_blank">Blog</a>
<a href="https://getpocket.com/blog" rel="external noopener" target="_blank">{{ ftl('pocket-footer-blog') }}</a>

</li>
<ul>
</section>
<section class="pocket-footer-section">
<h6 class="pocket-footer-heading">Resources</h6>
<h6 class="pocket-footer-heading">{{ ftl('pocket-footer-resources') }}</h6>
<ul class="pocket-footer-list">
<li>
<a href="https://help.getpocket.com/" rel="external noopener" target="_blank">Get help</a>
<a href="https://help.getpocket.com/" rel="external noopener" target="_blank">{{ ftl('pocket-footer-get-help') }}</a>

</li>
<li>
<a href="https://getpocket.com/developer/" rel="external noopener" target="_blank">Developer API</a>
<a href="https://getpocket.com/developer/" rel="external noopener" target="_blank">{{ ftl('pocket-footer-developer-api') }}</a>

</li>
<li>
<a href="https://getpocket.com/publisher/" rel="external noopener" target="_blank">Pocket for publishers</a>
<a href="https://getpocket.com/publisher/" rel="external noopener" target="_blank">{{ ftl('pocket-footer-pocket-for-publishers') }}</a>
</li>
<li>
<a href="https://getpocket.com/sponsor/" rel="external noopener" target="_blank">Advertise</a>
<a href="https://getpocket.com/sponsor/" rel="external noopener" target="_blank">{{ ftl('pocket-footer-advertise') }}</a>
</li>
<ul>
</section>
<section class="pocket-footer-section">
<h6 class="pocket-footer-heading">Get the app</h6>
<h6 class="pocket-footer-heading">{{ ftl('pocket-footer-get-the-app') }}</h6>
<ul class="pocket-footer-list download-links">
<li>
<a class="app-download-link"
href="https://apps.apple.com/us/app/pocket-save-read-grow/id309601447" target="_blank"
rel="noopener noreferrer">
<img src="{{ static('img/pocket/apple-app-store-badge.svg') }}" alt="Download On the Apple App Store">
<img src="{{ static('img/pocket/apple-app-store-badge.svg') }}" alt="{{ ftl('pocket-footer-download-on-apple-app-store') }}">
</a>
</li>
<li>
<a class="app-download-link google-play-badge"
href="https://play.google.com/store/apps/details?id=com.ideashower.readitlater.pro"
target="_blank" rel="noopener noreferrer">
<img src="{{ static('img/pocket/google-play-badge.png') }}" alt="Get It On Google Play">
<img src="{{ static('img/pocket/google-play-badge.png') }}" alt="{{ ftl('pocket-footer-get-it-google-play') }}">
</a>
</li>
</ul>
</section>
</nav>
<div class="pocket-footer-secondary">
<div class="pocket-footer-legal-details">
<p class="pocket-footer-secondary-desc">Pocket is part of the <a href="https://www.mozilla.org/about/">Mozilla</a> family of products.</p>

<div class="legal" aria-label="Legal">
<span>© 2021 Read It Later, Inc.</span>
<a href="https://getpocket.com/privacy?src=footer_v2">Privacy policy</a>
<a href="https://getpocket.com/tos?src=footer_v2">Terms of service</a>
<button id="ot-sdk-btn" class="ot-sdk-show-settings">Cookie preferences</button>
<p class="pocket-footer-secondary-desc">
{{ ftl('pocket-footer-pocket-is-part-of-mozilla-family',
mozorgabout='https://www.mozilla.org/about/') }}</p>
<div class="legal" aria-label="{{ ftl('pocket-footer-aria-label-legal') }}">
<span>© 2021 {{ ftl ('-brand-name-read-it-later-inc') }}</span>
<a href="https://getpocket.com/privacy?src=footer_v2">{{ ftl ('pocket-footer-privacy-policy') }}</a>
<a href="https://getpocket.com/tos?src=footer_v2">{{ ftl ('pocket-footer-terms-of-service') }}</a>
<button id="ot-sdk-btn" class="ot-sdk-show-settings">{{ ftl ('pocket-footer-cookie-preferences') }}</button>
</div>
</div>
<ul class="pocket-footer-socials">
<li class="pocket-footer-socials-item">
<a href="https://twitter.com/pocket" class="pocket-footer-socials-item-link twitter" target="_blank" rel="external noopener noreferrer"><span>Twitter</span></a>
<a href="https://twitter.com/pocket" class="pocket-footer-socials-item-link twitter" target="_blank" rel="external noopener noreferrer"><span>{{ ftl ('-brand-name-twitter') }}</span></a>
</li>
<li class="pocket-footer-socials-item">
<a href="https://facebook.com/pocket" class="pocket-footer-socials-item-link facebook" target="_blank" rel="external noopener noreferrer"><span>Facebook</span></a>
<a href="https://facebook.com/pocket" class="pocket-footer-socials-item-link facebook" target="_blank" rel="external noopener noreferrer"><span>{{ ftl ('-brand-name-facebook') }}</span></a>
</li>
</ul>
</div>
Expand Down
24 changes: 12 additions & 12 deletions bedrock/pocket/templates/pocket/includes/mobile-nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,40 @@
#}

<div class="mobile-nav-wrapper" tabindex="-1">
<nav class="mobile-nav" role="dialog" aria-modal="true" aria-label="Pocket Mobile Menu">
<nav class="mobile-nav" role="dialog" aria-modal="true" aria-label="{{ ftl('pocket-mobile-nav-aria-label') }}">
<div class="mobile-nav-close">
<button class="mobile-nav-close-btn" data-tooltip="Close">Close the Pocket Mobile Menu</button>
<button class="mobile-nav-close-btn" data-tooltip="{{ ftl('pocket-mobile-nav-close-tooltip') }}">{{ ftl('pocket-mobile-nav-close-menu') }}</button>
</div>
<ul class="mobile-nav-list">
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link home" href="https://getpocket.com/home?src=navbar">Home<span class="beta">BETA</span></a>
<a class="mobile-nav-list-link home" href="https://getpocket.com/home?src=navbar">{{ ftl('pocket-nav-home') }}<span class="beta">{{ ftl('pocket-mobile-nav-beta') }}</span></a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link my-list" href="https://getpocket.com/my-list?src=navbar">My List</a>
<a class="mobile-nav-list-link my-list" href="https://getpocket.com/my-list?src=navbar">{{ ftl('pocket-nav-my-list') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link discover" href="https://getpocket.com/explore?src=navbar">Discover</a>
<a class="mobile-nav-list-link discover" href="https://getpocket.com/explore?src=navbar">{{ ftl('pocket-nav-discover') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link collections" href="https://getpocket.com/collections?src=navbar">Collections</a>
<a class="mobile-nav-list-link collections" href="https://getpocket.com/collections?src=navbar">{{ ftl('pocket-nav-collections') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link archive" href="https://getpocket.com/my-list/archive">Archive</a>
<a class="mobile-nav-list-link archive" href="https://getpocket.com/my-list/archive">{{ ftl('pocket-nav-archive') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link favorites" href="https://getpocket.com/my-list/favorites">Favorites</a>
<a class="mobile-nav-list-link favorites" href="https://getpocket.com/my-list/favorites">{{ ftl('pocket-nav-favorites') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link highlights" href="https://getpocket.com/my-list/highlights">Highlights</a>
<a class="mobile-nav-list-link highlights" href="https://getpocket.com/my-list/highlights">{{ ftl('pocket-nav-highlights') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link articles" href="https://getpocket.com/my-list/articles">Articles</a>
<a class="mobile-nav-list-link articles" href="https://getpocket.com/my-list/articles">{{ ftl('pocket-nav-articles') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link videos" href="https://getpocket.com/my-list/videos">Videos</a>
<a class="mobile-nav-list-link videos" href="https://getpocket.com/my-list/videos">{{ ftl('pocket-nav-videos') }}</a>
</li>
<li class="mobile-nav-list-item">
<a class="mobile-nav-list-link tags" href="https://getpocket.com/my-list/tags">All Tags</a>
<a class="mobile-nav-list-link tags" href="https://getpocket.com/my-list/tags">{{ ftl('pocket-nav-all-tags') }}</a>
</li>
</ul>
</nav>
Expand Down
Loading

0 comments on commit 72e2437

Please sign in to comment.