Jan/slaeforms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Popup seems to work well now in test

Browse Source
This commit is contained in:
Jan Dickmann 2024-06-26 15:57:39 +02:00
parent 97fa30bc27
commit ccf02f2e16
3 changed files with 18 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
slaeforms/static/icons/info-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

40
slaeforms/static/styles.css
View File

@ -23,17 +23,6 @@ dialog .iframe-container{
margin-top: 20px; margin-top: 20px;
} }
.dialogCloseBtn {
margin-bottom: 10px;
margin-left: auto;
display: block;
}
.dialogCloseBtn img{
padding: 8px;
width: 50px;
}
.dialog-content { .dialog-content {
width: 300px; width: 300px;
height: 200px; height: 200px;
@ -46,23 +35,22 @@ dialog .iframe-container{
font-size: 25px; font-size: 25px;
} }
.close-btn { .dialogBtn {
position: absolute; width: 90px;
top: -20px; height: 90px;
right: -20px; padding: 8px;
width: 30px; position: fixed;
height: 30px; top: 20px;
background-color: #f44336; left: 80vw;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
} }
.infoButtonIcon {
max-width: 100%;
max-height: 100%;
}
.container { .container {

7
slaeforms/templates/popuptest.html
View File

@ -12,10 +12,10 @@
<dialog> <dialog>
<button class="dialogCloseBtn"autofocus><img id="buttonClose" src="{{ url_for('static', filename='icons/x-icon.png')}}" <button class="dialogBtn" autofocus><img class="infoButtonIcon" id="buttonClose" src="{{ url_for('static', filename='icons/x-icon.png')}}"
alt="Delete Icon"></button> alt="Delete Icon"></button>
<div class="iframe-container"> <div class="iframe-container">
<iframe class="center" src="https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70" title="YouTube video player" frameborder="0" <iframe class="center" src="https://www.youtube-nocookie.com/embed/IqGVT1q1PtM?si=kel7ZWEQl3h-h522" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe> allowfullscreen></iframe>
</div> </div>
@ -27,7 +27,8 @@
or just wants to read, because maybe that is what they prefer. This is especially relevant is the participant can not see very well.</p> or just wants to read, because maybe that is what they prefer. This is especially relevant is the participant can not see very well.</p>
</div> </div>
</dialog> </dialog>
<button>Show the dialog</button> <button class="dialogBtn"><img class="infoButtonIcon" id="buttonInfoIcon" src="{{ url_for('static', filename='icons/info-icon.png')}}"
alt="Info Icon"></button>
<div class="textblock"> <div class="textblock">
<p>This is a placeholder EULA and Terms and Condition Text, this should obviously be replaced with some real Text later. <p>This is a placeholder EULA and Terms and Condition Text, this should obviously be replaced with some real Text later.