Rework left outlet css

pull/11/head
Florian Hartwich 2017-10-06 20:11:18 +02:00
parent 88a29075a3
commit 4c068e4cd0
28 changed files with 139 additions and 207 deletions

View File

@ -11,20 +11,20 @@
"e2e": "NODE_ENV=test node server.js" "e2e": "NODE_ENV=test node server.js"
}, },
"dependencies": { "dependencies": {
"async": "^2.4.0", "async": "^2.5.0",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"body-parser": "~1.13.2", "body-parser": "~1.13.2",
"cors": "^2.8.3", "cors": "^2.8.4",
"cron": "^1.2.1", "cron": "^1.3.0",
"debug": "~2.2.0", "debug": "~2.2.0",
"express": "^4.16.1", "express": "^4.16.1",
"imagemin": "^5.2.2", "imagemin": "^5.2.2",
"imagemin-pngquant": "^5.0.0", "imagemin-pngquant": "^5.0.0",
"jimp": "^0.2.27", "jimp": "^0.2.27",
"jsonwebtoken": "^7.4.0", "jsonwebtoken": "^7.4.3",
"lodash": "^4.17.4", "lodash": "^4.17.4",
"mkdirp": "^0.5.1", "mkdirp": "^0.5.1",
"mongoose": "^4.11.4", "mongoose": "^4.12.0",
"morgan": "~1.6.1", "morgan": "~1.6.1",
"multer": "^1.3.0", "multer": "^1.3.0",
"node-sha1": "^1.0.1", "node-sha1": "^1.0.1",
@ -34,7 +34,7 @@
"devDependencies": { "devDependencies": {
"chai": "^3.5.0", "chai": "^3.5.0",
"chai-http": "^3.0.0", "chai-http": "^3.0.0",
"mocha": "^3.3.0", "mocha": "^3.5.3",
"nodemon": "^1.11.0" "nodemon": "^1.12.1"
} }
} }

View File

@ -16,7 +16,7 @@
"test-e2e": "npm run e2e --prefix ./static" "test-e2e": "npm run e2e --prefix ./static"
}, },
"dependencies": { "dependencies": {
"uglify-js": "^3.0.26" "uglify-js": "^3.1.3"
}, },
"devDependencies": { "devDependencies": {
"concurrently": "^3.4.0", "concurrently": "^3.4.0",

View File

@ -11,37 +11,37 @@
"e2e": "ng e2e --serve=false" "e2e": "ng e2e --serve=false"
}, },
"dependencies": { "dependencies": {
"@angular/animations": "^4.3.2", "@angular/animations": "^4.4.4",
"@angular/cli": "^1.4.0-rc.2", "@angular/cli": "^1.4.5",
"@angular/common": "^4.3.2", "@angular/common": "^4.4.4",
"@angular/compiler": "^4.3.2", "@angular/compiler": "^4.4.4",
"@angular/compiler-cli": "^4.3.2", "@angular/compiler-cli": "^4.4.4",
"@angular/core": "^4.3.2", "@angular/core": "^4.4.4",
"@angular/forms": "^4.3.2", "@angular/forms": "^4.4.4",
"@angular/http": "^4.3.2", "@angular/http": "^4.4.4",
"@angular/platform-browser": "^4.3.2", "@angular/platform-browser": "^4.4.4",
"@angular/platform-browser-dynamic": "^4.3.2", "@angular/platform-browser-dynamic": "^4.4.4",
"@angular/router": "^4.3.2", "@angular/router": "^4.4.4",
"@swimlane/ngx-charts": "^6.0.2", "@swimlane/ngx-charts": "^6.0.2",
"@swimlane/ngx-datatable": "^10.2.3", "@swimlane/ngx-datatable": "^10.2.3",
"bootstrap": "^3.3.7", "bootstrap": "^3.3.7",
"core-js": "^2.4.1", "core-js": "^2.4.1",
"d3": "^4.10.0", "d3": "^4.11.0",
"jquery": "^3.1.0", "jquery": "^3.1.0",
"jquery-ui": "^1.12.0", "jquery-ui": "^1.12.0",
"jquery-ui-bundle": "^1.11.4", "jquery-ui-bundle": "^1.11.4",
"ngx-bootstrap": "^1.8.1", "ngx-bootstrap": "^1.9.3",
"ngx-clipboard": "^8.0.2", "ngx-clipboard": "^8.1.0",
"ngx-cookie-service": "^1.0.9", "ngx-cookie-service": "^1.0.9",
"rxjs": "^5.2.0", "rxjs": "^5.2.0",
"ts-helpers": "^1.1.1", "ts-helpers": "^1.1.1",
"typescript": "^2.3.2", "typescript": "^2.5.3",
"webpack": "^3.5.5", "webpack": "^3.6.0",
"zone.js": "^0.8.5" "zone.js": "^0.8.18"
}, },
"devDependencies": { "devDependencies": {
"@types/jasmine": "2.5.38", "@types/jasmine": "2.5.38",
"@types/node": "~6.0.60", "@types/node": "^6.0.89",
"codelyzer": "~2.0.0-beta.1", "codelyzer": "~2.0.0-beta.1",
"jasmine-core": "^2.5.2", "jasmine-core": "^2.5.2",
"jasmine-spec-reporter": "^3.2.0", "jasmine-spec-reporter": "^3.2.0",

View File

@ -86,7 +86,7 @@
</nav> </nav>
</div> </div>
<div class="content"> <div>
<span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span> <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
<div id="left"> <div id="left">
<router-outlet></router-outlet> <router-outlet></router-outlet>

View File

@ -1,7 +1,7 @@
import {RouterModule, Routes} from "@angular/router"; import {RouterModule, Routes} from "@angular/router";
import {LoginComponent} from "./login/index"; import {LoginComponent} from "./login/index";
import {NotFoundComponent} from "./common/not-found/not-found.component"; import {NotFoundComponent} from "./common/not-found/not-found.component";
import {LoginGuardAdmin, LoginGuardHL, LoginGuardMT, LoginGuardSQL} from "./login/login.guard"; import {LoginGuardAdmin, LoginGuardHL} from "./login/login.guard";
import {armyRoutes, armyRoutingComponents} from "./army/army.routing"; import {armyRoutes, armyRoutingComponents} from "./army/army.routing";
import {SignupComponent} from "./login/signup.component"; import {SignupComponent} from "./login/signup.component";
import {RouteConfig} from "./app.config"; import {RouteConfig} from "./app.config";

View File

@ -1,8 +0,0 @@
.search-bar {
padding-top: 20px;
padding-bottom: 20px;
}
.decoration-list {
width: 100%;
}

View File

@ -1,40 +1,36 @@
<div class="decoration-list"> <div class="select-list">
<h2>Übersicht</h2> <div class="input-group list-header pull-left">
<div class="input-group search-bar" style="padding-bottom: 5px; width:100%"> <label class="radio-inline">
<form class="pull-left form-group"> <input type="radio" name="fractSelect"
<label class="radio-inline"> [checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
<input type="radio" name="fractSelect" [(ngModel)]="fractionRadioSelect"
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'" (change)="filterSquadsByFraction(query.value)">Alle
[(ngModel)]="fractionRadioSelect" </label>
(change)="filterSquadsByFraction(query.value)">Alle <label class="radio-inline">
</label> <input type="radio" name="fractSelect" value="blufor"
<label class="radio-inline"> [(ngModel)]="fractionRadioSelect"
<input type="radio" name="fractSelect" value="blufor" #fractRadioBufor
[(ngModel)]="fractionRadioSelect" (change)="filterSquadsByFraction(query.value, fractRadioBufor.value)">NATO
#fractRadioBufor </label>
(change)="filterSquadsByFraction(query.value, fractRadioBufor.value)">NATO <label class="radio-inline">
</label> <input type="radio" name="fractSelect" value="opfor"
<label class="radio-inline"> [(ngModel)]="fractionRadioSelect"
<input type="radio" name="fractSelect" value="opfor" #fractRadioOpfor
[(ngModel)]="fractionRadioSelect" (change)="filterSquadsByFraction(query.value, fractRadioOpfor.value)">CSAT
#fractRadioOpfor </label>
(change)="filterSquadsByFraction(query.value, fractRadioOpfor.value)">CSAT <br>
</label> <label class="radio-inline" style="padding-top: 8px;">
<br> <input type="radio" name="fractSelect" value="global"
<label class="radio-inline" style="padding-top: 8px;"> [(ngModel)]="fractionRadioSelect"
<input type="radio" name="fractSelect" value="global" #fractRadioGlobal
[(ngModel)]="fractionRadioSelect" (change)="filterSquadsByFraction(query.value, fractRadioGlobal.value)">Global
#fractRadioGlobal </label>
(change)="filterSquadsByFraction(query.value, fractRadioGlobal.value)">Global
</label>
</form>
<a class="pull-right btn btn-success" (click)="openNewSquadForm()"> <a class="pull-right btn btn-success" (click)="openNewSquadForm()">
Neue Auszeichnung hinzufügen Auszeichnung hinzufügen
</a> </a>
</div> </div>
<div class="input-group search-bar" style="padding-top: 0;"> <div class="input-group list-header">
<input id="search-tasks" <input id="search-tasks"
type="text" #query class="form-control" type="text" #query class="form-control"
(keyup.enter)="findSquads(query.value)" (keyup.enter)="findSquads(query.value)"

View File

@ -10,7 +10,7 @@ import {DecorationService} from "../../services/decoration-service/decoration.se
@Component({ @Component({
selector: 'decoration-list', selector: 'decoration-list',
templateUrl: './decoration-list.component.html', templateUrl: './decoration-list.component.html',
styleUrls: ['./decoration-list.component.css'] styleUrls: ['./decoration-list.component.css', '../../style/select-list.css']
}) })
export class DecorationListComponent implements OnInit { export class DecorationListComponent implements OnInit {

View File

@ -1,6 +1,5 @@
import {Injectable} from '@angular/core'; import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router'; import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
import {CookieService} from "ngx-cookie-service";
import {LoginService} from "../services/login-service/login-service"; import {LoginService} from "../services/login-service/login-service";
@Injectable() @Injectable()
@ -11,8 +10,8 @@ export class LoginGuardSQL implements CanActivate {
} }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if(this.loginService.hasPermission(1)) { if (this.loginService.hasPermission(1)) {
return true; return true;
} }
// not logged in so redirect to login page with the return url // not logged in so redirect to login page with the return url
this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}}); this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
@ -28,7 +27,7 @@ export class LoginGuardHL implements CanActivate {
} }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if(this.loginService.hasPermission(2)) { if (this.loginService.hasPermission(2)) {
return true; return true;
} }
// not logged in so redirect to login page with the return url // not logged in so redirect to login page with the return url
@ -45,7 +44,7 @@ export class LoginGuardMT implements CanActivate {
} }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if(this.loginService.hasPermission(3)) { if (this.loginService.hasPermission(3)) {
return true; return true;
} }
// not logged in so redirect to login page with the return url // not logged in so redirect to login page with the return url
@ -62,7 +61,7 @@ export class LoginGuardAdmin implements CanActivate {
} }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if(this.loginService.hasPermission(4)) { if (this.loginService.hasPermission(4)) {
return true; return true;
} }
// not logged in so redirect to login page with the return url // not logged in so redirect to login page with the return url

