Skip to content

Commit

Permalink
Merge pull request #18 from yungsamd17/update
Browse files Browse the repository at this point in the history 
Merge branch "update to "main" - ⚡ v1.3.0 Update
  • Loading branch information
@yungsamd17
yungsamd17 authored Jan 18, 2024
2 parents 9a32fe4 + da226b9 commit f239f3a
Show file tree
Hide file tree
Showing 10 changed files with 669 additions and 198 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

dev-token.txt
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.2.1",
"version": "1.3.0",
"author": "yungsamd17",
"homepage_url": "https://github.com/yungsamd17/Twitch-Live",
"icons":
Expand Down
59 changes: 48 additions & 11 deletions popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,35 +18,41 @@
<input type="text" id="searchStreams" placeholder="Search..." maxlength="17" autocomplete="off" spellcheck="false" autofocus />
<button id="refreshButton" class="navbar-link refresh-button" refresh-label="Refresh Streams">
<i class="fa-solid fa-rotate-left"></i></button>
<button id="filterButton" class="navbar-link" filter-label="Sort Streams" style="padding: 6px;">
<button id="filterButton" class="navbar-link" filter-label="Sort Streams">
<i class="fa-solid fa-arrow-down-wide-short"></i></button>
<!-- Filter Dropdown -->
<div id="filterDropdown" class="dropdown">
<div class="dropdown-content">
<div class="dropdown-body">
<div class="filter-option">
<button class="filter-button" id="broadcasterButton">
<div class="filter-icon"><i class="fa-solid fa-user"></i></div>Broadcaster</button>
<div class="filter-icon"><i class="fa-solid fa-user"></i></div>Broadcaster
</button>
</div>
<div class="filter-option">
<button class="filter-button" id="categoryButton">
<div class="filter-icon"><i class="fa-solid fa-gamepad"></i></div>Category</button>
<div class="filter-icon"><i class="fa-solid fa-gamepad"></i></div>Category
</button>
</div>
<div class="filter-option">
<button class="filter-button active" id="viewersHighToLowButton">
<div class="filter-icon"><i class="fa-solid fa-arrow-down-wide-short"></i></div>Viewers (High to Low)</button>
<div class="filter-icon"><i class="fa-solid fa-arrow-down-wide-short"></i></div>Viewers (High to Low)
</button>
</div>
<div class="filter-option">
<button class="filter-button" id="viewersLowToHighButton">
<div class="filter-icon"><i class="fa-solid fa-arrow-down-short-wide"></i></div>Viewers (Low to High)</button>
<div class="filter-icon"><i class="fa-solid fa-arrow-down-short-wide"></i></div>Viewers (Low to High)
</button>
</div>
<div class="filter-option">
<button class="filter-button" id="startedButton">
<div class="filter-icon"><i class="fa-regular fa-clock"></i></div>Recently started</button>
<div class="filter-icon"><i class="fa-regular fa-clock"></i></div>Recently started
</button>
</div>
<div class="filter-option">
<button class="filter-button" id="runningButton">
<div class="filter-icon"><i class="fa-solid fa-clock"></i></div>Longest Running</button>
<div class="filter-icon"><i class="fa-solid fa-clock"></i></div>Longest Running
</button>
</div>
</div>
</div>
Expand All @@ -66,7 +72,7 @@
</div>
<!-- Settings Modal -->
<div id="settingsModal" class="settings-modal">
<div class="settings-modal-content">
<div id="settingsModalContent" class="settings-modal-content">
<div class="settings-modal-body">
<!-- Settings header -->
<div class="settings-header">
Expand Down Expand Up @@ -100,12 +106,28 @@ <h2 class="settings-header-text">Settings</h2>
</label>
</div>
</div>
<div class="option-container" style="padding-right: 16px;">
<div class="option-container">
<div class="text-container">
<span>Background update interval</span>
</div>
<div class="settings-input-container">
<select id="backgroundRefreshSelect" class="settings-input">
<option value="1">1 min</option>
<option value="2">2 min</option>
<option value="5">5 min</option>
<option value="10">10 min</option>
<option value="15">15 min</option>
<option value="30">30 min</option>
<option value="60">60 min</option>
</select>
</div>
</div>
<div class="option-container">
<div class="text-container">
<span>Custom badge color</span>
</div>
<div class="color-input">
<input type="text" id="colorInput" placeholder="#RRGGBB" minlength="7" maxlength="7" autocomplete="off" spellcheck="false" />
<div class="settings-input-container">
<input type="text" id="colorInput" class="settings-input" placeholder="#RRGGBB" minlength="7" maxlength="7" autocomplete="off" spellcheck="false" />
</div>
</div>
<!-- Settings footer link -->
Expand All @@ -118,9 +140,24 @@ <h2 class="settings-header-text">Settings</h2>
<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>
</div>
</div>
</div>
</div>
<!-- Context Menu -->
<div id="context-menu">
<div class="context-item context-item-open-channel">Open Channel</div>
<div class="context-item context-item-open-player">Open Player</div>
<div class="context-item context-item-open-chat">Open Chat</div>
<div class="cm-divider"></div>
<div class="context-item context-item-about">About</div>
<div class="context-item context-item-videos">Videos</div>
<div class="context-item context-item-clips">Clips</div>
<div class="cm-divider"></div>
<div class="context-item context-item-go-to-category">Go to category</div>
</div>
<script src="src/js/main.js"></script>
<script src="src/js/settings.js"></script>
</body>
Expand Down
127 changes: 93 additions & 34 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
@import "tooltips.css";
@import "auth.css";



