User Themes refactor
Instead of fighting to override Bulma CSS classes, add user-theme-* classes for simpler styling.
This commit is contained in:
Noah Petherbridge
parent
b7bee75e1f
commit
704124157d
|
|
@ -40,7 +40,8 @@ func Profile() http.HandlerFunc {
|
|||
}
|
||||
|
||||
vars := map[string]interface{}{
|
||||
"User": user,
|
||||
"User": user,
|
||||
"IsExternalView": true,
|
||||
}
|
||||
if err := tmpl.Execute(w, r, vars); err != nil {
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{{define "content"}}
|
||||
{{template "profile-theme-style" .User}}
|
||||
<div class="container">
|
||||
<section class="hero {{if and .LoggedIn (not .IsPrivate)}}is-info{{else}}is-light is-bold{{end}}">
|
||||
<section class="hero {{if and .LoggedIn (not .IsPrivate)}}is-info{{else}}is-light is-bold{{end}} {{if not .IsExternalView}}user-theme-hero{{end}}">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
|
|
@ -313,7 +313,7 @@
|
|||
|
||||
<div class="column is-two-thirds">
|
||||
<div class="card block">
|
||||
<header class="card-header has-background-link">
|
||||
<header class="card-header has-background-link user-theme-card-title">
|
||||
<div class="card-header-title">
|
||||
<div class="columns is-mobile is-gapless nonshy-fullwidth">
|
||||
<div class="column">
|
||||
|
|
@ -330,7 +330,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="card-content user-theme-card-body">
|
||||
<div class="content">
|
||||
{{or (ReSignPhotoLinks (ToMarkdown (.User.GetProfileField "about_me"))) "n/a"}}
|
||||
</div>
|
||||
|
|
@ -338,7 +338,7 @@
|
|||
</div>
|
||||
|
||||
<div class="card block">
|
||||
<header class="card-header has-background-link">
|
||||
<header class="card-header has-background-link user-theme-card-title">
|
||||
<div class="card-header-title">
|
||||
<div class="columns is-mobile is-gapless nonshy-fullwidth">
|
||||
<div class="column">
|
||||
|
|
@ -355,7 +355,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="card-content user-theme-card-body">
|
||||
<div class="content">
|
||||
{{or (ReSignPhotoLinks (ToMarkdown (.User.GetProfileField "interests"))) "n/a"}}
|
||||
</div>
|
||||
|
|
@ -363,7 +363,7 @@
|
|||
</div>
|
||||
|
||||
<div class="card block">
|
||||
<header class="card-header has-background-link">
|
||||
<header class="card-header has-background-link user-theme-card-title">
|
||||
<div class="card-header-title">
|
||||
<div class="columns is-mobile is-gapless nonshy-fullwidth">
|
||||
<div class="column">
|
||||
|
|
@ -380,7 +380,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="card-content user-theme-card-body">
|
||||
<div class="content">
|
||||
{{or (ReSignPhotoLinks (ToMarkdown (.User.GetProfileField "music_movies"))) "n/a"}}
|
||||
</div>
|
||||
|
|
@ -390,14 +390,14 @@
|
|||
|
||||
<div class="column">
|
||||
<div class="card block">
|
||||
<header class="card-header has-background-info">
|
||||
<header class="card-header has-background-info user-theme-card-title">
|
||||
<p class="card-header-title has-text-light">
|
||||
<i class="fa fa-user pr-2"></i>
|
||||
About {{.User.Username}}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="card-content user-theme-card-body">
|
||||
<table class="table is-fullwidth" style="font-size: small">
|
||||
<tr>
|
||||
<td class="has-text-right">
|
||||
|
|
@ -476,14 +476,14 @@
|
|||
</div>
|
||||
|
||||
<div class="card block">
|
||||
<header class="card-header has-background-info">
|
||||
<header class="card-header has-background-info user-theme-card-title">
|
||||
<p class="card-header-title has-text-light">
|
||||
<i class="fa fa-chart-line pr-2"></i>
|
||||
Activity
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="card-content user-theme-card-body">
|
||||
|
||||
<!-- Lazy load the statistics card-->
|
||||
<div hx-get="/htmx/user/profile/activity?username={{.User.Username}}" hx-trigger="load">
|
||||
|
|
|
|||
|
|
@ -24,97 +24,84 @@ section.hero {
|
|||
{{$cardTitleFG := or (.GetProfileField "card-title-fg") "#f7f7f7"}}
|
||||
{{$cardLinkFG := or (.GetProfileField "card-link-color") "#0099ff"}}
|
||||
{{$cardLightness := .GetProfileField "card-lightness"}}
|
||||
{{$heroA := or (.GetProfileField "hero-color-start") "#0f81cc"}}
|
||||
{{$heroB := or (.GetProfileField "hero-color-end") "#7683cc"}}
|
||||
<style type="text/css">
|
||||
{{template "profile-theme-hero-style" .}}
|
||||
header.card-header {
|
||||
/* Hero banner */
|
||||
.user-theme-hero {
|
||||
background-image: linear-gradient(141deg, {{$heroA}}, {{$heroB}}) !important;
|
||||
|
||||
.title, .subtitle {
|
||||
color: {{if eq (.GetProfileField "hero-text-dark") "true"}}#4a4a4a{{else}}#f5f5f5{{end}} !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Card Title colors */
|
||||
.user-theme-card-title {
|
||||
background-color: {{$cardTitleBG}} !important;
|
||||
}
|
||||
p.card-header-title {
|
||||
color: {{$cardTitleFG}} !important;
|
||||
|
||||
* {
|
||||
color: {{$cardTitleFG}} !important;
|
||||
}
|
||||
|
||||
.button.is-outlined {
|
||||
border-color: {{$cardTitleFG}} !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Card Body colors */
|
||||
.user-theme-card-body {
|
||||
a {
|
||||
color: {{$cardLinkFG}} !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced light theme overrides */
|
||||
{{if eq $cardLightness "light"}}
|
||||
div.box, .container div.card-content, table.table, table.table strong, td {
|
||||
background-color: #fff !important;
|
||||
color: #4a4a4a !important;
|
||||
}
|
||||
aside.menu ul.menu-list li a {
|
||||
background-color: #ccc !important;
|
||||
color: #4a4a4a !important;
|
||||
}
|
||||
blockquote, pre, code {
|
||||
background-color: #ccc !important;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
div.tag {
|
||||
background-color: #ccc;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
strong {
|
||||
color: #4a4a4a;
|
||||
}
|
||||
.user-theme-card-body {
|
||||
background-color: #fff !important;
|
||||
color: #4a4a4a !important;
|
||||
|
||||
/* More text color overrides (h1's etc. look light on prefers-dark color schemes) */
|
||||
.container div.card-content .content * {
|
||||
color: #4a4a4a;
|
||||
}
|
||||
* {
|
||||
color: #4a4a4a !important;
|
||||
}
|
||||
|
||||
/* Slightly less light on dark theme devices */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
div.box, .container div.card-content, table.table, table.table strong {
|
||||
background-color: #e4e4e4;
|
||||
color: #4a4a4a;
|
||||
a > * {
|
||||
color: {{$cardLinkFG}} !important;
|
||||
}
|
||||
|
||||
blockquote, pre, code, .tag {
|
||||
background-color: #ccc !important;
|
||||
color: #4a4a4a m !important;
|
||||
}
|
||||
|
||||
.table {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
{{else if eq $cardLightness "dark"}}
|
||||
div.box, .container div.card-content, table.table, table.table strong, td {
|
||||
background-color: #4a4a4a !important;
|
||||
color: #f5f5f5 !important;
|
||||
}
|
||||
aside.menu ul.menu-list li a {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #f5f5f5 !important;
|
||||
}
|
||||
blockquote, pre, code {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #f5f5f5;
|
||||
}
|
||||
div.tag {
|
||||
background-color: #333;
|
||||
color: #f5f5f5;
|
||||
}
|
||||
strong {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
.user-theme-card-body {
|
||||
background-color: #4a4a4a !important;
|
||||
color: #f5f5f5 !important;
|
||||
|
||||
/* More text color overrides (h1's etc. look dark on prefers-light color schemes) */
|
||||
.container div.card-content .content * {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
* {
|
||||
color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
/* Even darker on dark theme devices */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
div.box, .container div.card-content, table.table, table.table strong {
|
||||
background-color: #0a0a0a;
|
||||
color: #b5b5b5;
|
||||
}
|
||||
}
|
||||
a > * {
|
||||
color: {{$cardLinkFG}} !important;
|
||||
}
|
||||
|
||||
blockquote, pre, code, .tag {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #f5f5f5 m !important;
|
||||
}
|
||||
|
||||
.table {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
{{end}}
|
||||
|
||||
.container div.card-content a {
|
||||
color: {{$cardLinkFG}} !important;
|
||||
}
|
||||
.card-content .menu-list li a {
|
||||
color: inherit !important;
|
||||
}
|
||||
.container div.card-content a:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Override link color for the Activity box, so users don't set black-on-black and wreck the links */
|
||||
.card-content table a.has-text-info {
|
||||
color: #3e8ed0 !important;
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user