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%; width: 100%;
height: 100vh; height: 100vh;
margin: 0; 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; background-color: #a4b5ff;
color: #000000; color: #000000;
font-family: Tahoma; font-family: Tahoma;
@ -17,6 +20,38 @@ body {
filter: invert(65%); 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 { .videocontrols {
width: 100px; /* Set a specific width for the buttons */ width: 100px; /* Set a specific width for the buttons */
height: 70px; /* Set a specific height for the buttons */ height: 70px; /* Set a specific height for the buttons */
@ -63,6 +98,11 @@ iframe {
} }
form {
text-align: center;
}
.centertext { .centertext {
text-align: center; text-align: center;
} }

23
slaeforms/templates/standard_template.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<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") %} {% if (embed == "yt") %}
<div class={{center}}> <div class={{center}}>
{% if (title != "") %} {% if (title != "") %}
@ -26,6 +27,7 @@ required
<input type="{{ type }}" name="{{ name }}" value="{{ <input type="{{ type }}" name="{{ name }}" value="{{
value|e }}" size="{{ size }}"> value|e }}" size="{{ size }}">
{%- endmacro %} {%- endmacro %}
<head> <head>
<meta charset="utf-8" /> <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')}}--> <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> </head>
<body> <body>
<div class="container">
<h2>Stimulus part</h2> <h2>Stimulus part</h2>
{% if (stimulus_type == "single_video") %} {% if (stimulus_type == "single_video") %}
{{ single_video(**stimulus_configuration) }} {{ single_video(**stimulus_configuration) }}
@ -53,21 +55,30 @@ required
<div class="likercontainer"> <div class="likercontainer">
<div class="likert"> <div class="likert">
{% for point in questions[question]["points"] %} {% 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 %} {% endfor %}
</div> </div>
</div> </div>
{% elif (questions[question]["type"] == "textinput") %} {% elif (questions[question]["type"] == "textinput") %}
<label for="{{ questions[question]['name'] }}">Additional Feedback: </label> <div class="textarea-container">
<textarea id="{{ questions[question]['name'] }}" name="{{ questions[question]['name'] }}" rows="3" cols="30" maxlength="{{ questions[question]['size'] }}" {{required(questions[question])}}></textarea> <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 %} {% else %}
<p>Error: Block {{config["question 1"]["blocks"][block]["type"]}} could not be loaded!</p> <p>Error: Block {{config["question 1"]["blocks"][block]["type"]}} could not be loaded!</p>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<div class="button-container">
<p><input id="submitbutton" type="submit" value="submit" ; /></p> <p><input id="submitbutton" type="submit" value="submit" ; /></p>
</div>
</form> </form>
</div>
</body> </body>
</html> </html>