Skip to content

Commit

Permalink
fix: improve display of metseditor on small viewports
Browse files Browse the repository at this point in the history
  • Loading branch information
Simon Sendler committed Feb 18, 2025
1 parent 99f77b2 commit c109b32
Show file tree
Hide file tree
Showing 6 changed files with 32 additions and 87 deletions.
17 changes: 10 additions & 7 deletions src/main/webapp/WEB-INF/includes/metseditor/metseditor_image.xhtml
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:composite="http://xmlns.jcp.org/jsf/composite"
xmlns:composite="http://xmlns.jcp.org/jsf/composite"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:x="http://myfaces.apache.org/tomahawk"
xmlns:p="http://primefaces.org/ui">

<composite:interface />

<composite:implementation>
<h:panelGroup id="mainimagearea" rendered="#{Metadaten.bildAnzeigen==true}">
<h:panelGroup
id="mainimagearea"
rendered="#{Metadaten.bildAnzeigen==true}"
layout="block">
<!-- IMAGE VIEW -->
<ui:include src="image/inc_me_image-image.xhtml" />

<!-- THUMBNAIL VIEW -->
<ui:include src="image/inc_me_image-thumbnails.xhtml" />

<!-- BOOKMARKS -->
<ui:include src="image/inc_me_image-bookmarks.xhtml" />
</h:panelGroup>
Expand Down
24 changes: 8 additions & 16 deletions src/main/webapp/WEB-INF/includes/metseditor/metseditor_menuActions.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<composite:implementation>
<h:form id="meMenuActionsForm">
<ul class="navbar-nav">
<ul class="navbar-nav flex-row">
<!-- PAGE TITLE -->
<li class="nav-item">
<span class="nav-link">
Expand All @@ -24,19 +24,16 @@
<ui:fragment rendered="#{LoginForm.myBenutzer.metsDisplayProcessID}">
<li class="nav-item">Goobi-ID: #{Metadaten.myProzess.id}</li>
</ui:fragment>

<li class="separator">
</li>
<ui:fragment rendered="#{Metadaten.showOcrButton}">
<li class="nav-item">
<li class="nav-item d-none d-md-block">
<!-- JS function is defined in uii/includes/metseditor/modals/inc_me_modal_altoeditor.xhtml -->
<button onclick="openAltoEditor()" type="button" aria-label="#{msgs.mets_editOcrForCurrentImage}" class="nav-link" title="#{msgs.mets_editOcrForCurrentImage}" role="button" data-bs-toggle="tooltip" data-bs-placement="bottom">
<span class="fa fa-file-text-o fa-lg" aria-hidden="true"/>
<span class="fa fa-pencil fa-lg" aria-hidden="true"/>

</button>
</li>
<li class="nav-item #{Metadaten.treeProperties.showOcr eq 'true' ? 'active' :''}">
<li class="nav-item d-none d-md-block #{Metadaten.treeProperties.showOcr eq 'true' ? 'active' :''}">
<button jsf:id="ocrButton" aria-label="#{msgs.mets_showOcrForCurrentImage}" class="nav-link" jsf:action="#{NavigationForm.Reload}" title="#{msgs.mets_showOcrForCurrentImage}" role="button" data-bs-toggle="tooltip" data-bs-placement="bottom">
<span class="fa fa-file-text-o fa-lg" aria-hidden="true"/>
<f:setPropertyActionListener value="true" target="#{Metadaten.treeProperties.showOcr}"/>
Expand All @@ -45,7 +42,7 @@
</li>
</ui:fragment>
<!-- TOGGLE IMAGE VIEW -->
<li class="nav-item #{Metadaten.treeProperties.showOcr ne 'true' and Metadaten.treeProperties.showThumbnails ne 'true' ? 'active' :''}">
<li class="nav-item d-none d-md-block #{Metadaten.treeProperties.showOcr ne 'true' and Metadaten.treeProperties.showThumbnails ne 'true' ? 'active' :''}">
<button onclick="goobiWorkflowJS.meScrollPos.storeScrollPos()" class="nav-link" jsf:id="showSinglePage" aria-label="#{msgs.mets_showImagesOne}" jsf:action="#{Metadaten.toggleImageView}" title="#{msgs.mets_showImagesOne}" data-bs-toggle="tooltip" data-bs-placement="bottom">
<span class="fa fa-picture-o fa-lg" aria-hidden="true"/>
<f:setPropertyActionListener value="true" property="#{NavigationForm.uiStatus.mets_scrollToThumb}" target="#{NavigationForm.uiStatus.mets_scrollToThumb}"/>
Expand All @@ -55,7 +52,7 @@
</li>

