diff options
| author | julian laplace <julescarbon@gmail.com> | 2022-10-29 20:34:37 +0200 |
|---|---|---|
| committer | julian laplace <julescarbon@gmail.com> | 2022-10-29 20:34:37 +0200 |
| commit | 8e23c4ce02dc39b4e116d2680a9c6b780c6d0d04 (patch) | |
| tree | 4ca174757c7dc729c3332ea22fe07756999d3035 | |
| parent | 1982d84676c856627a6f300c0088862a70d798bb (diff) | |
filter styling
| -rw-r--r-- | public/assets/css/hootstream.css | 34 | ||||
| -rw-r--r-- | public/assets/js/lib/views/details/audioPlayer.js | 2 | ||||
| -rw-r--r-- | views/hootstream/filters.ejs | 49 |
3 files changed, 59 insertions, 26 deletions
diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css index a62e206..f3c4581 100644 --- a/public/assets/css/hootstream.css +++ b/public/assets/css/hootstream.css @@ -555,15 +555,43 @@ body { overflow-x: hidden; } + + /** Hoot Form */ #hootform { margin-bottom: 0rem; margin-left: 0; } - #hootevents { - padding-right: 0; + + /** Ho0t FILTERs */ + #hootfilters { + justify-content: space-evenly; + margin-top: 0; + margin-bottom: 0.5rem; + font-size: 0.875rem; + } + #hootfilters .filterSet { + margin: 0.5rem 0.5rem; } #hootfilters .links { - margin: 0rem 0.75rem 0 0.75rem; + margin: 0.5rem 1rem; + width: 100%; + justify-content: space-evenly; + } + #hootfilters .filter, + #hootfilters .sort label { + background: rgba(127, 127, 167, 0.4); + border-radius: 0.5rem; + padding: 0.375rem 0.5rem; + } + + /** hOoOt STReAM */ + #hootstream { + margin-top: 1.5rem; + } + + /** hoot EVENTS */ + #hootevents { + padding-right: 0; } #hootevents .userLink { display: none; diff --git a/public/assets/js/lib/views/details/audioPlayer.js b/public/assets/js/lib/views/details/audioPlayer.js index 89f0dd4..f31a8b3 100644 --- a/public/assets/js/lib/views/details/audioPlayer.js +++ b/public/assets/js/lib/views/details/audioPlayer.js @@ -25,7 +25,7 @@ const AudioPlayer = View.extend({ this.pos_el.addEventListener("touchmove", (e) => this.mousemove(this.e.touches[0]) ); - window.addEventListener("touchend", this.mouseup.bind); + window.addEventListener("touchend", this.mouseup); } else { this.pos_el.addEventListener("mousedown", this.mousedown); this.pos_el.addEventListener("mousemove", this.mousemove); diff --git a/views/hootstream/filters.ejs b/views/hootstream/filters.ejs index d95542e..7e29d95 100644 --- a/views/hootstream/filters.ejs +++ b/views/hootstream/filters.ejs @@ -1,28 +1,33 @@ <div id="hootfilters"> - <label class="filter"> - <input type="checkbox" name="images" /> - <span>images</span> - </label> - <label class="filter"> - <input type="checkbox" name="music" /> - <span>music</span> - </label> - <label class="filter"> - <input type="checkbox" name="files" /> - <span>files</span> - </label> - <label class="filter"> - <input type="checkbox" name="hoots" /> - <span>hoots</span> - </label> - - <div> - sort by + <div class="filterSet"> + <label class="filter"> + <input type="checkbox" name="music" /> + <span>music</span> + </label> + <label class="filter"> + <input type="checkbox" name="images" /> + <span>images</span> + </label> + <label class="filter"> + <input type="checkbox" name="files" /> + <span>files</span> + </label> + <label class="filter"> + <input type="checkbox" name="hoots" /> + <span>hoots</span> + </label> </div> - <div class="sort"> - <label><input type="radio" name="sort" value="name"><span>name</span></label> - <label><input type="radio" name="sort" value="date"><span>date</span></label> + + <div class="filterSet"> + <div> + sort by + </div> + <div class="sort"> + <label><input type="radio" name="sort" value="name"><span>name</span></label> + <label><input type="radio" name="sort" value="date"><span>date</span></label> + </div> </div> + <div class="links"> <div> <a href="/stream">home</a> |