Skip to content

Commit

Permalink
Merge pull request #12 from yungsamd17/update
Browse files Browse the repository at this point in the history 
⬆️Update v1.2, merge pull request from "update"
  • Loading branch information
@yungsamd17
yungsamd17 authored Jan 10, 2024
2 parents cdec8b1 + a9d6245 commit 70d4a06
Show file tree
Hide file tree
Showing 10 changed files with 394 additions and 107 deletions.
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.1",
"version": "1.2",
"author": "yungsamd17",
"homepage_url": "https://github.com/yungsamd17/Twitch-Live",
"icons":
Expand Down
54 changes: 39 additions & 15 deletions popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,63 @@
</head>

<body>

<!-- Navbar -->
<div class="navbar">

<!-- Search -->
<div class="search-container">
<input type="text" id="searchStreams" placeholder="Search..." maxlength="17" autocomplete="off" spellcheck="false" autofocus />
<button id="refreshButton" class="navbar-link navbar-icon-link refresh-button" aria-label-3="Refresh Streams">
<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;">
<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>
<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>
<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>
<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>
<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>
<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>
</div>
</div>
</div>
</div>

<!-- Navbar link/button -->
<div class="link-container">
<a class="navbar-link navbar-icon-link" aria-label-2="Twitch Live Following" href="https://www.twitch.tv/directory/following/live" target="_blank">
<a class="navbar-link" twitch-label="Twitch Live Following" href="https://www.twitch.tv/directory/following/live" target="_blank">
<i class="fa-brands fa-twitch"></i></a>
<button class="navbar-link navbar-icon-link" id="settingsBtn" aria-label="Settings">
<button class="navbar-link" id="settingsBtn" settings-label="Settings">
<i class="fa-solid fa-gear"></i></button>
</div>
</div>

<!-- Streams -->
<div class="streams" ss-container>
<div id="content" class="content"></div>
</div>

<!-- Settings Modal -->
<div id="settingsModal" class="settings-modal">
<div class="settings-modal-content">
<div class="settings-modal-body">

<!-- Settings header -->
<div class="settings-header">
<div class="settings-close-btn">
Expand All @@ -50,7 +77,6 @@
<h2 class="settings-header-text">Settings</h2>
</div>
</div>

<!-- Settings options -->
<div class="option-container">
<div class="text-container">
Expand All @@ -65,7 +91,7 @@ <h2 class="settings-header-text">Settings</h2>
</div>
<div class="option-container">
<div class="text-container">
<span>Open streams in player <a href="https://player.twitch.tv/?channel=rifftrax&parent=twitch" aria-label-4="player.twitch.tv example" target="_blank"><i class="fa-solid fa-circle-info"></i></a></span>
<span>Open streams in player <a href="https://player.twitch.tv/?channel=rifftrax&parent=twitch" info-label="Click for example stream" target="_blank"><i class="fa-solid fa-circle-info"></i></a></span>
</div>
<div class="slider-container">
<label class="switch">
Expand All @@ -74,15 +100,14 @@ <h2 class="settings-header-text">Settings</h2>
</label>
</div>
</div>
<div class="option-container">
<div class="option-container" style="padding-right: 16px;">
<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"/>
<input type="text" id="colorInput" placeholder="#RRGGBB" minlength="7" maxlength="7" autocomplete="off" spellcheck="false" />
</div>
</div>

<!-- Settings footer link -->
<div class="settings-footer">
<div class="footer-container">
Expand All @@ -96,7 +121,6 @@ <h2 class="settings-header-text">Settings</h2>
</div>
</div>
</div>

<script src="src/js/main.js"></script>
<script src="src/js/settings.js"></script>
</body>
Expand Down
2 changes: 1 addition & 1 deletion src/css/auth.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@

.auth-button {
margin: 10px;
border-radius: 8px;
border-radius: 5px;
font-size: 1rem;
padding: 10px;
background-color: #9146ff;
Expand Down
93 changes: 77 additions & 16 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ body {
}

.search-container {
width: 50%;
width: auto;
display: inline-flex;
height: 100%;
}

.search-container input[type="text"] {
width: 100%;
width: 150px;
background-color: #242429;
color: #fff;
border: 2px solid #242429;
Expand Down Expand Up @@ -87,14 +87,14 @@ body {
color: #fff;
font-weight: bold;
background-color: #38383f;
padding: 7px 7px 5.5px 7px;
padding: 6.5px 7px;
border: 0;
border-radius: 5px;
text-decoration: none;
margin: 10px;
margin: 10px 10px 10px 0;
display: inline;
align-content: center;
font-size: 0.9rem;
font-size: 1rem;
cursor: pointer;
user-select: none;
}
Expand All @@ -107,13 +107,6 @@ body {
background-color: #772ce8;
}

.navbar-icon-link {
padding: 6.5px 7.5px;
margin-left: 0;
margin-right: 10px;
font-size: 1rem;
}

.refresh-button {
margin-left: 0px;
border-radius: 0 5px 5px 0;
Expand All @@ -123,6 +116,74 @@ body {



/* FILTER DROPDOWN */
.dropdown {
display: none;
align-items: center;
}

.dropdown-content {
position: absolute;
top: 100%;
right: 26%;
background-color: #242429;
padding: 0;
width: 176px;
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);
}

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

.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;
border: 0;
border-radius: 3px;
cursor: pointer;
}

.filter-button:hover {
background-color: #38383f;
}

.filter-button:active {
background-color: #54545f;
}

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

.active:hover {
background-color: #772ce8;
}

.active:active {
background-color: #5c16c5;
}

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

/* MAIN ELEMENT CLASSES */

.streams {
Expand Down Expand Up @@ -179,11 +240,11 @@ body {
position: absolute;
right: 10.1%;
bottom: 15.5%;
background: rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.8);
font-size: 0.78rem;
font-weight: 600;
padding: 2px 2px 1px 3px;;
padding: 2px 2px 1px 3px;
border-radius: 4px 0;
text-shadow: 0 0 4px #000;
z-index: 900;
Expand Down Expand Up @@ -231,6 +292,6 @@ body {
color: #fff;
text-align: center;
font-weight: bold;
font-size: 1rem;
padding: 10px;
font-size: 1.1rem;
padding: 42px 0 0 0;
}
4 changes: 2 additions & 2 deletions src/css/settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,11 +229,11 @@ input:checked+.slider:before {
}

.settings-link:hover {
background-color: #9146ff;
background-color: #54545f;
}

.settings-link:active {
background-color: #772ce8;
background-color: #9146ff;
}

/* LOGOUNT BUTTON */
Expand Down
Loading

0 comments on commit 70d4a06

Please sign in to comment.