downloads section added, new icon, scrollbars fixed

This commit is contained in:
wagonsoftware 2022-10-28 17:28:06 +03:00
parent 7426dbd66b
commit 38089045ea
18 changed files with 122 additions and 45 deletions

4
.gitignore vendored
View File

@ -7,6 +7,8 @@ yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
.DS_Store
*.DS_Store
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
@ -132,4 +134,4 @@ dist
#angular
.angular/
/.DS_Store
.vscode/
.vscode/

View File

@ -39,3 +39,4 @@
.skirda-sign-out:before { content: '\e806'; } /* '' */
.skirda-favorite:before { content: '\e807'; } /* '' */
.skirda-library:before { content: '\e808'; } /* '' */
.skirda-download:before { content: '\e809'; } /* '' */

View File

@ -23,6 +23,8 @@
<glyph glyph-name="favorite" unicode="&#xe807;" d="M500 801c-45 0-82-33-106-80a38 38 0 0 1 0 0l-73-147a38 38 0 0 1 0 0c-3-6-26-23-32-24l-133-22c-50-8-92-34-106-76-13-42 6-88 42-124l104-103c5-6 13-33 11-41l-29-128c-7-28-9-55-4-79 4-24 16-46 36-61 40-29 92-18 143 12l125 74c7 4 37 4 44 0a38 38 0 0 1 0 0l125-74a38 38 0 0 1 0 0c25-15 50-25 74-28 24-3 49 2 69 16 20 14 32 37 36 61 5 24 3 50-4 79l-29 128c-2 8 6 35 11 41l104 103c36 36 56 82 42 124-14 42-56 68-106 76l-133 22c-7 1-29 18-32 24a38 38 0 0 1 0 0l-73 146c-24 48-61 81-106 81z m0-75c7 0 22-6 39-39a38 38 0 0 1 0 0l73-146c0 0 0 0 0-1l0 0c17-35 48-57 86-64l133-22c35-5 45-18 48-25 2-7 1-23-24-48a38 38 0 0 1 0 0l-104-103c-29-30-40-70-31-110a38 38 0 0 1 0-1l29-127c5-22 6-39 4-49-2-10-5-13-7-14-2-2-5-4-16-2-10 1-26 6-45 18h0l-125 73c-38 23-82 23-120 1a38 38 0 0 1 0-1l-125-73c-38-23-57-19-61-16-2 1-5 4-7 14-1 10-1 27 4 49l29 127a38 38 0 0 1 0 1c10 40-2 80-31 110l-104 103c-24 25-26 41-23 48 2 7 12 20 47 25l133 22a38 38 0 0 1 0 0c38 7 68 29 86 65l73 146v0c16 32 32 39 39 39z" horiz-adv-x="1000" />
<glyph glyph-name="library" unicode="&#xe808;" d="M609 804c-44 0-83-9-110-36-27-28-36-66-36-110v-62h-62c-44 0-83-9-110-36-28-28-37-67-37-111v-61h-61c-44 0-83-9-111-37-27-27-36-66-36-111v-197c0-45 9-83 36-111 28-27 67-36 111-36h197c45 0 84 9 111 36 28 27 37 66 37 111v61h61c44 0 83 9 111 37 27 27 36 66 36 110v62h61c44 0 83 9 111 36 27 27 36 66 36 111v198c0 44-9 83-36 110-28 27-67 36-111 36z m0-75h198c34 0 50-6 58-14 8-8 14-23 14-57v-198c0-35-6-50-14-58-8-8-24-14-58-14h-198c-34 0-49 6-57 14-8 8-14 23-14 58v98 100c0 34 6 49 14 57 8 8 23 14 57 14z m-208-208h62v-61c0-45 9-84 36-111 27-27 66-36 110-36h62v-62c0-34-7-50-15-57-7-8-23-15-57-15h-99-99c0 0 0 0 0 0-4 0-8 0-12 1 0 0 0 0 0 0-4 0-7 0-10 0 0 0 0 0 0 0-7 1-12 2-17 4 0 0 0 0 0 0-9 2-15 6-18 10-8 7-15 23-15 57v99 99c0 34 7 50 15 57 7 8 23 15 57 15z m-208-208h61v-62c0-16 2-32 5-47 1-7 3-14 5-21 1-3 2-5 3-7 6-13 13-25 23-35 0 0 1 0 1 0 1-2 3-4 5-5 0 0 0 0 0 0 2-2 3-3 5-5 0 0 0 0 0 0 2-1 4-3 6-4 0 0 0 0 0 0 2-1 4-2 6-4 0 0 0 0 0 0 2-1 4-2 6-3 0 0 0 0 0 0 3-1 5-2 7-3 0 0 0 0 0 0 2-1 4-2 7-2 0-1 0 0 0 0 2-1 4-2 6-3 0 0 0 0 1 0 2-1 4-1 7-2 0 0 0 0 0 0 2 0 4-1 7-1 0 0 0 0 0 0 5-1 10-2 15-3 0 0 0 0 0 0 5-1 10-1 16-1 0 0 0 0 0 0 5-1 10-1 16-1 0 0 0 0 0 0h62v-61c0-34-7-50-15-58-8-8-23-14-58-14h-197c-34 0-50 6-58 14-7 8-14 24-14 58v197c0 35 7 50 14 58 8 8 24 15 58 15z" horiz-adv-x="1000" />
<glyph glyph-name="download" unicode="&#xe809;" d="M500 804a38 38 0 0 1-37-37v-493l-76 75a38 38 0 0 1-27 11 38 38 0 0 1-26-11 38 38 0 0 1 0-53l139-139a38 38 0 0 1 54 0l139 139a38 38 0 0 1 0 53 38 38 0 0 1-53 0l-75-75v493a38 38 0 0 1-38 37z m188-287a38 38 0 0 1-40-35 38 38 0 0 1 34-40c69-6 110-25 136-57 26-33 41-85 41-165v-5c0-88-18-142-50-174-32-32-85-49-174-49h-271c-88 0-141 17-174 49-32 32-49 86-49 174v5c0 80 14 132 40 164 26 32 66 51 134 57a38 38 0 0 1 34 41 38 38 0 0 1-41 34c-80-7-144-34-185-85-42-52-57-122-57-211v-5c0-98 20-175 71-227 52-52 129-71 227-71h271c99 0 176 19 227 71 52 52 72 129 72 227v5c0 89-16 160-58 212-42 52-107 78-188 85z" horiz-adv-x="1000" />
</font>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