:root {
color-scheme: dark;
}
Expand All @@ -22,9 +20,7 @@ body {
}



/* NAVBAR */

.navbar {
color: #fff;
background-color: #0e0e10;
Expand All @@ -42,12 +38,12 @@ body {
}

.search-container input[type="text"] {
width: 150px;
width: 145px;
background-color: #242429;
color: #fff;
border: 2px solid #242429;
border-radius: 5px 0 0 5px;
padding: 8px;
padding: 0 8px;
margin: 10px 0 10px 10px;
font-size: 1rem;
font-weight: bold;
Expand Down Expand Up @@ -79,24 +75,21 @@ body {
float: right;
}



/* NAVBAR LINKS/BUTTONS */

.navbar-link {
color: #fff;
font-weight: bold;
background-color: #38383f;
padding: 6.5px 7px;
border: 0;
border-radius: 5px;
text-decoration: none;
margin: 10px 10px 10px 0;
display: inline;
align-content: center;
font-size: 1rem;
cursor: pointer;
user-select: none;
width: 30px;
display: flex;
justify-content: center;
align-items: center;
}

.navbar-link:hover {
Expand All @@ -114,47 +107,46 @@ body {
background-color: #242429;
}



/* FILTER DROPDOWN */
/* FILTER/SORT DROPDOWN */
.dropdown {
display: none;
align-items: center;
visibility: hidden;

transform-origin: top center;
}

.dropdown-content {
position: absolute;
top: 100%;
right: 26%;
background-color: #242429;
padding: 0;
width: 176px;
width: 184px;
height: auto;
border: 1px solid #38383f;
border-radius: 5px;
display: flex;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 0 10px 6px rgba(0, 0, 0, 0.3);

transform: translate(-118px, 50px);
}

.dropdown-body {
color: #fff;
width: 100%;
padding: 5px 0;
padding: 5px;
}

.filter-option {
height: 30px;
font-size: 1rem;
padding: 0 5px;
}

.filter-button {
display: inline-flex;
align-items: center;
height: 100%;
width: 100%;
padding: 0 6px;
background-color: #242429;
padding: 0;
border: 0;
border-radius: 3px;
cursor: pointer;
Expand All @@ -181,11 +173,10 @@ body {
}

.filter-icon {
margin-right: 8px;
margin: 0 8px;
}

/* MAIN ELEMENT CLASSES */

.streams {
bottom: 0;
width: 430px;
Expand All @@ -201,10 +192,7 @@ body {
display: flex;
}



/* STREAM "CARD" CLASSES */

.stream-container {
width: 100%;
cursor: pointer;
Expand All @@ -218,11 +206,15 @@ body {
text-shadow: 0 0 4px #000;
}

.stream-container:active {
background-color: #29292e;
}

.stream-thumbnail {
position: relative;
width: 80px;
height: 45px;
padding: 10px;
margin: 10px;
}

.stream-thumbnail img {
Expand All @@ -238,8 +230,8 @@ body {

.stream-uptime {
position: absolute;
right: 10.1%;
bottom: 15.5%;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.8);
font-size: 0.78rem;
Expand Down Expand Up @@ -280,10 +272,77 @@ body {
color: #fff;
}

/* ANIMATIONS */
@keyframes popup-anim-in {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1.0);
opacity: 1;
}
}

@keyframes popup-anim-out {
to {
transform: scale(0.95);
opacity: 0;
visibility: hidden;
}
}

/* OTHER */
.popup-anim-in {
animation: popup-anim-in 333ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
}
.popup-anim-out {
animation: popup-anim-out 222ms cubic-bezier(0.35, 0.55, 0, 1) forwards;
}

/* CONTEXT MENU */
#context-menu {
position: fixed;
z-index: 1000;
color: #fff;
background-color: #0e0e10;
border: 1px solid #242429;
border-radius: 5px;
padding: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
font-size: 12px;
visibility: hidden;
user-select: none;
animation-fill-mode: forwards;
transform-origin: top center;
}

.context-item {
padding: 6px 12px;
border-radius: 2px;
cursor: pointer;
}

.context-item:hover {
background-color: #38383f;
}

.context-item:active {
background-color: #9146ff;
}

.cm-divider {
height: 1px;
background-color: #242429;
margin: 5px 0;
}

.context-active {
background-color: #242429;
}



/* OTHER */
.accent-color {
color: #9146ff;
}
Expand All @@ -293,5 +352,5 @@ body {
text-align: center;
font-weight: bold;
font-size: 1.1rem;
padding: 42px 0 0 0;
}
padding: 20px 0 0 0;
}
Loading

0 comments on commit f239f3a

Please sign in to comment.