Skip to content

Commit

Permalink
Merge pull request #218 from beatrycze-volk/update-3d-view-plugin
Browse files Browse the repository at this point in the history 
Update css and template of 3DView plugin
  • Loading branch information
@sebastian-meyer
sebastian-meyer authored Feb 1, 2023
2 parents 0d36ce7 + 2908f13 commit 73e28b5
Show file tree
Hide file tree
Showing 2 changed files with 185 additions and 56 deletions.
9 changes: 5 additions & 4 deletions Resources/Private/Plugins/Kitodo/Templates/View3D/Main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">

<p id="DFG_3DViewer" 3d="{url}" proxy="{proxy}" wisski_url="{wisskiUrl}" class="tx-dlf-view-3d"></p>
<p id="DFG_3DViewer" 3d="{3d}" model="{model}" xml="{xml}" settings="{settings}" proxy="{proxy}" class="tx-dlf-view-3d"></p>

<f:section name="FooterAssets">
<script src="/typo3conf/ext/dlf/Resources/Public/Javascript/3DViewer/main.js" type="module"></script>
<script src="/typo3conf/ext/dlf/Resources/Public/Javascript/Toastify/toastify.js" type="text/javascript"></script>
<script src="/typo3conf/ext/dlf/Resources/Public/Javascript/3DViewer/spinner/main.js" type="text/javascript"></script>
<script src="/typo3conf/ext/dlf/Resources/Public/Javascript/3DViewer/main.js" type="module"></script>
<script src="/typo3conf/ext/dlf/Resources/Public/Javascript/Toastify/toastify.js" type="text/javascript"></script>
<script src="/typo3conf/ext/dlf/Resources/Public/Javascript/3DViewer/spinner/main.js" type="text/javascript"></script>
</f:section>
</html>
232 changes: 180 additions & 52 deletions Resources/Public/Css/3DViewer/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,228 @@
.tx-dlf-view-3d {
width: 100% !important;
height: 100% !important;
background-color: #a0a0a0;
width: 100% !important;
height: 100% !important;
background-color: #a0a0a0;
}

#cboxLoadedContent.iipmooviewer {
position: absolute;
overflow: hidden !important;
position: absolute;
overflow: hidden !important;
}

#cboxLoadedContent.iipmooviewer > .cboxPhoto {
visibility: hidden;
visibility: hidden;
}

.iipmooviewer .navcontainer .navbuttons {
z-index: 100;
z-index: 100;
}

.iipmooviewer .canvas {
width: 100% !important;
height: 100% !important;
width: 100% !important;
height: 100% !important;
}

a.colorbox {
position: relative;
display: block;
position: relative;
display: block;
}

a.wisski-inline-iip > div#wisski-iip-cont {
position: relative;
display: block;
position: relative;
display: block;
}

a.wisski-inline-iip > div#wisski-iip-cont > img {
visibility: hidden;
visibility: hidden;
}

canvas {
width: 100% !important;
height: 100% !important;
display: block;
display: block;
z-index: 0;
position: absolute;
}

#guiContainer {
z-index: 10;
}

.toastify {
padding: 12px 20px;
color: #ffffff;
display: inline-block;
box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
background: linear-gradient(135deg, #73a5ff, #5477f5);
position: fixed;
bottom: -150px;
right: 15px;
opacity: 0;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
border-radius: 2px;
cursor: pointer;
z-index: 10;
}

.toastify.on { opacity: 1; }
padding: 12px 20px;
color: #ffffff;
display: inline-block;
box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
background: linear-gradient(135deg, #73a5ff, #5477f5);
position: fixed;
right: 15px;
opacity: 0;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
border-radius: 2px;
cursor: pointer;
z-index: 10;
}

.toastify.on {
opacity: 1;
}

.toast-close {
border: none;
background: none;
padding-left: 8px;
border: none;
background: none;
padding-left: 8px;
}

.hierarchy {
max-height: 500px;
overflow-x: hidden;
overflow-y: scroll;
max-height: 500px;
overflow-x: hidden;
overflow-y: scroll;
}

.hierarchy::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
box-shadow: inset 0 0 5px rgba(0,0,0,.3);
border-radius: 6px;
background-color: #F5F5F5;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
box-shadow: inset 0 0 5px rgba(0,0,0,.3);
border-radius: 6px;
background-color: #F5F5F5;
}

.hierarchy::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
width: 6px;
background-color: #F5F5F5;
}

.hierarchy::-webkit-scrollbar-thumb
{
border-radius: 6px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: #555;
border-radius: 6px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: #555;
}

.closed {
overflow: hidden;
}
overflow: hidden;
}

#TextCanvas {
position: absolute;
z-index: 8;
pointer-events: none;
--font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
--font-family-mono: Menlo,Monaco,Consolas,"Droid Sans Mono",monospace;
color: #000000;
font-family: var(--font-family);
font-size: 14px;
font-style: normal;
font-weight: 350;
line-height: 21px;
padding: 10px 0 0 15px;
max-width: 70%;
width: 70%;
}

#metadata-collapse {
width: 45%;
pointer-events: auto;
font-weight: 500;
cursor: pointer;
margin-bottom: 5px;
}

#metadata-collapse:hover {
font-weight: 600;
}

#metadata-collapse:after {
content: "\21B4";
}

#metadata-collapse.metadata-collapsed:after {
content: "\21B5";
}

#metadata-container {
width: 100%;
position: absolute;
text-align: left;
}

#metadata-content {
display: none;
overflow: hidden;
margin-top: -100%;
transition: all 2s;
}

#metadata-content.expanded {
margin-top: 0;
display: contents;
overflow: visible;
}

@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

#downloadModel {
z-index: 1;
position: relative;
right: -74%;
top: 5px;
width: 25px;
height: 25px;
background-size: 25px;
cursor: pointer;
}

#viewEntity {
z-index: 1;
position: relative;
right: -77%;
top: 10px;
width: 22px;
height: 22px;
background-size: 22px;
cursor: pointer;
}

#fullscreenMode {
z-index: 1;
position: absolute;
right: 1%;
bottom: 1%;
width: 20px;
height: 20px;
background-size: 25px;
cursor: pointer;
margin-bottom: 25px;
}

.field--type-image {
width: 100%;
height: 100%;
transition: all 500ms linear;
box-sizing: border-box;
display: inline-block;
margin: 5em 0 5em 0;
}

.field--type-image:hover {
transition: all 500ms linear;
width: 175%;
height: 175%;
box-sizing: border-box;
display: inline-block;
z-index: 999;
margin: -1em 0 -1em 0;
}

.widget>select {
color: #000;
}

.metadataSeparator {
width: 100px;
margin: 5px 0px;
}

0 comments on commit 73e28b5

Please sign in to comment.