Commit 4a36cc44 authored by Romain DELEAU's avatar Romain DELEAU

add personnalization and ressources to role piece

parent 38dfd5a5
...@@ -26,6 +26,34 @@ ...@@ -26,6 +26,34 @@
<div class="piece-form-reward"> <div class="piece-form-reward">
<label for="reward">Récompenses</label> <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> <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> </div>
<div class="piece-form-personnalization">
<div class="piece-form-title">Personnalisation</div>
<div class="piece-form-personnalization-appearance">
<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-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>
<input name="quantity" type="text">
</div>
</div>
<button><mat-icon fontIcon="add"></mat-icon></button>
</div>
</div> </div>
</div> </div>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
--piece-background-color: #9ad5ec; --piece-background-color: #9ad5ec;
width: 400px; width: 400px;
height: 800px; min-height: 1600px;
position: relative; position: relative;
background-color: var(--piece-background-color); background-color: var(--piece-background-color);
...@@ -22,23 +22,28 @@ ...@@ -22,23 +22,28 @@
display: flex; display: flex;
padding: 15px 20px 15px 20px; padding: 15px 20px 15px 20px;
justify-content: space-around; justify-content: space-around;
mat-icon { mat-icon {
cursor: pointer; cursor: pointer;
transform: scale(1.1); transform: scale(1.1);
} }
mat-icon:hover { mat-icon:hover {
opacity: 0.75; opacity: 0.75;
} }
} }
&-menu.show { &-menu.show {
transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0);
} }
&-menu.hide { &-menu.hide {
transform: translateX(-50%) translateY(100%); transform: translateX(-50%) translateY(100%);
} }
&-attach { &-attach {
z-index: 1; z-index: 1;
&-left { &-left {
&-top { &-top {
border-right: solid black 1px; border-right: solid black 1px;
...@@ -51,6 +56,7 @@ ...@@ -51,6 +56,7 @@
transform: translateY(-50%); transform: translateY(-50%);
left: -25px; left: -25px;
} }
&-bottom { &-bottom {
border-top: solid black 1px; border-top: solid black 1px;
border-right: solid black 1px; border-right: solid black 1px;
...@@ -64,6 +70,7 @@ ...@@ -64,6 +70,7 @@
left: 0px; left: 0px;
} }
} }
&-right { &-right {
border-top: solid black 1px; border-top: solid black 1px;
border-right: solid black 1px; border-right: solid black 1px;
...@@ -76,6 +83,7 @@ ...@@ -76,6 +83,7 @@
top: 200px; top: 200px;
} }
} }
&-form { &-form {
height: 100%; height: 100%;
padding: 0px 10px 0px 35px; padding: 0px 10px 0px 35px;
...@@ -84,12 +92,14 @@ ...@@ -84,12 +92,14 @@
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
z-index: 2; z-index: 2;
label { label {
font-size: 20px; font-size: 20px;
font-weight: lighter; font-weight: lighter;
margin-top: 10px; margin-top: 10px;
margin-bottom: 5px; margin-bottom: 5px;
} }
input { input {
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
...@@ -97,6 +107,7 @@ ...@@ -97,6 +107,7 @@
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
font-size: 15px; font-size: 15px;
} }
textarea { textarea {
border-radius: 20px; border-radius: 20px;
padding: 10px; padding: 10px;
...@@ -105,26 +116,30 @@ ...@@ -105,26 +116,30 @@
flex-grow: 1; flex-grow: 1;
font-size: 15px; font-size: 15px;
} }
&-title { &-title {
margin-top: 20px; margin-top: 20px;
font-size: 25px; font-size: 25px;
//font-weight: bold;
font-family: 'Glacial Indifference Bold'; font-family: 'Glacial Indifference Bold';
} }
&-intitule { &-intitule {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 10px; margin-top: 10px;
} }
&-name { &-name {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
&-objective { &-objective {
height: 40%; height: 250px;
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
textarea { textarea {
margin-bottom: 5px; margin-bottom: 5px;
background-image: url("../../../assets/alchemist.png"); background-image: url("../../../assets/alchemist.png");
...@@ -133,11 +148,59 @@ ...@@ -133,11 +148,59 @@
background-size: 30%; background-size: 30%;
} }
} }
&-reward { &-reward {
display: flex;
flex-direction: column;
height: 250px;
}
&-personnalization {
&-appearance {
display: flex;
flex-direction: column;
height: 150px;
}
&-skills {
display: flex;
flex-direction: column;
height: 150px;
}
}
&-ressources {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 25px; margin-bottom: 25px;
height: 40%;
&-ressource {
margin-top: 10px;
display: flex;
flex-direction: column;
div {
display: flex;
flex-direction: row;
margin-bottom: 5px;
justify-content: space-between;
}
}
button {
position: relative;
width: 50px;
height: 50px;
background-color: white;
left: 100%;
transform: translateX(-100%);
margin-top: 5px;
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