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

some better css for the dialog popup

Browse Source
This commit is contained in:
Jan Dickmann 2024-06-26 12:48:25 +02:00
parent a4fc083305
commit 97fa30bc27
3 changed files with 56 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
slaeforms/app.py
View File

@ -77,7 +77,7 @@ db_tables = {} # contains all dynamically created tables, key = table/classname
#TODO insert code to create all tables #TODO insert code to create all tables
def create_json_tables(): def create_json_tables():
print(config) #print(config)
for block_key, block_content in config.items(): for block_key, block_content in config.items():
if "database_table" in block_content: if "database_table" in block_content:
if not (block_content["database_table"]["table_name"] in db_tables): if not (block_content["database_table"]["table_name"] in db_tables):
@ -89,7 +89,7 @@ def create_json_tables():
def create_model_class(schema): def create_model_class(schema):
class_name = schema["table_name"].capitalize() class_name = schema["table_name"].capitalize()
print("creating table class: {class_name}".format(class_name=class_name)) #print("creating table class: {class_name}".format(class_name=class_name))
# Define class attributes dynamically # Define class attributes dynamically
attributes = {"__tablename__": schema["table_name"]} attributes = {"__tablename__": schema["table_name"]}
@ -111,7 +111,7 @@ def create_model_class(schema):
attributes[column_name] = Column(column_name,column_type, nullable=column_info["nullable"]) attributes[column_name] = Column(column_name,column_type, nullable=column_info["nullable"])
print("attributes of the table: ",attributes) #print("attributes of the table: ",attributes)
# Create the model class # Create the model class
return type(class_name, (db.Model,), attributes) return type(class_name, (db.Model,), attributes)

45
slaeforms/static/styles.css
View File

@ -18,6 +18,51 @@ dialog {
width: 66%; width: 66%;
} }
dialog .iframe-container{
border-top: 1px solid #ccc;
margin-top: 20px;
}
.dialogCloseBtn {
margin-bottom: 10px;
margin-left: auto;
display: block;
}
.dialogCloseBtn img{
padding: 8px;
width: 50px;
}
.dialog-content {
width: 300px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.dialogTextContainer {
font-size: 25px;
}
.close-btn {
position: absolute;
top: -20px;
right: -20px;
width: 30px;
height: 30px;
background-color: #f44336;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.container { .container {

11
slaeforms/templates/popuptest.html
View File

@ -9,20 +9,24 @@
<body> <body>
<div class="container"> <div class="container">
<h2>Hello! Thank you for participating in our study!</h2> <h2>Hello! Thank you for participating in our study!</h2>
<dialog> <dialog>
<button autofocus><img id="buttonClose" src="{{ url_for('static', filename='icons/x-icon.png')}}"
alt="Delete Icon" class="buttonclose"></button> <button class="dialogCloseBtn"autofocus><img id="buttonClose" src="{{ url_for('static', filename='icons/x-icon.png')}}"
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/VtnwHmabyzo?si=H3rrG-GHtlSymR70" 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>
<div class="dialogTextContainer">
<p>Here is the text with the content of the explanation video. <p>Here is the text with the content of the explanation video.
Here participants can read the full text that is beeing shown in the video above in sign language. Here participants can read the full text that is beeing shown in the video above in sign language.
From Feedback with a deaf sign language expert, we concluded that giving the whole text as additional resource From Feedback with a deaf sign language expert, we concluded that giving the whole text as additional resource
would be a good idea, since this would help if a participants looses track of the vide, can not understand the DGS dialect, would be a good idea, since this would help if a participants looses track of the vide, can not understand the DGS dialect,
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>
</dialog> </div>
</dialog>
<button>Show the dialog</button> <button>Show the dialog</button>
<div class="textblock"> <div class="textblock">
@ -57,6 +61,7 @@
closeButton.addEventListener("click", () => { closeButton.addEventListener("click", () => {
dialog.close(); dialog.close();
}); });
</script> </script>
</body> </body>
</html> </html>