maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add nav buttons to pwa desktop (#2484)

Browse source
This commit is contained in:
Ben Halpern 2019-04-18 11:35:00 -04:00 • committed by GitHub
parent b374975edd
commit 308f7a74e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 185 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
app/assets/images/keyboard-left-arrow-button.svg Normal file
View file

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="306px" height="306px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve">
<g>
<g id="chevron-left">
<polygon points="247.35,35.7 211.65,0 58.65,153 211.65,306 247.35,270.3 130.05,153 "/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 793 B

41
app/assets/images/keyboard-right-arrow-button.svg Normal file
View file

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="306px" height="306px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve">
<g>
<g id="chevron-right">
<polygon points="94.35,0 58.65,35.7 175.95,153 58.65,270.3 94.35,306 247.35,153 "/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 791 B

43
app/assets/images/refresh-button.svg Normal file
View file

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="408px" height="408px" viewBox="0 0 408 408" style="enable-background:new 0 0 408 408;" xml:space="preserve">
<g>
<g id="refresh">
<path d="M346.8,61.2C311.1,22.95,260.1,0,204,0C91.8,0,0,91.8,0,204s91.8,204,204,204c94.35,0,173.4-66.3,196.35-153H346.8
C326.4,313.65,270.3,357,204,357c-84.15,0-153-68.85-153-153c0-84.15,68.85-153,153-153c43.35,0,79.05,17.85,107.1,45.9
l-81.6,81.6H408V0L346.8,61.2z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 976 B

1
app/assets/javascripts/initializePage.js.erb
View file

@ -41,6 +41,7 @@ function callInitalizers(){
initializeAdditionalContentBoxes();
initializeTimeFixer();
initializeDashboardSort();
initializePWAFunctionality();
if (!initializeLiveArticle.called){
initializeLiveArticle();

19
app/assets/javascripts/initializers/initializePWAFunctionality.js Normal file
View file

@ -0,0 +1,19 @@
function initializePWAFunctionality() {
if (window.matchMedia('(display-mode: standalone)').matches) {
document
.getElementById('pwa-nav-buttons')
.classList.add('pwa-nav-buttons--showing');
document.getElementById('app-back-button').onclick = function(e) {
e.preventDefault();
window.history.back();
};
document.getElementById('app-forward-button').onclick = function(e) {
e.preventDefault();
window.history.forward();
};
document.getElementById('app-refresh-button').onclick = function(e) {
e.preventDefault();
window.location.reload();
};
}
}

2
app/assets/javascripts/manifest.json.erb
View file

@ -6,7 +6,7 @@
"display": "standalone",
"background_color": "#000000",
"theme_color": "#000000",
"homepage_url": "https://dev.to",
"homepage_url": "<%= ApplicationConfig["APP_PROTOCOL"] %><%= ApplicationConfig["APP_DOMAIN"] %>",
"icons": [{
"src": "<%= image_path "devlogo-pwa-192.png" %>",
"sizes": "192x192",

31
app/assets/stylesheets/top-bar.scss
View file

@ -30,6 +30,37 @@
width: 1250px;
margin: auto;
position: relative;
.pwa-nav-buttons {
position: absolute;
top: 17px;
left: -200px;
display: none;
button {
background: transparent;
border: 0px;
width: 28px;
text-align: center;
opacity: 0.75;
filter: invert(0);
filter: var(--theme-social-icon-invert, invert(0));
img {
width: 15px;
height: 15px;
}
&:hover {
opacity: 1;
}
}
@media screen and (min-width: 950px) {
left: 88px;
&.pwa-nav-buttons--showing {
display: block;
}
}
@media screen and (min-width: 1439px) {
left: -88px;
}
}
a {
&:active {
opacity: 0.8;

6
app/views/layouts/_footer.html.erb
View file

@ -2,9 +2,9 @@
<div id="footer-container" class="container <%= "centered-footer" unless current_page.include?("stories-show") %>">
<div class="inner-footer-container">
<a href="/">Home</a> <a href="/about">About</a> <a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Use</a> <a href="/contact">Contact</a> <a href="/code-of-conduct">Code of Conduct</a> <br/>
<%= ApplicationConfig["COMMUNITY_NAME"] %> Community copyright 2016 - <%= Time.new.year %>&nbsp; 🔥
<a href="/terms">Terms of Use</a> <a href="/contact">Contact</a> <a href="/code-of-conduct">Code of Conduct</a> br/>
<%= ApplicationConfig["COMMUNITY_NAME"] %> Community copyright 2016 - <%= Time.current.year %>&nbsp; 🔥
</div>
</div>
</footer>
<%= javascript_include_tag 'hello-dev.js' , async: true %>
<%= javascript_include_tag "hello-dev.js", defer: true %>

5
app/views/layouts/_top_bar.html.erb
View file

@ -2,6 +2,11 @@
</div>
<div class="top-bar" id="top-bar">
<nav>
<div id="pwa-nav-buttons" class="pwa-nav-buttons">
<button id="app-back-button"><img src="<%= asset_path("keyboard-left-arrow-button.svg") %>" /></button>
<button id="app-forward-button"><img src="<%= asset_path("keyboard-right-arrow-button.svg") %>" /></button>
<button id="app-refresh-button"><img src="<%= asset_path("refresh-button.svg") %>" /></button>
</div>
<a href="#articles-list" class="skip-content-link">Skip to content</a>
<a href="/" class="logo-link" id="logo-link" aria-label="<%= ApplicationConfig["COMMUNITY_NAME"] %> Home"><%= logo_svg %></a>
<div id="nav-search-form-root">