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

Some CSS Imporvements

Browse Source
This commit is contained in:
Jan 2024-06-05 20:55:54 +02:00
parent 71590b425b
commit bd750eb9a2
2 changed files with 96 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
slaeforms/static/styles.css
View File

@ -2,6 +2,9 @@ body {
width: 100%;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
/*align-items: center; this will make the content a square, with edges up and bottom*/
background-color: #a4b5ff;
color: #000000;
font-family: Tahoma;
@ -17,6 +20,38 @@ body {
filter: invert(65%);
}
#submitbutton {
cursor: pointer;
padding: 10px 20px; /* Increased padding for a bigger button */
font-size: 20px; /* Increased font size */
border: none; /* Removes default border */
border-radius: 8px; /* Optional: rounds the corners of the button */
}
#submitbutton:hover {
background-color: #0056b3; /* Darker shade for hover effect */
}
.button-container {
display: flex;
justify-content: flex-end;
margin-top: 20px; /* Adjust as needed for spacing */
}
.textarea-container {
display: flex;
flex-direction: column;
align-items: center;
}
.textarea-label{
align-self: flex-start; /* Aligns the label to the start of the container */
}
.container {
width: 80%; /* You can adjust this width as needed */
max-width: 1200px; /* Maximum width to keep it from getting too wide on large screens */
padding: 20px;
background-color: #7b8cdb; /* Just for visual differentiation */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.videocontrols {
width: 100px; /* Set a specific width for the buttons */
height: 70px; /* Set a specific height for the buttons */
@ -63,6 +98,11 @@ iframe {
}
form {
text-align: center;
}
.centertext {
text-align: center;
}

23
slaeforms/templates/standard_template.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
{% macro single_video(video_url, embed="yt", title="",width="560", height="315", class="center", code="<p>No code given</p>") -%}
{% macro single_video(video_url, embed="yt", title="",width="560", height="315", class="center", code="<p>No code given
</p>") -%}
{% if (embed == "yt") %}
<div class={{center}}>
{% if (title != "") %}
@ -26,6 +27,7 @@ required
<input type="{{ type }}" name="{{ name }}" value="{{
value|e }}" size="{{ size }}">
{%- endmacro %}
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}-->
@ -34,7 +36,7 @@ required
</head>
<body>
<div class="container">
<h2>Stimulus part</h2>
{% if (stimulus_type == "single_video") %}
{{ single_video(**stimulus_configuration) }}
@ -53,21 +55,30 @@ required
<div class="likercontainer">
<div class="likert">
{% for point in questions[question]["points"] %}
<label><input name="likertscale" type="radio" value="{{ questions[question]['points'][point]['value'] }}" {{required(questions[question])}}/><span>{{ questions[question]['points'][point]['text'] }}</span></label>
<label><input name="likertscale" type="radio"
value="{{ questions[question]['points'][point]['value'] }}"
{{required(questions[question])}} /><span>{{ questions[question]['points'][point]['text']
}}</span></label>
{% endfor %}
</div>
</div>
{% elif (questions[question]["type"] == "textinput") %}
<label for="{{ questions[question]['name'] }}">Additional Feedback: </label>
<textarea id="{{ questions[question]['name'] }}" name="{{ questions[question]['name'] }}" rows="3" cols="30" maxlength="{{ questions[question]['size'] }}" {{required(questions[question])}}></textarea>
<div class="textarea-container">
<label class="textarea-label" for="{{ questions[question]['name'] }}">Additional Feedback: </label>
<textarea id="{{ questions[question]['name'] }}" name="{{ questions[question]['name'] }}" rows="6"
cols="60" maxlength="{{ questions[question]['size'] }}"
{{required(questions[question])}}></textarea>
</div>
{% else %}
<p>Error: Block {{config["question 1"]["blocks"][block]["type"]}} could not be loaded!</p>
{% endif %}
{% endfor %}
<div class="button-container">
<p><input id="submitbutton" type="submit" value="submit" ; /></p>
</div>
</form>
</div>
</body>
</html>