Finish basic war-list redesign and list imrovement
							parent
							
								
									ce86593c0f
								
							
						
					
					
						commit
						d1ba6170ba
					
				| 
						 | 
					@ -3,7 +3,7 @@
 | 
				
			||||||
  <div class="row">
 | 
					  <div class="row">
 | 
				
			||||||
    <div [ngClass]="[loginService.hasPermission(3) ? 'col-xs-9' : 'col-xs-11']">
 | 
					    <div [ngClass]="[loginService.hasPermission(3) ? 'col-xs-9' : 'col-xs-11']">
 | 
				
			||||||
      <span>
 | 
					      <span>
 | 
				
			||||||
        <a style="font-size: 20px;">{{war.title}}</a>
 | 
					        <a>{{war.title}}</a>
 | 
				
			||||||
      </span>
 | 
					      </span>
 | 
				
			||||||
      <br>
 | 
					      <br>
 | 
				
			||||||
      <small>vom {{war.date | date: 'dd.MM.yyyy'}}</small>
 | 
					      <small>vom {{war.date | date: 'dd.MM.yyyy'}}</small>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -3,7 +3,7 @@ import {War} from '../../../models/model-interfaces';
 | 
				
			||||||
import {LoginService} from '../../../services/app-user-service/login-service';
 | 
					import {LoginService} from '../../../services/app-user-service/login-service';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@Component({
 | 
					@Component({
 | 
				
			||||||
  selector: 'pjm-war-item',
 | 
					  selector: 'cc-war-item',
 | 
				
			||||||
  templateUrl: './war-item.component.html',
 | 
					  templateUrl: './war-item.component.html',
 | 
				
			||||||
  styleUrls: ['./war-item.component.css', '../../../style/list-entry.css'],
 | 
					  styleUrls: ['./war-item.component.css', '../../../style/list-entry.css'],
 | 
				
			||||||
  changeDetection: ChangeDetectionStrategy.OnPush
 | 
					  changeDetection: ChangeDetectionStrategy.OnPush
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,5 +1,5 @@
 | 
				
			||||||
span > a {
 | 
					span > a {
 | 
				
			||||||
  font-size: 20px !important;
 | 
					  font-weight: 600 !important;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
mat-expansion-panel {
 | 
					mat-expansion-panel {
 | 
				
			||||||
| 
						 | 
					@ -8,7 +8,7 @@ mat-expansion-panel {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
mat-panel-title {
 | 
					mat-panel-title {
 | 
				
			||||||
  font-size: 18px;
 | 
					  font-size: 18px;
 | 
				
			||||||
  color: #FFFFFF;
 | 
					  color: #ffffff;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
mat-expansion-panel-header {
 | 
					mat-expansion-panel-header {
 | 
				
			||||||
| 
						 | 
					@ -44,7 +44,7 @@ mat-expansion-panel-header.mat-expansion-panel-header:focus {
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.war-interaction-panel > span {
 | 
					.war-interaction-panel > span {
 | 
				
			||||||
  color: #4b4b4b;
 | 
					  color: rgba(255, 255, 255, 0.64);
 | 
				
			||||||
  padding: 0 3px;
 | 
					  padding: 0 3px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -53,9 +53,9 @@ mat-expansion-panel-header.mat-expansion-panel-header:focus {
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.select-list > mat-accordion:first-child .mat-expansion-panel {
 | 
					.select-list > mat-accordion:first-child .mat-expansion-panel {
 | 
				
			||||||
  border-radius: 10px 10px 0 0;
 | 
					  border-radius: 6px 6px 0 0;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.select-list > mat-accordion:first-child .mat-expansion-panel-header {
 | 
					.select-list > mat-accordion:first-child .mat-expansion-panel-header {
 | 
				
			||||||
  border-radius: 8px 8px 0 0;
 | 
					  border-radius: 4px 4px 0 0;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -15,11 +15,12 @@
 | 
				
			||||||
          {{campaign.title}}
 | 
					          {{campaign.title}}
 | 
				
			||||||
        </mat-panel-title>
 | 
					        </mat-panel-title>
 | 
				
			||||||
        <mat-panel-description class="war-interaction-panel" *ngIf="loginService.hasPermission(3)">
 | 
					        <mat-panel-description class="war-interaction-panel" *ngIf="loginService.hasPermission(3)">
 | 
				
			||||||
          <span (click)="editCampaign(campaign); $event.stopPropagation()" title="Bearbeiten"
 | 
					                    <span (click)="deleteCampaign(campaign); $event.stopPropagation()" title="Löschen"
 | 
				
			||||||
                class="glyphicon glyphicon-edit trash">
 | 
					                          class="glyphicon glyphicon-trash trash">
 | 
				
			||||||
          </span>
 | 
					          </span>
 | 
				
			||||||
          <span (click)="deleteCampaign(campaign); $event.stopPropagation()" title="Löschen"
 | 
					          <span (click)="editCampaign(campaign); $event.stopPropagation()" title="Bearbeiten"
 | 
				
			||||||
                class="glyphicon glyphicon-trash trash">
 | 
					                class="glyphicon glyphicon-edit trash"
 | 
				
			||||||
 | 
					                style="padding-right: 10px;">
 | 
				
			||||||
          </span>
 | 
					          </span>
 | 
				
			||||||
        </mat-panel-description>
 | 
					        </mat-panel-description>
 | 
				
			||||||
      </mat-expansion-panel-header>
 | 
					      </mat-expansion-panel-header>
 | 
				
			||||||
| 
						 | 
					@ -42,13 +43,13 @@
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
      <div *ngFor="let war of campaign.wars">
 | 
					      <div *ngFor="let war of campaign.wars">
 | 
				
			||||||
        <pjm-war-item
 | 
					        <cc-war-item
 | 
				
			||||||
          [war]="war"
 | 
					          [war]="war"
 | 
				
			||||||
          (warEdit)="editWar($event)"
 | 
					          (warEdit)="editWar($event)"
 | 
				
			||||||
          (warDelete)="deleteWar(war)"
 | 
					          (warDelete)="deleteWar(war)"
 | 
				
			||||||
          (warSelected)="selectWar($event)"
 | 
					          (warSelected)="selectWar($event)"
 | 
				
			||||||
          [selected]="war._id == selectedWarId">
 | 
					          [selected]="war._id == selectedWarId">
 | 
				
			||||||
        </pjm-war-item>
 | 
					        </cc-war-item>
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
    </mat-expansion-panel>
 | 
					    </mat-expansion-panel>
 | 
				
			||||||
  </mat-accordion>
 | 
					  </mat-accordion>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,20 +1,13 @@
 | 
				
			||||||
div.list-entry, a.list-entry,
 | 
					div.list-entry, a.list-entry {
 | 
				
			||||||
div.user-list-entry, a.user-list-entry {
 | 
					 | 
				
			||||||
  padding: 8px;
 | 
					  padding: 8px;
 | 
				
			||||||
  border-radius: 2px;
 | 
					  border-radius: 2px;
 | 
				
			||||||
  border: lightgrey solid 1px;
 | 
					  border: lightgrey solid 1px;
 | 
				
			||||||
  cursor: cell;
 | 
					  cursor: pointer;
 | 
				
			||||||
  margin-bottom: -1px;
 | 
					  margin-bottom: -1px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.user-list-entry a {
 | 
					div.list-entry:hover, a.list-entry:hover {
 | 
				
			||||||
  font-size: large;
 | 
					  background-color: #f9f9f9;
 | 
				
			||||||
  font-weight: 600;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.user-list-entry small {
 | 
					 | 
				
			||||||
  color: grey;
 | 
					 | 
				
			||||||
  font-size: x-small;
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.decoration-list-preview, .squad-list-preview {
 | 
					.decoration-list-preview, .squad-list-preview {
 | 
				
			||||||
| 
						 | 
					@ -31,8 +24,8 @@ span > a, span.glyphicon, span.icon-award {
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.list-entry a {
 | 
					.list-entry a {
 | 
				
			||||||
  font-size: x-large;
 | 
					  font-size: 20px;
 | 
				
			||||||
  font-weight: 700;
 | 
					  text-decoration: none;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.list-entry small {
 | 
					.list-entry small {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,4 +1,4 @@
 | 
				
			||||||
<div class="fade-in user-list-entry" [ngClass]="{selected : selected}" (click)="select()">
 | 
					<div class="fade-in list-entry" [ngClass]="{selected : selected}" (click)="select()">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  <div class="row">
 | 
					  <div class="row">
 | 
				
			||||||
    <div class="col-sm-8">
 | 
					    <div class="col-sm-8">
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue