kj
/
lms-app
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

more page UI

master
kj1352 vor 5 Jahren
Ursprung
3e15ecb1e4
Commit
ffaf5ae743
14 geänderte Dateien mit 630 neuen und 342 gelöschten Zeilen
Geteilte Ansicht
Diff-Optionen
Statistiken anzeigen Patch-Datei herunterladen Vergleichs-Datei herunterladen
  1. +0
    -2
      src/app/app-routing.module.ts
  2. +0
    -2
      src/app/app.module.ts
  3. +0
    -101
      src/app/profile/profile.component.html
  4. +0
    -182
      src/app/profile/profile.component.scss
  5. +0
    -25
      src/app/profile/profile.component.spec.ts
  6. +0
    -23
      src/app/profile/profile.component.ts
  7. +133
    -1
      src/app/tabs/more/more.component.html
  8. +258
    -0
      src/app/tabs/more/more.component.scss
  9. +8
    -6
      src/app/tabs/more/more.component.ts
  10. +1
    -0
      src/app/tabs/tabs.component.html
  11. +1
    -0
      src/assets/custom-icons/attendance-1.svg
  12. +99
    -0
      src/assets/custom-icons/class.svg
  13. +129
    -0
      src/assets/custom-icons/duel.svg
  14. +1
    -0
      src/assets/custom-icons/forum.svg

+ 0
- 2
src/app/app-routing.module.ts Datei anzeigen

@@ -6,7 +6,6 @@ import { DetailsComponent } from './tabs/courses/details/details.component';
import { VideoChapterComponent } from './tabs/courses/video-chapter/video-chapter.component';
import { NotesDetailsComponent } from './tabs/courses/notes-details/notes-details.component';
import { CalendarComponent } from './calendar/calendar.component';
import { ProfileComponent } from './profile/profile.component';
import { AttendanceComponent } from './tabs/more/attendance/attendance.component';

