Minor CSS fixes

* Breadcrumbs: override Bulma's nowrap style, as long forum thread
  titles could cause horizontal scrolling on mobile.
* Dashboard: fix double <a> tag wrapping for profile pictures.
* Member Search: fix invalid HTML code where div tags closed the
  wrapping p tag.
This commit is contained in:
Noah Petherbridge 2024-11-23 12:28:59 -08:00
parent 4b582b2141
commit c1cf5df70e
3 changed files with 79 additions and 66 deletions

View File

@ -159,6 +159,12 @@ nav.navbar {
height: 1.5em !important;
}
/* Bulma breadcrumbs don't word-wrap which can cause horizontal scrolling on mobile,
especially on forum thread pages with a long thread title. */
.breadcrumb {
white-space: inherit;
}
/***
* Mobile navbar notification count badge no.
*/

View File

@ -4,8 +4,13 @@
<section class="hero is-link is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">User Dashboard</h1>
<h2 class="subtitle">to your account</h2>
<h1 class="title">
<span class="icon mr-4 pl-3">
<i class="fa fa-house-user"></i>
</span>
<span>My Dashboard</span>
</h1>
<h2 class="subtitle">Settings &amp; Notifications</h2>
</div>
</div>
</section>
@ -182,7 +187,7 @@
<div class="card block">
<header class="card-header has-background-link">
<p class="card-header-title has-text-light">My Account</p>
<p class="card-header-title has-text-light">Quick Links</p>
</header>
<div class="card-content">
@ -203,7 +208,7 @@
<li>
<a href="/photo/upload">
<span class="icon"><i class="fa fa-upload"></i></span>
Upload Photos
Upload Photo
</a>
</li>
<li>
@ -214,28 +219,28 @@
</li>
<li>
<a href="/settings">
<span class="icon"><i class="fa fa-edit"></i></span>
<span class="icon"><i class="fa fa-gear"></i></span>
Edit Profile &amp; Settings
</a>
</li>
<li>
<a href="/photo/certification">
<span class="icon"><i class="fa fa-certificate"></i></span>
Certification Photo
</a>
</li>
<li>
<a href="/users/blocked">
<span class="icon"><i class="fa fa-hand"></i></span>
Blocked Users
</a>
</li>
<li>
<a href="/notes/me">
<span class="icon"><i class="fa fa-pen-to-square mr-1"></i></span>
My User Notes
</a>
</li>
<li>
<a href="/photo/certification">
<span class="icon"><i class="fa fa-certificate"></i></span>
My Certification Photo
</a>
</li>
<li>
<a href="/users/blocked">
<span class="icon"><i class="fa fa-hand"></i></span>
Blocked Users
</a>
</li>
<li>
<a href="/logout">
<span class="icon"><i class="fa fa-arrow-right-from-bracket"></i></span>
@ -250,12 +255,6 @@
</a>
</li>
{{end}}
<li>
<a href="/settings#deactivate">
<span class="icon"><i class="fa fa-trash"></i></span>
Delete account
</a>
</li>
</ul>
</aside>
</div>
@ -487,9 +486,7 @@
<strong class="tag is-success">NEW!</strong>
</div>
{{end}}
<a href="/u/{{.AboutUser.Username}}">
{{template "avatar-48x48" .AboutUser}}
</a>
</div>
<div class="column">
<div class="mb-1 pr-4">

View File

@ -82,6 +82,15 @@
<a href="/faq#shy-faqs" target="_blank">Learn more <i class="fa fa-external-link"></i></a>
</p>
</div>
{{else}}
<div class="block">
<i class="fa fa-hand-point-right mr-1"></i>
<strong>See also:</strong>
<a href="/members?sort=distance">
<i class="fa fa-location-dot mx-1"></i>
Who's Nearby?
</a>
</div>
{{end}}
<!-- Restricted search terms -->
@ -444,6 +453,7 @@
{{if .GetProfileField "orientation"}}
<span class="mr-2">{{.GetProfileField "orientation"}}</span>
{{end}}
</p>
<!-- Chat room status -->
{{if $Root.UserOnChatMap.Get .Username}}
@ -484,7 +494,7 @@
{{$Root.DistanceMap.Get .ID}} away
</div>
{{end}}
</p>
</div>
</div><!-- media-block -->
</div>