Merge pull request #23 from yungsamd17/dev

Merge branch "dev" -> "main"
yungsamd17 · Jan 31, 2024 · bf08833 · bf08833
2 parents bb80712 + 853cf84
commit bf08833
Show file tree

Hide file tree

Showing 10 changed files with 453 additions and 48 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Sam @yungsamd17
+Copyright (c) 2024 Sam @yungsamd17
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Sam's Twitch Live",
     "description": "Sam's Twitch Live: Your Following Channels, Constantly in View.",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "author": "Sam @yungsamd17",
     "homepage_url": "https://github.com/yungsamd17/Twitch-Live",
     "icons":
@@ -16,12 +16,13 @@
         "storage",
         "identity"
     ],
-    "background": {
+    "background":
+    {
         "service_worker": "src/js/background.js"
     },
     "action":
     {
         "default_title": "Sam's Twitch Live",
         "default_popup": "popup.html"
     }
-}
+}
diff --git a/popup.html b/popup.html
@@ -84,6 +84,21 @@ <h2 class="settings-header-text">Settings</h2>
                     </div>
                 </div>
                 <!-- Settings options -->
+                <div class="option-container">
+                    <div class="text-container">
+                        <label for="simpleViewToggle">Simple view
+                            <span info-label-3="Hides thumbnails and uptimes">
+                                <i class="fa-solid fa-circle-info"></i>
+                            </span>
+                        </label>
+                    </div>
+                    <div class="slider-container">
+                        <label class="switch">
+                            <input type="checkbox" id="simpleViewToggle">
+                            <span class="slider"></span>
+                        </label>
+                    </div>
+                </div>
                 <div class="option-container">
                     <div class="text-container">
                         <label for="openInNewWindowToggle">Open in a new window</label>
@@ -106,6 +121,21 @@ <h2 class="settings-header-text">Settings</h2>
                         </label>
                     </div>
                 </div>
+                <div class="option-container">
+                    <div class="text-container">
+                        <label for="showRaidButtonToggle">Copy raid command button 
+                            <span info-label-2="Adds a copy button next to channel name">
+                                <i class="fa-solid fa-circle-info"></i>
+                            </span>
+                        </label>
+                    </div>
+                    <div class="slider-container">
+                        <label class="switch">
+                            <input type="checkbox" id="showRaidButtonToggle">
+                            <span class="slider"></span>
+                        </label>
+                    </div>
+                </div>
                 <div class="option-container">
                     <div class="text-container">
                         <span>Background update interval</span>
@@ -133,15 +163,15 @@ <h2 class="settings-header-text">Settings</h2>
                 <!-- Settings footer link -->
                 <div class="settings-footer">
                     <div class="footer-container">
-                        <a class="settings-link" href="https://github.com/yungsamd17/Twitch-Live" target="_blank">
+                        <a class="settings-link github" href="https://github.com/yungsamd17/Twitch-Live" target="_blank">
                             <i class="fab fa-github"></i> GitHub</a>
-                        <a class="settings-link" href="https://ko-fi.com/yungsamd17" target="_blank">
+                        <a class="settings-link donate" href="https://ko-fi.com/yungsamd17" target="_blank">
                             <i class="fa-solid fa-heart"></i> Donate</a>
                         <button id="logoutBtn" class="logout-button"><i class="fa-solid fa-power-off"></i> Logout</button>
                     </div>
                 </div>
                 <div class="version-container">
-                    <span id="extensionVersion">Loading extension version...</span>
+                    <a id="extensionVersion" href="https://github.com/yungsamd17/Twitch-Live/releases/latest" target="_blank" title="Click to view release notes">Loading extension version...</a>
                 </div>
             </div>
         </div>

diff --git a/src/css/auth.css b/src/css/auth.css
@@ -16,7 +16,7 @@
     color: #a3a3a3;
     font-size: 0.9rem;
     margin-bottom: 15px;