const routes: Routes = [
@@ -19,7 +18,6 @@ const routes: Routes = [
{ component: VideoChapterComponent, path: 'video-chapter/:heading' },
{ component: NotesDetailsComponent, path: 'notes-details/:heading' },
{ component: CalendarComponent, path: 'calendar' },
{ component: ProfileComponent, path: 'profile' },
{ component: AttendanceComponent, path: 'attendance'},
];



+ 0
- 2
src/app/app.module.ts Datei anzeigen

@@ -19,7 +19,6 @@ import { NotesDetailsComponent } from './tabs/courses/notes-details/notes-detail
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { CalendarComponent } from './calendar/calendar.component';
import { ProfileComponent } from './profile/profile.component';
import { AttendanceComponent } from './tabs/more/attendance/attendance.component';

@NgModule({
@@ -35,7 +34,6 @@ import { AttendanceComponent } from './tabs/more/attendance/attendance.component
VideoChapterComponent,
NotesDetailsComponent,
CalendarComponent,
ProfileComponent,
AttendanceComponent,
],
imports: [


+ 0
- 101
src/app/profile/profile.component.html Datei anzeigen

@@ -1,101 +0,0 @@
<div class="page">
<header class="nav-header">
<button (click)="back()">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</button>

<button class="settings-button" (click)="back()">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/settings.svg"></svg-icon>
</button>
</header>

<section class="upfold">
<div>
<figure>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
</figure>
<h5> Dwayne The Rock </h5>
<p> 3000 XP </p>
</div>
</section>

<section class="segment-buttons">
<button (click)="selectedSegment='badges'"
[ngClass]="{'active': selectedSegment === 'badges'}"> Badges </button>
<button (click)="selectedSegment='friends'"
[ngClass]="{'active': selectedSegment === 'friends'}"> Friends </button>
<button (click)="selectedSegment='scores'"
[ngClass]="{'active': selectedSegment === 'scores'}"> Scores </button>
</section>

<div class="segment-holder">
<ul class="badge-list" *ngIf="selectedSegment === 'badges'">
<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/star-medal.svg"></svg-icon>
<div class="content">
<label> You're a Star! </label>
<p> 2 Teachers starred your profile </p>
</div>
</li>

<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/number-1-medal.svg"></svg-icon>
<div class="content">
<label> You're a the One! </label>
<p> Topper of 5 Tests </p>
</div>
</li>

<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/star-medal.svg"></svg-icon>
<div class="content">
<label> You're a Star! </label>
<p> 2 Teachers starred your profile </p>
</div>
</li>

<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/number-1-medal.svg"></svg-icon>
<div class="content">
<label> You're a the One! </label>
<p> Topper of 5 Tests </p>
</div>
</li>
</ul>


<ul class="friend-list" *ngIf="selectedSegment === 'friends'">
<li>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<div class="content">
<label> Neil Hudson </label>
<p> 1000XP </p>
</div>
</li>

<li>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<div class="content">
<label> Katty Perry </label>
<p> 1XP </p>
</div>
</li>

<li>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<div class="content">
<label> Selena Gomez </label>
<p> 10XP </p>
</div>
</li>

<li>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<div class="content">
<label> Matt Le Blanc </label>
<p> -19XP </p>
</div>
</li>
</ul>
</div>
</div>

+ 0
- 182
src/app/profile/profile.component.scss Datei anzeigen

@@ -1,182 +0,0 @@
.page {
height: 100vh;
overflow: auto;
background-color: var(--ash-black);
}


.nav-header {
background-color: var(--ash-black);
display: flex;
align-items: center;
padding: 0 5%;
height: 60px;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 1;

button {
border: 0px;
background-color: transparent;
.icon {
width: 16px;
height: 16px;
fill: var(--light-grey);
}

&.settings-button {
margin-left: auto;

.icon {
width: 20px;
height: 20px;
}
}
}
}

.upfold {
padding: 0 0 20px;
width: 100%;
text-align: center;

figure {
width: 100px;
height: 100px;
margin: 0 auto 10px;
border-radius: 50%;
overflow: hidden;
border: 5px solid var(--dark-grey);
display: block;

img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
}
}

h5 {
font-weight: 500;
font-size: 16px;
color: white;
}

p {
font-size: 14px;
color: var(--light-grey);
}
}

.segment-buttons {
display: flex;
align-items: stretch;
height: 35px;
border-radius: 7px;
overflow: hidden;
width: 90%;
margin: 0 auto 20px;
background-color: var(--dark-grey);

button {
flex-grow: 1;
border-radius: 7px;
background-color: transparent;
color: white;
font-size: 13px;
border: 0px;

&.active {
background-color: white;
color: var(--teal);
font-weight: 500;
}
}
}


.badge-list {
list-style: none;
width: 90%;
margin: 0 auto;
background-color: white;
border-radius: 10px;
padding: 0px 10px;

li {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 15px 10px;
border-bottom: 1px solid #f3f3f3;
}

.icon {
width: 40px;
height: 40px;
}

.content {
width: calc(100% - 60px);
}

label {
display: block;
font-size: 16px;
color: var(--ash-black);
font-weight: 500;
}

p {
font-size: 14px;
color: var(--light-grey);
}
}


.friend-list {
list-style: none;
width: 90%;
margin: 0 auto;
background-color: white;
border-radius: 10px;
padding: 0px 10px;

li {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 15px 10px;
border-bottom: 1px solid #f3f3f3;
}

img {
width: 50px;
height: 50px;
border-radius: 50px;
overflow: hidden;
object-fit: cover;
object-position: top;
}

.content {
width: calc(100% - 70px);
}

label {
display: block;
font-size: 16px;
color: var(--ash-black);
font-weight: 500;
}

p {
font-size: 14px;
color: var(--light-grey);
}
}

+ 0
- 25
src/app/profile/profile.component.spec.ts Datei anzeigen

@@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ProfileComponent } from './profile.component';

describe('ProfileComponent', () => {
let component: ProfileComponent;
let fixture: ComponentFixture<ProfileComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProfileComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(ProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

+ 0
- 23
src/app/profile/profile.component.ts Datei anzeigen

@@ -1,23 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {
selectedSegment: string = 'badges';

constructor(
private location: Location
) { }

ngOnInit(): void {
}

back() {
this.location.back();
}

}

+ 133
- 1
src/app/tabs/more/more.component.html Datei anzeigen

@@ -1 +1,133 @@
<p>more works!</p>
<div class="page-container">

<header class="nav-header">
<button class="settings-button">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/settings.svg"></svg-icon>
</button>
</header>

<section class="upfold">
<div>
<figure>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
</figure>
<h5> Dwayne The Rock </h5>
<p> 3000 XP </p>
</div>
</section>

<button class="profile-details-button" (click)="profileDetails = !profileDetails"
[ngClass]="{'active' : profileDetails}"> Profile Details
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
</button>


<section *ngIf="!profileDetails">
<ul class="more-page-list">
<li [routerLink]="['/attendance']">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/attendance-1.svg"></svg-icon>
<h4> Attendance </h4>
</li>

<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/class.svg"></svg-icon>
<h4> My Class </h4>
</li>

<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/duel.svg"></svg-icon>
<h4> Duel </h4>
</li>

<li [routerLink]="['/forum']">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/forum.svg"></svg-icon>
<h4> Forum </h4>
</li>
</ul>

<button class="logout-button"> Logout </button>
</section>

<section *ngIf="profileDetails">
<section class="segment-buttons">
<button (click)="selectedSegment='badges'"
[ngClass]="{'active': selectedSegment === 'badges'}"> Badges </button>
<button (click)="selectedSegment='friends'"
[ngClass]="{'active': selectedSegment === 'friends'}"> Friends </button>
<button (click)="selectedSegment='scores'"
[ngClass]="{'active': selectedSegment === 'scores'}"> Scores </button>
</section>

<div class="segment-holder">
<ul class="badge-list" *ngIf="selectedSegment === 'badges'">
<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/star-medal.svg"></svg-icon>
<div class="content">
<label> You're a Star! </label>
<p> 2 Teachers starred your profile </p>
</div>
</li>

<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/number-1-medal.svg"></svg-icon>
<div class="content">
<label> You're a the One! </label>
<p> Topper of 5 Tests </p>
</div>
</li>

<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/star-medal.svg"></svg-icon>
<div class="content">
<label> You're a Star! </label>
<p> 2 Teachers starred your profile </p>
</div>
</li>

<li>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/number-1-medal.svg"></svg-icon>
<div class="content">
<label> You're a the One! </label>
<p> Topper of 5 Tests </p>
</div>
</li>
</ul>


<ul class="friend-list" *ngIf="selectedSegment === 'friends'">
<li>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<div class="content">
<label> Neil Hudson </label>
<p> 1000XP </p>
</div>
</li>

<li>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<div class="content">
<label> Katty Perry </label>
<p> 1XP </p>
</div>
</li>

<li>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<div class="content">
<label> Selena Gomez </label>
<p> 10XP </p>
</div>
</li>

<li>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<div class="content">
<label> Matt Le Blanc </label>
<p> -19XP </p>
</div>
</li>
</ul>
</div>
</section>

</div>

+ 258
- 0
src/app/tabs/more/more.component.scss Datei anzeigen

@@ -0,0 +1,258 @@
.page-container {
position: relative;
}

.nav-header {
display: flex;
align-items: center;
padding: 0 5%;
height: 60px;
position: absolute;
top: 0;
z-index: 1;
width: 100%;

button {
border: 0px;
background-color: transparent;
.icon {
width: 16px;
height: 16px;
fill: var(--light-grey);
}

&.settings-button {
margin-left: auto;

.icon {
width: 20px;
height: 20px;
}
}
}
}

.upfold {
width: 100%;
text-align: center;
height: 30vh;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--black);

figure {
width: 100px;
height: 100px;
margin: 0 auto 10px;
border-radius: 50%;
overflow: hidden;
border: 5px solid var(--dark-grey);
display: block;

img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
}
}

h5 {
font-weight: 500;
font-size: 16px;
color: white;
}

p {
font-size: 14px;
color: var(--light-grey);
}
}

.profile-details-button {
width: 100%;
margin: 0 auto;
background-color: var(--dark-grey);
border: 0px;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
font-size: 15px;
height: 50px;
border-radius: 0px;
padding: 0 5%;

&.active .icon {
transform: rotate(0deg);
}

.icon {
fill: white;
width: 15px;
height: 15px;
transform: rotate(90deg);
}
}

.segment-buttons {
display: flex;
align-items: stretch;
height: 35px;
border-radius: 7px;
overflow: hidden;
width: 90%;
margin: 20px auto;
background-color: var(--dark-grey);
padding: 1px;

button {
flex-grow: 1;
border-radius: 7px;
background-color: transparent;
color: white;
font-size: 13px;
border: 0px;

&.active {
background-color: white;
color: var(--teal);
font-weight: 500;
}
}
}

.more-page-list {
display: flex;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 20px auto;
list-style: none;

li {
text-align: center;
width: 30%;
background-color: white;
border-radius: 10px;
box-shadow: 1px 1px 5px var(--light-grey);
margin-bottom: 20px;
padding: 15px 15px 10px;

.icon {
width: 40px;
height: 40px;
display: block;
margin: 0 auto;
}

h4 {
font-weight: 500;
color: var(--dark-grey);
font-size: 13px;
margin-top: 5px;
}
}
}

.logout-button {
display: block;
width: 90%;
margin: 0 auto 20px;
background-color: var(--danger);
color: white;
border: 0px;
border-radius: 5px;
height: 50px;
font-size: 16px;
}

.badge-list {
list-style: none;
width: 90%;
margin: 0 auto;
border-radius: 10px;
padding: 0px 10px;

li {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 15px 10px;
background-color: white;
box-shadow: 1px 1px 5px var(--light-grey);
border-radius: 15px;
margin-bottom: 15px;
}

.icon {
width: 40px;
height: 40px;
}

.content {
width: calc(100% - 60px);
}

label {
display: block;
font-size: 16px;
color: var(--ash-black);
font-weight: 500;
}

p {
font-size: 14px;
color: var(--light-grey);
}
}


.friend-list {
list-style: none;
width: 90%;
margin: 0 auto;
border-radius: 10px;
padding: 0px 10px;

li {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 15px 10px;
background-color: white;
box-shadow: 1px 1px 5px var(--light-grey);
border-radius: 15px;
margin-bottom: 15px;
}

img {
width: 50px;
height: 50px;
border-radius: 50px;
overflow: hidden;
object-fit: cover;
object-position: top;
}

.content {
width: calc(100% - 70px);
}

label {
display: block;
font-size: 16px;
color: var(--ash-black);
font-weight: 500;
}

p {
font-size: 14px;
color: var(--light-grey);
}
}

+ 8
- 6
src/app/tabs/more/more.component.ts Datei anzeigen

@@ -1,15 +1,17 @@
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-more',
templateUrl: './more.component.html',
styleUrls: ['./more.component.scss']
selector: 'app-more',
templateUrl: './more.component.html',
styleUrls: ['./more.component.scss']
})
export class MoreComponent implements OnInit {
selectedSegment: string = 'badges';
profileDetails: boolean = false;

constructor() { }
constructor() { }

ngOnInit(): void {
}
ngOnInit(): void {
}

}

