mirzaev/skillparts
mirzaev
/
skillparts
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Переработка дизайна главной страницы

This commit is contained in:
RedHood 2020-12-12 13:39:01 +10:00
parent 0257284490
commit c6b1ac7611
8 changed files with 125 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
mirzaev/skillparts/system/views/layouts/main.php
View File

@ -24,9 +24,8 @@ AppAsset::register($this);
<body> <body>
<?php $this->beginBody() ?> <?php $this->beginBody() ?>
<div class="wrap"> <header>
<div class="container">
<header class="container">
<div class="row mt-3 mt-sm-0"> <div class="row mt-3 mt-sm-0">
<div class="col-3 col-sm-4 col-md-2 d-flex flex-column justify-content-end logotype"> <div class="col-3 col-sm-4 col-md-2 d-flex flex-column justify-content-end logotype">
<img class="img-fluid" src="/img/logo.jpg" alt="Аватар"> <img class="img-fluid" src="/img/logo.jpg" alt="Аватар">
@ -54,9 +53,9 @@ AppAsset::register($this);
</div> </div>
<div class="row mb-4"> <div class="row mb-4">
<div class="col-lg-3 pr-0 pr-lg-3 py-2 d-flex flex-column align-center justify-content-end dropdownMenuButton_column"> <div class="col-lg-3 pr-0 pr-lg-3 d-flex flex-column align-center justify-content-end dropdownMenuButton_column">
<button id="dropdownMenuButton" class="btn text-white form-control d-flex button_clean catalog_button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button id="dropdownMenuButton" class="btn form-control d-flex align-items-center button_clean catalog_button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bars col-2 p-0 d-flex flex-column justify-content-center"></i> <i class="fas fa-bars col-auto text-left p-0 mr-auto h-100 d-flex flex-column justify-content-center"></i>
<p class="col-10 m-0 p-0">Каталог товаров</p> <p class="col-10 m-0 p-0">Каталог товаров</p>
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
@ -68,19 +67,19 @@ AppAsset::register($this);
<div id="searchPanel" class="col"> <div id="searchPanel" class="col">
<input id="catalog_search_panel_button_1" class="btn btn-sm button_clean" type="radio" name="catalog_search_panel_buttons" value="catalog_search_panel_button_1" checked> <input id="catalog_search_panel_button_1" class="btn btn-sm button_clean" type="radio" name="catalog_search_panel_buttons" value="catalog_search_panel_button_1" checked>
<label class="mb-0 px-3 px-md-4 px-lg-5 py-1" for="catalog_search_panel_button_1">Номер детали</label> <label class="mb-0 px-3 px-md-4 py-1" for="catalog_search_panel_button_1">Номер детали</label>
<input id="catalog_search_panel_button_2" class="btn btn-sm text-white button_clean" type="radio" name="catalog_search_panel_buttons" value="catalog_search_panel_button_2"> <input id="catalog_search_panel_button_2" class="btn btn-sm text-white button_clean" type="radio" name="catalog_search_panel_buttons" value="catalog_search_panel_button_2">
<label class="mb-0 px-3 px-md-4 px-lg-5 py-1" for="catalog_search_panel_button_2">Вторая кнопка</label> <label class="mb-0 px-3 px-md-4 py-1" for="catalog_search_panel_button_2">Вторая кнопка</label>
<input id="catalog_search_panel_button_3" class="btn btn-sm5 text-white button_clean" type="radio" name="catalog_search_panel_buttons" value="catalog_search_panel_button_3"> <input id="catalog_search_panel_button_3" class="btn btn-sm5 text-white button_clean" type="radio" name="catalog_search_panel_buttons" value="catalog_search_panel_button_3">
<label class="mb-0 px-3 px-md-4 px-lg-5 py-1" for="catalog_search_panel_button_3">Третья кнопка</label> <label class="mb-0 px-3 px-md-4 py-1" for="catalog_search_panel_button_3">Третья кнопка</label>
<form class="d-flex p-2 catalog_search"> <form class="d-flex catalog_search">
<input type="text" class="form-control catalog_search_line col-8 col-lg-10 mr-2" id="productNumber" placeholder="Номер запчасти, например: 45223503481"> <input type="text" class="form-control col-8 col-lg-10 catalog_search_line" id="productNumber" placeholder="Номер запчасти, например: 45223503481">
<button type="submit" class="col text-white btn button_clean catalog_search_button">ПОИСК</button> <button type="submit" class="col btn button_clean catalog_search_button">ПОИСК</button>
</form> </form>
</div> </div>
</div> </div>
</header> </div>
</div> </header>
<main> <main>
<?= $content ?> <?= $content ?>
@ -88,13 +87,19 @@ AppAsset::register($this);
<footer class="py-4"> <footer class="py-4">
<div class="container"> <div class="container">
<div class="row"> <div class="row px-3">
<div class="col-12 col-md-4 px-5 px-md-3"> <div class="col-12 col-md-auto mr-md-5">
<h5 class="mb-1"><b>Контакты</b></h5> <h5 class="row mb-2"><b>Контакты</b></h5>
<small>Адрес: г. Хабаровск, ул. Промышленная 3, офис 105</small><br> <small class="row mb-1"><b>Адрес:&nbsp;</b>Хабаровск, Промышленная 3, 105</small>
<small>Время работы: пн-пт 09:00-18:00</small><br> <small class="row mb-1"><b>Время работы:&nbsp;</b>пн-пт 09:00-18:00</small>
<small>Телефон: +7 (4212) 35-85-34</small><br> <small class="row mb-1"><b>Телефон:&nbsp;</b>+7 (4212) 35-85-34</small>
<small>Почта: info@skullparts.ru</smal> <small class="row mb-1"><b>Почта:&nbsp;</b>info@skillparts.ru</small>
</div>
<div class="col-md-auto mr-md-5 partnership">
<h5 class="row mb-2"><b>Партнёрство</b></h5>
<small class="row mb-1"><a>Оптовым покупателям</a></small>
<small class="row mb-1"><a>Поставщикам</a></small>
<small class="row mb-1"><a>Партнерская сеть</a></small>
</div> </div>
<!-- <p class="pull-left">&copy; My Company <?= date('Y') ?></p> <!-- <p class="pull-left">&copy; My Company <?= date('Y') ?></p>

