From 891859680a1565cead8fe3dca771449b5e1e3035 Mon Sep 17 00:00:00 2001
From: RobinLinus <robinlinus@users.noreply.github.com>
Date: Sat, 22 Sep 2018 05:55:09 +0200
Subject: [PATCH] Refactor about page

---
 client/index.html |  90 +++++++++++++++++++----------------
 client/styles.css | 119 +++++++++++++++++++++-------------------------
 2 files changed, 102 insertions(+), 107 deletions(-)
diff --git a/client/index.html b/client/index.html
index 629f84b..ff6eb9e 100644
--- a/client/index.html
+++ b/client/index.html
@@ -36,6 +36,18 @@
 </head>
 
 <body>
+    <header class="row-reverse">
+        <a href="#about" class="icon-button" title="About Snapdrop">
+            <svg class="icon">
+                <use xlink:href="#info-outline" />
+            </svg>
+        </a>
+        <a href="#" id="notification" class="icon-button" title="Enable Notifications" hidden>
+            <svg class="icon">
+                <use xlink:href="#notifications" />
+            </svg>
+        </a>
+    </header>
     <!-- Peers -->
     <x-peers class="center"></x-peers>
     <x-no-peers>
@@ -97,47 +109,41 @@
     <div class="toast-container full center">
         <x-toast class="row" shadow="1" id="toast">File Transfer Completed</x-toast>
     </div>
-    <!-- Info Page -->
-    <div id="info" class="full center column">
-        <a href="#" class="close icon-button">
-            <svg class="icon">
-                <use xlink:href="#close" />
+    <!-- About Page -->
+    <x-about id="about" class="full center column">
+        <section class="center column fade-in">
+            <header class="row-reverse">
+                <a href="#" class="close icon-button">
+                    <svg class="icon">
+                        <use xlink:href="#close" />
+                    </svg>
+                </a>
+            </header>
+            <svg class="icon logo">
+                <use xlink:href="#wifi-tethering" />
             </svg>
-        </a>
-        <svg class="icon logo">
-            <use xlink:href="#wifi-tethering" />
-        </svg>
-        <h1>Snapdrop</h1>
-        <div class="font-subheading">The easiest way to transfer files across devices.</div>
-        <div class="row">
-            <a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop" title="Snapdrop on Github">
-                <svg class="icon">
-                    <use xlink:href="#github" />
-                </svg>
-            </a>
-            <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https://snapdrop.net%20by%20@robin_linus%20&" title="tweet about Snapdrop">
-                <svg class="icon">
-                    <use xlink:href="#twitter" />
-                </svg>
-            </a>
-            <a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop#frequently-asked-questions" title="frequently asked questions">
-                <svg class="icon">
-                    <use xlink:href="#help-outline" />
-                </svg>
-            </a>
-        </div>
-    </div>
-    <a href="#info" class="icon-button" title="about Snapdrop">
-        <svg class="icon">
-            <use xlink:href="#info-outline" />
-        </svg>
-        <div class="info-background"></div>
-    </a>
-    <a id="notification" class="icon-button" hidden title="enable Notifications">
-        <svg class="icon">
-            <use xlink:href="#notifications" />
-        </svg>
-    </a>
+            <h1>Snapdrop</h1>
+            <div class="font-subheading">The easiest way to transfer files across devices.</div>
+            <div class="row">
+                <a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop" title="Snapdrop on Github">
+                    <svg class="icon">
+                        <use xlink:href="#github" />
+                    </svg>
+                </a>
+                <a class="icon-button" target="_blank" href="https://twitter.com/intent/tweet?text=https://snapdrop.net%20by%20@robin_linus%20&" title="Tweet about Snapdrop">
+                    <svg class="icon">
+                        <use xlink:href="#twitter" />
+                    </svg>
+                </a>
+                <a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop#frequently-asked-questions" title="Frequently asked questions">
+                    <svg class="icon">
+                        <use xlink:href="#help-outline" />
+                    </svg>
+                </a>
+            </div>
+        </section>
+        <x-background></x-background>
+    </x-about>
     <!-- SVG Icon Library -->
     <svg style="display: none;">
         <symbol id=wifi-tethering viewBox="0 0 24 24">
@@ -172,8 +178,8 @@
         </g>
     </svg>
     <!-- Scripts -->
-    <script type="text/javascript" src="scripts/network.js"></script>
-    <script type="text/javascript" src="scripts/ui.js"></script>
+    <script src="scripts/network.js"></script>
+    <script src="scripts/ui.js"></script>
     <!-- Sounds -->
     <audio id="blop" preload="auto" autobuffer="true">
         <source src="/sounds/blop.mp3" type="audio/mpeg">
diff --git a/client/styles.css b/client/styles.css
index 121ea7b..c3a638a 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -6,6 +6,7 @@
     --peer-width: 120px;
 }
 
+
 /* Layout */
 
 html {
@@ -57,10 +58,22 @@ body {
     bottom: 0;
 }
 
+header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 56px;
+    align-items: center;
+    padding: 16px;
+    box-sizing: border-box;
+}
+
 [hidden] {
     display: none !important;
 }
 