<!-- TOGGLE IMAGE VIEW -->
<li class="nav-item #{Metadaten.treeProperties.showThumbnails ne '' ? 'active' :''}">
<li class="nav-item d-none d-md-block #{Metadaten.treeProperties.showThumbnails ne '' ? 'active' :''}">
<button onclick="goobiWorkflowJS.meScrollPos.storeScrollPos()" class="nav-link" jsf:id="showThumbnails" aria-label="#{msgs.mets_showImagesThumbs}" jsf:action="#{Metadaten.toggleImageView}" title="#{msgs.mets_showImagesThumbs}" data-bs-toggle="tooltip" data-bs-placement="bottom">
<span class="fa fa-picture-o fa-lg" aria-hidden="true"/>
<span class="fa fa-picture-o fa-lg" aria-hidden="true"/>
Expand All @@ -64,13 +61,8 @@
<f:setPropertyActionListener value="" target="#{Metadaten.treeProperties.showOcr}"/>
</button>
</li>


<li class="separator"/>


<!-- VALIDATION -->
<li class="nav-item">
<li class="nav-item d-none d-md-block">
<button style="display: none" jsf:id="startValidationButton" jsf:action="#{Metadaten.Validate}">
</button>

Expand All @@ -85,7 +77,7 @@
</li>

<!-- CONFIGURATION -->
<li class="nav-item dropdown">
<li class="nav-item dropdown d-none d-md-block">
<button id="configDropdown" type="button" class="nav-link dropdown-toggle" aria-label="#{msgs.mets_configuration}" aria-expanded="false" data-bs-toggle="dropdown">
<span class="fa fa-cog fa-lg" aria-hidden="true"/>
</button>
Expand Down Expand Up @@ -198,7 +190,7 @@

<!-- SAVE -->
<c:if test="#{not Metadaten.nurLesenModus}">
<li class="nav-item">
<li class="nav-item d-none d-md-block">
<!-- This button and the hidden button below have to
work together to get the wanted effect here. This button
is responsible for FIRST UNFOCUSING the currently
Expand Down
6 changes: 5 additions & 1 deletion src/main/webapp/WEB-INF/includes/metseditor/metseditor_menuPlugins.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@
<composite:interface />

<composite:implementation>
<h:form id="meMenuPluginsForm" rendered="#{!Metadaten.extensions.isEmpty()}">
<h:form
id="meMenuPluginsForm"
rendered="#{!Metadaten.extensions.isEmpty()}"
layout="block"
styleClass="d-none d-md-block">
<script>
function loadPlugin (data, selector) {
console.log('run loadPlugin')
Expand Down
52 changes: 0 additions & 52 deletions src/main/webapp/WEB-INF/includes/metseditor/metseditor_menu_mobile.xhtml
View file

This file was deleted.

4 changes: 2 additions & 2 deletions src/main/webapp/WEB-INF/includes/metseditor/metseditor_pagination.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<h:form id="metseditorPaginationForm" prependId="false">
<div class="row row-flexible">
<!-- SELECT PAGES -->
<div id="pagLeft" class="col-5 pagination__left">
<div id="pagLeft" class="col-12 col-lg-5 pagination__left">
<section:section id="meSelectPagesBox" type="outline">
<section:header icon="bars" title="#{msgs.auswahlDerSeiten}">
<section:header-actions>
Expand Down Expand Up @@ -72,7 +72,7 @@
</div>

<!-- SET PAGINATION -->
<div id="pagRight" class="col-7 pagination__right">
<div id="pagRight" class="col-12 col-lg-7 pagination__right">
<h:panelGroup layout="block" id="meSetPaginationBox" styleClass="pb-2">
<section:section type="outline">
<section:header icon="bars" title="#{msgs.paginierungFestlegen}">
Expand Down
16 changes: 7 additions & 9 deletions src/main/webapp/uii/templatePG/template_metseditor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,6 @@
<!-- METSEDITOR MENU ACTIONS -->
<ui:insert name="metseditorMenuActions" />
</nav>

<!-- TOGLLE MOBILE IMAGE -->
<button type="button" class="btn btn--clean mobile-visible" data-toggle="mobile-image">
<span class="fa fa-chevron-left fa-lg" aria-hidden="true" />
<span class="fa fa-picture-o fa-lg" aria-hidden="true" />
<span class="sr-only">#{msgs.toggleMobileImage}</span>
</button>
</layout:header>

<!-- CONTENT WRAPPER -->
Expand All @@ -80,7 +73,10 @@
</div>

<!-- CONTENT CENTER -->
<h:panelGroup id="pageContentCenter" styleClass="flex-fill p-2 border-end" layout="block">
<h:panelGroup
id="pageContentCenter"
styleClass="flex-fill p-2 border-end overflow-y-scroll vh-100"
layout="block">
<div class="page-content__center-inner">
<!-- METSEDITOR CONTENT -->
<ui:insert name="metseditorContent" />
Expand All @@ -89,7 +85,9 @@

<!-- CONTENT RIGHT -->
<ui:fragment rendered="#{Metadaten.bildAnzeigen}">
<div id="pageContentRight" class="flex-fill p-2">
<div
id="pageContentRight"
class="flex-fill p-2 d-none d-md-block">
<div class="page-content__right-inner">
<!-- METSEDITOR IMAGE -->
<ui:insert name="metseditorImage" />
Expand Down

0 comments on commit c109b32

Please sign in to comment.