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-08 20:17:27 +10:00
parent a1331763cd
commit a6c6a69587
6 changed files with 213 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,11 +3,7 @@
/* @var $this \yii\web\View */ /* @var $this \yii\web\View */
/* @var $content string */ /* @var $content string */
use app\widgets\Alert;
use yii\helpers\Html; use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset; use app\assets\AppAsset;
AppAsset::register($this); AppAsset::register($this);
@ -31,12 +27,12 @@ AppAsset::register($this);
<div class="wrap"> <div class="wrap">
<header class="container"> <header class="container">
<div class="row"> <div class="row mt-3 mt-sm-0">
<div class="col-2"> <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="Аватар">
<small class="pt-0 d-block text-center">Место под слоган</small> <small class="pt-0 d-block text-center tagline">Место под слоган</small>
</div> </div>
<div class="col-3 ml-auto text-right d-flex flex-column justify-content-end"> <div class="col ml-auto text-right d-flex flex-column justify-content-end">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<p class="m-0"><i class="fas fa-shopping-cart mr-4"></i><i class="fas fa-list mr-4"></i><a>Личный кабинет</a></p> <p class="m-0"><i class="fas fa-shopping-cart mr-4"></i><i class="fas fa-list mr-4"></i><a>Личный кабинет</a></p>
@ -49,7 +45,7 @@ AppAsset::register($this);
<div class="col"> <div class="col">
<div class="h-divider d-flex"> <div class="h-divider d-flex">
<div class="col-1 ml-auto p-0 h-divider-title-left"></div> <div class="col-1 ml-auto p-0 h-divider-title-left"></div>
<div class="col-4 h-divider-title d-flex flex-column justify-content-center"> <div class="col-5 col-lg-4 h-divider-title d-flex flex-column justify-content-center">
<h6 class="text-center text-white my-0"><b>Запчасти для спецтехники</b></h6> <h6 class="text-center text-white my-0"><b>Запчасти для спецтехники</b></h6>
</div> </div>
<div class="col-1 mr-auto p-0 h-divider-title-right"></div> <div class="col-1 mr-auto p-0 h-divider-title-right"></div>
@ -58,8 +54,8 @@ AppAsset::register($this);
</div> </div>
<div class="row mb-4"> <div class="row mb-4">
<div class="col-3 py-2 d-flex flex-column justify-content-end"> <div class="col-lg-3 pr-0 pr-lg-3 py-2 d-flex flex-column align-center justify-content-end dropdownMenuButton_column">
<button id="dropdownMenuButton" class="btn text-white d-flex button_clean catalog_button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <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">
<i class="fas fa-bars col-2 p-0 d-flex flex-column justify-content-center"></i> <i class="fas fa-bars col-2 p-0 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>
@ -70,16 +66,16 @@ AppAsset::register($this);
</div> </div>
</div> </div>
<div id="searchPanel" class="col-9"> <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-5 py-1" for="catalog_search_panel_button_1">Номер детали</label> <label class="mb-0 px-3 px-md-4 px-lg-5 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-5 py-1" for="catalog_search_panel_button_2">Вторая кнопка</label> <label class="mb-0 px-3 px-md-4 px-lg-5 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-5 py-1" for="catalog_search_panel_button_3">Третья кнопка</label> <label class="mb-0 px-3 px-md-4 px-lg-5 py-1" for="catalog_search_panel_button_3">Третья кнопка</label>
<form class="d-flex p-2 catalog_search"> <form class="d-flex p-2 catalog_search">
<input type="text" class="form-control catalog_search_line col-10" id="productNumber" placeholder="Номер запчасти, например: 45223503481"> <input type="text" class="form-control catalog_search_line col-8 col-lg-10 mr-2" id="productNumber" placeholder="Номер запчасти, например: 45223503481">
<button type="submit" class="col-2 text-white btn button_clean catalog_search_button">ПОИСК</button> <button type="submit" class="col text-white btn button_clean catalog_search_button">ПОИСК</button>
</form> </form>
</div> </div>
</div> </div>
@ -93,7 +89,7 @@ AppAsset::register($this);
<footer class="py-4"> <footer class="py-4">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-12 col-md-4 px-5 px-md-3">
<h5 class="mb-1"><b>Контакты</b></h5> <h5 class="mb-1"><b>Контакты</b></h5>
<small>Адрес: г. Хабаровск, ул. Промышленная 3, офис 105</small><br> <small>Адрес: г. Хабаровск, ул. Промышленная 3, офис 105</small><br>
<small>Время работы: пн-пт 09:00-18:00</small><br> <small>Время работы: пн-пт 09:00-18:00</small><br>

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

