создал страницу выкупа #1
Conversation
| @@ -0,0 +1,35 @@ | |||
| <div class='topMenu'> | |||
There was a problem hiding this comment.
В проекте классы названы преимущественно по BEM, а именно block-block__element-element--modifier-modifier
Кэмел кейс (верблюжья нотация, типа topMenu nameStore futureImg) не используется (да и на проектах в целом не используется в компаниях)
| <div class='hamburger'> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </div> |
There was a problem hiding this comment.
Вот этого можно было бы и не делать)) Ты молодец что сверстал точь в точь как на той странице) Но надо было только наполнение) Тоесть то что в карточке)
There was a problem hiding this comment.
Вообще. Весь div с классом topMenu нужно обернуть в какой нибудь тег как сделано тут
| </div> | ||
| <div class='backgroundLine'></div> | ||
| <div class='nameStore'> | ||
| <div class='store402'> |
There was a problem hiding this comment.
У тебя может быть не только 402 магазин. Зачем использовать такой нейминг класса?
| </p> | ||
| <h4>Специально для вас цена:</h4> | ||
| <h4 class='specialPrice'>100 нуен/час</h4> | ||
| <button class='buyButton'>Купить!</button> |
There was a problem hiding this comment.
У нас в проекте используется ui-kit (это набор уже готовых компонентов) от гугла material design. По этому все кнопки должны быть именно как в материале. Тоесть
<button class="buyButton"
mat-raised-button
color="primary">
Купить
!</button>```| <h4 class='specialPrice'>100 нуен/час</h4> | ||
| <button class='buyButton'>Купить!</button> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Что то поехали отступы) Привыкай всегда после написанного кода использовать форматирование.
Обычно оно применяется при помощи сочетания command + option + L но я хз как в VScode настоятельно рекомендую погуглить
| .hamburger { | ||
| border-radius: 5px; | ||
| width: 40px; | ||
| height: 40px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| } | ||
| .hamburger:hover { | ||
| cursor: pointer; | ||
| } | ||
| .hamburger span { | ||
| height: 3px; | ||
| background-color: black; | ||
| display: block; | ||
| width: 30px; | ||
| margin: 3px; | ||
| } |
There was a problem hiding this comment.
У нас на проекте используется препроцессор CSS SCSS
У него есть крутые штуки типа вложенности. Тоесть по сути ты правила пишешь как теги. Используй вложенность
.hamburger {
border-radius: 5px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
&:hover {
cursor: pointer;
}
span {
height: 3px;
background-color: black;
display: block;
width: 30px;
margin: 3px;
}
}| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { BuyGoodsComponent } from './buy-goods.component'; | ||
|
|
||
| describe('BuyGoodsComponent', () => { | ||
| let component: BuyGoodsComponent; | ||
| let fixture: ComponentFixture<BuyGoodsComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ BuyGoodsComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(BuyGoodsComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Этот файл в ангуляре формируется для тестов компонента. Мы тестирование не пишем. Можешь смело удалять его
| export class BuyGoodsComponent implements OnInit { | ||
|
|
||
| constructor() { } | ||
|
|
||
| ngOnInit(): void { | ||
| } | ||
|
|
||
| } |
There was a problem hiding this comment.
Пустой класс. Ты же все равно будешь подставлять данные динамически в html.
Может стоит в класс вынести переменные которые ты будешь использовать например
name
shopName
itemName
price
description
Которые уже будут инициализироваться при запросе с сервера потом.
No description provided.