nonshy/website
nonshy/website
1
0
Fork 0
Code Issues 21 Pull Requests 1 Packages Projects Releases Wiki Activity

Helpful copy and image lightbox fix

Browse Source 
* On the "Certification Required" error page: show help text under the
  checklist to make it clear that clicking the checklist item will link
  to the profile photo or cert photo upload page.
* Add more helpful text around the site to address common confusion:
  * On the Photo Upload page for profile_pic and the user is already at
    quota: add special text saying they can use an existing gallery
    photo as their profile pic instead.
  * On the self Gallery view page: if the user has no profile pic
    currently set, offer advice and links on how to set one.
* Fix the image max-width on Gallery lightbox modals
This commit is contained in:
Noah Petherbridge 2024-03-28 23:02:42 -07:00
parent 1c2982aec0
commit 35258beb36
5 changed files with 66 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/static/css/theme.css
View File

@ -52,6 +52,7 @@ img {
.photo-modal {
max-width: calc(100vw - 40px);
max-height: calc(100vh - 40px);
width: auto;
}
.photo-modal #detailImg {
position: relative;

20
web/templates/errors/certification_required.html
View File

@ -32,13 +32,15 @@
{{if .CurrentUser.ProfilePhoto.ID}}
<span class="icon"><i class="fa fa-circle-check has-text-success"></i></span>
{{else}}
<span class="icon"><i class="fa fa-circle has-text-danger"></i></span>
<span class="icon"><i class="fa fa-circle-xmark has-text-danger"></i></span>
{{end}}
<span>
Upload a Profile Picture to your account that shows your face
{{if not .CurrentUser.ProfilePhoto.ID}}
<span class="icon"><i class="fa fa-external-link"></i></span>
{{end}}
<p class="help ml-5 pl-2">
Click here to upload a new profile picture
<i class="fa fa-external-link ml-1"></i>
</p>
</span>
</a>
</li>
@ -48,13 +50,15 @@
{{if .CurrentUser.Certified}}
<span class="icon"><i class="fa fa-circle-check has-text-success"></i></span>
{{else}}
<span class="icon"><i class="fa fa-circle has-text-danger"></i></span>
<span class="icon"><i class="fa fa-circle-xmark has-text-danger"></i></span>
{{end}}
<span>
Get certified by uploading a verification selfie
{{if not .CurrentUser.Certified}}
<span class="icon"><i class="fa fa-external-link"></i></span>
{{end}}
<p class="help ml-5 pl-2">
Click here to go to the Certification Photo upload page
<i class="fa fa-external-link ml-1"></i>
</p>
</span>
</a>
</li>

5
web/templates/photo/certification.html
View File

@ -72,7 +72,10 @@
re-approved with a new Certification Photo to be recertified.
</p>
<button type="submit" class="button is-danger">
<button type="submit" class="button is-danger"
{{if eq .CertificationPhoto.Status "approved"}}
onclick="return window.confirm('Removing this photo will mark your account as Not Certified.\n\nYou will then need to upload a new certification photo for approval to certify your account again.\n\nAre you sure you want to do this?')"
{{end}}>
<span class="icon"><i class="fa fa-trash"></i></span>
<span>Delete This Photo</span>
</button>

41
web/templates/photo/gallery.html
View File

@ -283,6 +283,47 @@
</div>
</div>
<!-- If viewing our own profile, and we don't have a profile picture set, offer advice. -->
{{if and (not .IsSiteGallery) (eq .CurrentUser.ProfilePhoto.ID 0)}}
<div class="notification is-success is-light content">
<p>
<i class="fa-regular fa-id-badge mr-1"></i>
<strong>Your default profile picture is not set</strong>
<p>
Your default profile picture is currently not set to anything, and appears to other members as
the default blue <img src="/static/img/shy.png" width="16" height="16"> placeholder image.
</p>
<ul>
<li>
To upload a <strong>new</strong> profile picture, <a href="/photo/upload?intent=profile_pic">click here</a>.
</li>
<li>
To use one of your <strong>existing</strong> photos as your profile picture:
<ol class="my-2">
<li>
Click on the "Edit" button beneath one of your photos below.
</li>
<li>
On the edit page, below the picture, click on the button to "Set this as my profile photo (crop image)"
and select the square shape you want for your profile pic.
</li>
<li>
Click on "Save Changes" when done!
</li>
</ol>
</li>
</ul>
<p>
Having a profile picture set, along with an approved <a href="/photo/certification">certification photo</a>,
is required to access the social features on {{PrettyTitle}} such as the chat room, forums and member directory.
</p>
</p>
</div>
{{end}}
<!-- Indicator if friends-only is selected. -->
{{if eq .FilterWho "friends"}}
<div class="notification is-success is-light">

8
web/templates/photo/upload.html
View File

@ -78,6 +78,13 @@
{{end}}
</p>
{{if and (eq .Intent "profile_pic") (ge .PhotoCount .PhotoQuota)}}
<p class="block">
You have reached your maximum number of photos. <strong>To use one of your existing photos as your profile picture,</strong>
please visit your <a href="/u/{{.CurrentUser.Username}}/photos">Gallery page</a>, click on the "Edit" button for a photo,
then the button to set it as your profile picture will appear on the Edit page. Remember to click "Save" when done!
</p>
{{else}}
<p class="block">
You may upload <strong>{{SubtractInt .PhotoQuota .PhotoCount}}</strong> more photo{{Pluralize (SubtractInt .PhotoQuota .PhotoCount)}}.
{{if not .CurrentUser.Certified}}
@ -85,6 +92,7 @@
additional pictures.
{{end}}
</p>
{{end}}
</div>
{{end}}