@ -7,23 +7,25 @@ $this->title = 'SkillParts';
<div class="row info_panel mb-4"> <div class="row info_panel mb-4">
<div class="container h-100 d-flex flex-column justify-content-center"> <div class="container h-100 d-flex flex-column justify-content-center">
<p class="mb-4 gilroy">Если есть трудности с подбором запчастей<br>оставьте заявку нашему менеджеру</p> <p class="col-lg-8 mb-4 gilroy">Проблема с подбором запчастей?</p>
<button class="text-white btn button_clean button_call">Оставить заявку</button> <button class="text-white btn button_clean button_call">Связаться с менеджером</button>
</div>
<div class="h-100 d-flex flex-column justify-content-end">
<img class="img-fluid" src="/img/photos/963K.webp" alt="Связаться с менеджером">
</div> </div>
<img class="img-fluid" src="/img/photos/963K.webp" alt="Вызвать менеджера">
</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"> <div class="row mb-5 px-3 px-md-0">
<div class="col-4 pl-0 text-white"> <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-5 py-3 d-inline-block category_block_title"> <div class="px-3 px-xl-4 pt-3 d-inline-block category_block_title">
<h5 class="m-0 gilroy">Масла, смазки</h5> <h4 class="m-0">Масла, смазки</h4>
</div> </div>
<div class="ml-3 mt-3 px-4 pt-4 pb-0 category_block"> <div class="p-3 px-md-4 category_block">
<dl class="mb-0 mt-4 pt-2"> <dl class="mb-0">
<dd>Масла моторные</dd> <dd>Масла моторные</dd>
<dd>Масла трансмиссионные</dd> <dd>Масла трансмиссионные</dd>
<dd>Масла гидравлические</dd> <dd>Масла гидравлические</dd>
@ -31,22 +33,22 @@ $this->title = 'SkillParts';
</dl> </dl>
</div> </div>
</div> </div>
<div class="col-4 pl-0 text-white"> <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-5 py-3 d-inline-block category_block_title"> <div class="px-3 px-xl-4 pt-3 d-inline-block category_block_title">
<h5 class="m-0 gilroy">Электрооборудование</h5> <h4 class="m-0">Электрооборудование</h4>
</div> </div>
<div class="ml-3 mt-3 px-4 pt-4 pb-0 category_block"> <div class="p-3 px-md-4 category_block">
<dl class="mb-0 mt-4 pt-2"> <dl class="mb-0">
<dd>Фары и свет</dd> <dd>Фары и свет</dd>
</dl> </dl>
</div> </div>
</div> </div>
<div class="col-4 pl-0 text-white"> <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-5 py-3 d-inline-block category_block_title"> <div class="px-3 px-xl-4 pt-3 d-inline-block category_block_title">
<h5 class="m-0 gilroy">Инструмент</h5> <h4 class="m-0">Инструмент</h4>
</div> </div>
<div class="ml-3 mt-3 px-4 pt-4 pb-0 category_block"> <div class="p-3 px-md-4 category_block">
<dl class="mb-0 mt-4 pt-2"> <dl class="mb-0">
<dd>Шприцы для смазки </dd> <dd>Шприцы для смазки </dd>
<dd>Ключи, съёмники</dd> <dd>Ключи, съёмники</dd>
<dd>Наборы инструментов</dd> <dd>Наборы инструментов</dd>