View File

@ -1,8 +0,0 @@
.search-bar {
padding-top: 20px;
padding-bottom: 20px;
}
.rank-list {
width: 100%;
}

View File

@ -1,7 +1,6 @@
<div class="rank-list"> <div class="select-list">
<h2>Übersicht</h2> <div class="input-group list-header">
<div class="input-group search-bar" style="padding-bottom: 5px; width:100%"> <form class="pull-left">
<form class="pull-left form-group">
<label class="radio-inline"> <label class="radio-inline">
<input type="radio" name="fractSelect" <input type="radio" name="fractSelect"
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'" [checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
@ -22,11 +21,11 @@
</label> </label>
</form> </form>
<a class="pull-right btn btn-success" (click)="openNewRankForm()"> <a class="pull-right btn btn-success" (click)="openNewRankForm()">
Neuen Rang hinzufügen Rang hinzufügen
</a> </a>
</div> </div>
<div class="input-group search-bar" style="padding-top: 0;"> <div class="input-group list-header">
<input id="search-tasks" <input id="search-tasks"
type="text" #query class="form-control" type="text" #query class="form-control"
(keyup.enter)="findRanks(query.value)" (keyup.enter)="findRanks(query.value)"

View File

@ -10,7 +10,7 @@ import {RankService} from "../../services/rank-service/rank.service";
@Component({ @Component({
selector: 'rank-list', selector: 'rank-list',
templateUrl: './rank-list.component.html', templateUrl: './rank-list.component.html',
styleUrls: ['./rank-list.component.css'] styleUrls: ['./rank-list.component.css', '../../style/select-list.css']
}) })
export class RankListComponent implements OnInit { export class RankListComponent implements OnInit {

View File

@ -1,9 +0,0 @@
#left {
width: 320px;
float: left;
padding-right: 10px;
}
#right {
overflow: hidden
}