+ 1
- 0
src/app/tabs/tabs.component.html Datei anzeigen

@@ -1,6 +1,7 @@
<div class="page">
<app-home *ngIf="selectedTab === 'home'"></app-home>
<app-courses *ngIf="selectedTab === 'courses'"></app-courses>
<app-more *ngIf="selectedTab === 'more'"></app-more>
</div>

<section class="tabs">


+ 1
- 0
src/assets/custom-icons/attendance-1.svg
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 99
- 0
src/assets/custom-icons/class.svg Datei anzeigen

@@ -0,0 +1,99 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#A45E43;" points="167,349.75 107,349.75 43.5,289.75 167,289.75 "/>
<rect x="22.5" y="289.75" style="fill:#C27749;" width="84.5" height="60"/>
<polygon style="fill:#E18F4E;" points="107,274.75 77,289.75 107,304.75 157,304.75 157,274.75 "/>
<rect x="7.5" y="274.75" style="fill:#FFA754;" width="99.5" height="30"/>
<path style="fill:#2DADE3;" d="M182,274.75v75c24.853,0,45-20.147,45-45L182,274.75z"/>
<path style="fill:#49C9FF;" d="M197,304.75v-30l-60,30v45l22.5,15l22.5-15C190.284,349.75,197,329.603,197,304.75z"/>
<polygon style="fill:#A45E43;" points="213.5,349.75 193.5,364.75 213.5,379.75 243.5,379.75 243.5,349.75 "/>
<rect x="137" y="349.75" style="fill:#C27749;" width="76.5" height="30"/>
<path style="fill:#FF4128;" d="M207,209.75h-30l20,95h30v-75C227,218.704,218.046,209.75,207,209.75z"/>
<path style="fill:#FF6337;" d="M177,209.75h-20c-11.046,0-20,8.954-20,20v75h60v-75C197,218.704,188.046,209.75,177,209.75z"/>
<polygon style="fill:#A45E43;" points="428,349.75 368,349.75 304.5,289.75 428,289.75 "/>
<rect x="283.5" y="289.75" style="fill:#C27749;" width="84.5" height="60"/>
<polygon style="fill:#E18F4E;" points="368,274.75 338,289.75 368,304.75 418,304.75 418,274.75 "/>
<rect x="268.5" y="274.75" style="fill:#FFA754;" width="99.5" height="30"/>
<path style="fill:#869E47;" d="M443,274.75v75c24.853,0,45-20.147,45-45L443,274.75z"/>
<path style="fill:#9DB55F;" d="M458,304.75v-30l-60,30v45l22.5,15l22.5-15C451.284,349.75,458,329.603,458,304.75z"/>
<polygon style="fill:#A45E43;" points="474.5,349.75 454.5,364.75 474.5,379.75 504.5,379.75 504.5,349.75 "/>
<rect x="398" y="349.75" style="fill:#C27749;" width="76.5" height="30"/>
<path style="fill:#FFB4A9;" d="M468,209.75h-30l20,95h30v-75C488,218.704,479.046,209.75,468,209.75z"/>
<path style="fill:#FFD9D4;" d="M438,209.75h-20c-11.046,0-20,8.954-20,20v75h60v-75C458,218.704,449.046,209.75,438,209.75z"/>
<path style="fill:#85453D;" d="M443,89.75v90c24.853,0,45-20.147,45-45S467.853,89.75,443,89.75z"/>
<path style="fill:#A45E43;" d="M458,134.75c0-24.853-6.716-45-15-45c-24.853,0-45,20.147-45,45s20.147,45,45,45
C451.284,179.75,458,159.603,458,134.75z"/>
<path style="fill:#40211D;" d="M458.793,54.75c-2.811-5.907-8.816-10-15.793-10s-12.982,4.093-15.793,10
c-9.665,0-17.5,7.835-17.5,17.5s7.835,17.5,17.5,17.5h31.586c9.665,0,17.5-7.835,17.5-17.5S468.458,54.75,458.793,54.75z"/>
<path style="fill:#FFB4A9;" d="M216.255,105.585c0.01-0.01-34.255-0.005-34.255-0.005v74.17c24.85,0,45-20.15,45-45
C227,123.63,222.955,113.435,216.255,105.585z"/>
<path style="fill:#FFD9D4;" d="M195.89,117.76l-48.145-12.175c-6.7,7.85-10.745,18.045-10.745,29.165c0,24.85,20.15,45,45,45
c8.28,0,15-20.15,15-45C197,128.74,196.61,123,195.89,117.76z"/>
<path style="fill:#A45E43;" d="M182,89.75l13.89,28.01c7.45-2.23,14.475-6.295,20.365-12.175C208.005,95.895,195.72,89.75,182,89.75
z"/>
<path style="fill:#C27749;" d="M182,89.75c-13.72,0-26.005,6.145-34.255,15.835c13.04,13.04,31.645,17.105,48.145,12.175
C193.66,101.33,188.28,89.75,182,89.75z"/>
<path d="M243.5,342.25h-24.808c9.745-9.537,15.808-22.821,15.808-37.5v-75c0-15.163-12.336-27.5-27.5-27.5h-50
c-12.456,0-22.997,8.327-26.368,19.704C93.629,218.716,64.5,187.58,64.5,149.75c0-4.143-3.358-7.5-7.5-7.5s-7.5,3.357-7.5,7.5
c0,45.721,35.251,83.358,80,87.175v30.325H7.5c-1.989,0-3.897,0.79-5.303,2.196C0.79,270.854,0,272.761,0,274.75v30
c0,4.143,3.358,7.5,7.5,7.5H15v155c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5v-110h99.5v110c0,4.143,3.358,7.5,7.5,7.5
s7.5-3.357,7.5-7.5v-80H236v80c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5v-117.5C251,345.607,247.642,342.25,243.5,342.25z
M129.5,342.25H30v-30h99.5V342.25z M129.5,297.25H15v-15h114.5V297.25z M144.5,229.75c0-6.893,5.607-12.5,12.5-12.5h50
c6.893,0,12.5,5.607,12.5,12.5v67.5h-75V229.75z M144.5,312.25h74.245c-3.484,17.096-18.635,30-36.745,30h-37.5V312.25z M236,372.25
h-91.5v-15H236V372.25z"/>
<path d="M97,372.25c-4.142,0-7.5,3.357-7.5,7.5v80h-21c-4.142,0-7.5,3.357-7.5,7.5s3.358,7.5,7.5,7.5H97c4.142,0,7.5-3.357,7.5-7.5
v-87.5C104.5,375.607,101.142,372.25,97,372.25z"/>
<path d="M504.5,342.25h-24.808c9.745-9.537,15.808-22.821,15.808-37.5v-75c0-15.163-12.336-27.5-27.5-27.5h-50
c-12.456,0-22.997,8.327-26.368,19.704c-37.004-3.237-66.132-34.374-66.132-72.204c0-4.143-3.358-7.5-7.5-7.5s-7.5,3.357-7.5,7.5
c0,45.721,35.251,83.358,80,87.175v30.325h-122c-1.989,0-3.897,0.79-5.303,2.196c-1.407,1.407-2.197,3.314-2.197,5.304v30
c0,4.143,3.358,7.5,7.5,7.5h7.5v155c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5v-110h99.5v110c0,4.143,3.358,7.5,7.5,7.5
s7.5-3.357,7.5-7.5v-80H497v80c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5v-117.5C512,345.607,508.642,342.25,504.5,342.25z
M390.5,342.25H291v-30h99.5V342.25z M390.5,297.25H276v-15h114.5V297.25z M405.5,229.75c0-6.893,5.607-12.5,12.5-12.5h50
c6.893,0,12.5,5.607,12.5,12.5v67.5h-75V229.75z M405.5,312.25h74.245c-3.484,17.096-18.635,30-36.745,30h-37.5V312.25z M497,372.25
h-91.5v-15H497V372.25z"/>
<path d="M358,372.25c-4.142,0-7.5,3.357-7.5,7.5v80h-21c-4.142,0-7.5,3.357-7.5,7.5s3.358,7.5,7.5,7.5H358
c4.142,0,7.5-3.357,7.5-7.5v-87.5C365.5,375.607,362.142,372.25,358,372.25z"/>
<path d="M390.5,134.75c0,28.948,23.551,52.5,52.5,52.5s52.5-23.552,52.5-52.5c0-17.46-8.576-32.947-21.728-42.497
c6.08-4.565,10.021-11.832,10.021-20.003c0-12.258-8.869-22.483-20.526-24.599C458.618,41.222,451.065,37.25,443,37.25
s-15.618,3.971-20.267,10.401c-11.657,2.114-20.526,12.341-20.526,24.599c0,8.171,3.941,15.438,10.021,20.003
C399.075,101.803,390.5,117.29,390.5,134.75z M427.207,62.25c2.894,0,5.529-1.664,6.772-4.277c1.68-3.53,5.136-5.723,9.021-5.723
s7.341,2.192,9.021,5.723c1.243,2.612,3.879,4.277,6.772,4.277c5.514,0,10,4.486,10,10s-4.486,10-10,10h-31.586
c-5.514,0-10-4.486-10-10S421.692,62.25,427.207,62.25z M443,97.25c20.678,0,37.5,16.822,37.5,37.5s-16.822,37.5-37.5,37.5
s-37.5-16.822-37.5-37.5S422.322,97.25,443,97.25z"/>
<path d="M182,187.25c28.949,0,52.5-23.552,52.5-52.5s-23.551-52.5-52.5-52.5s-52.5,23.552-52.5,52.5S153.051,187.25,182,187.25z
M182,97.25c8.674,0,16.662,2.968,23.022,7.931c-13.839,9.419-32.206,9.419-46.045,0C165.338,100.218,173.326,97.25,182,97.25z
M149.18,116.634c9.75,7.072,21.284,10.615,32.82,10.615s23.07-3.543,32.82-10.615c2.978,5.374,4.68,11.549,4.68,18.116
c0,20.678-16.822,37.5-37.5,37.5s-37.5-16.822-37.5-37.5C144.5,128.183,146.202,122.008,149.18,116.634z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 129
- 0
src/assets/custom-icons/duel.svg Datei anzeigen

