Skip to content

Commit

Permalink
feat: add mobile design
Browse files Browse the repository at this point in the history
  • Loading branch information
dpaniq committed Jan 26, 2025
1 parent 704eeb7 commit 5aa4bf0
Show file tree
Hide file tree
Showing 32 changed files with 625 additions and 203 deletions.
109 changes: 81 additions & 28 deletions src/app/app.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -55,48 +55,95 @@ dialog {
}
}

:host {
position: relative;
#battery,
#quality-resolution,
#timer {
position: absolute;
bottom: 70px;
right: 90px;
color: rgba(245, 245, 245, 0.5);
font-size: 30px;
font-weight: 700;
}

#quality-resolution {
right: unset;
left: 90px;
}

#battery {
top: 80px;
bottom: unset;
right: unset;
left: 110px;
writing-mode: vertical-lr;
text-orientation: sideways-right;
}

#rec {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;

position: absolute;
top: 70px;
right: 90px;

color: rgba(245, 245, 245, 0.5);
font-size: 40px;

animation: rec 3s infinite forwards step-end;
}

@media (max-width: 768px) {
app-header,
app-footer {
display: none;
}

main {
width: 90%;
height: 85vh;
overflow: hidden;
align-items: center;
}

#battery,
#quality,
#timer {
position: absolute;
bottom: 70px;
right: 90px;
bottom: 105px;
right: 25px;
color: rgba(245, 245, 245, 0.5);
font-size: 30px;
font-weight: 700;
font-size: 15px;
font-weight: 500;
z-index: 9999;
}

#quality {
#quality-resolution {
right: unset;
left: 90px;
left: 25px;
bottom: 105px;
font-size: 15px;
font-weight: 500;
color: rgba(245, 245, 245, 0.5);
}

#battery {
top: 80px;
bottom: unset;
right: unset;
left: 110px;
writing-mode: vertical-lr;
text-orientation: sideways-right;
top: 25px;
left: 25px;
}

#rec {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
top: 25px;
right: 25px;

position: absolute;
top: 70px;
right: 90px;
gap: 5px;

color: rgba(245, 245, 245, 0.5);
font-size: 40px;

animation: rec 3s infinite forwards step-end;
img.rec-dot {
width: 15px;
}
img.rec-text {
width: 25px;
}
}
}

Expand Down Expand Up @@ -128,3 +175,9 @@ dialog {
visibility: visible;
}
}

@media (min-width: 768px) {
app-nav-mobile {
display: none;
}
}
8 changes: 5 additions & 3 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,25 @@
<router-outlet />
</main>

<div id="quality">2160p</div>

<!-- Corners symbols -->
<app-camera-timer id="timer" />
<app-camera-battery id="battery" />

<app-camera-quality-resolution id="quality-resolution" />
<div id="rec">
<img
class="rec-dot"
width="35px"
src="assets/brand/dot.svg"
/>
<img
class="rec-text"
width="80px"
src="assets/brand/rec.svg"
/>
</div>

<app-footer />
<app-nav-mobile />

<dialog #dialog>
<video
Expand Down
7 changes: 7 additions & 0 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ import { VideoService } from './services/video.service';
import { I18nService } from './shared/i18n.service';
import { SafePipe } from './shared/pipes/safe.pipe';

import { PlatformModule } from '@angular/cdk/platform';
import { NavMobileComponent } from './core/nav-mobile/nav-mobile.component';
import { CameraQualityResolutionComponent } from './features/camera-quality-resolution/camera-quality-resolution.component';

@Component({
selector: 'app-root',
standalone: true,
Expand All @@ -37,11 +41,14 @@ import { SafePipe } from './shared/pipes/safe.pipe';
// Custom
HeaderComponent,
FooterComponent,
NavMobileComponent,

CameraTimerComponent,
CameraBatteryComponent,
CameraQualityResolutionComponent,

SafePipe,
PlatformModule,
],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
Expand Down
3 changes: 2 additions & 1 deletion src/app/core/footer/footer.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatIconModule } from '@angular/material/icon';
import { IconService } from '../../services/icon.service';
import { I18nService } from '../../shared/i18n.service';
import { NavMobileComponent } from '../nav-mobile/nav-mobile.component';
// import { HttpClient, HttpClientModule } from '@angular/common/http';

