Skip to content

R
RLG Maker
Commit a6e6c15f authored by Romain DELEAU's avatar Romain DELEAU
Browse files
Options

update role piece

parent ef7a260a
Hide whitespace changes
Inline Side-by-side
Showing with 146 additions and 28 deletions
src/app/pieces/role/role.component.html
View file @ a6e6c15f
......@@ -11,6 +11,7 @@
<div class="piece-form">
<div class="piece-form-title">Rôle 1</div>
<img src="../../../assets/background-images/role.png"/>
<div class="piece-form-intitule">
<label for="intitule">Intitulé</label>
<input name="intitule" type="text" placeholder="Développeur/euse web"/>
......@@ -19,13 +20,24 @@
<label for="name">Nom de la quête</label>
<input name="name" type="text" placeholder="Intégration de site web"/>
</div>
<div class="piece-form-description">
<label for="description">Description</label>
<textarea name="description"></textarea>
</div>
<div class="piece-form-objective">
<label for="objective">Objectif(s) pédagoqique(s)</label>
<textarea name="objective" placeholder="- Connaître la structure d'un document HTML&#10;- Savoir intégrer et mettre en forme des images à une page web"></textarea>
<input name="objective" type="text" placeholder="Nom de l'objectif"/>
<input name="objective" type="text" placeholder="Nom de l'objectif"/>
<button mat-button><mat-icon fontIcon="add"></mat-icon></button>
</div>
<div class="piece-form-reward">
<label for="reward">Récompenses</label>
<textarea name="reward" placeholder="- Gain en compétences en web&#10;- Termine l'objectif pédagoqique &quot;connaître la structure d'un document HTML&quot;&#10;- Débloque la quête &quot;un CMS (wordpress) pour l'association du village&quot;"></textarea>
<div class="piece-form-rewards">
<label for="reward">Récompense(s)</label>
<div class="piece-form-rewards-reward">
<label>Type</label>
<select>
<option>test</option>
</select>
</div>
</div>
......@@ -35,25 +47,49 @@
<label>Apparence, équipement</label>
<textarea></textarea>
</div>
<div class="piece-form-personnalization-skills">
<label>Compétences</label>
<textarea></textarea>
</div>
</div>
<div class="piece-form-ressources">
<div class="piece-form-title">Ressources & attributs</div>
<div class="piece-form-title">Ressources & compétences</div>
<div class="piece-form-ressources-ressource">
<div class="piece-form-ressources-ressource-name">
<label for="name">Nom</label>
<input name="name" type="text"/>
</div>
<div class="piece-form-ressources-ressource-quantity">
<label for="quantity">Nombre</label>
<label for="quantity">Nombre / stats</label>
<input name="quantity" type="text">
</div>
<div class="piece-form-ressources-ressource-quantity">
<label for="type">Type</label>
<input name="type" type="text">
</div>
</div>
<button mat-button><mat-icon fontIcon="add"></mat-icon></button>
</div>
<div class="piece-form-supplementary">
<div class="piece-form-title">Rôle supplémentaire</div>
<div>
<div class="piece-form-supplementary-name">
<label for="name">Nom</label>
<input name="name" type="text"/>
</div>
<div class="piece-form-supplementary-textarea">
<label for="objectives">Objectifs</label>
<textarea name="objectives"></textarea>
</div>
<div class="piece-form-supplementary-textarea">
<label for="skills">Compétences</label>
<textarea name="skills"></textarea>
</div>
<div class="piece-form-supplementary-textarea">
<label for="rules">Règles</label>
<textarea nam="rules"></textarea>
</div>
</div>
<button mat-button><mat-icon fontIcon="add"></mat-icon></button>
</div>
</div>
</div>
src/app/pieces/role/role.component.scss
View file @ a6e6c15f
......@@ -3,7 +3,7 @@
width: 400px;
position: relative;
background-color: var(--piece-background-color);
background: linear-gradient(303deg, rgb(2, 0, 36) 0%, rgb(2, 0, 36) 25%, #9ad5ec 25%, #9ad5ec 100%);
&-menu {
position: absolute;
......@@ -116,6 +116,13 @@
font-size: 15px;
}
img {
width: 20%;
position: absolute;
right: 5px;
top: 5px;
}
&-title {
margin-top: 20px;
font-size: 25px;
......@@ -133,25 +140,57 @@
flex-direction: column;
}
&-description {
display: flex;
flex-direction: column;
textarea {
height: 100px;
}
}
&-objective {
height: 250px;
margin-top: 10px;
display: flex;
flex-direction: column;
textarea {
margin-bottom: 5px;
background-image: url("../../../assets/background-images/role.png");
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
input {
margin-top: 5px;
}
button {
position: relative;
width: 50px;
height: 50px;
background-color: white;
left: 100%;
transform: translateX(-100%);
margin-top: 5px;
border-radius: 10px;
mat-icon {
transform: scale(1.3);
}
}
}
&-reward {
&-rewards {
display: flex;
flex-direction: column;
height: 250px;
&-reward {
display: flex;
flex-direction: row;
justify-content: space-between;
select {
height: 50px;
border: none;
border-radius: 10px;
background-color: white;
width: 80%;
}
}
}
&-personnalization {
......@@ -159,6 +198,7 @@
display: flex;
flex-direction: column;
height: 150px;
textarea {
background-image: url("../../../assets/background-images/equipment.png");
background-position: center;
......@@ -166,19 +206,11 @@
background-size: 30%;
}
}
&-skills {
display: flex;
flex-direction: column;
height: 150px;
}
}
&-ressources {
display: flex;
flex-direction: column;
margin-bottom: 25px;
&-ressource {
margin-top: 10px;
......@@ -191,6 +223,19 @@
margin-bottom: 5px;
justify-content: space-between;
}
input {
width: 50%;
}
&-name {
input {
background-image: url("../../../assets/background-images/object.png");
background-position: center;
background-repeat: no-repeat;
background-size: 20%;
}
}
}
button {
......@@ -202,6 +247,43 @@
transform: translateX(-100%);
margin-top: 5px;
border-radius: 10px;
mat-icon {
transform: scale(1.3);
}
}
}
&-supplementary {
margin-bottom: 25px;
&-name {
margin-top: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
&-textarea {
display: flex;
flex-direction: column;
textarea {
height: 100px;
}
}
button {
position: relative;
width: 50px;
height: 50px;
background-color: white;
left: 100%;
transform: translateX(-100%);
margin-top: 5px;
border-radius: 10px;
mat-icon {
transform: scale(1.3);
}
......
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