Unverified Commit a1a268a2 authored by Roland Denis's avatar Roland Denis
Browse files

Customizing job offer form style

parent 932a210c
......@@ -519,6 +519,39 @@ footer a {
font-weight: 400;
}
.job_offers {
max-width: 760px;
margin-bottom: 76px;
}
.job_offers h1 {
text-align: left;
font-family: PlayfairDisplay;
color: #000000;
font-size: 34px;
font-weight: 400;
margin-bottom: 28px;
}
.job_offers p {
font-family: Roboto;
color: #000000;
font-size: 16px;
font-weight: 300;
line-height: 22.915px;
text-align: justify;
}
.job_form input:not([type=file]) {
width: 100%;
border: 1px solid lightgrey;
border-radius: 4px;
}
.job_form .error {
color: red;
}
@media (min-width: 768px)
{
.svg-navbar-brand {
......@@ -624,4 +657,4 @@ footer a {
font-weight: 400;
color: #3fc5dc;
}
}
\ No newline at end of file
}
{% extends "index.html" %}
{% extends "base.html" %}
{% block title %}Formulaire de dépôt d'une offre d'emploi{% endblock %}
{% block ogtitle %}Formulaire de dépôt d'une offre d'emploi{% endblock %}
{% block ogurl %}{{ SITEURL }}/contact.html{%endblock%}
{% block canonicalurl %}{{ SITEURL }}/contact.html{%endblock%}
{% block header_content %}
<a href="{{ SITEURL }}/category/offres-demploi.html" class="btn btn-dark my-1" id="header-btn">
<div class="row m-0 d-flex align-items-center">
<div id="circle-offresdemploi"></div>
<span class="category text-uppercase pl-2">Offres d'emploi</span>
</div>
</a>
<h1 class="my-3">Publier une offre d'emploi</h1>
{% endblock header_content %}
{% block content %}
<link rel="stylesheet" href="{{ SITEURL }}/css/simplemde.min.css">
<script src="{{ SITEURL }}/js/simplemde.min.js"></script>
<div class="container-fluid job_offers">
<div class="container job_form">
<link rel="stylesheet" href="{{ SITEURL }}/css/simplemde.min.css">
<script src="{{ SITEURL }}/js/simplemde.min.js"></script>
<p><span class="error">Les informations obligatoires sont indiquées par une *.</span></p>
<form name="job_offer_form" enctype="multipart/form-data" method="post" action="">
<P>
Type de l'offre* : <select name="job_type" required>
{{ '
<option hidden disabled {% if not form.job_type %} selected {% endif %} value></option>
{% for key, value in job_type_list.items() %}
<option value="{{key}}" {% if key == form.job_type %} selected {% endif %} >{{value}}</option>
{% endfor %}
' }}
</select>
<span class="error">{{ '{{errors.job_type}}' }}</span>
</p>
<p>
Titre* <br>
<input type="text" name="title" value="{{ '{{form.title}}' }}" autofocus required>
<span class="error">{{ '{{errors.title}}' }}</span>
</p>
<p>
Nom du contact* <br>
<input type="text" name="author" value="{{ '{{form.author}}' }}" required>
<span class="error">{{ '{{errors.author}}' }}</span>
</p>
<p>
E-mail <br>
<input type="email" name="email" value="{{ '{{form.email}}' }}">
<span class="error" name="error-email">{{ '{{errors.email}}' }}</span>
</p>
<p>
Site web <br>
<input type="url" name="website" value="">
<span class="error" name="error-url"></span>
</p>
<p>
Description* <br>
<textarea name="description" rows="5" cols="40" id="job_offer_description" required>{{ '{{form.description}}' }}</textarea>
<span class="error" name="error-description">{{ '{{errors.description}}' }}</span>
</p>
<p>
Fichier joint :
<input type="file" name="file" accept="{{ '{{file_accept}}' }}">
<span class="error" name="error-file">{{ '{{errors.attachment}}' }}</span>
</p>
<p>
<input type="submit" name="submit" value="Soumettre">
</p>
</form>
<p>
<span class="error">* informations obligatoires.</span>
</p>
<form name="job_offer_form" enctype="multipart/form-data" method="post" action="">
Type de l'offre* : <select name="job_type" required>
{{ '
<option hidden disabled {% if not form.job_type %} selected {% endif %} value></option>
{% for key, value in job_type_list.items() %}
<option value="{{key}}" {% if key == form.job_type %} selected {% endif %} >{{value}}</option>
{% endfor %}
' }}
</select>
<span class="error">{{ '{{errors.job_type}}' }}</span>
<br><br>
Titre* : <input type="text" name="title" value="{{ '{{form.title}}' }}" autofocus required>
<span class="error">{{ '{{errors.title}}' }}</span>
<br><br>
Nom du contact* : <input type="text" name="author" value="{{ '{{form.author}}' }}" required>
<span class="error">{{ '{{errors.author}}' }}</span>
<br><br>
E-mail : <input type="email" name="email" value="{{ '{{form.email}}' }}">
<span class="error" name="error-email">{{ '{{errors.email}}' }}</span>
<br><br>
Site web : <input type="url" name="website" value="">
<span class="error" name="error-url"></span>
<br><br>
Description* : <textarea name="description" rows="5" cols="40" id="job_offer_description" required>{{ '{{form.description}}' }}</textarea>
<span class="error" name="error-description">{{ '{{errors.description}}' }}</span>
<br><br>
Fichier : <input type="file" name="file" accept="{{ '{{file_accept}}' }}">
<span class="error" name="error-file">{{ '{{errors.attachment}}' }}</span>
<br><br>
<input type="submit" name="submit" value="Soumettre">
</form>
<script>
var simplemde = new SimpleMDE({
element: document.getElementById("job_offer_description"),
spellChecker: false,
forceSync: true
});
<script>
var simplemde = new SimpleMDE({
element: document.getElementById("job_offer_description"),
spellChecker: false,
forceSync: true
});
// Fix HTML5 required attribute for the description when SimpleMDE is used
// See: https://github.com/sparksuite/simplemde-markdown-editor/issues/324
document.querySelector('#job_offer_description').required = undefined;
// Fix HTML5 required attribute for the description when SimpleMDE is used
// See: https://github.com/sparksuite/simplemde-markdown-editor/issues/324
document.querySelector('#job_offer_description').required = undefined;
// Workaround to avoid browser message about empty description when
// it has been pre-filled.
{{ '
{% if not form.description %}
document.querySelector(".CodeMirror textarea").required = true;
{% else %}
simplemde.codemirror.on("change", function() { document.querySelector(".CodeMirror textarea").required = true; });
{% endif %}
' }}
</script>
</div>
</div>
// Workaround to avoid browser message about empty description when
// it has been pre-filled.
{{ '
{% if not form.description %}
document.querySelector(".CodeMirror textarea").required = true;
{% else %}
simplemde.codemirror.on("change", function() { document.querySelector(".CodeMirror textarea").required = true; });
{% endif %}
' }}
</script>
{% endblock %}
{% endblock content %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment