Fixes for IOS

rowanhogan · Sep 9, 2018 · b19863f · b19863f
1 parent 1b75bbf
commit b19863f
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 53 deletions.
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/index.html b/public/index.html
@@ -4,9 +4,16 @@
     <meta charset="utf-8">
     <title>Wikipadia - A beautiful, customisable Wikipedia reader.</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="Wikipadia">
+    <meta name="apple-mobile-web-app-status-bar-style" content="white" />
+    <meta name="application-name" content="Wikipadia">
+    <meta name="theme-color" content="#ffffff">
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png">
     <link href="https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700|Playfair+Display:700" rel="stylesheet">
   </head>
   <body>

diff --git a/src/components/header/index.js b/src/components/header/index.js
@@ -24,12 +24,13 @@ class Header extends Component {
     const { scrollY } = window
     const { scroll } = this.state
     const searchOpen = this.refs.header.querySelector('.search-results')
+    const hidden = scrollY > scroll
 
     if (searchOpen) {
       return
     }
 
-    this.setState({ scroll: scrollY, hidden: scrollY > scroll })
+    this.setState({ scroll: Math.max(scrollY, 0), hidden })
   }
 
   render() {

diff --git a/src/components/Loading/index.js → src/components/loading/index.js b/src/components/Loading/index.js → src/components/loading/index.js
diff --git a/src/routes/home/index.js b/src/routes/home/index.js
@@ -7,8 +7,9 @@ export default () => (
       <h1 className="page-title">Wikipadia</h1>
       <div className="blurb">
         <p>
-          <em>WikiPadia</em> is a beautiful, customisable Wikipedia reader. It
-          was specifically built for leisurely reading on an iPad.
+          <em>Wikipadia</em> is a beautiful, minimal{' '}
+          <a href="http://www.wikipedia.org">Wikipedia</a> reader. It was
+          specifically built for leisurely reading on an iPad.
         </p>
         <p>
           <a href="https://github.com/rowanhogan/wikipadia">Source code</a>

diff --git a/src/routes/media/index.js b/src/routes/media/index.js
@@ -71,6 +71,9 @@ export default class extends Component {
                   )
                 })}
               </dl>
+              <a href={content.descriptionshorturl} target="_blank">
+                View more
+              </a>
             </div>
           </div>
         ) : error ? (

diff --git a/src/styles/_home.scss b/src/styles/_home.scss
@@ -52,7 +52,7 @@
     }
   }
 
-  @media (min-width: 48rem) {
+  @media (min-width: 52rem) {
     #mp-upper {
       tr {
         display: flex;
@@ -87,6 +87,11 @@
     text-align: center;
   }
 
+  #mp-tfa-img img {
+    display: block;
+    margin: auto;
+  }
+
   #mp-tfp img {
     width: 100%;
   }

diff --git a/src/styles/_page.scss b/src/styles/_page.scss
@@ -111,31 +111,15 @@ div.hatnote {
   line-height: 1.5em;
 }
 
-a {
-  color: dodgerblue;
-
-  &:visited {
-    color: mediumpurple;
-  }
-
-  &:focus {
-    color: black;
-    outline: 0;
-  }
-}
-
-img {
-  max-width: 100%;
-}
-
 table {
   margin: 1.5rem auto;
+  table-layout: fixed;
   border-spacing: 0;
+  border-collapse: collapse;
 
   &.infobox {
     font-size: 90%;
     border: 0;
-    table-layout: fixed;
 
     &.geography,
     &.vcard,
@@ -196,9 +180,7 @@ table {
 
   &.wikitable {
     font-size: 90%;
-    border-spacing: 0;
-    border-collapse: collapse;
-    border-right: thin solid #ddd;
+    // border-right: thin solid #ddd;
 
     caption {
       margin: 0 0 0.5em;
@@ -241,6 +223,12 @@ table.mbox-small {
   display: none;
 }
 
+.plainlist ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 code,
 pre {
   background-color: whitesmoke;

diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
@@ -18,14 +18,15 @@ body {
 }
 
 a {
-  color: dodgerblue;
+  color: #1565c0;
 
   &:visited {
-    color: mediumpurple;
+    color: #673ab7;
   }
 
-  &:focus {
-    color: black;
+  &:focus,
+  &:active {
+    color: #0d47a1;
     outline: 0;
   }
 }
@@ -68,3 +69,7 @@ dt {
 sup.reference {
   font-size: x-small;
 }
+
+abbr {
+  cursor: help;
+}
diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -212,11 +212,11 @@ body {
   padding: 0; }
 
 a {
-  color: dodgerblue; }
+  color: #1565c0; }
   a:visited {
-    color: mediumpurple; }
-  a:focus {
-    color: black;
+    color: #673ab7; }
+  a:focus, a:active {
+    color: #0d47a1;
     outline: 0; }
 
 img {
@@ -252,6 +252,9 @@ dt {
 sup.reference {
   font-size: x-small; }
 
+abbr {
+  cursor: help; }
+
 .home-page .blurb {
   text-align: center; }
 
@@ -284,7 +287,7 @@ sup.reference {
     .home-page #mp-topbanner ul li a {
       padding: 0.25rem; }
 
-@media (min-width: 48rem) {
+@media (min-width: 52rem) {
   .home-page #mp-upper tr {
     display: flex; }
     .home-page #mp-upper tr td {
@@ -307,6 +310,10 @@ sup.reference {
 .home-page #mp-otd p:first-child {
   text-align: center; }
 
+.home-page #mp-tfa-img img {
+  display: block;
+  margin: auto; }
+
 .home-page #mp-tfp img {
   width: 100%; }
 
@@ -452,24 +459,14 @@ div.hatnote {
   padding: 0;
   line-height: 1.5em; }
 
-a {
-  color: dodgerblue; }
-  a:visited {
-    color: mediumpurple; }
-  a:focus {
-    color: black;
-    outline: 0; }
-
-img {
-  max-width: 100%; }
-
 table {
   margin: 1.5rem auto;
-  border-spacing: 0; }
+  table-layout: fixed;
+  border-spacing: 0;
+  border-collapse: collapse; }
   table.infobox {
     font-size: 90%;
-    border: 0;
-    table-layout: fixed; }
+    border: 0; }
     table.infobox.geography, table.infobox.vcard, table.infobox.active {
       max-width: 100%; }
     table.infobox th[colspan='2'],
@@ -506,10 +503,7 @@ table {
     table.navbox th {
       background-color: transparent; }
   table.wikitable {
-    font-size: 90%;
-    border-spacing: 0;
-    border-collapse: collapse;
-    border-right: thin solid #ddd; }
+    font-size: 90%; }
     table.wikitable caption {
       margin: 0 0 0.5em; }
     table.wikitable th,
@@ -540,6 +534,11 @@ table.mbox-small {
 .metadata.plainlinks {
   display: none; }
 
+.plainlist ul {
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+
 code,
 pre {
   background-color: whitesmoke;
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,6 +71,9 @@ export default class extends Component { @@
                       )
                     })}
                   </dl>
+                  <a href={content.descriptionshorturl} target="_blank">
+                    View more
+                  </a>
                 </div>
               </div>
             ) : error ? (
@@ Expand Down @@