some UI fixes
This commit is contained in:
Radek Davidek
parent
898f9988c9
commit
355de3dcde
@ -197,6 +197,7 @@ public final class Pages {
|
||||
|
||||
String forumName = forum == null ? "" : forum.getName();
|
||||
String forumDesc = forum == null ? "" : forum.getDescription();
|
||||
String forumHeaderSection = forumDesc.isBlank() ? forumName : forumName + " - " + forumDesc;
|
||||
String forumCountdown = forum == null ? "" : valueOrDefault(forum.getCountdown(), "");
|
||||
long loadPageTime = System.currentTimeMillis();
|
||||
long forumId = forum == null ? 0 : forum.getId();
|
||||
@ -231,10 +232,9 @@ public final class Pages {
|
||||
}
|
||||
|
||||
return FORUM_DISPLAY_TEMPLATE
|
||||
.replace("{{COMMON_HEADER}}", renderCommonHeader(username, forumName, true, pmStats))
|
||||
.replace("{{COMMON_HEADER}}", renderCommonHeader(username, forumHeaderSection, true, pmStats))
|
||||
.replace("{{COMMON_FOOTER}}", renderCommonFooter(Math.max(0, loggedUsersCount), loggedUsers))
|
||||
.replace("{{FORUM_NAME}}", escapeHtml(forumName))
|
||||
.replace("{{FORUM_DESCRIPTION}}", escapeHtml(forumDesc))
|
||||
.replace("{{COUNTDOWN_BLOCK}}", buildCountdownBlock(forumCountdown, loadPageTime))
|
||||
.replace("{{MESSAGE_ROWS}}", messageRows.toString())
|
||||
.replace("{{FORUM_ID}}", String.valueOf(forumId))
|
||||
@ -744,41 +744,7 @@ public final class Pages {
|
||||
+ "<div class='fc-clock-wrap'><span class='fc-clock' id='currenttime'></span></div>"
|
||||
+ "<div class='smallfont'><strong>Welcome, " + welcomeName + ".</strong></div>"
|
||||
+ "</div></div>";
|
||||
return "<style type='text/css'>"
|
||||
+ ".fc-header-shell{border-radius:10px;overflow:hidden;box-shadow:0 2px 10px var(--fc-shadow-soft, rgba(0,0,0,.10));}"
|
||||
+ ".fc-header-wrap{background:linear-gradient(180deg,var(--fc-header-top,#fffce1) 0%,var(--fc-header-bottom,#fff5b5) 100%);padding:10px 12px;}"
|
||||
+ ".fc-header-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}"
|
||||
+ ".fc-brand{display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:var(--fc-header-title,#311313);font-weight:bold;font-size:16px;line-height:1.3;}"
|
||||
+ ".fc-brand a{color:var(--fc-header-title,#311313);text-decoration:none;}"
|
||||
+ ".fc-brand a:hover{text-decoration:underline;}"
|
||||
+ ".fc-header-sep{color:var(--fc-header-sep,#7d5a30);font-weight:bold;}"
|
||||
+ ".fc-header-section-link,.fc-header-section-label{font-size:13px;color:var(--fc-header-section,#5a2b2b);}"
|
||||
+ ".fc-pm-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--fc-pill-bg,#fff8dc);border:1px solid var(--fc-pill-border,#d7c57a);color:var(--fc-pill-fg,#6c5b24);font-size:11px;}"
|
||||
+ ".fc-pm-pill-alert{background:var(--fc-pill-alert-bg,#fff1e0);border-color:var(--fc-pill-alert-border,#cd7f32);color:var(--fc-pill-alert-fg,#7f2f00);}"
|
||||
+ ".fc-pm-pill img{display:block;}"
|
||||
+ ".fc-header-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}"
|
||||
+ ".fc-theme-toggle{padding:4px 10px;border-radius:999px;border:1px solid var(--fc-nav-border,#7d5a30);background:var(--fc-nav-bg,#f6edd0);color:var(--fc-nav-fg,#4d2a2a);font-size:11px;font-weight:bold;cursor:pointer;}"
|
||||
+ ".fc-theme-toggle:hover{background:var(--fc-nav-hover-bg,#fff8dc);}"
|
||||
+ ".fc-header-main{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}"
|
||||
+ ".fc-account{display:flex;align-items:flex-start;gap:10px;min-width:260px;background:var(--fc-account-bg,#ffffef);border:1px solid var(--fc-account-border,#d9cc93);border-radius:8px;padding:8px 10px;}"
|
||||
+ ".fc-account-guest{min-width:220px;}"
|
||||
+ ".fc-avatar{width:56px;height:56px;border:1px solid var(--fc-avatar-border,#b9a96f);border-radius:8px;object-fit:cover;}"
|
||||
+ ".fc-account-meta{display:flex;flex-direction:column;gap:2px;}"
|
||||
+ ".fc-clock-wrap{margin-bottom:2px;}"
|
||||
+ ".fc-clock{color:var(--fc-clock,#1b7c2c);font-weight:bold;font-size:12px;}"
|
||||
+ ".fc-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;max-width:700px;}"
|
||||
+ ".fc-nav-link{display:inline-block;padding:5px 10px;border-radius:6px;border:1px solid var(--fc-nav-border,#7d5a30);background:var(--fc-nav-bg,#f6edd0);color:var(--fc-nav-fg,#4d2a2a) !important;font-size:11px;font-weight:bold;text-decoration:none;}"
|
||||
+ ".fc-nav-link:hover{background:var(--fc-nav-hover-bg,#fff8dc);text-decoration:none;}"
|
||||
+ ".fc-nav-link-active{background:var(--fc-nav-active-bg,#663333);color:var(--fc-nav-active-fg,#fff8e1) !important;border-color:var(--fc-nav-active-border,#4d2525);}"
|
||||
+ ".fc-nav-link-logout{background:var(--fc-nav-logout-bg,#f1d6c0);border-color:var(--fc-nav-logout-border,#a76435);color:var(--fc-nav-logout-fg,#5f1c00) !important;}"
|
||||
+ "@media (max-width: 820px){"
|
||||
+ ".fc-header-wrap{padding:9px;}"
|
||||
+ ".fc-header-main{flex-direction:column;align-items:stretch;}"
|
||||
+ ".fc-nav{justify-content:flex-start;}"
|
||||
+ ".fc-account{min-width:0;width:100%;}"
|
||||
+ "}"
|
||||
+ "</style>"
|
||||
+ "<table class='tborder fc-header-shell' cellpadding='0' cellspacing='0' border='0' width='100%' align='center'>"
|
||||
return "<table class='tborder fc-header-shell' cellpadding='0' cellspacing='0' border='0' width='100%' align='center'>"
|
||||
+ "<tbody><tr><td class='alt1' width='100%'>"
|
||||
+ "<div class='fc-header-wrap'>"
|
||||
+ "<div class='fc-header-top'>"
|
||||
|
||||
@ -229,13 +229,13 @@ function AX_asynchUpdateResponse()
|
||||
for (var i=0; i <= (chatIds.length-1); i++)
|
||||
{
|
||||
var divIdName = 'chatId_'+chatIds[i].firstChild.data;
|
||||
var color = 'color:#FF0000';
|
||||
var color = 'color:var(--fc-chat-new,#cf1e1e)';
|
||||
if (newMess[i].firstChild.data=='1')
|
||||
color = 'color:#FF0000';
|
||||
color = 'color:var(--fc-chat-new,#cf1e1e)';
|
||||
else if (newMess[i].firstChild.data=='2')
|
||||
color = 'color:#0000FF';
|
||||
color = 'color:var(--fc-chat-info,#0e3fba)';
|
||||
else
|
||||
color = 'color:#000000';
|
||||
color = 'color:var(--fc-chat-default,#24110b)';
|
||||
/*
|
||||
var yesVotes = 0;
|
||||
var noVotes = 0;
|
||||
@ -307,4 +307,4 @@ function AX_asynchUpdateResponse()
|
||||
}
|
||||
/*
|
||||
* END of response functions
|
||||
*/
|
||||
*/
|
||||
|
||||
@ -510,6 +510,9 @@ ul.menu .topline {border-top:1px solid #aaa}
|
||||
--fc-nav-logout-bg: #f1d6c0;
|
||||
--fc-nav-logout-border: #a76435;
|
||||
--fc-nav-logout-fg: #5f1c00;
|
||||
--fc-chat-new: #cf1e1e;
|
||||
--fc-chat-info: #0e3fba;
|
||||
--fc-chat-default: #24110b;
|
||||
}
|
||||
|
||||
:root[data-theme='dark']
|
||||
@ -568,6 +571,9 @@ ul.menu .topline {border-top:1px solid #aaa}
|
||||
--fc-nav-logout-bg: #4a2f24;
|
||||
--fc-nav-logout-border: #8f5135;
|
||||
--fc-nav-logout-fg: #ffd8c4;
|
||||
--fc-chat-new: #ff8b8b;
|
||||
--fc-chat-info: #9dc0ff;
|
||||
--fc-chat-default: #eae4d8;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark)
|
||||
@ -628,6 +634,9 @@ ul.menu .topline {border-top:1px solid #aaa}
|
||||
--fc-nav-logout-bg: #4a2f24;
|
||||
--fc-nav-logout-border: #8f5135;
|
||||
--fc-nav-logout-fg: #ffd8c4;
|
||||
--fc-chat-new: #ff8b8b;
|
||||
--fc-chat-info: #9dc0ff;
|
||||
--fc-chat-default: #eae4d8;
|
||||
}
|
||||
}
|
||||
|
||||
@ -693,11 +702,13 @@ a:hover, a:active, .page a:hover, .page a:active
|
||||
.alt1, .alt1Active
|
||||
{
|
||||
background: var(--fc-alt1);
|
||||
color: var(--fc-fg-main);
|
||||
}
|
||||
|
||||
.alt2, .alt2Active
|
||||
{
|
||||
background: var(--fc-alt2);
|
||||
color: var(--fc-fg-main);
|
||||
}
|
||||
|
||||
.panelsurround
|
||||
@ -749,6 +760,212 @@ textarea, .bginput, select
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.fc-header-shell
|
||||
{
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px var(--fc-shadow-soft, rgba(0, 0, 0, .10));
|
||||
}
|
||||
|
||||
.fc-header-wrap
|
||||
{
|
||||
background: linear-gradient(180deg, var(--fc-header-top, #fffce1) 0%, var(--fc-header-bottom, #fff5b5) 100%);
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.fc-header-top
|
||||
{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.fc-brand
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
color: var(--fc-header-title, #311313);
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.fc-brand a
|
||||
{
|
||||
color: var(--fc-header-title, #311313);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fc-brand a:hover
|
||||
{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.fc-header-sep
|
||||
{
|
||||
color: var(--fc-header-sep, #7d5a30);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fc-header-section-link, .fc-header-section-label
|
||||
{
|
||||
font-size: 13px;
|
||||
color: var(--fc-header-section, #5a2b2b);
|
||||
}
|
||||
|
||||
.fc-pm-pill
|
||||
{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--fc-pill-bg, #fff8dc);
|
||||
border: 1px solid var(--fc-pill-border, #d7c57a);
|
||||
color: var(--fc-pill-fg, #6c5b24);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.fc-pm-pill-alert
|
||||
{
|
||||
background: var(--fc-pill-alert-bg, #fff1e0);
|
||||
border-color: var(--fc-pill-alert-border, #cd7f32);
|
||||
color: var(--fc-pill-alert-fg, #7f2f00);
|
||||
}
|
||||
|
||||
.fc-pm-pill img
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fc-header-right
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.fc-theme-toggle
|
||||
{
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--fc-nav-border, #7d5a30);
|
||||
background: var(--fc-nav-bg, #f6edd0);
|
||||
color: var(--fc-nav-fg, #4d2a2a);
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fc-theme-toggle:hover
|
||||
{
|
||||
background: var(--fc-nav-hover-bg, #fff8dc);
|
||||
}
|
||||
|
||||
.fc-header-main
|
||||
{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fc-account
|
||||
{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
min-width: 260px;
|
||||
background: var(--fc-account-bg, #ffffef);
|
||||
border: 1px solid var(--fc-account-border, #d9cc93);
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.fc-account-guest
|
||||
{
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.fc-avatar
|
||||
{
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border: 1px solid var(--fc-avatar-border, #b9a96f);
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.fc-account-meta
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.fc-clock-wrap
|
||||
{
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.fc-clock
|
||||
{
|
||||
color: var(--fc-clock, #1b7c2c);
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.fc-nav
|
||||
{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.fc-nav-link
|
||||
{
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--fc-nav-border, #7d5a30);
|
||||
background: var(--fc-nav-bg, #f6edd0);
|
||||
color: var(--fc-nav-fg, #4d2a2a) !important;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fc-nav-link:hover
|
||||
{
|
||||
background: var(--fc-nav-hover-bg, #fff8dc);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fc-nav-link-active
|
||||
{
|
||||
background: var(--fc-nav-active-bg, #663333);
|
||||
color: var(--fc-nav-active-fg, #fff8e1) !important;
|
||||
border-color: var(--fc-nav-active-border, #4d2525);
|
||||
}
|
||||
|
||||
.fc-nav-link-logout
|
||||
{
|
||||
background: var(--fc-nav-logout-bg, #f1d6c0);
|
||||
border-color: var(--fc-nav-logout-border, #a76435);
|
||||
color: var(--fc-nav-logout-fg, #5f1c00) !important;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
max-width: 100%;
|
||||
@ -792,6 +1009,28 @@ input[type='text'], input[type='password'], input[type='file'], textarea, select
|
||||
{
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.fc-header-wrap
|
||||
{
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.fc-header-main
|
||||
{
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.fc-nav
|
||||
{
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.fc-account
|
||||
{
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Contrast fixes for both themes */
|
||||
@ -827,9 +1066,64 @@ td, th, p, li
|
||||
color: var(--fc-thead-fg);
|
||||
}
|
||||
|
||||
.tfoot
|
||||
{
|
||||
background: linear-gradient(180deg, var(--fc-vbmenu-top) 0%, var(--fc-vbmenu-bottom) 100%);
|
||||
color: var(--fc-vbmenu-fg);
|
||||
}
|
||||
|
||||
.tfoot a:link, .tfoot_alink,
|
||||
.tfoot a:visited, .tfoot_avisited,
|
||||
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
|
||||
{
|
||||
color: var(--fc-thead-fg);
|
||||
}
|
||||
|
||||
.vbmenu_popup,
|
||||
.vbmenu_option,
|
||||
.vbmenu_hilite,
|
||||
.vbmenu_option a:link,
|
||||
.vbmenu_option a:visited,
|
||||
.vbmenu_option a:hover,
|
||||
.vbmenu_hilite a:link,
|
||||
.vbmenu_hilite a:visited,
|
||||
.vbmenu_hilite a:hover,
|
||||
#results ul li a,
|
||||
#results ul li a strong,
|
||||
#results ul li a:hover,
|
||||
#results ul li a.hover,
|
||||
#results ul li a:hover strong,
|
||||
#results ul li a.hover strong,
|
||||
ul.menu a,
|
||||
input#s
|
||||
{
|
||||
color: var(--fc-fg-main);
|
||||
}
|
||||
|
||||
.vbmenu_popup
|
||||
{
|
||||
background: var(--fc-panel-bg);
|
||||
border-color: var(--fc-border);
|
||||
}
|
||||
|
||||
.vbmenu_option,
|
||||
.vbmenu_hilite,
|
||||
#results ul li a,
|
||||
ul.menu ul li a
|
||||
{
|
||||
background: var(--fc-surface);
|
||||
}
|
||||
|
||||
#results ul li a:hover,
|
||||
#results ul li a.hover,
|
||||
ul.menu ul li a:hover
|
||||
{
|
||||
background: var(--fc-nav-hover-bg);
|
||||
color: var(--fc-fg-main);
|
||||
}
|
||||
|
||||
input#s
|
||||
{
|
||||
background: var(--fc-input-bg);
|
||||
border: 1px solid var(--fc-input-border);
|
||||
}
|
||||
|
||||
@ -14,14 +14,6 @@
|
||||
{{COMMON_HEADER}}
|
||||
<br/>
|
||||
|
||||
<table class='tborder' cellpadding='6' cellspacing='1' border='0' width='100%' align='center'>
|
||||
<tbody>
|
||||
<tr><td class='thead'>{{FORUM_NAME}}</td></tr>
|
||||
<tr><td class='alt2'>{{FORUM_DESCRIPTION}}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br/>
|
||||
|
||||
<script type='text/javascript'>
|
||||
function toggleAttachmentForm() {
|
||||
var el = document.getElementById('hideshow');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user