@Component({
selector: 'app-footer',
standalone: true,
imports: [MatIconModule, MatButtonToggleModule],
imports: [MatIconModule, MatButtonToggleModule, NavMobileComponent],
templateUrl: './footer.component.html',
styleUrl: './footer.component.css',
providers: [IconService],
Expand Down
45 changes: 4 additions & 41 deletions src/app/core/header/header.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,47 +6,10 @@ header {
top: 0;
padding: 35px 0 !important;
z-index: 9999;
}

nav {
position: relative;
top: 0;
text-align: center;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: var(--color_whitesmoke);

> ul {
display: inline-flex;
flex-wrap: wrap;
gap: 30px;
align-items: center;

li {
color: var(--color_whitesmoke_darken_2);

a {
font-weight: 700;
filter: blur(1px);
text-shadow: 1px 1px 0 rgb(0, 0, 0);
text-align: center;

&.active {
color: tomato;

/* border-bottom: 1px solid; */
filter: none;
border-bottom: 2px solid transparent;
/* border-image: linear-gradient(
0.25turn,
rgba(56, 2, 155, 0),
rgba(255, 99, 71, 0.7),
rgba(56, 2, 155, 0)
); */
/* border-image-slice: 1; */
}
}
}
}
@media (max-width: 768px) {
app-nav {
display: none;
}
}
45 changes: 1 addition & 44 deletions src/app/core/header/header.component.html
Original file line number Diff line number Diff line change
@@ -1,46 +1,3 @@
<header>
<nav>
<ul>
<li>
<a
class="page-header"
routerLink="/"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
ariaCurrentWhenActive="page"
>
{{ navigation.home[lang()] }}
</a>
</li>
<li>
<a
routerLink="/portfolio"
routerLinkActive="active"
ariaCurrentWhenActive="page"
>
{{ navigation.portfolio[lang()] }}
</a>
</li>

<li>
<a
routerLink="/info"
home
routerLinkActive="active"
ariaCurrentWhenActive="page"
>
{{ navigation.info[lang()] }}
</a>
</li>
<li>
<a
routerLink="/contacts"
routerLinkActive="active"
ariaCurrentWhenActive="page"
>
{{ navigation.contactMe[lang()] }}
</a>
</li>
</ul>
</nav>
<app-nav />
</header>
17 changes: 3 additions & 14 deletions src/app/core/header/header.component.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,11 @@
import { Component } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { RouterLink, RouterLinkActive } from '@angular/router';
import {
MatButtonToggleChange,
MatButtonToggleModule,
} from '@angular/material/button-toggle';
import { I18nService } from '../../shared/i18n.service';
import { NAVIGATION } from './constants';
import { NavComponent } from '../nav/nav.component';

@Component({
selector: 'app-header',
standalone: true,
imports: [MatIconModule, RouterLink, RouterLinkActive, MatButtonToggleModule],
imports: [NavComponent],
templateUrl: './header.component.html',
styleUrl: './header.component.css',
})
export class HeaderComponent {
readonly lang = this.i18nService.langSignal;
readonly navigation = NAVIGATION;
constructor(private i18nService: I18nService) {}
}
export class HeaderComponent {}
File renamed without changes.
55 changes: 55 additions & 0 deletions src/app/core/nav-mobile/nav-mobile.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
:host {
position: fixed;
bottom: 0;
left: 0;
right: 0;

display: flex;
align-items: center;

/* padding: 15px 0 !important; */

z-index: 9999;

width: 100%;
/* border-top: 1px solid var(--color_whitesmoke_darken_4); */
/* background-color: black; */
/* height: max-content; */

height: 80px; /* Задайте высоту панели */
z-index: 1000;
padding-bottom: env(safe-area-inset-bottom); /* Для учета вырезов экранов */
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Добавьте тень для визуального разделения */
}

nav {
width: 100%;
height: 100%;

font-size: 50px;

display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;

color: var(--color_whitesmoke);

a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;

&.active {
color: var(--color_black_9);
background-color: tomato;
}
}
}

.nav-mobile-icon {
width: 30px;
height: 30px;
font-size: 30px;
}
Loading

0 comments on commit 5aa4bf0

Please sign in to comment.