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 @@ ...@@ -11,6 +11,7 @@
<div class="piece-form"> <div class="piece-form">
<div class="piece-form-title">Rôle 1</div> <div class="piece-form-title">Rôle 1</div>
<img src="../../../assets/background-images/role.png"/>
<div class="piece-form-intitule"> <div class="piece-form-intitule">
<label for="intitule">Intitulé</label> <label for="intitule">Intitulé</label>
<input name="intitule" type="text" placeholder="Développeur/euse web"/> <input name="intitule" type="text" placeholder="Développeur/euse web"/>
...@@ -19,13 +20,24 @@ ...@@ -19,13 +20,24 @@
<label for="name">Nom de la quête</label> <label for="name">Nom de la quête</label>
<input name="name" type="text" placeholder="Intégration de site web"/> <input name="name" type="text" placeholder="Intégration de site web"/>
</div> </div>
<div class="piece-form-description">
<label for="description">Description</label>
<textarea name="description"></textarea>
</div>
<div class="piece-form-objective"> <div class="piece-form-objective">
<label for="objective">Objectif(s) pédagoqique(s)</label> <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>
<div class="piece-form-reward"> <div class="piece-form-rewards">
<label for="reward">Récompenses</label> <label for="reward">Récompense(s)</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-reward">
<label>Type</label>
<select>
<option>test</option>
</select>
</div>
</div> </div>
...@@ -35,25 +47,49 @@ ...@@ -35,25 +47,49 @@
<label>Apparence, équipement</label> <label>Apparence, équipement</label>
<textarea></textarea> <textarea></textarea>
</div> </div>
<div class="piece-form-personnalization-skills">
<label>Compétences</label>
<textarea></textarea>
</div>
</div> </div>
<div class="piece-form-ressources"> <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">
<div class="piece-form-ressources-ressource-name"> <div class="piece-form-ressources-ressource-name">
<label for="name">Nom</label> <label for="name">Nom</label>
<input name="name" type="text"/> <input name="name" type="text"/>
</div> </div>
<div class="piece-form-ressources-ressource-quantity"> <div class="piece-form-ressources-ressource-quantity">
<label for="quantity">Nombre</label> <label for="quantity">Nombre / stats</label>
<input name="quantity" type="text"> <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>
</div> </div>
<button mat-button><mat-icon fontIcon="add"></mat-icon></button> <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
</div> </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>
</div> </div>
src/app/pieces/role/role.component.scss
View file @ a6e6c15f
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
width: 400px; width: 400px;
position: relative; 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 { &-menu {
position: absolute; position: absolute;
...@@ -116,6 +116,13 @@ ...@@ -116,6 +116,13 @@
font-size: 15px; font-size: 15px;
} }
img {
width: 20%;
position: absolute;
right: 5px;
top: 5px;
}
&-title { &-title {
margin-top: 20px; margin-top: 20px;
font-size: 25px; font-size: 25px;
...@@ -133,25 +140,57 @@ ...@@ -133,25 +140,57 @@
flex-direction: column; flex-direction: column;
} }
&-description {
display: flex;
flex-direction: column;
textarea {
height: 100px;
}
}
&-objective { &-objective {
height: 250px;
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
textarea { input {
margin-bottom: 5px; margin-top: 5px;
background-image: url("../../../assets/background-images/role.png"); }
background-position: center;
background-repeat: no-repeat; button {
background-size: 30%; 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; display: flex;
flex-direction: column; 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 { &-personnalization {
...@@ -159,6 +198,7 @@ ...@@ -159,6 +198,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 150px; height: 150px;
textarea { textarea {
background-image: url("../../../assets/background-images/equipment.png"); background-image: url("../../../assets/background-images/equipment.png");
background-position: center; background-position: center;
...@@ -166,19 +206,11 @@ ...@@ -166,19 +206,11 @@
background-size: 30%; background-size: 30%;
} }
} }
&-skills {
display: flex;
flex-direction: column;
height: 150px;
}
} }
&-ressources { &-ressources {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 25px;
&-ressource { &-ressource {
margin-top: 10px; margin-top: 10px;
...@@ -191,6 +223,19 @@ ...@@ -191,6 +223,19 @@
margin-bottom: 5px; margin-bottom: 5px;
justify-content: space-between; 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 { button {
...@@ -202,6 +247,43 @@ ...@@ -202,6 +247,43 @@
transform: translateX(-100%); transform: translateX(-100%);
margin-top: 5px; margin-top: 5px;
border-radius: 10px; 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 { mat-icon {
transform: scale(1.3); 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