View File

@ -8,8 +8,6 @@ import {ConfirmAwardComponent} from "./confirm-award/confirm-award.component";
import {ConfirmPromotionComponent} from "./confirm-promotion/confirm-promotion.component"; import {ConfirmPromotionComponent} from "./confirm-promotion/confirm-promotion.component";
import {RequestAwardComponent} from "./award/req-award.component"; import {RequestAwardComponent} from "./award/req-award.component";
import {RequestPromotionComponent} from "./promotion/req-promotion.component"; import {RequestPromotionComponent} from "./promotion/req-promotion.component";
import {UserService} from "../services/user-service/user.service";
import {UserStore} from "../services/stores/user.store";
@NgModule({ @NgModule({
declarations: [RequestComponent, RequestPromotionComponent, RequestAwardComponent, ConfirmPromotionComponent, declarations: [RequestComponent, RequestPromotionComponent, RequestAwardComponent, ConfirmPromotionComponent,

View File

@ -1,28 +1,25 @@
<div class="squad-list"> <div class="select-list">
<h2>Übersicht</h2> <div class="input-group list-header pull-left">
<div class="input-group search-bar" style="padding-bottom: 5px; width:100%"> <label class="radio-inline">
<form class="pull-left form-group"> <input type="radio" name="fractSelect"
<label class="radio-inline"> [checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
<input type="radio" name="fractSelect" [(ngModel)]="fractionRadioSelect"
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'" (change)="filterSquadsByFraction(query.value)">Alle
[(ngModel)]="fractionRadioSelect" </label>
(change)="filterSquadsByFraction(query.value)">Alle <label class="radio-inline">
</label> <input type="radio" name="fractSelect" value="blufor"
<label class="radio-inline"> [(ngModel)]="fractionRadioSelect"
<input type="radio" name="fractSelect" value="blufor" #fractRadioBufor
[(ngModel)]="fractionRadioSelect" (change)="filterSquadsByFraction(query.value, fractRadioBufor.value)">NATO
#fractRadioBufor </label>
(change)="filterSquadsByFraction(query.value, fractRadioBufor.value)">NATO <label class="radio-inline">
</label> <input type="radio" name="fractSelect" value="opfor"
<label class="radio-inline"> [(ngModel)]="fractionRadioSelect"
<input type="radio" name="fractSelect" value="opfor" #fractRadioOpfor
[(ngModel)]="fractionRadioSelect" (change)="filterSquadsByFraction(query.value, fractRadioOpfor.value)">CSAT
#fractRadioOpfor </label>
(change)="filterSquadsByFraction(query.value, fractRadioOpfor.value)">CSAT
</label>
</form>
<a class="pull-right btn btn-success" (click)="openNewSquadForm()"> <a class="pull-right btn btn-success" (click)="openNewSquadForm()">
Neues Squad hinzufügen Squad hinzufügen
</a> </a>
</div> </div>

View File

@ -10,7 +10,7 @@ import {SquadService} from "../../services/squad-service/squad.service";
@Component({ @Component({
selector: 'squad-list', selector: 'squad-list',
templateUrl: './squad-list.component.html', templateUrl: './squad-list.component.html',
styleUrls: ['./squad-list.component.css'] styleUrls: ['./squad-list.component.css', '../../style/select-list.css']
}) })
export class SquadListComponent implements OnInit { export class SquadListComponent implements OnInit {

View File

@ -1,9 +0,0 @@
#left {
width: 320px;
float: left;
padding-right: 10px;
}
#right {
overflow: hidden
}

View File

@ -1,7 +1,3 @@
.war-list {
padding-top: 30px;
}
:host /deep/ .card-header { :host /deep/ .card-header {
background-color: rgba(34, 34, 34, 0.80); background-color: rgba(34, 34, 34, 0.80);
cursor: pointer; cursor: pointer;

View File

@ -1,5 +1,5 @@
<div class="war-list"> <div class="select-list">
<div class="input-group search-bar" style="margin-bottom:12px; width:100%;" *ngIf="loginService.hasPermission(3)"> <div class="input-group list-header" *ngIf="loginService.hasPermission(3)">
<a class="pull-left btn btn-success" (click)="selectNewWar()"> <a class="pull-left btn btn-success" (click)="selectNewWar()">
Schlacht hinzufügen Schlacht hinzufügen
</a> </a>

View File

@ -8,7 +8,7 @@ import {CampaignService} from "../../services/campaign-service/campaign.service"
@Component({ @Component({
selector: 'war-list', selector: 'war-list',
templateUrl: './war-list.component.html', templateUrl: './war-list.component.html',
styleUrls: ['./war-list.component.css', '../../style/list-entry.css'] styleUrls: ['./war-list.component.css', '../../style/list-entry.css', '../../style/select-list.css']
}) })
export class WarListComponent implements OnInit { export class WarListComponent implements OnInit {

View File

@ -1,9 +1,10 @@
.load-indicator { .load-indicator {
position:absolute; position: absolute;
top:50%; top: 50%;
left:50%; left: 50%;
transform:translate(-50%, -50%); transform: translate(-50%, -50%);
width:50%; width: 50%;
z-index: 1;
} }
.load-arrow { .load-arrow {

View File

@ -0,0 +1,8 @@
.select-list {
padding: 20px 2% 0 5%;
}
.list-header {
width: 100%;
padding-bottom: 20px;
}

View File

@ -1,18 +0,0 @@
.search-bar {
padding-top: 20px;
padding-bottom: 20px;
}
.user-list {
width: 100%;
}
.fraction-blufor {
color: mediumblue;
font-weight: bold;
}
.fraction-opfor {
color: red;
font-weight: bold;
}

View File

@ -1,39 +1,36 @@
<div class="user-list"> <div class="select-list">
<h2>Übersicht</h2> <div class="input-group list-header pull-left">
<div class="input-group search-bar" style="padding-bottom: 5px; width:100%"> <label class="radio-inline">
<form class="pull-left form-group"> <input type="radio" name="fractSelect"
<label class="radio-inline"> [checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
<input type="radio" name="fractSelect" [(ngModel)]="fractionRadioSelect"
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'" (change)="filterUsersByFraction(query.value)">Alle
[(ngModel)]="fractionRadioSelect" </label>
(change)="filterUsersByFraction(query.value)">Alle <label class="radio-inline">
</label> <input type="radio" name="fractSelect" value="blufor"
<label class="radio-inline"> [(ngModel)]="fractionRadioSelect"
<input type="radio" name="fractSelect" value="blufor" #fractRadioBufor
[(ngModel)]="fractionRadioSelect" (change)="filterUsersByFraction(query.value, fractRadioBufor.value)">NATO
#fractRadioBufor </label>
(change)="filterUsersByFraction(query.value, fractRadioBufor.value)">NATO <label class="radio-inline">
</label> <input type="radio" name="fractSelect" value="opfor"
<label class="radio-inline"> [(ngModel)]="fractionRadioSelect"
<input type="radio" name="fractSelect" value="opfor" #fractRadioOpfor
[(ngModel)]="fractionRadioSelect" (change)="filterUsersByFraction(query.value, fractRadioOpfor.value)">CSAT
#fractRadioOpfor </label>
(change)="filterUsersByFraction(query.value, fractRadioOpfor.value)">CSAT <br>
</label> <label class="radio-inline" style="padding-top: 8px;">
<br> <input type="radio" name="fractSelect" value="unassigned"
<label class="radio-inline" style="padding-top: 8px;"> [(ngModel)]="fractionRadioSelect"
<input type="radio" name="fractSelect" value="unassigned" #fractRadioUnassigned
[(ngModel)]="fractionRadioSelect" (change)="filterUsersByFraction(query.value, fractRadioUnassigned.value)">Ohne Squad
#fractRadioUnassigned </label>
(change)="filterUsersByFraction(query.value, fractRadioUnassigned.value)">Ohne Squad
</label>
</form>
<a class="pull-right btn btn-success" (click)="openNewUserForm()"> <a class="pull-right btn btn-success" (click)="openNewUserForm()">
Neuen Teilnehmer hinzufügen Teilnehmer hinzufügen
</a> </a>
</div> </div>
<div class="input-group search-bar" style="padding-top: 0;"> <div class="input-group list-header">
<input id="search-tasks" <input id="search-tasks"
type="text" #query class="form-control" type="text" #query class="form-control"
(keyup.enter)="findUsers(query.value)" (keyup.enter)="findUsers(query.value)"

View File

@ -10,7 +10,7 @@ import {User} from "../../models/model-interfaces";
@Component({ @Component({
selector: 'squad-list', selector: 'squad-list',
templateUrl: './user-list.component.html', templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css'] styleUrls: ['./user-list.component.css', '../../style/select-list.css']
}) })
export class UserListComponent implements OnInit { export class UserListComponent implements OnInit {

View File

@ -1,7 +1,5 @@
import {NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import {routes, usersRoutingComponents} from './users.routing'; import {routes, usersRoutingComponents} from './users.routing';
import {UserStore} from "../services/stores/user.store";
import {UserService} from "../services/user-service/user.service";
import {CommonModule} from "@angular/common"; import {CommonModule} from "@angular/common";
import {SharedModule} from "../shared.module"; import {SharedModule} from "../shared.module";

View File

@ -1,6 +1,6 @@
export class ChartUtils { export class ChartUtils {
public static getShortDateString(date) : string { public static getShortDateString(date): string {
const isoDate = date.slice(0, 10); const isoDate = date.slice(0, 10);
const dayDate = parseInt(isoDate.slice(8, 10)) + 1; const dayDate = parseInt(isoDate.slice(8, 10)) + 1;
return (dayDate < 10 ? "0" + dayDate : dayDate) + '.' return (dayDate < 10 ? "0" + dayDate : dayDate) + '.'

View File

@ -1,7 +1,5 @@
body { body {
padding-left: 20px;
padding-top: 50px; padding-top: 50px;
} }
.tabs-container { .tabs-container {
@ -44,11 +42,8 @@ form {
min-width: 350px; min-width: 350px;
max-width: 450px; max-width: 450px;
float: left; float: left;
padding-right: 10px;
} }
#right { #right {
overflow: hidden; overflow: hidden;
padding-left: 4%;
} }