45
mirzaev/skillparts/system/web/css/categories_blocks_panel.css
View File

@ -1,10 +1,8 @@
.categories_blocks_panel_title {
}
.category_block { .category_block {
height: 100%; height: 100%;
background-color: #563cb0; font-size: 15px;
color: #123EAB;
background-color: #fff;
} }
.category_block dd { .category_block dd {
@ -16,6 +14,39 @@
} }
.category_block_title { .category_block_title {
position: absolute; background-color: #fff;
background-color: #7e66d5;
} }
.category_block_title h4 {
font-weight: 700;
}
/* @media (max-width: 400px) {} */
/* Малые девайсы («ландшафтные телефоны», >= 576px) */
@media (max-width: 576px) {}
/* Средние девайсы («таблетки», >= 768px) */
@media (max-width: 768px) {
.category_block_title {
width: 100%;
}
.category_block,
.category_block dl {
margin: 0 !important;
padding: .5rem !important;
}
.categories_blocks_panel_title {
text-align: center;
}
}
/* Большие девайсы (десктопы, >= 992px) */
@media (max-width: 992px) {}
/* Экстрабольшие девайсы (большие десктопы, >= 1200px) */
/* @media (max-width: 1200px) {} */

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

@ -2,39 +2,39 @@
margin-top: -20px; margin-top: -20px;
position: relative; position: relative;
pointer-events: none; pointer-events: none;
border-bottom: 4px solid #563cb0; border-bottom: 4px solid #123EAB;
} }
.h-divider-title { .h-divider-title {
background-color: #563cb0; background-color: #123EAB;
} }
.h-divider-title-left { .h-divider-title-left {
max-width: 0; max-width: 0;
max-height: 0; max-height: 0;
border: 1rem solid transparent; border: 1rem solid transparent;
border-right: 1rem solid #563cb0; border-right: 1rem solid #123EAB;
border-bottom: 1rem solid #563cb0; border-bottom: 1rem solid #123EAB;
} }
.h-divider-title-right { .h-divider-title-right {
max-width: 0; max-width: 0;
max-height: 0; max-height: 0;
border: 1rem solid transparent; border: 1rem solid transparent;
border-left: 1rem solid #563cb0; border-left: 1rem solid #123EAB;
border-bottom: 1rem solid #563cb0; border-bottom: 1rem solid #123EAB;
} }
.catalog_button { .catalog_button {
width: 100%; width: 100%;
border-radius: 3px; border-radius: 3px;
transition: 0.3s; transition: 0.3s;
background-color: #563cb0 !important; background-color: #123EAB !important;
} }
.catalog_button:hover { .catalog_button:hover {
transition: 0.3s; transition: 0.3s;
background-color: #7e66d5 !important; background-color: #6940ff !important;
} }
.catalog_button:active { .catalog_button:active {
@ -44,14 +44,14 @@
.catalog_search { .catalog_search {
border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px;
background-color: #563cb0; background-color: #123EAB;
} }
#searchPanel label { #searchPanel label {
display: inline-block; display: inline-block;
border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
color: #ececec; color: #ececec;
background-color: #9d88e6; background-color: #86f;
} }
#searchPanel input[type=radio] { #searchPanel input[type=radio] {
@ -67,14 +67,13 @@
color: #ffffff; color: #ffffff;
} }
#searchPanel input[type=radio] + label:active, #searchPanel input[type=radio]+label:active, #searchPanel input[type=radio]:checked+label:active {
#searchPanel input[type=radio]:checked + label:active {
background-color: #402d82; background-color: #402d82;
} }
#searchPanel input[type=radio]:checked+label { #searchPanel input[type=radio]:checked+label {
color: #ffffff; color: #ffffff;
background-color: #563cb0; background-color: #123EAB;
} }
#searchPanel input[type=radio]:disabled+label { #searchPanel input[type=radio]:disabled+label {
@ -83,12 +82,12 @@
} }
.catalog_search_line { .catalog_search_line {
border-radius: 3px 0px 0px 3px; border-radius: 3px;
background-color: #fbf9ff !important; background-color: #fbf9ff !important;
} }
.catalog_search_button { .catalog_search_button {
border-radius: 0px 3px 3px 0px; border-radius: 3px;
background-color: #d53737; background-color: #d53737;
} }
@ -99,3 +98,59 @@
.catalog_search_button:active { .catalog_search_button:active {
background-color: #c13131; background-color: #c13131;
} }
@media (max-width: 400px) {
.logotype {
display: none !important;
}
.catalog_search {
flex-direction: column;
}
.catalog_search_line {
max-width: 100%;
border-radius: 3px 3px 0px 0px;
}
.catalog_search_button {
border-radius: 0px 0px 3px 3px;
}
}
/* Малые девайсы («ландшафтные телефоны», >= 576px) */
@media (max-width: 576px) {
.tagline {
display: none !important;
}
#searchPanel label {
width: 100%;
text-align: center;
}
#searchPanel label:not(:nth-child(2)) {
border-radius: 0;
}
.catalog_search {
border-radius: 0px 0px 5px 5px;
}
}
/* Средние девайсы («таблетки», >= 768px) */
@media (max-width: 768px) {
}
/* Большие девайсы (десктопы, >= 992px) */
@media (max-width: 992px) {
.h-divider {
margin-top: 15px;
}
.h-divider div {
display: none !important;
}
.dropdownMenuButton_column {
width: max-content;
}
#dropdownMenuButton p {
display: none;
}
}
/* Экстрабольшие девайсы (большие десктопы, >= 1200px) */
@media (max-width: 1200px) {}

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