View File

@ -1,6 +1,5 @@
:host {
display: block;
border-radius: var(--sk-br-m);
overflow: hidden;
position: relative;
@ -12,6 +11,7 @@
opacity: 0.5;
transition: 0.1s ease;
cursor: pointer;
border-radius: var(--sk-br-m);
&:hover {
opacity: 1;

View File

@ -22,6 +22,10 @@
<skirda-icon name="friends"></skirda-icon>
<skirda-heading size="6">Friends</skirda-heading>
</skirda-section>
<skirda-section [routerLink]="['downloads']" routerLinkActive="active">
<skirda-icon name="download"></skirda-icon>
<skirda-heading size="6">Downloads</skirda-heading>
</skirda-section>
</div>
<app-menu-games></app-menu-games>
<app-menu-sessions></app-menu-sessions>

View File

@ -13,6 +13,7 @@
padding: 2rem 0.5rem 0.5rem 0.5rem;
box-sizing: border-box;
backdrop-filter: blur(64px);
overflow-y: auto;
gap: 1rem;
.sk-search-panel {

View File

@ -17,7 +17,6 @@
display: flex;
width: 100vw;
height: 100vh;
// background-image: url('https://images.unsplash.com/photo-1580234811497-9df7fd2f357e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2934&q=80');
background-size: cover;
}
@ -26,5 +25,6 @@
background-color: rgba(0,0,0,0.05);
display: flex;
backdrop-filter: blur(1rem);
overflow-y: auto;
}
}

View File

