KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactored in more files, and fixed issues with panel markup

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2017-10-17 20:50:34 +02:00
parent a588bffb17
commit 2e685ef9dd
12 changed files with 444 additions and 577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
server/public/assets/css/style.css
View File

@@ -789,7 +789,7 @@ hide mdi-action-visibility mdi-action-visibility-off
/* INDEX PAGE */
#zicon{
.zicon{
height: 64px;
transition: padding 1s ease;
}
@@ -2422,7 +2422,7 @@ nav ul li:hover, nav ul li.active {
}
#zicon{
.zicon{
height:100%;
}
/*.list-remove{

10
server/public/assets/js/frontpage.js
View File

@@ -457,16 +457,18 @@ function initfp() {
}
var pad = 0;
document.getElementById("zicon").addEventListener("click", function(){
$(".zicon").on("click", function(e) {
e.preventDefault();
pad += 10;
document.getElementById("zicon").style.paddingLeft = pad+"%";
if(pad >= 100)
$(".zicon").css("padding-left", pad + "vh");
if(pad >= 80)
window.location.href = 'http://etys.no';
});
if(!Helper.mobilecheck() && Frontpage.winter) {
$(".mega").prepend('<div id="snow"></div>');
//Frontpage.start_snowfall();
}
if(Helper.mobilecheck()){

2
server/public/partials/channel/chat.handlebars
View File

@@ -3,7 +3,6 @@
<li id="chat-log">
<ul class="inherit-height">
<li class="active inherit-height">
<!--<ul id="chat inherit-height">-->
<div class="row inherit-height">
<div class="col s12">
<ul class="tabs chatTabs tabs-fixed-width">
@@ -14,7 +13,6 @@
<div id="channelchat" class="col s12 inherit-height"><ul id="chatchannel" class="inherit-height"></ul></div>
<div id="all_chat" class="col s12 inherit-height"><ul id="chatall" class="inherit-height"></ul></div>
</div>
<!--</ul>-->
</li>
</ul>
</li>

22
server/public/partials/channel/header.handlebars
View File

@@ -2,15 +2,12 @@
<div class="navbar-fixed">
<nav id="nav">
<div class="nav-wrapper">
<div class="brand-logo truncate zbrand">
<a href="/" class="brand-logo brand-logo-navigate">
<img id="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
<img class="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
</a>
<span id="chan" class="chan clickable truncate" title="Show big URL">{{list_name}}</span>
</div>
<ul class="title-container">
<li class="song-title cursor-pointer truncate" id="song-title">
Loading...
@@ -19,7 +16,6 @@
<input id="search" class="search_input" type="text" title="Search for songs..." placeholder="Find song on YouTube..." onsubmit="null;" autocomplete="off" />
</li>
</ul>
<ul class="right control-list noselect">
<li id="search_loader" class="valign-wrapper">
<div id="search_loader_inner">
@@ -39,30 +35,14 @@
<li>
<a class="nav-btn" href="#find" id="search-btn">
<i class="material-icons">search</i>
<!--<span class="hover-text">Find</span>-->
</a>
</li>
<!--<li>
<a class="nav-btn prev" href="#prev">
<i class="material-icons">skip_previous</i>
</a>
</li>
<li>
<a class="nav-btn skip" href="#skip">
<i class="material-icons">skip_next</i>
<span class="hover-text">Skip</span>
</a>
</li>-->
<li>
<a class="nav-btn" href="#stir" id="shuffle">
<i class="material-icons">shuffle</i>
<!--<span class="hover-text">Stir</span>-->
</a>
</li>
<li class="settings-hamburger" data-activates="settings-bar" id="settings">
<!--<a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
<i class="material-icons">menu</i>
</a>-->
<div class="hamburger-sidenav">
<span></span>
<span></span>

241
server/public/partials/channel/panel.handlebars
View File

@@ -21,84 +21,118 @@
<span class="switch-text">
Add songs
</span>
<div class="switch"><label>
<div class="switch">
<label>
<span class="left-span">Anyone</span>
<input name="addsongs" type="checkbox" class="conf" /><span class="lever"></span>
<span class="right-span">Admin</span>
</label></div></li>
</label>
</div>
</li>
<li>
<span class="switch-text">
Vote
</span>
<div class="switch"><label>
<div class="switch">
<label>
<span class="left-span">Anyone</span>
<input name="vote" type="checkbox" class="conf" /><span class="lever"></span>
<span class="right-span">Admin</span>
</label></div></li>
</label>
</div>
</li>
<li><span class="switch-text">
<li>
<span class="switch-text">
Shuffle
</span>
<div class="switch"><label>
<div class="switch">
<label>
<span class="left-span">Anyone</span>
<input name="shuffle" type="checkbox" class="conf" /><span class="lever"></span>
<span class="right-span">Admin</span>
</label></div></li>
</label>
</div>
</li>
<li><span class="switch-text">
<li>
<span class="switch-text">
Skip
</span>
<div class="switch"><label>
<div class="switch">
<label>
<span class="left-span">Anyone</span>
<input name="skip" type="checkbox" class="conf" /><span class="lever"></span>
<span class="right-span">Admin</span>
</label></div></li>
</label>
</div>
</li>
<li><span class="switch-text">
<li>
<span class="switch-text">
Song length
</span>
<div class="switch"><label>
<div class="switch">
<label>
<span class="left-span">Any</span>
<input name="longsongs" type="checkbox" class="conf" /><span class="lever"></span>
<span class="right-span">Short</span>
</label></div></li>
</label>
</div>
</li>
<li><span class="switch-text">
<li>
<span class="switch-text">
Type
</span>
<div class="switch"><label>
<div class="switch">
<label>
<span class="left-span">Any</span>
<input name="allvideos" type="checkbox" class="conf" /><span class="lever"></span>
<span class="right-span">Song</span>
</label></div></li>
</label>
</div>
</li>
<li><span class="switch-text">
<li>
<span class="switch-text">
Frontpage
</span>
<div class="switch"><label>
<div class="switch">
<label>
<span class="left-span">Hide</span>
<input name="frontpage" type="checkbox" class="conf" /><span class="lever"></span>
<span class="right-span">Display</span>
</label></div></li>
</label>
</div>
</li>
<li><span class="switch-text">
<li>
<span class="switch-text">
After play
</span>
<div class="switch"><label>
<div class="switch">
<label>
<span class="left-span">Keep</span>
<input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
<span class="right-span">Remove</span>
</label></div></li>
<li class="user-password-li hide"><span class="switch-text">
</label>
</div>
</li>
<li class="user-password-li hide">
<span class="switch-text">
Channel password
</span>
<div class="switch"><label>
<div class="switch">
<label>
<span class="left-span">No</span>
<input name="userpass" type="checkbox" class="conf password_protected" /><span class="lever"></span>
<span class="right-span">Yes</span>
</label></div></li>
</label>
</div>
</li>
<li class="change_user_pass hide">
<a href="#!" class="change_user_pass_btn btn waves-effect blue">Change password</a>
</li>
@@ -142,6 +176,7 @@
</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="no-padding remote-panel hide-on-small-only">
@@ -156,7 +191,8 @@
<span class="switch-text">
Enable Remote
</span>
<div class="switch"><label>
<div class="switch">
<label>
Disabled
<input name="remote_switch" type="checkbox" class="remote_switch_class" checked /><span class="lever"></span>
Enabled
@@ -189,7 +225,8 @@
<span class="switch-text">
Local Mode
</span>
<div class="switch"><label>
<div class="switch">
<label>
Disabled
<input name="offline_switch" type="checkbox" class="offline_switch_class" /><span class="lever"></span>
Enabled
@@ -235,7 +272,8 @@
<i id="remote_play" class="material-icons">play_arrow</i>
</button>
<button id="pausebutton_remote" class="remote-button waves-effect btn gray" disabled>
<i id="remote_pause" class="material-icons">pause</i></button>
<i id="remote_pause" class="material-icons">pause</i>
</button>
<button id="skipbutton_remote" class="remote-button waves-effect btn blue" disabled>
<i id="remote_skip" class="material-icons">skip_next</i>
</button>
@@ -269,53 +307,7 @@
<input title="Input YouTube-playlist url here!" placeholder="Enter YouTube-list URL" id="import" type="text" class="validate" autocomplete="off" />
<div class="valign playlist_loader_padding">
<div id="playlist_loader" class="preloader-wrapper small active hide">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
{{> spinner}}
</div>
</div>
</form>
@@ -333,53 +325,7 @@
<input title="Input Spotify-playlist url here!" placeholder="Enter Spotify-list url" id="import_spotify" type="text" class="validate" autocomplete="off" />
<div id="playlist_loader_spotify" class="valign playlist_loader_padding hide">
<div class="preloader-wrapper small active">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
{{> spinner}}
</div>
</div>
</form>
@@ -392,7 +338,8 @@
<div class="extra-add-text truncate"></div>
<a href="#" class="waves-effect red lighten btn right extra-button extra-button-delete">X</a>
<a href="#" class="waves-effect green lighten btn right extra-button extra-button-search">
<i class="material-icons search-extra">search</i></a>
<i class="material-icons search-extra">search</i>
</a>
</li>
</ul>
</li>
@@ -429,53 +376,7 @@
<div class="row">
<div class="col s2">
<div id="playlist_loader_export" class="preloader-wrapper small active hide">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
{{> spinner}}
</div>
</div>
<div class="current_number hide col s8 offset-s2">0/0</div>

2
server/public/partials/channel/playlist.handlebars
View File

@@ -21,8 +21,6 @@
<a href="#" class="waves-effect btn-flat clickable more_button">
<i class="material-icons">more_vert</i>
</a>
<!--<a title="Remove song" class="waves-effect btn-flat clickable hide-on-small-only delete_button hide suggested_remove">Delete</a>
<a title="Remove song" class="waves-effect btn-flat clickable hide-on-med-and-up delete_button hide suggested_remove"><i class="material-icons">close</i></a>-->
</div>
<div class="mobile-delete red">DELETE</div>
</div>

40
server/public/partials/contact.handlebars
View File

@@ -14,45 +14,7 @@
</div>
<div class="valign hide" id="send-loader">
<div class="preloader-wrapper small active">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
{{> spinner}}
</div>
</div>
</form>

26
server/public/partials/frontpage/header.handlebars
View File

@@ -2,10 +2,9 @@
<nav id="fp-nav">
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<img id="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
<img class="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
</a>
<div id="frontpage-viewer-counter" class="noselect" title="Divided among all channels. Hidden or not"></div>
<!--<a href="//zoff.me" class="brand-logo brand-mobile hide-on-med-and-up">Zoff</a>-->
<ul class="right hide-on-med-and-down">
<li><a class="header-buttons waves-effect waves-cyan" id="offline-mode" title="Local mode" href="#">Local</a></li>
<li><a class="header-buttons waves-effect waves-green" title="Remote control a Zoff player" href="https://remote.zoff.me">Remote</a></li>
@@ -13,28 +12,7 @@
</ul>
</div>
</nav>
<div id="about" class="modal">
<div class="modal-content">
<h4>About</h4>
<p>Zoff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
Zoff is mainly a web-based service. The website uses NodeJS with Socket.IO, MongoDB and express on the backend, with JavaScript, jQuery and Materialize on the frontend.<br><br>
The team consists of Kasper Rynning-Tønnesen and Nicolas Almagro Tonne, and the project has been worked on since late 2014.<br><br>
</p>
<h4>Legal</h4>
<p>Copyright © 2017 <br>Nicolas Almagro Tonne and Kasper Rynning-Tønnesen
<br><br>
Creative Commons License<br>
Zoff is licensed under a <br><a href="http://creativecommons.org/licenses/by-nc-nd/3.0/no/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Norway License.</a>
<br>
Do not redistribute without permission from the developers.
<br>
</p>
</div>
<div class="modal-footer">
<a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
{{> modal/about}}
<div id="donation" class="modal">
<div class="modal-content">
<h4>Thanks!</h4>

21
server/public/partials/modal/about.handlebars Normal file
View File

@@ -0,0 +1,21 @@
<div id="about" class="modal">
<div class="modal-content">
<h4>About</h4>
<p>Zoff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
Zoff is mainly a web-based service. The website uses NodeJS with Socket.IO, MongoDB and express on the backend, with JavaScript, jQuery and Materialize on the frontend.<br><br>
The team consists of Kasper Rynning-Tønnesen and Nicolas Almagro Tonne, and the project has been worked on since late 2014.<br><br>
</p>
<h4>Legal</h4>
<p>Copyright © 2017 <br>Nicolas Almagro Tonne and Kasper Rynning-Tønnesen
<br><br>
Creative Commons License<br>
Zoff is licensed under a <br><a href="http://creativecommons.org/licenses/by-nc-nd/3.0/no/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Norway License.</a>
<br>
Do not redistribute without permission from the developers.
<br>
</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>

26
server/public/partials/remote/header.handlebars
View File

@@ -2,11 +2,11 @@
<nav id="fp-nav">
<div class="nav-wrapper">
<a href="https://zoff.me" class="brand-logo brand-logo-navigate hide-on-med-and-down">
<img id="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
<img class="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
</a>
<div class="brand-logo truncate zbrand">
<a href="https://zoff.me" class="hide-on-large-only brand-logo-navigate">
<img id="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
<img class="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
</a>
</div>
<ul class="right hide-on-med-and-down">
@@ -15,27 +15,7 @@
</ul>
</div>
</nav>
<div id="about" class="modal">
<div class="modal-content">
<h4>About</h4>
<p>Zoff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
Zoff is mainly a web-based service. The website uses NodeJS with Socket.IO, MongoDB and express on the backend, with JavaScript, jQuery and Materialize on the frontend.<br><br>
The team consists of Kasper Rynning-Tønnesen and Nicolas Almagro Tonne, and the project has been worked on since late 2014.<br><br>
</p>
<h4>Legal</h4>
<p>Copyright © 2017 <br>Nicolas Almagro Tonne and Kasper Rynning-Tønnesen
<br><br>
Creative Commons License<br>
Zoff is licensed under a <br><a href="http://creativecommons.org/licenses/by-nc-nd/3.0/no/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Norway License.</a>
<br>
Do not redistribute without permission from the developers.
<br>
</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
{{> modal/about}}
<div id="help" class="modal">
<div class="modal-content">
<h4>Help</h4>

47
server/public/partials/spinner.handlebars Normal file
View File

@@ -0,0 +1,47 @@
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>