Skip to content

Commit

Permalink
Merge pull request #37 from grammerjam/style-app
Browse files Browse the repository at this point in the history
Style app
  • Loading branch information
AlexVCS authored Dec 18, 2024
2 parents 8870d05 + 003dde4 commit bac1607
Show file tree
Hide file tree
Showing 14 changed files with 45 additions and 71 deletions.
11 changes: 8 additions & 3 deletions base-client/src/app/app.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,30 @@ main {

.layout {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
justify-items: center;
gap: 0;

@media (min-width: $breakpoint-desktop) {
grid-template-rows: 1fr;
grid-template-columns: 121px 1fr;
justify-items: start;
gap: 25px;
}
}

.content-container {
margin-left: 16px;
margin-top: 24px;
max-width: calc(100vw - 32px);

@media (min-width: $breakpoint-tablet) {
margin-left: 25px;
@media (min-width: $breakpoint-tablet) {
margin-top: 33px;
max-width: calc(100vw - 50px);
}

@media (min-width: $breakpoint-desktop) {
margin-top: 64px;
max-width: calc(100vw - 191px);
}
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="nav-bar">
<div class="nav-container">
<img class="logo" src="./assets/logo.svg" alt="Logo">
<nav class="app-navbar">
<nav class="navbar-icons">
<a [routerLink]="['/']" routerLinkActive="active" ariaCurrentWhenActive="page"><img
class="navbar-icon" src="./assets/icon-nav-home.svg"></a>
<a [routerLink]="['/movies']" routerLinkActive="active" ariaCurrentWhenActive="page"><img
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
}
}

.app-navbar {
.navbar-icons {
display: flex;
align-content: center;
justify-content: center;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,37 @@
@import "../styles/globals";

.regular-section {
margin-bottom: 40px;
display: flex;
flex-direction: column;
gap: 8px;
max-width: calc(100vw - 32px);
overflow: scroll;
margin-bottom: 24px;
justify-items: center;
}

h2 {
font-size: 20px;
.regular-selection-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
justify-content: center;
gap: 14px;
max-width: calc(100vw - 32px);

@media (min-width: $breakpoint-tablet) {
font-size: 32px;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 30px;
max-width: calc(100vw - 50px);
}

@media (min-width: $breakpoint-large-desktop) {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 40px;
max-width: calc(100vw - 191px);
}
}

.regular-selection-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 16px 15px;
h2 {
font-size: 20px;
margin-bottom: 24px;

@media (min-width: $breakpoint-tablet) {

gap: 24px 29px;
}

@media (min-width: $breakpoint-desktop) {

justify-items: center;
gap: 32px;
width: 100%;
font-size: 32px;
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<section class="trending-section">
<h2>Trending</h2>
<div class="selection-container">
<div class="trending-selection-container">
<ng-container *ngIf="trendingDataList">
@for(selectionData of trendingDataList; track selectionData.id) {
<app-trending-card [selectionData]="selectionData"></app-trending-card>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
display: flex;
flex-direction: column;
gap: 8px;
width: screen;
overflow: scroll;
margin-bottom: 24px;
}
Expand All @@ -16,7 +15,7 @@ h2 {
}
}

.selection-container {
.trending-selection-container {
margin-top: 16px;
display: flex;
flex-direction: row;
Expand Down
9 changes: 1 addition & 8 deletions base-client/src/app/pages/bookmarks/bookmarks.component.html
Original file line number Diff line number Diff line change
@@ -1,8 +1 @@
<section>
<h2>Bookmarks</h2>
<div class="selection-container">
@for(selectionData of bookmarkDataList; track selectionData.id) {
<app-regular-card [selectionData]="selectionData"></app-regular-card>
}
</div>
</section>
<app-regular-section sectionTitle="Bookmarks" [sectionData]="bookmarkDataList" />
4 changes: 2 additions & 2 deletions base-client/src/app/pages/bookmarks/bookmarks.component.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { Component, Input } from '@angular/core';
import { RegularCardComponent } from '../../components/regular-card/regular-card.component';
import { SelectionData } from '../../interfaces/selection-data';
import Selections from '../../../data.json'
import { Subscription } from 'rxjs';
import { SelectionsService } from '../../lib/selections.service';
import { RegularSectionComponent } from '../../components/regular-section/regular-section.component';

@Component({
selector: 'app-bookmarks',
standalone: true,
imports: [RegularCardComponent],
imports: [RegularSectionComponent],
templateUrl: './bookmarks.component.html',
styleUrl: './bookmarks.component.scss'
})
Expand Down
9 changes: 1 addition & 8 deletions base-client/src/app/pages/movies/movies.component.html
Original file line number Diff line number Diff line change
@@ -1,8 +1 @@
<section>
<h2 class="title">Movies</h2>
<div class="selection-container">
@for(selectionData of movieDataList; track selectionData.id) {
<app-regular-card [selectionData]="selectionData"></app-regular-card>
}
</div>
</section>
<app-regular-section sectionTitle="Movies" [sectionData]="movieDataList" />
4 changes: 2 additions & 2 deletions base-client/src/app/pages/movies/movies.component.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { Component } from '@angular/core';
import { SelectionData } from '../../interfaces/selection-data';
import { RegularCardComponent } from '../../components/regular-card/regular-card.component';
import Selections from '../../../data.json'
import { SelectionsService } from '../../lib/selections.service';
import { Subscription } from 'rxjs';
import { RegularSectionComponent } from '../../components/regular-section/regular-section.component';

@Component({
selector: 'app-movies',
standalone: true,
imports: [RegularCardComponent],
imports: [RegularSectionComponent],
templateUrl: './movies.component.html',
styleUrl: './movies.component.scss',
})
Expand Down
9 changes: 1 addition & 8 deletions base-client/src/app/pages/series/series.component.html
Original file line number Diff line number Diff line change
@@ -1,8 +1 @@
<section>
<h2>Series</h2>
<div class="selection-container">
@for(selectionData of seriesDataList; track selectionData.id) {
<app-regular-card [selectionData]="selectionData"></app-regular-card>
}
</div>
</section>
<app-regular-section sectionTitle="TV Series" [sectionData]="seriesDataList" />
4 changes: 2 additions & 2 deletions base-client/src/app/pages/series/series.component.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { Component } from '@angular/core';
import { RegularCardComponent } from '../../components/regular-card/regular-card.component';
import { SelectionData } from '../../interfaces/selection-data';
import Selections from '../../../data.json'
import { Subscription } from 'rxjs';
import { SelectionsService } from '../../lib/selections.service';
import { RegularSectionComponent } from '../../components/regular-section/regular-section.component';

@Component({
selector: 'app-series',
standalone: true,
imports: [RegularCardComponent],
imports: [RegularSectionComponent],
templateUrl: './series.component.html',
styleUrl: './series.component.scss'
})
Expand Down
11 changes: 1 addition & 10 deletions base-client/src/styles.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
/* You can add global styles to this file, and also import other style files */
@use "scss-reset/reset";
@import "../styles/variables";

// .selection-container {
// display: grid;
// grid-gap: 2rem;

// @media (min-width: $breakpoint-desktop) {
// grid-template-columns: repeat(4, 1fr);
// }
// }
@import "../styles/variables";
3 changes: 2 additions & 1 deletion base-client/src/styles/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ $mango-semi-dark-blue: #161D2F;
$mango-pure-white: #FFFFFF;

$breakpoint-tablet: 767px;
$breakpoint-desktop: 1023px;
$breakpoint-desktop: 1023px;
$breakpoint-large-desktop: 1439px;

0 comments on commit bac1607

Please sign in to comment.