hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Release v1.9.5 (#60)

release/v1.9.7 v1.9.5
hardi 2019-10-01 13:51:03 +02:00 committed by Gogs
parent 845593b2ec
commit 12ca58d43e
38 changed files with 102 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "opt-cc",
"version": "1.9.4",
"version": "1.9.5",
"author": "Florian Hartwich <hardi@noarch.de>",
"private": true,
"scripts": {

2
server/apib/data_structures/_war.apib
View File

@ -6,6 +6,8 @@ A war as used in statistics
+ title: `Battle No.1` (string, required) - the display neme of the war
+ date: `2018-02-24T20:01:25.825Z` (string, required) - war start timestamp
+ endDate: `2018-02-24T22:31:26.855Z` (string, required) - war end timestamp
+ fractionMappingBlufor: `BLUFOR` (enum[string], required) - display name mapping for Blufor fraction
+ fractionMappingOpfor: `OPFOR` (enum[string], required) - display name mapping for Opfor fraction
+ ptBlufor: 11 (number, required) - final points fraction Blufor
+ ptOpfor: 12 (number, required) - final points fraction Opfor
+ playersBlufor: 36 (number, required) - player count of fraction Blufor

2
server/models/decoration.js
View File

@ -10,7 +10,7 @@ const DecorationSchema = new Schema({
},
fraction: {
type: String,
enum: ['BLUFOR', 'OPFOR', 'GLOBAL'],
enum: ['BLUFOR', 'OPFOR', 'ARF', 'SWORD', 'GLOBAL'],
required: true,
},
description: {

10
server/models/war.js
View File

@ -14,6 +14,16 @@ const WarSchema = new Schema({
endDate: {
type: Date,
},
fractionMappingBlufor: {
type: String,
enum: ['BLUFOR', 'OPFOR', 'ARF', 'SWORD'],
default: 'BLUFOR',
},
fractionMappingOpfor: {
type: String,
enum: ['BLUFOR', 'OPFOR', 'ARF', 'SWORD'],
default: 'OPFOR',
},
ptBlufor: {
type: Number,
get: (v) => Math.round(v),

6
server/routes/decorations.js
View File

@ -37,7 +37,11 @@ decorationRouter.route('/')
.get((req, res, next) => {
const filter = {};
if (req.query.fractFilter) {
filter.fraction = req.query.fractFilter.toUpperCase();
filter.fraction = {
'$in': req.query.fractFilter
.toUpperCase()
.split(','),
};
}
if (req.query.q) {
filter.name = {$regex: req.query.q, $options: 'i'};

1
server/routes/users.js
View File

@ -168,7 +168,6 @@ users.route('/:id')
res.locals.items = item;
} else {
err.status = codes.wrongrequest;
console.log(err);
err.message += ' in fields: ' + Object.getOwnPropertyNames(err.errors);
}

3
server/server.js
View File

@ -19,8 +19,7 @@ const {exec} = require('child_process');
// cluster mode
const cluster = require('cluster');
const envWorkerNum = process.env.NODE_WORKER_COUNT;
const cpuCount = require('os').cpus().length;
const numWorkers = (envWorkerNum) ? envWorkerNum : cpuCount;
const numWorkers = (envWorkerNum) ? envWorkerNum : 2;
// own modules
const config = require('./config/config');

2
server/tools/log-parse-tool.js
View File

@ -72,7 +72,7 @@ const parseWarLog = (lineArray, war) => {
'Qilin (Unbewaffnet)', 'Qilin (Bewaffnet)', 'Ifrit',
'Tempest-Transporter', 'Tempest-Transporter (abgedeckt)', 'Tempest Sanitätsfahrzeug',
'Remote Designator [CSAT]', 'UBF Saif',
'Quad Bike', 'HuntIR',
'Quad Bike', 'HuntIR', 'Offroad',
];
const addPlayerIfNotExists = (inputPlayer, steamUUID) => {

2
static/src/app/admin/edit-app-user/edit-app-user.component.html
View File

@ -23,7 +23,7 @@
[(ngModel)]="appUserSquadId">
<option [value]="null">{{'user.submit.field.squad.not.assigned' | translate}}</option>
<option *ngFor="let squad of squads" [ngValue]="squad._id">
{{squad.fraction == 'BLUFOR'? fraction.BLUFOR : fraction.OPFOR}}: {{squad.name}}
{{squad.fraction == 'BLUFOR'? fraction.ARF : fraction.SWORD}}: {{squad.name}}
</option>
</select>
<show-error displayName="{{'user.submit.field.squad' | translate}}" controlPath="squad"></show-error>

4
static/src/app/admin/user-list/app-user-item.component.html
View File

@ -6,8 +6,8 @@
<a>{{appUser.username}}</a>
</span>
<br>
<small *ngIf="appUser.squad && appUser.squad.fraction == 'OPFOR'">{{fraction.OPFOR}} - {{appUser.squad.name}}</small>
<small *ngIf="appUser.squad && appUser.squad.fraction == 'BLUFOR'">{{fraction.BLUFOR}} - {{appUser.squad.name}}</small>
<small *ngIf="appUser.squad && appUser.squad.fraction == 'OPFOR'">{{fraction.SWORD}} - {{appUser.squad.name}}</small>
<small *ngIf="appUser.squad && appUser.squad.fraction == 'BLUFOR'">{{fraction.ARF}} - {{appUser.squad.name}}</small>
<small *ngIf="!appUser.squad">{{'users.list.item.label.no.squad' | translate}}</small>
</div>

2
static/src/app/army/army-member/army-member.component.html
View File

@ -8,7 +8,7 @@
</div>
<h3 class="text-center" style="font-weight: 600"
[style.color]="user.squadId?.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
[style.color]="user.squadId?.fraction === 'BLUFOR' ? fraction.COLOR_ARF : fraction.COLOR_SWORD">
{{'public.army.member.headline' | translate:{name: user.username} }}
</h3>

2
static/src/app/army/army-squad/army-squad.component.html
View File

@ -7,7 +7,7 @@
</div>
<div class=" middle-row">
<div class="name-cell">
<div [style.color]="squadFraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR"
<div [style.color]="squadFraction === 'BLUFOR' ? fraction.COLOR_ARF : fraction.COLOR_SWORD"
*ngFor="let member of squad.members">
<span class="member-link"
(click)="select(member._id)">

8
static/src/app/army/army.component.html
View File

@ -2,8 +2,8 @@
<h1>{{'public.army.headline' | translate}}</h1>
<div class="pull-left army-column" *ngIf="!isSmallLayout || singleViewSelected === fraction.BLUFOR">
<h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">
{{fraction.BLUFOR}}
<h3 class="army-head" [style.color]="fraction.COLOR_ARF">
{{fraction.ARF}}
<button mat-icon-button class="switch-btn-blufor"
(click)="singleViewSwitch(fraction.OPFOR)">
<mat-icon svgIcon="chevron-right"></mat-icon>
@ -18,12 +18,12 @@
</div>
<div class="pull-right army-column" *ngIf="!isSmallLayout || singleViewSelected === fraction.OPFOR">
<h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">
<h3 class="army-head" [style.color]="fraction.COLOR_SWORD">
<button mat-icon-button class="switch-btn-opfor"
(click)="singleViewSwitch(fraction.BLUFOR)">
<mat-icon svgIcon="chevron-right"></mat-icon>
</button>
{{fraction.OPFOR}}
{{fraction.SWORD}}
</h3>
<cc-army-squad *ngFor="let squad of army[1].squads"
[squad]="squad"

2
static/src/app/manage/decorations/decoration-list/decoration-item.component.html
View File

@ -6,6 +6,8 @@
<a>{{decoration.name}}</a>
</span>
<br>
<small *ngIf="decoration.fraction == 'ARF'">{{fraction.ARF}}</small>
<small *ngIf="decoration.fraction == 'SWORD'">{{fraction.SWORD}}</small>
<small *ngIf="decoration.fraction == 'OPFOR'">{{fraction.OPFOR}}</small>
<small *ngIf="decoration.fraction == 'BLUFOR'">{{fraction.BLUFOR}}</small>
<small *ngIf="decoration.fraction == 'GLOBAL'">{{'decorations.list.filter.global' | translate}}</small>

4
static/src/app/manage/decorations/decoration-list/decoration-list.component.html
View File

@ -1,6 +1,8 @@
<div class="select-list">
<cc-list-filter
[filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
[filterButtons]="[{label: fraction.ARF, value: 'ARF'},
{label: fraction.SWORD, value: 'SWORD'},
{label: fraction.BLUFOR, value: 'BLUFOR'},
{label: fraction.OPFOR, value: 'OPFOR'},
{label: 'decorations.list.filter.global', value: 'GLOBAL'}]"
[addButton]="{svgIcon: 'add', tooltip: 'decorations.list.button.add'}"

6
static/src/app/manage/decorations/edit-decoration/edit-decoration.component.html
View File

@ -17,8 +17,10 @@
<select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
required
[(ngModel)]="decoration.fraction">
<option value="OPFOR">{{fraction.OPFOR}}</option>
<option value="BLUFOR">{{fraction.BLUFOR}}</option>
<option value="{{fraction.ARF}}">{{fraction.ARF}}</option>
<option value="{{fraction.SWORD}}">{{fraction.SWORD}}</option>
<option value="{{fraction.OPFOR}}">{{fraction.OPFOR}}</option>
<option value="{{fraction.BLUFOR}}">{{fraction.BLUFOR}}</option>
<option value="GLOBAL">{{'decorations.submit.field.fraction.global' | translate}}</option>
</select>
<show-error displayName="{{'decorations.submit.field.fraction' | translate}}" controlPath="fraction"></show-error>

4
static/src/app/manage/ranks/edit-rank/edit-rank.component.html
View File

@ -17,8 +17,8 @@
<select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
required
[(ngModel)]="rank.fraction">
<option value="OPFOR">{{fraction.OPFOR}}</option>
<option value="BLUFOR">{{fraction.BLUFOR}}</option>
<option value="OPFOR">{{fraction.SWORD}}</option>
<option value="BLUFOR">{{fraction.ARF}}</option>
</select>
<show-error displayName="{{'ranks.submit.field.fraction' | translate}}" controlPath="fraction"></show-error>
</div>

4
static/src/app/manage/ranks/rank-list/rank-item.component.html
View File

@ -6,8 +6,8 @@
<a>{{rank.name}}</a>
</span>
<br>
<small *ngIf="rank.fraction == 'OPFOR'">{{fraction.OPFOR}}</small>
<small *ngIf="rank.fraction == 'BLUFOR'">{{fraction.BLUFOR}}</small>
<small *ngIf="rank.fraction == 'OPFOR'">{{fraction.SWORD}}</small>
<small *ngIf="rank.fraction == 'BLUFOR'">{{fraction.ARF}}</small>
<small> {{'ranks.list.item.label.level' | translate:{level: rank.level} }}</small>
</div>

4
static/src/app/manage/ranks/rank-list/rank-list.component.html
View File

@ -1,7 +1,7 @@
<div class="select-list">
<cc-list-filter
[filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
{label: fraction.OPFOR, value: 'OPFOR'}]"
[filterButtons]="[{label: fraction.ARF, value: 'BLUFOR'},
{label: fraction.SWORD, value: 'OPFOR'}]"
[addButton]="{svgIcon: 'add', tooltip: 'ranks.list.button.add'}"
(executeSearch)="filterRanks($event)"
(openAddFrom)="openNewRankForm()">

4
static/src/app/manage/squads/edit-squad/edit-squad.component.html
View File

@ -17,8 +17,8 @@
<select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
required
[(ngModel)]="squad.fraction">
<option value="OPFOR">{{fraction.OPFOR}}</option>
<option value="BLUFOR">{{fraction.BLUFOR}}</option>
<option value="OPFOR">{{fraction.SWORD}}</option>
<option value="BLUFOR">{{fraction.ARF}}</option>
</select>
<show-error displayName="{{'squad.submit.field.fraction' | translate}}" controlPath="fraction"></show-error>
</div>

4
static/src/app/manage/squads/squad-list/squad-item.component.html
View File

@ -6,8 +6,8 @@
<a>{{squad.name}}</a>
</span>
<br>
<small *ngIf="squad.fraction == 'OPFOR'">{{fraction.OPFOR}}</small>
<small *ngIf="squad.fraction == 'BLUFOR'">{{fraction.BLUFOR}}</small>
<small *ngIf="squad.fraction == 'OPFOR'">{{fraction.ARF}}</small>
<small *ngIf="squad.fraction == 'BLUFOR'">{{fraction.SWORD}}</small>
</div>
<div class="col-xs-4">

4
static/src/app/manage/squads/squad-list/squad-list.component.html
View File

@ -1,7 +1,7 @@
<div class="select-list">
<cc-list-filter
[filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
{label: fraction.OPFOR, value: 'OPFOR'}]"
[filterButtons]="[{label: fraction.ARF, value: 'BLUFOR'},
{label: fraction.SWORD, value: 'OPFOR'}]"
[addButton]="{svgIcon: 'add', tooltip: 'squad.list.tooltip.new'}"
(executeSearch)="filterSquads($event)"
(openAddFrom)="openNewSquadForm()">

3
static/src/app/manage/users/award-user/award-user.component.html
View File

@ -13,7 +13,8 @@
style="min-width: 200px;">
<option [value]="0">{{'users.award.field.decoration.placeholder' | translate}}</option>
<option *ngFor="let deco of decorations" [value]="deco._id">
{{deco.fraction == 'BLUFOR'? fraction.BLUFOR : deco.fraction == 'OPFOR'? fraction.OPFOR : 'Global'}}:
{{deco.fraction == 'BLUFOR' ? fraction.BLUFOR : deco.fraction == 'OPFOR' ? fraction.OPFOR : deco.fraction ==
'ARF' ? fraction.ARF : deco.fraction == 'SWORD' ? fraction.SWORD : 'Global'}}:
{{deco.name}}
</option>
</select>

2
static/src/app/manage/users/edit-user/edit-user.component.html
View File

@ -23,7 +23,7 @@
(change)="toggleRanks()">
<option [value]="0">{{'user.submit.field.squad.not.assigned' | translate}}</option>
<option *ngFor="let squad of squads" [ngValue]="squad">
{{squad.fraction == 'BLUFOR'? fraction.BLUFOR : fraction.OPFOR}}: {{squad.name}}
{{squad.fraction == 'BLUFOR'? fraction.ARF : fraction.SWORD}}: {{squad.name}}
</option>
</select>
<show-error displayName="{{'user.submit.field.squad' | translate}}" controlPath="squad"></show-error>

4
static/src/app/manage/users/user-list/user-item.component.html
View File

@ -6,8 +6,8 @@
<a>{{user.username}}</a>
</span>
<br>
<small *ngIf="user.squadId && user.squadId.fraction == 'OPFOR'">{{fraction.OPFOR}} - {{user.squadId.name}}</small>
<small *ngIf="user.squadId && user.squadId.fraction == 'BLUFOR'">{{fraction.BLUFOR}} - {{user.squadId.name}}
<small *ngIf="user.squadId && user.squadId.fraction == 'OPFOR'">{{fraction.SWORD}} - {{user.squadId.name}}</small>
<small *ngIf="user.squadId && user.squadId.fraction == 'BLUFOR'">{{fraction.ARF}} - {{user.squadId.name}}
</small>
<small *ngIf="!user.squadId">{{'users.list.item.label.no.squad' | translate}}</small>
</div>

4
static/src/app/manage/users/user-list/user-list.component.html
View File

@ -1,7 +1,7 @@
<div class="select-list">
<cc-list-filter
[filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
{label: fraction.OPFOR, value: 'OPFOR'},
[filterButtons]="[{label: fraction.ARF, value: 'BLUFOR'},
{label: fraction.SWORD, value: 'OPFOR'},
{label: 'users.list.filter.no.squad', value: 'UNASSIGNED'}]"
[addButton]="{svgIcon: 'add-user', tooltip: 'users.list.tooltip.new'}"
(executeSearch)="filterUsers(undefined, $event)"

2
static/src/app/pub/decoration-overview/decoration-overview.component.html
View File

@ -2,6 +2,8 @@
<h1>{{'public.decorations.headline' | translate}}</h1>
<div class="fraction-side-bar">
<div [ngClass]="{active: active === 'ARF'}" (click)="switchFraction('ARF')">{{fraction.ARF}}</div>
<div [ngClass]="{active: active === 'SWORD'}" (click)="switchFraction('SWORD')">{{fraction.SWORD}}</div>
<div [ngClass]="{active: active === 'BLUFOR'}" (click)="switchFraction('BLUFOR')">{{fraction.BLUFOR}}</div>
<div [ngClass]="{active: active === 'OPFOR'}" (click)="switchFraction('OPFOR')">{{fraction.OPFOR}}</div>
<div [ngClass]="{active: active === 'GLOBAL'}" (click)="switchFraction('GLOBAL')">GLOBAL</div>

5
static/src/app/pub/decoration-overview/decoration-overview.component.ts
View File

@ -45,10 +45,11 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
}
const fract = queryParams.fraction;
if (fract && (fract === 'BLUFOR' || fract === 'OPFOR' || fract === 'GLOBAL')) {
if (fract && (fract === 'ARF' || fract === 'SWORD' ||
fract === 'BLUFOR' || fract === 'OPFOR' || fract === 'GLOBAL')) {
this.switchFraction(queryParams.fraction);
} else {
this.switchFraction('BLUFOR');
this.switchFraction('ARF');
}
});
};

3
static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html
View File

@ -5,8 +5,7 @@
[class]="decoration.isMedal ? 'img-medal' : 'img-ribbon'">
</div>
<mat-card-content>
<div [style.background]="decoration.fraction === 'BLUFOR' ?
fraction.COLOR_BLUFOR : decoration.fraction === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
<div [style.background]="getColor(decoration.fraction)">
{{decoration.name}}
</div>
<div class="decoration-description">

15
static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.ts
View File

@ -17,6 +17,21 @@ export class DecorationPanelComponent {
readonly fraction = Fraction;
getColor(fractionKey) {
switch (fractionKey) {
case 'ARF':
return this.fraction.COLOR_ARF;
case 'SWORD':
return this.fraction.COLOR_SWORD;
case 'BLUFOR':
return this.fraction.COLOR_BLUFOR;
case 'OPFOR':
return this.fraction.COLOR_OPFOR;
default:
return this.fraction.COLOR_NEUTRAL;
}
}
selectDecoration() {
this.select.emit(this.decoration);
}

4
static/src/app/pub/rank-overview/rank-overview.component.html
View File

@ -2,7 +2,7 @@
<h1>{{'public.ranks.headline' | translate}}</h1>
<div class="column-container pull-left">
<h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
<h3 [style.color]="fraction.COLOR_ARF">{{fraction.ARF}}</h3>
<table mat-table [dataSource]="ranksBlufor" class="mat-elevation-z8">
@ -19,7 +19,7 @@
</div>
<div class="column-container pull-right">
<h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
<h3 [style.color]="fraction.COLOR_SWORD">{{fraction.SWORD}}</h3>
<table mat-table [dataSource]="ranksOpfor" class="pull-right mat-elevation-z8">

2
static/src/app/pub/rank-overview/rank-panel/rank-panel.component.ts
View File

@ -13,8 +13,6 @@ export class RankPanelComponent {
@Output() select = new EventEmitter();
readonly fraction = Fraction;
selectRank() {
this.select.emit(this.rank);
}

4
static/src/app/pub/user-list-sheet/user-list-sheet.component.html
View File

@ -24,8 +24,8 @@
<span mat-line>
{{user.username}}
</span>
<span mat-line [style.color]="user.squadId.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR :fraction.COLOR_OPFOR">
{{user.squadId.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} - {{user.squadId.name}}
<span mat-line [style.color]="user.squadId.fraction === 'BLUFOR' ? fraction.COLOR_ARF :fraction.COLOR_SWORD">
{{user.squadId.fraction === 'BLUFOR' ? fraction.ARF : fraction.SWORD}} - {{user.squadId.name}}
</span>
</a>
</mat-nav-list>

6
static/src/app/request/award/req-award.component.html
View File

@ -35,12 +35,10 @@
</div>
<div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
<div class="col-sm-1 decoration-preview">
<div class="decoration-preview">
<img class="center-block" #decoPreview>
</div>
<div class="col-sm-2"
style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
&nbsp;
<div style="border-radius: 0px 15px 15px 0px; font-style: oblique; padding: 0 10px" #decoDescription>
</div>
</div>

9
static/src/app/request/award/req-award.component.ts
View File

@ -7,6 +7,7 @@ import {DecorationService} from '../../services/army-management/decoration.servi
import {UserService} from '../../services/army-management/user.service';
import {LoginService} from '../../services/app-user-service/login-service';
import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
import {Fraction} from '../../utils/fraction.enum';
@Component({
@ -47,7 +48,13 @@ export class RequestAwardComponent implements OnInit {
this.userService.findUsers({squadId: currentUser.squad._id}).subscribe(users => {
this.users = users;
});
this.decorationService.findDecorations('', currentUser.squad.fraction).subscribe(decorations => {
const selectableFractions = [
(currentUser.squad.fraction === Fraction.BLUFOR) ? Fraction.ARF : Fraction.SWORD,
currentUser.squad.fraction
];
this.decorationService.findDecorations('', selectableFractions).subscribe(decorations => {
this.decorations = decorations;
});
}

3
static/src/app/statistic/war/scoreboard/scoreboard.component.html
View File

@ -16,8 +16,7 @@
<ng-container matColumnDef="{{tableHead[1].prop}}">
<mat-header-cell *matHeaderCellDef
mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.fraction ===
'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
<mat-cell *matCellDef="let element">{{element.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
</ng-container>
<ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">

7
static/src/app/utils/fraction.enum.ts
View File

@ -1,4 +1,8 @@
export enum Fraction {
ARF = 'ARF',
COLOR_ARF = '#336699',
SWORD = 'SWORD',
COLOR_SWORD = '#8b8b8b',
BLUFOR = 'NATO',
OPFOR = 'CSAT',
COLOR_BLUFOR = '#3c5fa1',
@ -8,5 +12,6 @@ export enum Fraction {
COLOR_OPFOR = '#a90100',
COLOR_OPFOR_DARK = '#890F0F',
COLOR_OPFOR_LIGHT = '#fb5555',
COLOR_OPFOR_GREY = '#955c5f'
COLOR_OPFOR_GREY = '#955c5f',
COLOR_NEUTRAL = '#222222',
}

BIN
static/src/assets/bg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 809 KiB

After

Width:  |  Height:  |  Size: 832 KiB