Skip to content

Adjusted front for mobile #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 16, 2025
Merged

Adjusted front for mobile #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions src/app/modules/companies/components/companies-page/companies-page.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<div class="container my-5" *ngIf="companies; else dataLoading">
<div class="card">
<div class="card-body px-5 py-5">
<div class="card-body mobile-px-5 mobile-py-5">
<div class="company-list mb-3">
<div class="row">
<div class="col-md-6 mb-1">
Expand All @@ -15,8 +15,8 @@
(keyup)="onKeyupEvent($event)"
/>
</div>
<div class="col-md-6 mb-1">
<div class="d-inline-block w-50 me-2">
<div class="col-md-3 mb-1">
<div class="">
<select
class="form-select"
id="withRating"
Expand All @@ -27,7 +27,8 @@
<option value="true">Только с рейтингом</option>
</select>
</div>

</div>
<div class="col-md-3 mb-1">
<button
type="button"
class="btn btn-outline-primary"
Expand Down Expand Up @@ -117,7 +118,7 @@
<div class="mt-3 d-flex justify-content-center">
<img
src="https://techinterview.fra1.cdn.digitaloceanspaces.com/images/company_reviews_1000.png"
class="img-fluid w-30"
class="img-fluid mobile-w-30"
alt="logo"
title="Кот Магеллан, который любит оставлять отзывы о компаниях"
/>
Expand Down
8 changes: 4 additions & 4 deletions src/app/modules/companies/components/company-page/company-page.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<div class="container my-5" *ngIf="company; else dataLoading">
<div class="card">
<div class="card-body p-5">
<div class="card-body mobile-px-5 mobile-py-5">
<div class="mb-3">
<div class="h2 mb-2">
<div class="" *ngIf="company.reviewsCount > 0">
Expand Down Expand Up @@ -83,7 +83,7 @@
<div class="h3 mt-5">Отзывы</div>

<div class="card mt-3" *ngIf="company.reviews.length > 0; else nothingToShow">
<div class="card-body p-5">
<div class="card-body mobile-px-5 mobile-py-5">
<div *ngFor="let review of company.reviews" class="mb-5">
<div class="mb-2">
<button
Expand Down Expand Up @@ -200,7 +200,7 @@
<div class="mt-3 d-flex justify-content-center">
<img
src="https://techinterview.fra1.cdn.digitaloceanspaces.com/images/company_reviews_1000.png"
class="img-fluid w-30"
class="img-fluid mobile-w-30"
alt="logo"
title="Кот Магеллан, который любит оставлять отзывы о компаниях"
/>
Expand Down Expand Up @@ -228,7 +228,7 @@
<div class="mt-2 mb-1 d-flex justify-content-center">
<img
src="https://techinterview.fra1.cdn.digitaloceanspaces.com/images/cat_reviewing_transparent_1000.png"
class="img-fluid w-30"
class="img-fluid mobile-w-30"
alt="logo"
title="Кот Магеллан, который любит оставлять отзывы о компаниях"
/>
Expand Down
168 changes: 85 additions & 83 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,95 +56,97 @@

<div class="footer mt-auto d-block">
<div class="py-5 footer-wrapper">
<div class="container d-flex justify-content-between">
<div class="d-inline-block">
<div class="h4">
<a class="footer-link" href="/">Techinterview.space</a>
</div>
<div class="mt-3">Алматы, Казахстан</div>
<div class="mt-3">
2025,
<a
class="footer-link"
href="https://mgorbatyuk.dev"
target="_blank"
>© maximgorbatyuk</a
>
</div>
</div>

<div class="d-inline-block">
<div class="h4">Наши друзья</div>
<ul class="mt-3 no-bullets">
<li>
<a
class="footer-link"
href="https://maximgorbatyuk.notion.site/e7e9dbadcbf54030b3b92105d96cd98d?utm_source=techinterview.space"
target="_blank"
title="База знаний по ИП в Казахстане"
rel="noopener noreferrer"
>
<i class="bi bi-chevron-right"></i
><span class="ms-2">База знаний по ИП в Казахстане</span>
</a>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-md-4 mobile-mb-3">
<div class="h4">
<a class="footer-link" href="/">Techinterview.space</a>
</div>
<div class="mt-3">Алматы, Казахстан</div>
<div class="mt-3">
2025,
<a
class="footer-link"
href="https://t.me/Projects_KZ"
href="https://mgorbatyuk.dev"
target="_blank"
title="Сообщество проектных менеджеров в Телеграм"
rel="noopener noreferrer"
>© maximgorbatyuk</a
>
<i class="bi bi-chevron-right"></i
><span class="ms-2">ТГ-канал @Projects_KZ</span>
</a>
</li>
<li>
<a
class="footer-link"
href="https://t.me/backenderskz"
target="_blank"
title="Сообщество бэкендеров в Телеграм"
rel="noopener noreferrer"
>
<i class="bi bi-chevron-right"></i
><span class="ms-2"
>ТГ-канал @backenderskz (Kolesa Group)</span
</div>
</div>