@@ -0,0 +1,129 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
<polygon style="fill:#C6C5CA;" points="500.672,11.333 447.257,11.333 174.53,284.06 227.945,337.474 500.672,64.747 "/>
<polygon style="fill:#898890;" points="202.012,284.06 474.738,11.333 447.257,11.333 174.53,284.06 227.945,337.474
241.686,323.733 "/>
<g>

<rect x="91.616" y="305.245" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 91.6093 686.1531)" style="fill:#FFE477;" width="192.592" height="37.716"/>

<rect x="7.635" y="445.162" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -233.6352 820.8486)" style="fill:#FFE477;" width="91.101" height="27.3"/>
</g>
<g>

<rect x="87.509" y="314.294" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -75.4512 755.3367)" style="fill:#FFB655;" width="62.401" height="158.002"/>
<polygon style="fill:#FFB655;" points="134.5,269.346 147.158,256.687 133.148,242.676 106.477,269.346 242.659,405.528
256.67,391.517 "/>
<polygon style="fill:#FFB655;" points="30.48,436.258 40.206,426.531 30.631,416.956 11.328,436.258 75.746,500.676
85.323,491.101 "/>
</g>
<polygon style="fill:#FF7956;" points="59.927,427.101 162.08,324.949 152.505,315.373 40.777,427.101 84.903,471.228
94.478,461.653 "/>
<rect x="413.267" y="445.161" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -190.0439 458.8152)" style="fill:#FFE477;" width="91.101" height="27.3"/>
<rect x="362.107" y="314.306" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -162.9129 393.3069)" style="fill:#FFB655;" width="62.401" height="158.002"/>
<polygon style="fill:#FFE477;" points="378.853,242.676 256,365.528 269.329,378.857 256,392.186 269.341,405.527 405.523,269.345
"/>
<polygon style="fill:#FFB655;" points="435.543,481.374 490.666,426.251 481.369,416.956 416.951,481.374 436.254,500.676
445.549,491.381 "/>
<polygon style="fill:#FF7956;" points="338.294,359.5 370.957,326.835 359.495,315.373 315.369,359.5 427.097,471.228
438.56,459.766 "/>
<polygon style="fill:#FFB655;" points="294.132,380.736 278.924,365.528 390.315,254.138 378.853,242.676 256,365.528
269.329,378.857 256,392.186 269.341,405.528 "/>
<g>
<polygon style="fill:#C6C5CA;" points="256,202.59 64.743,11.333 11.329,11.333 11.329,64.747 202.586,256.004 "/>