6
mirzaev/skillparts/system/views/site/index.php
View File

@ -11,14 +11,14 @@ $this->title = 'SkillParts';
<button class="text-white btn button_clean button_call">Связаться с менеджером</button> <button class="text-white btn button_clean button_call">Связаться с менеджером</button>
</div> </div>
<div class="h-100 d-flex flex-column justify-content-end"> <div class="h-100 d-flex flex-column justify-content-end">
<img class="img-fluid" src="/img/photos/963K.webp" alt="Связаться с менеджером"> <img class="img-fluid" src="/img/photos/963K_cutted.webp" alt="Связаться с менеджером">
</div> </div>
</div> </div>
<div class="container pt-2"> <div class="container pt-2">
<div class="row mb-3"> <!-- <div class="row mb-3">
<h4 class="col gilroy categories_blocks_panel_title">Сопутствующие товары</h4> <h4 class="col gilroy categories_blocks_panel_title">Сопутствующие товары</h4>
</div> </div> -->
<div class="row mb-5 px-3 px-md-0"> <div class="row mb-5 px-3 px-md-0">
<div class="col-12 col-md-6 col-lg-4 mb-3 mb-md-0 p-0 p-md-3 pl-md-0 d-flex flex-column"> <div class="col-12 col-md-6 col-lg-4 mb-3 mb-md-0 p-0 p-md-3 pl-md-0 d-flex flex-column">
<div class="px-3 px-xl-4 pt-3 d-inline-block category_block_title"> <div class="px-3 px-xl-4 pt-3 d-inline-block category_block_title">

