Skip to content

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

add remove buttons

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