<rect x="276.9" y="258.981" transform="matrix(0.7071 0.7071 -0.7071 0.7071 296.7471 -122.9088)" style="fill:#C6C5CA;" width="39.675" height="75.541"/>
</g>
<g>
<polygon style="fill:#898890;" points="40.207,64.747 40.207,11.333 11.328,11.333 11.328,64.747 202.586,256.004 217.025,241.566
"/>
<polygon style="fill:#898890;" points="284.879,309.419 323.853,270.443 309.414,256.004 256,309.419 284.056,337.474
298.494,323.034 "/>
</g>
<polygon style="fill:#FFFFFF;" points="195.908,11.333 195.908,90.111 237.688,90.111 254.456,106.879 271.224,90.111
313.003,90.111 313.003,11.333 "/>
<rect x="195.914" y="11.333" style="fill:#D8D7DA;" width="18.474" height="78.782"/>
<g>

<rect x="447.331" y="48.112" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 737.1222 416.5504)" style="fill:#FFFFFF;" width="15" height="15"/>

<rect x="429.649" y="65.792" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 694.4345 434.2278)" style="fill:#FFFFFF;" width="15" height="15"/>

<rect x="371.934" y="66.877" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 555.1086 491.9195)" style="fill:#FFFFFF;" width="15" height="128.231"/>

