website/web/templates/account/search.html
Noah 6c91c67c97 More Private User Avatars
* Users who set their Profile Picture to "friends only" or "private" can have
  their avatar be private all over the website to users who are not their
  friends or not granted access.
* Users who are not your friends see a yellow placeholder avatar, and users
  not granted access to a private Profile Pic sees a purple avatar.
* Admin users see these same placeholder avatars most places too (on search,
  forums, comments, etc.) if the user did not friend or grant the admin. But
  admins ALWAYS see it on their Profile Page directly, for ability to moderate.
* Fix marking Notifications as read: clicking the link in an unread notification
  now will wait on the ajax request to finish before allowing the redirect.
* Update the FAQ
2022-09-08 21:42:20 -07:00

241 lines
12 KiB
HTML

{{define "title"}}People{{end}}
{{define "content"}}
<div class="container">
{{$Root := .}}
<section class="hero is-link is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">People</h1>
<h2 class="subtitle">Explore</h2>
</div>
</div>
</section>
<form action="/members" method="GET">
<div class="p-4">
<div class="columns">
<div class="column">
Found {{.Pager.Total}} user{{Pluralize64 .Pager.Total}}
(page {{.Pager.Page}} of {{.Pager.Pages}}).
</div>
<div class="column is-narrow">
<button type="submit"
class="button ml-6"
name="page"
value="{{.Pager.Previous}}"
{{if not .Pager.HasPrevious}}disabled{{end}}>Previous</button>
<button type="submit"
class="button button-primary"
name="page"
value="{{.Pager.Next}}"
{{if not .Pager.HasNext}}disabled{{end}}>Next page</button>
</div>
</div>
<div class="block">
<div class="card nonshy-collapsible-mobile">
<header class="card-header has-background-link-light">
<p class="card-header-title">
Search Filters
</p>
<button class="card-header-icon" type="button">
<span class="icon">
<i class="fa fa-angle-up"></i>
</span>
</button>
</header>
<div class="card-content">
<div class="columns is-multiline">
<div class="column">
<div class="field">
<label class="label">Certified:</label>
<div class="select is-fullwidth">
<select id="certified" name="certified">
<option value="true">Only certified users</option>
<option value="false"{{if eq $Root.Certified "false"}} selected{{end}}>Show all users</option>
</select>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Email or username:</label>
<input type="text" class="input"
name="username"
autocomplete="off"
value="{{$Root.EmailOrUsername}}">
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Age:</label>
<div class="columns is-mobile">
<div class="column">
<div class="select">
<select name="age_min">
<option value="">Min</option>
{{range IterRange 18 120}}
<option value="{{.}}"{{if eq $Root.AgeMin .}} selected{{end}}>{{.}}</option>
{{end}}
</select>
</div>
<div class="select">
<select name="age_max">
<option value="">Max</option>
{{range IterRange 18 120}}
<option value="{{.}}"{{if eq $Root.AgeMax .}} selected{{end}}>{{.}}</option>
{{end}}
</select>
</div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="gender">Gender:</label>
<div class="select is-fullwidth">
<select id="gender" name="gender">
<option value=""></option>
{{range .Enum.Gender}}
<option value="{{.}}"{{if eq $Root.Gender .}} selected{{end}}>{{.}}</option>
{{end}}
</select>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="orientation">Orientation:</label>
<div class="select is-fullwidth">
<select id="orientation" name="orientation">
<option value=""></option>
{{range .Enum.Orientation}}
<option value="{{.}}"{{if eq $Root.Orientation .}} selected{{end}}>{{.}}</option>
{{end}}
</select>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="marital_status">Relationship:</label>
<div class="select is-fullwidth">
<select id="marital_status" name="marital_status">
<option value=""></option>
{{range .Enum.MaritalStatus}}
<option value="{{.}}"{{if eq $Root.MaritalStatus .}} selected{{end}}>{{.}}</option>
{{end}}
</select>
</div>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column is-narrow pr-1">
<strong>Sort by:</strong>
</div>
<div class="column is-narrow pl-1">
<div class="select is-full-width">
<select id="sort" name="sort">
<option value="last_login_at desc"{{if eq .Sort "last_login_at desc"}} selected{{end}}>Last login</option>
<option value="created_at desc"{{if eq .Sort "created_at desc"}} selected{{end}}>Signup date</option>
<option value="username"{{if eq .Sort "username"}} selected{{end}}>Username (a-z)</option>
<option value="lower(name)"{{if eq .Sort "lower(name)"}} selected{{end}}>Name (a-z)</option>
</select>
</div>
</div>
<div class="column is-narrow">
<a href="/members" class="button">Reset</a>
<button type="submit" class="button is-success">
<span>Search</span>
<span class="icon"><i class="fa fa-search"></i></span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="columns is-multiline">
{{range .Users}}
<div class="column is-half-tablet is-one-third-desktop">
<div class="card">
<div class="card-content">
<div class="media block">
<div class="media-left">
{{template "avatar-64x64" .}}
</div>
<div class="media-content">
<p class="title is-4">
<a href="/u/{{.Username}}" class="has-text-dark">
{{.NameOrUsername}}
</a>
{{if eq .Visibility "private"}}
<sup class="fa fa-mask is-size-7" title="Private Profile"></sup>
{{end}}
</p>
<p class="subtitle is-6 mb-2">
<span class="icon"><i class="fa fa-user"></i></span>
<a href="/u/{{.Username}}">{{.Username}}</a>
{{if not .Certified}}
<span class="has-text-danger">
<span class="icon"><i class="fa fa-certificate"></i></span>
<span>Not Certified!</span>
</span>
{{end}}
{{if .IsAdmin}}
<span class="has-text-danger">
<span class="icon"><i class="fa fa-gavel"></i></span>
<span>Admin</span>
</span>
{{end}}
</p>
{{if .GetProfileField "city"}}
<p class="subtitle is-6 mb-2">
{{.GetProfileField "city"}}
</p>
{{end}}
<p class="subtitle is-7 mb-2">
{{if not .Birthdate.IsZero }}
<span class="mr-2">{{ComputeAge .Birthdate}}yo</span>
{{end}}
{{if .GetProfileField "gender"}}
<span class="mr-2">{{.GetProfileField "gender"}}</span>
{{end}}
{{if .GetProfileField "pronouns"}}
<span class="mr-2">{{.GetProfileField "pronouns"}}</span>
{{end}}
{{if .GetProfileField "orientation"}}
<span class="mr-2">{{.GetProfileField "orientation"}}</span>
{{end}}
</p>
</div>
</div><!-- media-block -->
</div>
</div>
</div>
{{end}}<!-- range .Friends -->
</div>
</div>
</form>
</div>
{{end}}