UI Tweakes

thespeck · Mar 16, 2024 · 5ccd917 · 5ccd917
1 parent b214b13
commit 5ccd917
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -14,18 +14,20 @@
     <header>
         <div class="header-content">
             <div class="site-id">
-                <a href="./">
-                    <h2>Thumbnailed</h2>
-                </a>
+                <h2><a href="./">Thumbnailed</a></h2>
             </div>
-            <div class="input-container">
+            <!-- <div class="input-container">
                 <input id="url-input" name="url-input" type="url" placeholder="YouTube video URL" required pattern="">
                 <button id="input-btn" type="submit">Get Thumbnail</button>
-            </div>
+            </div> -->
         </div>
     </header>
     <main>
         <div id="display" class="image-display">
+            <div class="input-container">
+                <input id="url-input" name="url-input" type="url" placeholder="YouTube video URL" required pattern="">
+                <button id="input-btn" type="submit">Get Thumbnail</button>
+            </div>
             <div class="image-container hidden">
                 <div class="img-description"><span>Maximum</span></div>
                 <img id="img-0" class="thumbnail" src="" width="1280" height="720"

diff --git a/script.js b/script.js
@@ -15,9 +15,7 @@ let button = document.getElementById('input-btn');
  */
 let link = document.querySelector("link[rel~='icon']");
 
-
 input.addEventListener('focus', () => { input.select() });
-input.addEventListener('change', processThumbnail);
 input.addEventListener('input', processThumbnail);
 button.addEventListener('click', processThumbnail);
 images.forEach(image => image.addEventListener('load', e => {
@@ -32,6 +30,11 @@ images.forEach(image => image.addEventListener('load', e => {
     }
 }));
 
+let id = document.URL.split('#')[1];
+if (id?.length == 11) {
+    input.value = `https://www.youtube.com/watch?v=${id}`;
+}
+
 processThumbnail();
 if (!link) {
     link = document.createElement('link');
@@ -64,6 +67,7 @@ function processThumbnail() {
     for (let i = 0; i < images.length; i++) {
         images[i].src = thumbURLS[i];
     }
+    window.location.assign(`#${id}`)
 }
 
 /**

diff --git a/styles.css b/styles.css
@@ -52,10 +52,8 @@ header {
     display: flex;
     justify-content: center;
     align-items: center;
-    position: fixed;
-    width: 100%;
-    top: 0;
-    left: 0;
+    position: sticky;
+    top: -80;
     height: 80px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.2);
 }
@@ -73,26 +71,34 @@ header {
 .site-id a {
     text-decoration: none;
     color: var(--text-color);
-    transition: outline 100ms linear, color 100ms ease-out;
+    transition: outline 150ms linear, color 150ms ease-in;
     user-select: none;
 }
 
 .site-id a:hover {
     color: var(--accent-color);
 }
 
-.site-id a:focus-visible {
+.site-id a:focus-visible, .site-id a:focus {
     outline: 2px solid var(--accent-color);
     outline-offset: 5px;
+    color: var(--accent-color);
 }
 
-main {
-    padding-top: 70px;
+.input-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 15px 0;
+    margin: auto;
+    width: 100%;
+    max-width: 1200px;
 }
 
+
 .input-container input, .input-container button {
     padding: 10px;
-    margin: 5px;
+    margin: 5px 0;
     border: 1px solid var(--text-color);
     border-radius: 5px;
     background-color: var(--background-color);
@@ -102,11 +108,18 @@ main {
 }
 
 .input-container button{
-    transition: outline 100ms linear, background-color 200ms ease-out, transition-color 200ms ease-out;
+    margin-left: 10px;
+    transition: outline 100ms linear, background-color 200ms ease-out, color 200ms ease-out;
 }
 
 .input-container input {
-    min-width: 44ch;
+    width: calc(44ch + 22px);
+}
+
+.input-container button:focus-visible {
+    border-color: var(--accent-color);
+    outline: 2px solid var(--accent-color);
+    color: var(--accent-color);
 }
 
 .input-container button:hover, .input-container button:active{
@@ -115,11 +128,6 @@ main {
     border: 1px solid var(--accent-color);
 }
 
-.input-container button:focus-visible {
-    border-color: var(--accent-color);
-    outline: 2px solid var(--accent-color) !important;
-}
-
 .input-container input:focus-visible {
     outline: 2px solid var(--accent-color);
 }
@@ -149,14 +157,14 @@ main {
 
 .image-container {
     display: flex;
-    justify-content: center;
+    justify-content: spacce-around;
     align-items: center;
     flex-direction: column;
     margin: 15px 0;
 }
 
 .image-container img {
-    width: 100%;
+    max-width: 100%;
     height: auto;
     border-radius: 10px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
@@ -171,4 +179,16 @@ main {
 
 .hidden {
     display: none;
+}
+
+@media screen and (max-width: 520px){
+    .input-container {
+        width: 100%;
+        flex-direction: column;
+        justify-content: center;
+    }
+    .input-container input, .input-container button {
+        width: 100%;
+        margin: 7.5px 0;
+    }
 }