<rect x="147.406" y="145.838" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 156.0146 371.3003)" style="fill:#FFFFFF;" width="15" height="15"/>

<rect x="165.086" y="163.524" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 173.6913 413.9931)" style="fill:#FFFFFF;" width="15" height="15"/>

<rect x="33.077" y="88.141" transform="matrix(0.7071 0.7071 -0.7071 0.7071 96.0957 -40.7127)" style="fill:#FFFFFF;" width="128.231" height="15"/>
</g>
<g>

<rect x="162.587" y="297.612" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 506.1037 400.5885)" style="fill:#1D1D1F;" width="15" height="15"/>

<rect x="197.885" y="333.033" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -180.5751 244.943)" style="fill:#1D1D1F;" width="15" height="14.823"/>

<rect x="180.261" y="315.292" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 548.7759 418.2737)" style="fill:#1D1D1F;" width="15" height="15"/>

<rect x="315.007" y="316.653" transform="matrix(0.7071 0.7071 -0.7071 0.7071 323.6711 -133.1047)" style="fill:#1D1D1F;" width="15" height="15"/>

<rect x="332.632" y="298.97" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 363.9342 763.6865)" style="fill:#1D1D1F;" width="15" height="15"/>

<rect x="297.389" y="334.358" transform="matrix(0.7071 0.7071 -0.7071 0.7071 330.9676 -115.4871)" style="fill:#1D1D1F;" width="15" height="14.823"/>
<path style="fill:#1D1D1F;" d="M482.033,405.265l-10.175,10.175L370.407,313.99l46.163-46.163l-37.355-37.355l-41.506,41.506
l-8.78-8.781l-10.607,10.606l8.781,8.781l-16.179,16.179l-17.531-17.53L508.894,65.731V1.553h-64.179l-215.5,215.5l-19.722-19.721
l-10.607,10.606l19.722,19.722l-44.317,44.317l-41.506-41.506L95.43,267.826l46.163,46.163L40.142,415.441l-10.175-10.175L0,435.23
l75.215,75.214l29.966-29.966l-10.176-10.176l101.451-101.451l46.163,46.163l37.356-37.355l-41.506-41.506l44.317-44.317
l17.53,17.53l-16.18,16.179l-8.78-8.781l-10.607,10.606l8.781,8.781l-8.781,8.781l10.607,10.606l103.858-103.858l16.142,16.142
l-103.858,103.86l10.607,10.606l13.438-13.438l101.451,101.451l-10.176,10.176l29.966,29.966l75.215-75.214L482.033,405.265z
M450.928,16.553h42.966v42.965l-266.031,266.03l-16.179-16.179l101.432-101.432l-10.607-10.606L201.076,298.762l-16.179-16.178
L450.928,16.553z M87.698,389.098l8.472-8.472l33.65,33.65l-8.473,8.473L87.698,389.098z M110.74,433.355l-8.472,8.472
l-33.65-33.651l8.472-8.472L110.74,433.355z M106.777,370.018l8.472-8.472l33.65,33.65l-8.472,8.472L106.777,370.018z
M125.856,350.939l8.472-8.472l33.65,33.65l-8.472,8.472L125.856,350.939z M21.213,435.23l8.752-8.751l54.001,54.001l-8.752,8.752
L21.213,435.23z M50.749,426.047l7.263-7.263l33.65,33.651l-7.262,7.262L50.749,426.047z M178.586,365.509l-33.65-33.65
l7.262-7.262l16.825,16.824l16.825,16.825L178.586,365.509z M242.619,393.803l-35.557-35.557l0,0l-27.432-27.432l-62.988-62.988
l16.142-16.142l30.899,30.899l0,0l32.09,32.09l62.988,62.988L242.619,393.803z M396.751,361.546l8.472,8.472l-33.65,33.65
l-8.472-8.472L396.751,361.546z M352.493,384.589l-8.472-8.472l33.65-33.65l8.472,8.472L352.493,384.589z M415.83,380.625
l8.472,8.472l-33.65,33.651l-8.473-8.473L415.83,380.625z M434.91,399.705l8.472,8.472l-33.65,33.651l-8.472-8.472L434.91,399.705z
M359.801,324.596l7.262,7.262l-33.65,33.65l-7.263-7.263L359.801,324.596z M420.339,452.435l33.65-33.651l7.263,7.263
l-33.65,33.65L420.339,452.435z M428.032,480.48l54.001-54.001l8.752,8.751l-54.002,54.001L428.032,480.48z"/>
<path style="fill:#1D1D1F;" d="M254.451,115.487l19.924-19.924h46.296V1.553h-132.44v94.011h46.296L254.451,115.487z
M203.232,16.553h102.44v64.01h-37.509l-13.711,13.711l-13.711-13.711h-37.509L203.232,16.553L203.232,16.553z"/>
<polygon style="fill:#1D1D1F;" points="280.831,35.012 268.116,27.054 254.448,48.894 240.779,27.054 228.064,35.012
254.448,77.168 "/>
<polygon style="fill:#1D1D1F;" points="193.679,235.089 18.107,59.518 18.107,16.553 61.072,16.553 236.643,192.124
247.25,181.518 67.285,1.553 3.107,1.553 3.107,65.731 183.071,245.696 "/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 1
- 0
src/assets/custom-icons/forum.svg Datei anzeigen