<div class="col-md-4 mobile-mb-3">
<div class="h4">Наши друзья</div>
<ul class="mt-3 no-bullets">
<li>
<a
class="footer-link"
href="https://maximgorbatyuk.notion.site/e7e9dbadcbf54030b3b92105d96cd98d?utm_source=techinterview.space"
target="_blank"
title="База знаний по ИП в Казахстане"
rel="noopener noreferrer"
>
</a>
</li>
</ul>
</div>
<i class="bi bi-chevron-right"></i
><span class="ms-2">База знаний по ИП в Казахстане</span>
</a>
</li>
<li>
<a
class="footer-link"
href="https://t.me/Projects_KZ"
target="_blank"
title="Сообщество проектных менеджеров в Телеграм"
rel="noopener noreferrer"
>
<i class="bi bi-chevron-right"></i
><span class="ms-2">ТГ-канал @Projects_KZ</span>
</a>
</li>
<li>
<a
class="footer-link"
href="https://t.me/backenderskz"
target="_blank"
title="Сообщество бэкендеров в Телеграм"
rel="noopener noreferrer"
>
<i class="bi bi-chevron-right"></i
><span class="ms-2"
>ТГ-канал @backenderskz (Kolesa Group)</span
>
</a>
</li>
</ul>
</div>

<div class="d-inline-block">
<div class="h4">Ссылки</div>
<ul class="mt-3 no-bullets">
<li>
<a class="footer-link" href="/about-us">
<i class="bi bi-chevron-right"></i
><span class="ms-2">О нас</span>
</a>
</li>
<li>
<a class="footer-link" href="/about-telegram-bot">
<i class="bi bi-chevron-right"></i
><span class="ms-2">О телеграм боте</span>
</a>
</li>
<li>
<a class="footer-link" href="/agreements/privacy-policy">
<i class="bi bi-chevron-right"></i
><span class="ms-2">Пользовательское соглашение</span>
</a>
</li>
<li>
<a class="footer-link" href="/?uwu=true">
<i class="bi bi-chevron-right"></i
><span class="ms-2">UwU?</span>
</a>
</li>
</ul>
<div class="col-md-4">
<div class="h4">Ссылки</div>
<ul class="mt-3 no-bullets">
<li>
<a class="footer-link" href="/about-us">
<i class="bi bi-chevron-right"></i
><span class="ms-2">О нас</span>
</a>
</li>
<li>
<a class="footer-link" href="/about-telegram-bot">
<i class="bi bi-chevron-right"></i
><span class="ms-2">О телеграм боте</span>
</a>
</li>
<li>
<a class="footer-link" href="/agreements/privacy-policy">
<i class="bi bi-chevron-right"></i
><span class="ms-2">Пользовательское соглашение</span>
</a>
</li>
<li>
<a class="footer-link" href="/?uwu=true">
<i class="bi bi-chevron-right"></i
><span class="ms-2">UwU?</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Expand Down
38 changes: 38 additions & 0 deletions src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,44 @@ ul.no-bullets {
width: 80%;
}

.mobile-mb-3 {
margin-bottom: inherit;
}

@media (max-width: 768px) {
.mobile-mb-3 {
margin-bottom: 36px;
}
}

.mobile-px-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;

@media (max-width: 768px) {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
}

.mobile-py-5 {
padding-left: 3rem !important;
padding-right: 3rem !important;

@media (max-width: 768px) {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
}

.mobile-w-30 {
width: 30% !important;

@media (max-width: 768px) {
width: 100% !important;
}
}

/* ng-select bootstrap-like styles. Start */
/* https://github.com/ng-select/ng-select/issues/1955#issuecomment-1240459808 */
/*.form-floating {
Expand Down
Loading