+
 /* Typography */
 
 body {
@@ -112,7 +125,7 @@ body {
 
 a {
     text-decoration: none;
-    color: var(--primary-color);
+    color: currentColor;
     cursor: pointer;
 }
 
@@ -153,7 +166,11 @@ a {
     }
 }
 
+/* Main Header */
 
+body>header a {
+    margin-left: 8px;
+}
 
 /* Peers List */
 
@@ -164,8 +181,6 @@ x-peers {
     z-index: 2;
 }
 
-
-
 /* Empty Peers List */
 
 x-no-peers {
@@ -177,7 +192,8 @@ x-no-peers {
     animation-fill-mode: backwards;
 }
 
-x-no-peers h2 {
+x-no-peers h2,
+x-no-peers a {
     color: var(--primary-color);
 }
 
@@ -266,6 +282,8 @@ x-peer[drop] x-icon {
     transform: scale(1.1);
 }
 
+
+
 /* Footer */
 
 footer {
@@ -294,7 +312,6 @@ footer .font-body2 {
 }
 
 
-
 /* Dialog */
 
 x-dialog x-background {
@@ -335,7 +352,6 @@ x-dialog .row-reverse>.button {
 }
 
 
-
 /* Receive Dialog */
 
 #receiveTextDialog #text {
@@ -351,15 +367,12 @@ x-dialog .row-reverse>.button {
 
 
 
-
 /* Button */
 
 .button {
     padding: 0 16px;
     box-sizing: border-box;
     min-height: 36px;
-    border: none;
-    outline: none;
     min-width: 100px;
     font-size: 14px;
     line-height: 24px;
@@ -381,6 +394,8 @@ x-dialog .row-reverse>.button {
     justify-content: center;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     touch-action: manipulation;
+    border: none;
+    outline: none;
 }
 
 .button:before,
@@ -405,16 +420,18 @@ x-dialog .row-reverse>.button {
     border-radius: 8px;
 }
 
-.button:focus:before {
+.button:focus:before,
+.icon-button:focus:before {
     opacity: 0.2;
 }
 
+
+
 button::-moz-focus-inner {
     border: 0;
 }
 
 
-
 /* Icon Button */
 
 .icon-button {
@@ -444,74 +461,56 @@ input {
 }
 
 
-
 /* Info Animation */
 
-#info {
-    text-align: center;
+#about {
     color: white;
-    transition: opacity 300ms;
-    will-change: opacity;
     z-index: 11;
-    transition-delay: 300ms;
+    overflow: hidden;
+    pointer-events: none;
 }
 
-#info:not(:target) {
+#about .fade-in {
+    transition: opacity 300ms;
+    will-change: opacity;
+    transition-delay: 300ms;
+    z-index: 11;
+    pointer-events: all;
+}
+
+#about:not(:target) .fade-in {
     opacity: 0;
     pointer-events: none;
     transition-delay: 0;
 }
 
-#info .logo {
+#about .logo {
     --icon-size: 96px;
 }
 
-#info .close {
+#about x-background {
     position: absolute;
-    top: 12px;
-    right: 12px;
-    color: white;
-    border-radius: 50%;
-}
-
-.info-background {
-    position: relative;
-}
-
-.info-background:before {
-    content: '';
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    top: -20px;
-    left: -32px;
+    top: calc(32px - 200px);
+    right: calc(32px - 200px);
+    width: 400px;
+    height: 400px;
     border-radius: 50%;
     background: var(--primary-color);
     transform: scale(0);
-    transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
     will-change: transform;
+    transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
+    z-index: -1;
 }
 
-#info:target+a>.info-background:before {
-    transform: scale(100);
+#about:target x-background {
+    transform: scale(10);
 }
 
-a[href="#info"] {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    color: #333;
-    z-index: 10;
-}
-
-#info .row a {
-    color: currentColor;
+#about .row a {
     margin: 8px 8px -16px;
 }
 
 
-
-
 /* Loading Indicator */
 
 .progress {
@@ -544,7 +543,6 @@ a[href="#info"] {
 }
 
 
-
 /* Toast */
 
 .toast-container {
@@ -559,7 +557,6 @@ x-toast {
     bottom: 24px;
     width: 100%;
     max-width: 344px;
-    border-radius: 8px;
     background-color: #323232;
     color: rgba(255, 255, 255, 0.95);
     align-items: center;
@@ -569,7 +566,7 @@ x-toast {
     transition: opacity 200ms, transform 300ms ease-out;
     cursor: default;
     line-height: 24px;
-    border-radius: 6px;
+    border-radius: 8px;
     pointer-events: all;
 }
 
@@ -578,12 +575,6 @@ x-toast:not([show]):not(:hover) {
     transform: translateY(100px);
 }
 
-#notification {
-    position: absolute;
-    right: 56px;
-    top: 12px;
-    color: #333;
-}
 
 /* Instructions */
 
@@ -603,12 +594,10 @@ x-peers:empty~x-instructions {
     opacity: 0;
 }
 
+
 /* Responsive Styles */
 
 @media (min-height: 800px) {
-    x-toast {
-        right: 24px;
-    }
     footer {
         margin-bottom: 16px;
     }
@@ -625,7 +614,7 @@ screen and (min-width: 1100px) {
     x-instructions {
         top: 24px;
     }
-    
+
     footer .logo {
         --icon-size: 40px;
     }