@@ -0,0 +1 @@
<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><path d="m502 106v60c0 16.57-13.43 30-30 30h-30v30l-60-30h-96l-30 30-30-30h-90l-60 30v-30h-36c-16.57 0-30-13.43-30-30v-60c0-16.57 13.43-30 30-30h432c16.57 0 30 13.43 30 30z" fill="#ffd88e"/><path d="m502 427v9h-120v-9c0-33.14 26.86-60 60-60 33.138 0 60 26.859 60 60z" fill="#ff7b79"/><circle cx="442" cy="317" fill="#fce8d0" r="30"/><path d="m316 427v9h-120v-9c0-33.14 26.86-60 60-60 33.138 0 60 26.859 60 60z" fill="#ff7b79"/><circle cx="256" cy="317" fill="#fce8d0" r="30"/><path d="m130 427v9h-120v-9c0-33.14 26.86-60 60-60 33.138 0 60 26.859 60 60z" fill="#ff7b79"/><circle cx="70" cy="317" fill="#fce8d0" r="30"/></g><g><circle cx="316" cy="136" r="10"/><circle cx="256" cy="136" r="10"/><circle cx="196" cy="136" r="10"/><path d="m296 317c0-22.056-17.944-40-40-40s-40 17.944-40 40 17.944 40 40 40 40-17.944 40-40zm-40 20c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z"/><path d="m186 427v9c0 5.522 4.478 10 10 10h120c5.522 0 10-4.478 10-10v-9c0-38.598-31.402-70-70-70s-70 31.402-70 70zm70-50c27.235 0 49.454 21.891 49.99 49h-99.98c.536-27.109 22.755-49 49.99-49z"/><path d="m110 317c0-22.056-17.944-40-40-40s-40 17.944-40 40 17.944 40 40 40 40-17.944 40-40zm-40 20c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z"/><path d="m10 446h120c5.522 0 10-4.478 10-10v-9c0-38.598-31.402-70-70-70s-70 31.402-70 70v9c0 5.522 4.478 10 10 10zm60-69c27.235 0 49.454 21.891 49.99 49h-99.98c.536-27.109 22.755-49 49.99-49z"/><path d="m482 317c0-22.056-17.944-40-40-40s-40 17.944-40 40 17.944 40 40 40 40-17.944 40-40zm-40 20c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z"/><path d="m442 357c-38.598 0-70 31.402-70 70v9c0 5.522 4.478 10 10 10h120c5.522 0 10-4.478 10-10v-9c0-38.598-31.402-70-70-70zm-49.99 69c.536-27.109 22.755-49 49.99-49s49.454 21.891 49.99 49z"/><path d="m472 66h-171c-5.522 0-10 4.478-10 10s4.478 10 10 10h171c11.028 0 20 8.972 20 20v60c0 11.028-8.972 20-20 20h-30c-5.522 0-10 4.478-10 10v13.819l-45.528-22.764c-1.388-.694-2.919-1.055-4.472-1.055h-96c-2.652 0-5.195 1.054-7.071 2.929l-22.929 22.928-22.929-22.929c-1.876-1.874-4.419-2.928-7.071-2.928h-90c-1.553 0-3.084.361-4.472 1.056l-45.528 22.763v-13.819c0-5.522-4.478-10-10-10h-36c-11.028 0-20-8.972-20-20v-60c0-11.028 8.972-20 20-20h171c5.522 0 10-4.478 10-10s-4.478-10-10-10h-171c-22.056 0-40 17.944-40 40v60c0 22.056 17.944 40 40 40h26v20c0 3.466 1.795 6.685 4.743 8.507 2.948 1.821 6.629 1.986 9.729.438l57.888-28.945h83.497l27.071 27.071c3.906 3.904 10.236 3.904 14.143 0l27.072-27.071h89.497l57.889 28.944c3.092 1.547 6.776 1.387 9.729-.438 2.948-1.822 4.743-5.041 4.743-8.507v-20h20c22.056 0 40-17.944 40-40v-60c-.001-22.055-17.945-39.999-40.001-39.999z"/><circle cx="256" cy="76" r="10"/></g></g></svg>