Skip to content

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

add remove buttons

parent 18a8a1d0
Show whitespace changes
Inline Side-by-side
Showing with 172 additions and 45 deletions
src/app/pieces/role/role.component.html
View file @ 9fbe253a
...@@ -25,11 +25,17 @@ ...@@ -25,11 +25,17 @@
<label for="description">Description</label> <label for="description">Description</label>
<textarea name="description"></textarea> <textarea name="description"></textarea>
</div> </div>
<div class="piece-form-objective"> <div class="piece-form-objectives">
<label for="objective">Objectif(s) pédagoqique(s)</label> <label for="objective">Objectif(s) pédagoqique(s)</label>
<div class="piece-form-objectives-objective">
<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="remove"></mat-icon></button>
</div>
<div class="piece-form-objectives-objective">
<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> <button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<button mat-button class="piece-form-objectives-add"><mat-icon fontIcon="add"></mat-icon></button>
</div> </div>
<div class="piece-form-rewards"> <div class="piece-form-rewards">
<label for="reward">Récompense(s)</label> <label for="reward">Récompense(s)</label>
...@@ -52,37 +58,44 @@ ...@@ -52,37 +58,44 @@
<div class="piece-form-rewards-reward-objects-object"> <div class="piece-form-rewards-reward-objects-object">
<input type="number"/> <input type="number"/>
<input type="text" placeholder="Nom de l'objet"/> <input type="text" placeholder="Nom de l'objet"/>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div> </div>
<button mat-button><mat-icon fontIcon="add"></mat-icon></button> <button mat-button class="piece-form-rewards-reward-objects-add"><mat-icon fontIcon="add"></mat-icon></button>
</div> </div>
<div class="piece-form-rewards-reward-character" *ngIf="rewardType == 3"> <div class="piece-form-rewards-reward-character" *ngIf="rewardType == 3">
<select> <select>
<option>Personnage 1</option> <option>Personnage 1</option>
</select> </select>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div> </div>
<div class="piece-form-rewards-reward-discussion" *ngIf="rewardType == 6"> <div class="piece-form-rewards-reward-discussion" *ngIf="rewardType == 6">
<select> <select>
<option>Discussion 1</option> <option>Discussion 1</option>
</select> </select>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div> </div>
<div class="piece-form-rewards-reward-skill" *ngIf="rewardType == 2"> <div class="piece-form-rewards-reward-skill" *ngIf="rewardType == 2">
<input type="number"/> <input type="number"/>
<select> <select>
<option>Compétence 1</option> <option>Compétence 1</option>
</select> </select>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div> </div>
<div class="piece-form-rewards-reward-quest" *ngIf="rewardType == 1"> <div class="piece-form-rewards-reward-quest" *ngIf="rewardType == 1">
<select> <select>
<option>Quête 1</option> <option>Quête 1</option>
</select> </select>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div> </div>
<div class="piece-form-rewards-reward-objective" *ngIf="rewardType == 4"> <div class="piece-form-rewards-reward-objective" *ngIf="rewardType == 4">
<select> <select>
<option>Objectif pédagoqique 1</option> <option>Objectif pédagoqique 1</option>
</select> </select>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div> </div>
<div class="piece-form-rewards-reward-other" *ngIf="rewardType == 7"> <div class="piece-form-rewards-reward-other" *ngIf="rewardType == 7">
<textarea></textarea> <textarea></textarea>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div> </div>
<div class="piece-form-rewards-reward-add" *ngIf="rewardType != 0"> <div class="piece-form-rewards-reward-add" *ngIf="rewardType != 0">
<button mat-button><mat-icon fontIcon="add"></mat-icon></button> <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
...@@ -115,8 +128,9 @@ ...@@ -115,8 +128,9 @@
<label for="type">Type</label> <label for="type">Type</label>
<input name="type" type="text"> <input name="type" type="text">
</div> </div>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div> </div>
<button mat-button><mat-icon fontIcon="add"></mat-icon></button> <button mat-button class="piece-form-ressources-add"><mat-icon fontIcon="add"></mat-icon></button>
</div> </div>
<div class="piece-form-title">Rôle supplémentaire</div> <div class="piece-form-title">Rôle supplémentaire</div>
...@@ -143,6 +157,7 @@ ...@@ -143,6 +157,7 @@
<label for="rules">Règles</label> <label for="rules">Règles</label>
<textarea name="rules"></textarea> <textarea name="rules"></textarea>
</div> </div>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div> </div>
</div> </div>
</div> </div>
......
src/app/pieces/role/role.component.scss
View file @ 9fbe253a
...@@ -149,16 +149,16 @@ ...@@ -149,16 +149,16 @@
} }
} }
&-objective { &-objectives {
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
input { input {
margin-top: 5px; width: 70%;
} }
button { &-add {
position: relative; position: relative;
width: 50px; width: 50px;
height: 50px; height: 50px;
...@@ -172,21 +172,32 @@ ...@@ -172,21 +172,32 @@
transform: scale(1.3); transform: scale(1.3);
} }
} }
}
&-rewards { &-objective {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
justify-content: space-between;
margin-top: 5px;
button { button {
position: relative; position: relative;
width: 50px; width: 50px;
height: 50px; height: 50px;
background-color: white; background-color: white;
left: 100%;
transform: translateX(-100%);
border-radius: 10px; border-radius: 10px;
margin-bottom: 5px; right: 0px;
}
}
}
&-rewards {
display: flex;
flex-direction: column;
button {
height: 50px;
border-radius: 10px;
background-color: white;
mat-icon { mat-icon {
transform: scale(1.3); transform: scale(1.3);
...@@ -229,17 +240,67 @@ ...@@ -229,17 +240,67 @@
} }
} }
&-quest {
display: flex;
flex-direction: row;
justify-content: space-between;
select {
width: 80%;
}
}
&-character {
display: flex;
flex-direction: row;
justify-content: space-between;
select {
width: 80%;
}
}
&-discussion {
display: flex;
flex-direction: row;
justify-content: space-between;
select {
width: 80%;
}
}
&-objective {
display: flex;
flex-direction: row;
justify-content: space-between;
select {
width: 80%;
}
}
&-objects { &-objects {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&-add {
position: relative;
width: 50px;
height: 50px;
left: 100%;
transform: translateX(-100%);
margin-bottom: 5px;
}
&-object { &-object {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-bottom: 5px; margin-bottom: 5px;
justify-content: space-between;
input[type="text"] { input[type="text"] {
margin-left: 5px; width: 50%;
} }
} }
} }
...@@ -247,14 +308,24 @@ ...@@ -247,14 +308,24 @@
&-skill { &-skill {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between;
select { select {
margin-left: 5px; width: 55%;
} }
} }
&-add { &-other {
button {
position: relative;
left: 100%;
transform: translateX(-100%);
margin-top: 5px; margin-top: 5px;
}
}
&-add {
margin-top: 10px;
button { button {
width: 100%; width: 100%;
...@@ -315,18 +386,21 @@ ...@@ -315,18 +386,21 @@
background-color: white; background-color: white;
left: 100%; left: 100%;
transform: translateX(-100%); transform: translateX(-100%);
margin-top: 5px;
border-radius: 10px; border-radius: 10px;
mat-icon { mat-icon {
transform: scale(1.3); transform: scale(1.3);
} }
} }
&-add {
margin-top: 10px;
}
} }
&-supplementary { &-supplementary {
padding-bottom: 10px; padding-bottom: 10px;
background: linear-gradient(304deg, rgb(2, 0, 36) 0%, rgb(2, 0, 36) 50%, #9ad5ec 50%, #9ad5ec 100%); background: linear-gradient(302deg, rgb(2, 0, 36) 0%, rgb(2, 0, 36) 50%, #9ad5ec 50%, #9ad5ec 100%);
width: 398px; width: 398px;
position: relative; position: relative;
left: -34px; left: -34px;
...@@ -336,6 +410,20 @@ ...@@ -336,6 +410,20 @@
margin-left: 33px; margin-left: 33px;
margin-right: 10px; margin-right: 10px;
button {
width: 50px;
height: 50px;
background-color: white;
border-radius: 10px;
left: 100%;
transform: translateX(-100%);
margin-top: 5px;
mat-icon {
transform: scale(1.3);
}
}
&-name { &-name {
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
...@@ -368,14 +456,11 @@ ...@@ -368,14 +456,11 @@
&-add { &-add {
position: relative; position: relative;
width: 50px; margin-top: 10px;
margin-bottom: 10px;
height: 50px; height: 50px;
background-color: white; background-color: white;
left: 100%;
transform: translateX(-100%);
margin-top: 10px;
border-radius: 10px; border-radius: 10px;
margin-bottom: 10px;
mat-icon { mat-icon {
transform: scale(1.3); transform: scale(1.3);
......
src/app/sider-pieces/role-occurence/role-occurence.component.html
View file @ 9fbe253a
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div class="piece-form"> <div class="piece-form">
<div class="piece-title">Occurrence du rôle</div> <div class="piece-title">Occurrence du rôle</div>
<div class="piece-form-occurrence"> <div class="piece-form-occurrence">
<div class="piece-form-occurrence-text">
<input type="text"/> <input type="text"/>
<label> entre </label> <label> entre </label>
<input type="text"/> <input type="text"/>
...@@ -9,7 +10,10 @@ ...@@ -9,7 +10,10 @@
<input type="text"/> <input type="text"/>
<label> joueurs</label> <label> joueurs</label>
</div> </div>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<div class="piece-form-occurrence"> <div class="piece-form-occurrence">
<div class="piece-form-occurrence-text">
<input type="text"/> <input type="text"/>
<label> entre </label> <label> entre </label>
<input type="text"/> <input type="text"/>
...@@ -17,6 +21,8 @@ ...@@ -17,6 +21,8 @@
<input type="text"/> <input type="text"/>
<label> joueurs</label> <label> joueurs</label>
</div> </div>
<button mat-button><mat-icon fontIcon="add"></mat-icon></button> <button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div>
<button mat-button class="piece-form-add"><mat-icon fontIcon="add"></mat-icon></button>
</div> </div>
</div> </div>
\ No newline at end of file
src/app/sider-pieces/role-occurence/role-occurence.component.scss
View file @ 9fbe253a
...@@ -19,21 +19,33 @@ ...@@ -19,21 +19,33 @@
input { input {
width: 25px; width: 25px;
height: 20px;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
text-align: center;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
} }
button { button {
margin-top: 10px;
border: none;
background-color: white; background-color: white;
border-radius: 10px; border-radius: 10px;
} }
&-occurence { &-add {
margin-top: 10px;
}
&-occurrence {
display: flex;
flex: row;
justify-content: space-between;
margin-top: 5px;
&-text {
display: flex; display: flex;
flex-direction: row;
}
} }
} }
} }
\ No newline at end of file
src/app/sider-pieces/rules/rules.component.html
View file @ 9fbe253a
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
<label for="quantity">Quantité</label> <label for="quantity">Quantité</label>
<input name="quantity" type="text"/> <input name="quantity" type="text"/>
</div> </div>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div> </div>
<div class="piece-form-ressources-object-infos"> <div class="piece-form-ressources-object-infos">
...@@ -27,6 +28,7 @@ ...@@ -27,6 +28,7 @@
<label for="quantity">Quantité</label> <label for="quantity">Quantité</label>
<input name="quantity" type="text"/> <input name="quantity" type="text"/>
</div> </div>
<button mat-button><mat-icon fontIcon="remove"></mat-icon></button>
</div> </div>
<button mat-button><mat-icon fontIcon="add"></mat-icon></button> <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
......
src/app/sider-pieces/rules/rules.component.scss
View file @ 9fbe253a
...@@ -44,6 +44,13 @@ ...@@ -44,6 +44,13 @@
&-ressources { &-ressources {
button {
position: relative;
left: 100%;
transform: translateX(-100%);
margin-top: 5px;
}
input { input {
height: 30px; height: 30px;
border: none; border: none;
......
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