Skip to content

Commit

Permalink
feat: display stats info on GoobiScript and users on small viewports
Browse files Browse the repository at this point in the history
  • Loading branch information
Simon Sendler committed Jan 24, 2025
1 parent 6e2fe48 commit 538b761
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 35 deletions.
41 changes: 30 additions & 11 deletions src/main/webapp/uii/templatePG/css/src/components/_header.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.header__bottom {
--stats-gap: 0.46875rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
Expand All @@ -16,14 +17,21 @@

.stats {
display: flex;
align-items: stretch;
align-items: flex-end;
list-style: none;
padding-left: 0; // ul reset
gap: 0.9375rem;
li {
gap: var(--stats-gap);
.stats-content {
color: var(--clr-white, #fff);
display: flex;

gap: var(--stats-gap);
padding: 0.625rem 0.9375rem;
}
.stats-text {
display: none;
}
li {
--border-radius: 12px;
border-radius: var(--border-radius);
}
#ajaxloader {
Expand All @@ -34,9 +42,7 @@
}
button,
&__date {
color: var(--clr-white, #fff);
display: flex;
gap: 0.9375rem;
display: none;
}
button {
background-color: transparent;
Expand All @@ -51,11 +57,24 @@
}
i,
.fa {
font-size: 1.75rem;
font-size: 1rem;
}

@media (max-width: 767px) {
display: none;
@media screen and (min-width: 800px) {
.stats-content {
gap: calc(var(--stats-gap) * 2);
}
.stats-text {
display: inline;
}
.fa {
font-size: 1.75rem;
}
& li {
--border-radius: 0;
}
&__date {
display: flex;
}
}
}
}
62 changes: 38 additions & 24 deletions src/main/webapp/uii/templatePG/templatePG.html
Original file line number Diff line number Diff line change
Expand Up @@ -189,25 +189,35 @@ <h1>
<!-- // AJAX LOADER -->

<!-- GOOBI SCRIPT -->
<ui:fragment rendered="#{LoginForm.hasAnyGoobiScriptRole and SessionForm.gsm.goobiScriptResultSize gt 0}">
<li class="#{SessionForm.gsm.hasErrors?'background-color-F':'background-color-D'} stats__goobi-script">
<button jsf:action="process_goobiScript" jsf:id="goobiScriptResults2" class="button-transparent">
<i class="fa fa-cog #{SessionForm.gsm.goobiScriptHasResults('WAITING') or SessionForm.gsm.goobiScriptHasResults('RUNNING')?'fa-spin':''}"></i>
<div class="details">
<span class="big">#{msgs.goobiScript_isActive}</span>
<!-- <ui:fragment rendered="#{LoginForm.hasAnyGoobiScriptRole and SessionForm.gsm.goobiScriptResultSize gt 0}"> -->
<li
class="#{SessionForm.gsm.hasErrors?'background-color-F':'background-color-D'} stats__goobi-script"
title="#{msgs.goobiScript_isActive}"
data-bs-toggle="tooltip">
<button jsf:action="process_goobiScript" jsf:id="goobiScriptResults2" class="stats-content">
<span
aria-hidden="true"
class="fa fa-cog #{SessionForm.gsm.goobiScriptHasResults('WAITING') or SessionForm.gsm.goobiScriptHasResults('RUNNING')?'fa-spin':''}" />
<span class="details">
<span class="stats-text">#{msgs.goobiScript_isActive}</span>
<span>#{SessionForm.gsm.numberOfFinishedScripts} / #{SessionForm.gsm.goobiScriptResultSize}</span>
</div>
</span>
</button>
</li>
</ui:fragment>
<!-- </ui:fragment> -->

<!-- CURRENT USERS -->
<h:panelGroup rendered="#{!HelperForm.anonymized and LoginForm.hasRole('Statistics_CurrentUsers')}">
<h:panelGroup
rendered="#{!HelperForm.anonymized and LoginForm.hasRole('Statistics_CurrentUsers')}"
title="#{msgs.aktiveBenutzer}"
data-bs-toggle="tooltip">
<li class='bg-neutral-400 stats__current-users'>
<button jsf:action="currentUsers" jsf:id="currentUsers">
<i class="fa fa-users"></i>
<button jsf:action="currentUsers" jsf:id="currentUsers" class="stats-content">
<span
aria-hidden="true"
class="fa fa-users" />
<div class="details">
<span>#{msgs.aktiveBenutzer}</span>
<span class="stats-text">#{msgs.aktiveBenutzer}</span>
<span>#{SessionForm.numberOfSessions}</span>
<f:setPropertyActionListener target="#{NavigationForm.aktuell}" value="" />
</div>
Expand All @@ -218,18 +228,22 @@ <h1>

<!-- DATE -->
<li class="bg-neutral-400 stats__date">
<i class="fa fa-calendar"></i>
<div class="details">
<span class="big">
<h:outputText value="#{SessionForm.currentTime}" />
<a tabindex="-1" href="#{HelperForm.itmPathAsUrl}" target="self" aria-label="itm">
<div style="height: 12px;width: 20px;display: inline-block;"></div>
</a>
</span>
<span>
<h:outputText value="#{SessionForm.date}">
<f:convertDateTime locale="#{SpracheForm.locale}" type="both" dateStyle="medium"/>
</h:outputText>
<div class="stats-content">
<span
class="fa fa-calendar"
aria-hidden="true" />
<span class="details">
<span class="big">
<h:outputText value="#{SessionForm.currentTime}" />
<a tabindex="-1" href="#{HelperForm.itmPathAsUrl}" target="self" aria-label="itm">
<div style="height: 12px;width: 20px;display: inline-block;"></div>
</a>
</span>
<span>
<h:outputText value="#{SessionForm.date}">
<f:convertDateTime locale="#{SpracheForm.locale}" type="both" dateStyle="medium"/>
</h:outputText>
</span>
</span>
</div>
</li>
Expand Down

0 comments on commit 538b761

Please sign in to comment.