27
mirzaev/skillparts/system/web/css/footer.css
View File

@ -2,5 +2,28 @@ footer {
width: 100%; width: 100%;
max-height: 15rem; max-height: 15rem;
flex-shrink: 0; flex-shrink: 0;
background-color: #d9d7e1; background-color: #fff;
} }
/* @media (max-width: 400px) {} */
/* Малые девайсы («ландшафтные телефоны», >= 576px) */
/* @media (max-width: 576px) {} */
/* Средние девайсы («таблетки», >= 768px) */
@media (max-width: 768px) {
.partnership {
display: none;
}
}
/* Большие девайсы (десктопы, >= 992px) */
/* @media (max-width: 992px) {} */
/* Экстрабольшие девайсы (большие десктопы, >= 1200px) */
/* @media (max-width: 1200px) {} */

84
mirzaev/skillparts/system/web/css/header.css
View File

@ -1,3 +1,7 @@
header {
background-color: #fff;
}
.h-divider { .h-divider {
margin-top: -20px; margin-top: -20px;
position: relative; position: relative;
@ -27,51 +31,67 @@
.catalog_button { .catalog_button {
width: 100%; width: 100%;
height: 2rem;
border-radius: 3px; border-radius: 3px;
transition: 0.3s; background-clip: unset;
background-color: #123EAB !important; border: 1px solid #a39bb1;
/* background-color: #123EAB; */
background-color: #e4e2ea;
} }
.catalog_button:hover { .catalog_button:hover {
transition: 0.3s; border: 1px solid #c0b7d0;
background-color: #6940ff !important; /* background-color: #1b4bc4; */
background-color: #ebe9f2;
} }
.catalog_button:active { .catalog_button:active, .catalog_button:focus {
transition: 0.3s; border: 1px solid #7b7587;
background-color: #402d82 !important; /* background-color: #402d82; */
background-color: #d7d4dd;
}
.catalog_button p {
font-size: 85%;
line-height: 100%;
}
.dropdownMenuButton_column {
padding-bottom: 0.8rem;
} }
.catalog_search { .catalog_search {
padding: 0.8rem;
border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px;
background-color: #123EAB; background-color: #123EAB;
} }
#searchPanel label { #searchPanel label {
display: inline-block; display: inline-block;
cursor: pointer;
user-select: none;
font-size: smaller;
border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
color: #ececec; color: #000;
background-color: #86f; border-bottom: none;
background-color: #e4e2ea;
}
#searchPanel label:hover {
border-bottom: none;
background-color: #ebe9f2;
} }
#searchPanel input[type=radio] { #searchPanel input[type=radio] {
display: none; display: none;
} }
#searchPanel label {
cursor: pointer;
user-select: none;
}
#searchPanel label:hover {
color: #ffffff;
}
#searchPanel input[type=radio]+label:active, #searchPanel input[type=radio]:checked+label:active { #searchPanel input[type=radio]+label:active, #searchPanel input[type=radio]:checked+label:active {
background-color: #402d82; border-bottom: none;
background-color: #d7d4dd;
} }
#searchPanel input[type=radio]:checked+label { #searchPanel input[type=radio]:checked+label, #searchPanel input[type=radio]:checked:hover+label, #searchPanel input[type=radio]:checked:active+label {
color: #ffffff; color: #ffffff;
background-color: #123EAB; background-color: #123EAB;
} }
@ -82,21 +102,32 @@
} }
.catalog_search_line { .catalog_search_line {
height: 2rem;
margin: 0 .8rem 0 0;
font-size: 85%;
line-height: 100%;
border-radius: 3px; border-radius: 3px;
border: 1px solid #a39bb1;
background-color: #fbf9ff !important; background-color: #fbf9ff !important;
} }
.catalog_search_button { .catalog_search_button {
height: 2rem;
font-size: 85%;
line-height: 100%;
border-radius: 3px; border-radius: 3px;
background-color: #d53737; border: 1px solid #a39bb1;
background-color: #e4e2ea;
} }
.catalog_search_button:hover { .catalog_search_button:hover {
background-color: #ee4c4c; border: 1px solid #c0b7d0;
background-color: #ebe9f2;
} }
.catalog_search_button:active { .catalog_search_button:active {
background-color: #c13131; border: 1px solid #7b7587;
background-color: #d7d4dd;
} }
@media (max-width: 400px) { @media (max-width: 400px) {
@ -116,6 +147,7 @@
} }
/* Малые девайсы («ландшафтные телефоны», >= 576px) */ /* Малые девайсы («ландшафтные телефоны», >= 576px) */
@media (max-width: 576px) { @media (max-width: 576px) {
.tagline { .tagline {
display: none !important; display: none !important;
@ -133,10 +165,11 @@
} }
/* Средние девайсы («таблетки», >= 768px) */ /* Средние девайсы («таблетки», >= 768px) */
@media (max-width: 768px) {
} @media (max-width: 768px) {}
/* Большие девайсы (десктопы, >= 992px) */ /* Большие девайсы (десктопы, >= 992px) */
@media (max-width: 992px) { @media (max-width: 992px) {
.h-divider { .h-divider {
margin-top: 15px; margin-top: 15px;
@ -153,4 +186,5 @@
} }
/* Экстрабольшие девайсы (большие десктопы, >= 1200px) */ /* Экстрабольшие девайсы (большие десктопы, >= 1200px) */
@media (max-width: 1200px) {} @media (max-width: 1200px) {}

17
mirzaev/skillparts/system/web/css/info_panel.css
View File

@ -4,12 +4,12 @@
} }
.info_panel img { .info_panel img {
left: 10vw;
scale: 1.2;
min-width: 100%; min-width: 100%;
min-height: 200%; min-height: 200%;
position: relative; position: relative;
transform: scale(1.2);
object-fit: cover; object-fit: cover;
object-position: center bottom;
z-index: 0; z-index: 0;
} }
@ -29,19 +29,15 @@
.info_panel .button_call { .info_panel .button_call {
width: 350px; width: 350px;
margin-left: 2vw; margin-left: 2vw;
background-color: #57a946; background-color: #123EAB;
} }
.info_panel .button_call:hover { .info_panel .button_call:hover {
background-color: #5fb94c; background-color: #1b4bc4;
} }
.info_panel .button_call:active { .info_panel .button_call:active {
background-color: #468e37; background-color: #402d82;
}
.catalog_search_button:active {
background-color: #c13131;
} }
@media (max-width: 400px) {} @media (max-width: 400px) {}
@ -60,8 +56,7 @@
/* Средние девайсы («таблетки», >= 768px) */ /* Средние девайсы («таблетки», >= 768px) */
@media (max-width: 768px) { @media (max-width: 768px) {}
}
/* Большие девайсы (десктопы, >= 992px) */ /* Большие девайсы (десктопы, >= 992px) */

8
mirzaev/skillparts/system/web/css/main.css
View File

@ -8,8 +8,12 @@
font-family: 'Open Sans'; font-family: 'Open Sans';
} }
a {
cursor: pointer;
}
button { button {
transition: 0.1s !important; transition: 0s !important;
} }
body { body {
@ -17,11 +21,11 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: hidden; overflow-x: hidden;
background-color: #f4f3ff;
} }
main { main {
flex-grow: 1; flex-grow: 1;
background-color: #f0eefb;
} }
.button_clean, .button_clean:hover, .button_clean:focus, .button_clean:active { .button_clean, .button_clean:hover, .button_clean:focus, .button_clean:active {

BIN
mirzaev/skillparts/system/web/img/photos/963K.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
mirzaev/skillparts/system/web/img/photos/963K_cutted.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB