Helpful copy and image lightbox fix
* 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
main
Noah Petherbridge
parent
1c2982aec0
commit
35258beb36
|
|
@ -52,6 +52,7 @@ img {
|
|||
.photo-modal {
|
||||
max-width: calc(100vw - 40px);
|
||||
max-height: calc(100vh - 40px);
|
||||
width: auto;
|
||||
}
|
||||
.photo-modal #detailImg {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue