Commit 66e3f83b authored by Liing Pang Ryan's avatar Liing Pang Ryan
Browse files

CSS for paragraph edit done

parent afb8735c
......@@ -21,7 +21,7 @@
<!--Check if there are choices for this story !-->
<c:if test="${empty choiceList}">
<!--TODO: Check if it's a conclusion. THen we display another text to say end of story !-->
<div class="no_choices">There are no choices yet for this story</div>
<div class="no_choices">There are no choices for this paragraph</div>
</c:if>
......
......@@ -87,18 +87,18 @@ function editParagraphe(paragraph_id,isConclusion,notvalid,choice_id) {
console.log(data);
additionalforms="";
if (notvalid){
additionalforms=`<button onclick="deleteParagraphe(${paragraph_id})" type="button">abandonner et dévrouiller</button>`+
`<br><input type="text" id="link${paragraph_id}">`+
`<button onclick="associate(${paragraph_id},${choice_id})" type="button">associer à ce paragraph existant</button>`+
`<br><input type="text" id="require${paragraph_id}">`+
`<button onclick="setReadBefore(${paragraph_id})" type="button">paragraphe requis</button>`;
additionalforms=`<button onclick="deleteParagraphe(${paragraph_id})" type="button">Cancel and Unlock</button>`+
`<br><div class="paragraph_association"><input type="text" id="link${paragraph_id}">`+
`<button onclick="associate(${paragraph_id},${choice_id})" type="button">Associate to another paragraph</button></div>`+
`<div class="paragraph_association"><input type="text" id="require${paragraph_id}">`+
`<button onclick="setReadBefore(${paragraph_id})" type="button">Required Paragraph</button></div>`;
}
element.innerHTML = `<form method='post' action='index.jsp' id='modif${paragraph_id}'> ` +
`<textarea class=\"edit_paragraphe\" id=\"edit_Paragraphe${paragraph_id}\" rows=\"6\" cols=\"100\" placeholder='titre du choix' >`+oldText+`</textarea>` +
`<input type="checkbox" id="conclusion${paragraph_id}"><label for="conclusion${paragraph_id}">conclusion</label>`+
`<button onclick='submit_edit_paragraphe(${paragraph_id},true,${notvalid})' type='button'>valider</button>` +
`<button onclick='submit_edit_paragraphe(${paragraph_id},false,${notvalid})' type='button'>enregistrer</button>` +
`<button onclick='annuler_modification(${paragraph_id},${notvalid})' type='button'>annuler</button>` +
`<textarea class=\"edit_paragraphe\" id=\"edit_Paragraphe${paragraph_id}\" rows=\"6\" cols=\"100\" placeholder='Write the paragraph for this choice' >`+oldText+`</textarea>` +
`<div class=\"is_conclusion\"><input type="checkbox" id="conclusion${paragraph_id}"><label for="conclusion${paragraph_id}">This paragraph is a conclusion</label></div>`+
`<button onclick='submit_edit_paragraphe(${paragraph_id},true,${notvalid})' type='button'>Validate</button>` +
`<button onclick='submit_edit_paragraphe(${paragraph_id},false,${notvalid})' type='button'>Save Changes</button>` +
`<button onclick='annuler_modification(${paragraph_id},${notvalid})' type='button'>Undo Changes</button>` +
additionalforms+
" </form>";
document.getElementById(`modifyParagraph${paragraph_id}`).style.display = "none";
......
......@@ -560,4 +560,78 @@
width:50%;
margin: 50px auto;
}
/**Editing a new paragraph associated to a choice**/
/*This is the textarea*/
.paragraph_text p form textarea{
width: 100%;
padding: 12px 20px;
margin: 8px auto;
border: 0;
border-radius: 10px;
box-sizing: border-box;
resize:none;
height:60%;
}
.paragraph_text p form div.is_conclusion{
width: 40%;
margin: 5px auto;
}
.paragraph_text p form > button{
background-color: #42437E;
font-family: 'Roboto Slab', cursive;
border: none;
border-radius: 10px;
color: #76afea;
font-size: 15px;
cursor:pointer;
transition: 200ms;
width:23%;
height:40px;
margin: 5px 5px;
}
.paragraph_text p form > input{
width: 10%;
padding: 12px 20px;
margin: 8px auto;
border: 0;
border-radius: 10px;
box-sizing: border-box;
box-shadow:0 0 3px rgba(0,0,0,0.3);
transition: .3s box-shadow;
resize:none;
height:60%;
}
.paragraph_text p form div.paragraph_association{
width:70%;
margin: 5px auto;
}
.paragraph_text p form div.paragraph_association input{
width: 12%;
padding: 9px 11px;
border: 0;
border-radius: 10px;
box-sizing: border-box;
resize:none;
}
.paragraph_text p form div.paragraph_association button{
background-color: #42437E;
font-family: 'Roboto Slab', cursive;
border: none;
border-radius: 10px;
color: #76afea;
font-size: 15px;
cursor:pointer;
transition: 200ms;
min-width:30%;
height:40px;
margin: 5px 5px;
}
\ No newline at end of file
Markdown is supported
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