début de candidatures et postuler dans offres_stages.php
This commit is contained in:
parent
d0f9af7908
commit
4291b4d425
@ -8,3 +8,191 @@
|
||||
font-size:calc(30px + 1vw);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 30px;
|
||||
background-color: var(--black3);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.title_bubble {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.heart1,
|
||||
.heart2
|
||||
{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: 10px;
|
||||
font-size: 0.75em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.heart-hidden
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bubble img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.bubble .centered {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size:calc(12px + 2vw);
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bubble .text_content
|
||||
{
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
font-size: 1.25em;
|
||||
padding: 0 10px 20px 10px;
|
||||
}
|
||||
|
||||
|
||||
.bubble .divLeft,
|
||||
.bubble .divRight
|
||||
{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.bubble .divLeft .name_company
|
||||
{
|
||||
font-size: 1.25em;
|
||||
font-weight: bold;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.bubble .divRight
|
||||
{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bubble .table_title
|
||||
{
|
||||
margin: 0 0 10px 45px;
|
||||
}
|
||||
|
||||
.bubble .divRight table
|
||||
{
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.bubble .divRight table td
|
||||
{
|
||||
padding: 0 10px 8px 0;
|
||||
}
|
||||
|
||||
.bubble .divLeft .description
|
||||
{
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 10px;
|
||||
padding: 15px;
|
||||
background-color: lightgray;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
|
||||
.table-container {
|
||||
display: block;
|
||||
width: 85%;
|
||||
max-width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flex-table {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
width: calc(100% / 4);
|
||||
text-align: center;
|
||||
padding: 0.2em 0.2em;
|
||||
}
|
||||
|
||||
.flex-table .name
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-table .value
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*//////////////////////////////////////////////////////////////////
|
||||
[ Responsive ]*/
|
||||
|
||||
@media screen and (max-width: 1200px)
|
||||
{
|
||||
.table-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px)
|
||||
{
|
||||
.table-container {
|
||||
width: 80%;
|
||||
}
|
||||
.flex-row {
|
||||
width: calc(100% / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px)
|
||||
{
|
||||
.bubble
|
||||
{
|
||||
margin: 30px 5px 30px 5px;
|
||||
}
|
||||
.table-container {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.table-container {
|
||||
width: 80%;
|
||||
}
|
||||
.flex-row {
|
||||
width: 100%;
|
||||
}
|
||||
.flex-table .name
|
||||
{
|
||||
text-align: left;
|
||||
font-weight: bold ;
|
||||
}
|
||||
.flex-table .value
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
.bubble .divLeft,
|
||||
.bubble .divRight
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
@ -131,7 +131,7 @@
|
||||
|
||||
.flex-row
|
||||
{
|
||||
width: calc(100% / 4);
|
||||
width: calc(100% / 2);
|
||||
text-align: center;
|
||||
padding: 0.2em 0.2em;
|
||||
}
|
||||
@ -165,6 +165,85 @@
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/*//////////////////////////////////////////////////////////////////
|
||||
[ Modal ] */
|
||||
|
||||
.modal
|
||||
{
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.title_modal
|
||||
{
|
||||
border-radius: 10px 10px 0 0;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-content
|
||||
{
|
||||
background-color: #ffffff;
|
||||
margin: 15% auto;
|
||||
width: 80%;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.info_message
|
||||
{
|
||||
display: none;
|
||||
width: 80%;
|
||||
margin: 10px auto 20px auto;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.form_postuler input
|
||||
{
|
||||
width: 95%;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.form_postuler button, .form_postuler input[type="button"]
|
||||
{
|
||||
margin: 10px;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.close
|
||||
{
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
right: -20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.close:hover, .close:focus
|
||||
{
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*//////////////////////////////////////////////////////////////////
|
||||
[ Responsive ]*/
|
||||
|
||||
@ -200,11 +279,9 @@
|
||||
.table-container {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.table-container {
|
||||
width: 80%;
|
||||
.modal-content
|
||||
{
|
||||
width: 90%;
|
||||
}
|
||||
.flex-row {
|
||||
width: 100%;
|
||||
@ -223,6 +300,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.table-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 350px) {
|
||||
body {
|
||||
overflow-x: auto;
|
||||
|
||||
@ -196,6 +196,7 @@
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
right: -20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.close:hover, .close:focus
|
||||
|
||||
@ -25,4 +25,18 @@ $(document).ready(function(){
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(".button_postuler").click(function() {
|
||||
$(".modal").show();
|
||||
$(".info_message").hide();
|
||||
});
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (event.target == document.getElementById("modal_postuler")) {
|
||||
$(".modal").hide();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
@ -43,13 +43,10 @@ if (isset($_SESSION["username"])){
|
||||
<div class="content_title">Candidatures</div>
|
||||
<?php
|
||||
if ($query_candidatures->rowCount() >= 1) {
|
||||
foreach ($query_candidatures as $result) {
|
||||
foreach ($results_candidatures as $result) {
|
||||
?>
|
||||
<div class="bubble">
|
||||
<div class="title_bubble"><?= $result->name_internship; ?>
|
||||
<div id="<?= $result->ID_internship ?>_1" class="heart1 heart-hidden"><i class="far fa-heart"></i></div>
|
||||
<div id="<?= $result->ID_internship ?>_2" class="heart2" style="color: red;"><i class="fas fa-heart"></i></div>
|
||||
</div>
|
||||
<div class="title_bubble"><?= $result->name_internship; ?></div>
|
||||
<div class="text_content">
|
||||
<div class="divLeft">
|
||||
<div class="name_company">
|
||||
@ -57,45 +54,28 @@ if (isset($_SESSION["username"])){
|
||||
</div>
|
||||
<?= $result->city_localisation; ?> <?= $result->postal_code_localisation; ?>
|
||||
<div class="description">
|
||||
<?= $result->description_internship; ?>
|
||||
La prochaine étape de votre candidature est : <?= $result->progression_candidature ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divRight">
|
||||
<table>
|
||||
<div class="table_title">Points importants:</div>
|
||||
<div class="table_title">Fichiers en lien avec la candidature:</div>
|
||||
|
||||
<tr>
|
||||
<td><i class="far fa-clock"></i></td>
|
||||
<td><?= $result->duration_internship; ?> jours</td>
|
||||
<td>Curriculum Vitae :</td>
|
||||
<td><?= $result->cv_file_path_candidature; ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fas fa-euro-sign"></i></td>
|
||||
<td><?= $result->remuneration_internship; ?> €/h</td>
|
||||
<td>Lettre de motivation :</td>
|
||||
<td><?= $result->lm_file_path_candidature; ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="far fa-calendar-alt"></i></td>
|
||||
<td><?= $result->offer_date_internship; ?></td>
|
||||
<td>Fiche de validation :</td>
|
||||
<td><?= $result->validation_form_file_path_candidature; ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fas fa-graduation-cap"></i></td>
|
||||
<td><?= $result->name_promotion; ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fas fa-user-alt"></i></td>
|
||||
<td>
|
||||
<?php
|
||||
echo $result->place_number_internship;
|
||||
if($result->place_number_internship > 1) {echo " places disponibles";}
|
||||
else {echo " place disponible";}?>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fas fa-chart-bar"></i></td>
|
||||
<td><?= $result->competences_internship; ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fas fa-handshake"></i></td>
|
||||
<td>Confiance du pilote : <?= $result->note; ?></td>
|
||||
<td>Convention de stage :</td>
|
||||
<td><?= $result->internship_agreement_file_path_candidature; ?></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -93,6 +93,26 @@ if (isset($_SESSION["username"])){
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/offres_stages.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="modal_postuler" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<div class="title_modal">Postuler pour </div>
|
||||
<form class="form_postuler" method="post" enctype="multipart/form-data">
|
||||
<div class="table-container">
|
||||
<div class="info_message"></div>
|
||||
<div class="flex-table">
|
||||
<div class="flex-row name">Curriculum Vitae</div>
|
||||
<div class="flex-row value"><input id="cv" type="file" name="cv" require></div>
|
||||
</div>
|
||||
<div class="flex-table">
|
||||
<div class="flex-row name">Lettre de motivation</div>
|
||||
<div class="flex-row value"><input id="lm" type="file" name="lm" require></div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit">Envoyer</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<?php require "controller/Nav_bar.php" ?>
|
||||
<div class="main">
|
||||
@ -255,7 +275,7 @@ if (isset($_SESSION["username"])){
|
||||
</table>
|
||||
</div>
|
||||
<div class="button">
|
||||
<button class="button_postuler">Postuler</button>
|
||||
<button id="button_postuler<?=$result->ID_internship?>" class="button_postuler">Postuler</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user