-    padding: 0 40px;
+    padding: 0 34px;
 }
 
 .auth-text-after {

diff --git a/src/css/main.css b/src/css/main.css
@@ -38,12 +38,12 @@ body {
 }
 
 .search-container input[type="text"] {
-    width: 145px;
+    width: 148px;
     background-color: #242429;
     color: #fff;
     border: 2px solid #242429;
     border-radius: 5px 0 0 5px;
-    padding: 0 8px;
+    padding: 0 5px 0 8px;
     margin: 10px 0 10px 10px;
     font-size: 1rem;
     font-weight: bold;
@@ -188,17 +188,19 @@ body {
 
 .content {
     flex-direction: column;
-    width: 430px;
+    width: 420px;
     display: flex;
 }
 
 /*  STREAM "CARD" CLASSES */
 .stream-container {
     width: 100%;
+    height: 65px;
     cursor: pointer;
     border-top: 1px solid #242429;
     border-bottom: 1px solid #000;
     display: flex;
+    padding-left: 10px;
 }
 
 .stream-container:hover {
@@ -214,7 +216,7 @@ body {
     position: relative;
     width: 80px;
     height: 45px;
-    margin: 10px;
+    margin: 10px 10px 10px 0;
 }
 
 .stream-thumbnail img {
@@ -243,12 +245,17 @@ body {
 }
 
 .stream-details {
-    width: calc(100% - 7rem);
+    width: calc(100% - 6.25rem);
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
+.channel-container {
+    display: flex;
+    flex-direction: row;
+}
+
 .stream-channel-name {
     font-size: 1rem;
     font-weight: bold;
@@ -257,6 +264,36 @@ body {
     color: #fff;
 }
 
+.channel-raid-button {
+    background-color: transparent;
+    color: #787878;
+    display: flex;
+    justify-content: center;
+    height: 17px;
+    width: 17px;
+    border: 0;
+    border-radius: 3px;
+    margin-left: 8px;
+    cursor: pointer;
+    visibility: hidden;
+}
+
+.channel-raid-button:hover {
+    color: #fff;
+}
+
+.channel-raid-button:active {
+    color: #9146ff;
+}
+
+.stream-container:hover .channel-raid-button {
+    visibility: visible;
+}
+
+.channel-raid-button.hidden {
+    display: none;
+}
+
 .stream-game-and-viewers,
 .stream-title {
     width: 100%;
@@ -352,5 +389,61 @@ body {
     text-align: center;
     font-weight: bold;
     font-size: 1.1rem;
-    padding: 20px 0 0 0;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.no-search-results p {
+    margin-bottom: 10px;
+}
+
+.search-on-twitch-link {
+    color: #9146ff;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+}
+
+.search-on-twitch-link:hover {
+    text-decoration: underline;
+    text-decoration-thickness: 2.25px;
+}
+
+.search-on-twitch-link-icon {
+    color: #999999;
+    font-size: 0.8rem;
+}
+
+p {
+    margin: 0;
+}
+
+.timed-alert {
+    position: fixed;
+    bottom: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #9146ff;
+    color: #fff;
+    padding: 8px;
+    border-radius: 5px;
+    font-weight: bold;
+    white-space:nowrap;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+}
+
+/*  SIMPLE VIEW OPTION STYLES  */
+.simpleview-stream-container {
+    height: 59.2px;
+}
+
+.simpleview-stream-thumbnail {
+    display: none;
+}
+
+.simpleview-stream-details {
+    width: calc(100% - 0.65rem);
 }
diff --git a/src/css/settings.css b/src/css/settings.css
@@ -18,7 +18,7 @@
     position: relative;
     background-color: #18181b;
     margin: 20px;
-    height: 350px;
+    height: 390px;
     border: 1px solid #242429;
     border-radius: 5px;
     display: flex;
@@ -92,11 +92,17 @@
     cursor: pointer;
 }
 
-.text-container a {
+.text-container label span {
+    cursor: help;
+}
+
+.text-container a,
+.text-container label span {
     color: #999999;
 }
 
-.text-container a:hover {
+.text-container a:hover,
+.text-container label span:hover {
     color: #fff;
 }
 
@@ -221,7 +227,7 @@ input:checked+.slider:before {
     width: 100%;
     font-size: 1rem;
     padding: 0 18px 18px 18px;
-    justify-content: space-between;
+    justify-content: center;
 }
 
 /*  SETTINGS LINK  */
@@ -246,6 +252,14 @@ input:checked+.slider:before {
     background-color: #9146ff;
 }
 
+.github {
+    margin-right: 9px;
+}
+
+.donate {
+    margin-left: 9px;
+}
+
 /*  LOGOUT BUTTON  */
 .logout-button {
     width: 30%;
@@ -257,6 +271,7 @@ input:checked+.slider:before {
     font-size: 14px;
     font-weight: bold;
     user-select: none;
+    margin-left: 18px;
 }
 
 .logout-button:hover {
@@ -320,4 +335,10 @@ input:checked+.slider:before {
 #extensionVersion {
     color: rgba(153, 153, 153, 0.5);
     font-weight: bold;
+    text-decoration: none;
+}
+
+#extensionVersion:hover {
+    color: #fff;
+    text-decoration: underline;
 }