@ -3,8 +3,7 @@ import { CommonModule } from '@angular/common';
import { MainRootComponent } from './main-root/main-root.component';
import { MainMenuComponent } from './main-menu/main-menu.component';
import { UiModule } from 'projects/ui/src/lib/ui.module';
import { FormsModule,
ReactiveFormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MenuSessionsComponent } from './main-menu/menu-sessions/menu-sessions.component';
import { MenuGamesComponent } from './main-menu/menu-games/menu-games.component';
import { ServersPageComponent } from './sections/servers-page/servers-page.component';
@ -12,10 +11,11 @@ import { FriendsPageComponent } from './sections/friends-page/friends-page.compo
import { GamesPageComponent } from './sections/games-page/games-page.component';
import { SessionPageComponent } from './sections/session-page/session-page.component';
import { GamePageComponent } from './sections/game-page/game-page.component';
import { MainRoutingModule } from './routing.module'
import { ButtonModule } from 'projects/ui/src/lib/button/button.module'
import { TypographyModule } from 'projects/ui/src/lib/typography/typography.module'
import { IconModule } from 'projects/ui/src/lib/icon/icon.module'
import { MainRoutingModule } from './routing.module';
import { ButtonModule } from 'projects/ui/src/lib/button/button.module';
import { TypographyModule } from 'projects/ui/src/lib/typography/typography.module';
import { IconModule } from 'projects/ui/src/lib/icon/icon.module';
import { DownloadsPageComponent } from './sections/downloads-page/downloads-page.component';
@NgModule({
declarations: [
@ -27,7 +27,8 @@ import { IconModule } from 'projects/ui/src/lib/icon/icon.module'
FriendsPageComponent,
GamesPageComponent,
SessionPageComponent,
GamePageComponent
GamePageComponent,
DownloadsPageComponent,
],
imports: [
CommonModule,
@ -37,7 +38,7 @@ import { IconModule } from 'projects/ui/src/lib/icon/icon.module'
MainRoutingModule,
TypographyModule,
ButtonModule,
IconModule
IconModule,
],
exports: [
MainRootComponent,
@ -48,7 +49,8 @@ import { IconModule } from 'projects/ui/src/lib/icon/icon.module'
FriendsPageComponent,
GamesPageComponent,
SessionPageComponent,
GamePageComponent
]
GamePageComponent,
DownloadsPageComponent,
],
})
export class MainModule {}

View File

@ -1,35 +1,48 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'
import { MainRootComponent } from './main-root/main-root.component'
import { FriendsPageComponent } from './sections/friends-page/friends-page.component'
import { GamePageComponent } from './sections/game-page/game-page.component'
import { GamesPageComponent } from './sections/games-page/games-page.component'
import { ServersPageComponent } from './sections/servers-page/servers-page.component'
import { SessionPageComponent } from './sections/session-page/session-page.component'
import { RouterModule, Routes } from '@angular/router';
import { MainRootComponent } from './main-root/main-root.component';
import { DownloadsPageComponent } from './sections/downloads-page/downloads-page.component';
import { FriendsPageComponent } from './sections/friends-page/friends-page.component';
import { GamePageComponent } from './sections/game-page/game-page.component';
import { GamesPageComponent } from './sections/games-page/games-page.component';
import { ServersPageComponent } from './sections/servers-page/servers-page.component';
import { SessionPageComponent } from './sections/session-page/session-page.component';
const routes: Routes = [{
path: '',
component: MainRootComponent,
children: [{
path: 'servers',
component: ServersPageComponent
}, {
path: 'friends',
component: FriendsPageComponent
}, {
path: 'games',
component: GamesPageComponent
}, {
path: 'session/:id',
component: SessionPageComponent
}, {
path: 'game/:id',
component: GamePageComponent
}]
}]
const routes: Routes = [
{
path: '',
component: MainRootComponent,
children: [
{
path: 'servers',
component: ServersPageComponent,
},
{
path: 'friends',
component: FriendsPageComponent,
},
{
path: 'games',
component: GamesPageComponent,
},
{
path: 'downloads',
component: DownloadsPageComponent,
},
{
path: 'session/:id',
component: SessionPageComponent,
},
{
path: 'game/:id',
component: GamePageComponent,
},
],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
exports: [RouterModule],
})
export class MainRoutingModule { }
export class MainRoutingModule {}

View File

@ -0,0 +1,8 @@
<div class="section">
<div class="section-head">
<div class="head-title">
<skirda-heading size="1">Downloads</skirda-heading>
</div>
<div class="head-subtitle">Downloads page will be here</div>
</div>
</div>

View File

@ -0,0 +1,7 @@
@use '../global';
:host {
display: block;
@include global.page();
}

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DownloadsPageComponent } from './downloads-page.component';
describe('DownloadsPageComponent', () => {
let component: DownloadsPageComponent;
let fixture: ComponentFixture<DownloadsPageComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ DownloadsPageComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(DownloadsPageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-downloads-page',
templateUrl: './downloads-page.component.html',
styleUrls: ['./downloads-page.component.scss']
})
export class DownloadsPageComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

View File

@ -1,7 +1,6 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainRootComponent } from '../components/main/main-root/main-root.component';
import { MainRoutingModule } from '../components/main/routing.module'
import { MainRoutingModule } from '../components/main/routing.module';
import { PlaygroundComponent } from '../components/playground/playground.component';
import { SandboxComponent } from '../components/sandbox/sandbox.component';
import { SignInComponent } from '../components/sign-in/sign-in.component';
@ -13,7 +12,7 @@ const routes: Routes = [
},
{
path: '',
loadChildren: () => MainRoutingModule
loadChildren: () => MainRoutingModule,
},
{
path: 'sandbox',