@ -1,12 +1,13 @@
.info_panel { .info_panel {
height: 230px; height: 280px;
overflow: hidden; overflow: hidden;
} }
.info_panel img { .info_panel img {
left: 10vw; left: 10vw;
bottom: 32vw;
scale: 1.2; scale: 1.2;
min-width: 100%;
min-height: 200%;
position: relative; position: relative;
object-fit: cover; object-fit: cover;
z-index: 0; z-index: 0;
@ -14,7 +15,10 @@
.info_panel .container { .info_panel .container {
/* position: absolute; */ /* position: absolute; */
top: 50%;
height: 0px !important;
z-index: 15; z-index: 15;
position: relative;
} }
.info_panel .container p { .info_panel .container p {
@ -24,7 +28,7 @@
.info_panel .button_call { .info_panel .button_call {
width: 350px; width: 350px;
margin-left: 5vw; margin-left: 2vw;
background-color: #57a946; background-color: #57a946;
} }
@ -35,3 +39,34 @@
.info_panel .button_call:active { .info_panel .button_call:active {
background-color: #468e37; background-color: #468e37;
} }
.catalog_search_button:active {
background-color: #c13131;
}
@media (max-width: 400px) {}
/* Малые девайсы («ландшафтные телефоны», >= 576px) */
@media (max-width: 576px) {
.info_panel .container {
padding: 0px 35px;
}
.info_panel .button_call {
width: 100%;
margin-left: 0;
}
}
/* Средние девайсы («таблетки», >= 768px) */
@media (max-width: 768px) {
}
/* Большие девайсы (десктопы, >= 992px) */
@media (max-width: 992px) {}
/* Экстрабольшие девайсы (большие десктопы, >= 1200px) */
@media (max-width: 1200px) {}

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

@ -36,3 +36,21 @@ main {
.gilroy { .gilroy {
font-family: 'Gilroy'; font-family: 'Gilroy';
} }
/* @media (max-width: 400px) {} */
/* Малые девайсы («ландшафтные телефоны», >= 576px) */
/* @media (max-width: 576px) {} */
/* Средние девайсы («таблетки», >= 768px) */
/* @media (max-width: 768px) {} */
/* Большие девайсы (десктопы, >= 992px) */
/* @media (max-width: 992px) {} */
/* Экстрабольшие девайсы (большие десктопы, >= 1200px) */
/* @media (max-width: 1200px) {} */