serv/tube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor UX of Trending vs. Recent video sorting

Browse source
This commit is contained in:
James Mills 2020-03-25 23:02:04 +10:00
parent af07f1aaa9
commit bcd79ba2c5
No known key found for this signature in database
GPG key ID: AC4C014F1440EBD6
5 changed files with 88 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/app.go
View file

@ -12,6 +12,7 @@ import (
"path"
"path/filepath"
"sort"
"strings"
rice "github.com/GeertJohan/go.rice"
"github.com/fsnotify/fsnotify"
@ -312,18 +313,24 @@ func (a *App) pageHandler(w http.ResponseWriter, r *http.Request) {
video.Views = views
}
if r.URL.Query().Get("trending") != "" {
log.Info("sorting by trending")
sort := strings.ToLower(r.URL.Query().Get("sort"))
switch sort {
case "views":
media.By(media.SortByViews).Sort(playlist)
} else {
case "timestamp":
media.By(media.SortByTimestamp).Sort(playlist)
default:
// By default the playlist is sorted by Timestamp
log.Warnf("invalid sort critiera: %s", sort)
}
w.Header().Set("Content-Type", "text/html; charset=utf-8")
ctx := &struct {
Sort string
Playing *media.Video
Playlist media.Playlist
}{
Sort: sort,
Playing: playing,
Playlist: playlist,
}

20
app/rice-box.go
View file

File diff suppressed because one or more lines are too long

62
static/theme.css
View file

@ -400,3 +400,65 @@ label span input {
transform: translate(24px, 0);
}
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
@media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}

1
templates/base.html
View file

@ -15,7 +15,6 @@
<body>
<nav>
<a href="/">Tube</a>
<a href="/?trending=1">Trending</a>
<a class="centered" style="text-indent: 0;" href="/upload">Upload</a>
</nav>
<main>

6
templates/index.html
View file

@ -11,6 +11,12 @@
{{ end }}
</div>
<div id="playlist">
<div class="nav">
<ul>
<li><a {{ if eq $.Sort "views" }}class="active"{{ end }}href="?sort=views">Trending</a></li>
<li><a {{ if eq $.Sort "timestamp" }}class="active"{{ end }}href="?sort=timestamp">Recent</a></li>
</ul>
</div>
{{ range $m := .Playlist }}
{{ if eq $m.ID $playing.ID }}
<a href="/v/{{ $m.ID }}" class="playing">