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 $content string */
use app\widgets\Alert;
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
AppAsset::register($this);
@ -31,12 +27,12 @@ AppAsset::register($this);
<div class="wrap">
<header class="container">
<div class="row">
<div class="col-2">
<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">
<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 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="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>
@ -49,7 +45,7 @@ AppAsset::register($this);
<div class="col">
<div class="h-divider d-flex">
<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>
</div>
<div class="col-1 mr-auto p-0 h-divider-title-right"></div>
@ -58,8 +54,8 @@ AppAsset::register($this);
</div>
<div class="row mb-4">
<div class="col-3 py-2 d-flex flex-column justify-content-end">
<button id="dropdownMenuButton" class="btn text-white d-flex button_clean catalog_button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<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 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>
<p class="col-10 m-0 p-0">Каталог товаров</p>
</button>
@ -70,16 +66,16 @@ AppAsset::register($this);
</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>
<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">
<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">
<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">
<input type="text" class="form-control catalog_search_line col-10" id="productNumber" placeholder="Номер запчасти, например: 45223503481">
<button type="submit" class="col-2 text-white btn button_clean catalog_search_button">ПОИСК</button>
<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 text-white btn button_clean catalog_search_button">ПОИСК</button>
</form>
</div>
</div>
@ -93,7 +89,7 @@ AppAsset::register($this);
<footer class="py-4">
<div class="container">
<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>
<small>Адрес: г. Хабаровск, ул. Промышленная 3, офис 105</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="container h-100 d-flex flex-column justify-content-center">
<p class="mb-4 gilroy">Если есть трудности с подбором запчастей<br>оставьте заявку нашему менеджеру</p>
<button class="text-white btn button_clean button_call">Оставить заявку</button>
<p class="col-lg-8 mb-4 gilroy">Проблема с подбором запчастей?</p>
<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>
<img class="img-fluid" src="/img/photos/963K.webp" alt="Вызвать менеджера">
</div>
<div class="container pt-2">
<div class="row mb-3">
<h4 class="col gilroy categories_blocks_panel_title">Сопутствующие товары</h4>
</div>
<div class="row mb-5">
<div class="col-4 pl-0 text-white">
<div class="px-5 py-3 d-inline-block category_block_title">
<h5 class="m-0 gilroy">Масла, смазки</h5>
<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="px-3 px-xl-4 pt-3 d-inline-block category_block_title">
<h4 class="m-0">Масла, смазки</h4>
</div>
<div class="ml-3 mt-3 px-4 pt-4 pb-0 category_block">
<dl class="mb-0 mt-4 pt-2">
<div class="p-3 px-md-4 category_block">
<dl class="mb-0">
<dd>Масла моторные</dd>
<dd>Масла трансмиссионные</dd>
<dd>Масла гидравлические</dd>
@ -31,22 +33,22 @@ $this->title = 'SkillParts';
</dl>
</div>
</div>
<div class="col-4 pl-0 text-white">
<div class="px-5 py-3 d-inline-block category_block_title">
<h5 class="m-0 gilroy">Электрооборудование</h5>
<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">
<h4 class="m-0">Электрооборудование</h4>
</div>
<div class="ml-3 mt-3 px-4 pt-4 pb-0 category_block">
<dl class="mb-0 mt-4 pt-2">
<div class="p-3 px-md-4 category_block">
<dl class="mb-0">
<dd>Фары и свет</dd>
</dl>
</div>
</div>
<div class="col-4 pl-0 text-white">
<div class="px-5 py-3 d-inline-block category_block_title">
<h5 class="m-0 gilroy">Инструмент</h5>
<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">
<h4 class="m-0">Инструмент</h4>
</div>
<div class="ml-3 mt-3 px-4 pt-4 pb-0 category_block">
<dl class="mb-0 mt-4 pt-2">
<div class="p-3 px-md-4 category_block">
<dl class="mb-0">
<dd>Шприцы для смазки </dd>
<dd>Ключи, съёмники</dd>
<dd>Наборы инструментов</dd>

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

@ -1,10 +1,8 @@
.categories_blocks_panel_title {
}
.category_block {
height: 100%;
background-color: #563cb0;
font-size: 15px;
color: #123EAB;
background-color: #fff;
}
.category_block dd {
@ -16,6 +14,39 @@
}
.category_block_title {
position: absolute;
background-color: #7e66d5;
}
background-color: #fff;
}
.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) {} */

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

@ -2,39 +2,39 @@
margin-top: -20px;
position: relative;
pointer-events: none;
border-bottom: 4px solid #563cb0;
border-bottom: 4px solid #123EAB;
}
.h-divider-title {
background-color: #563cb0;
background-color: #123EAB;
}
.h-divider-title-left {
max-width: 0;
max-height: 0;
border: 1rem solid transparent;
border-right: 1rem solid #563cb0;
border-bottom: 1rem solid #563cb0;
border-right: 1rem solid #123EAB;
border-bottom: 1rem solid #123EAB;
}
.h-divider-title-right {
max-width: 0;
max-height: 0;
border: 1rem solid transparent;
border-left: 1rem solid #563cb0;
border-bottom: 1rem solid #563cb0;
border-left: 1rem solid #123EAB;
border-bottom: 1rem solid #123EAB;
}
.catalog_button {
width: 100%;
border-radius: 3px;
transition: 0.3s;
background-color: #563cb0 !important;
background-color: #123EAB !important;
}
.catalog_button:hover {
transition: 0.3s;
background-color: #7e66d5 !important;
background-color: #6940ff !important;
}
.catalog_button:active {
@ -44,51 +44,50 @@
.catalog_search {
border-radius: 0px 5px 5px 5px;
background-color: #563cb0;
background-color: #123EAB;
}
#searchPanel label {
display: inline-block;
border-radius: 5px 5px 0px 0px;
color: #ececec;
background-color: #9d88e6;
background-color: #86f;
}
#searchPanel input[type=radio] {
display: none;
display: none;
}
#searchPanel label {
cursor: pointer;
user-select: none;
cursor: pointer;
user-select: none;
}
#searchPanel label:hover {
color: #ffffff;
color: #ffffff;
}
#searchPanel input[type=radio] + label:active,
#searchPanel input[type=radio]:checked + label:active {
background-color: #402d82;
#searchPanel input[type=radio]+label:active, #searchPanel input[type=radio]:checked+label:active {
background-color: #402d82;
}
#searchPanel input[type=radio]:checked + label {
color: #ffffff;
background-color: #563cb0;
#searchPanel input[type=radio]:checked+label {
color: #ffffff;
background-color: #123EAB;
}
#searchPanel input[type=radio]:disabled + label {
background: #241c3d;
color: #c4c4c4;
#searchPanel input[type=radio]:disabled+label {
background: #241c3d;
color: #c4c4c4;
}
.catalog_search_line {
border-radius: 3px 0px 0px 3px;
border-radius: 3px;
background-color: #fbf9ff !important;
}
.catalog_search_button {
border-radius: 0px 3px 3px 0px;
border-radius: 3px;
background-color: #d53737;
}
@ -98,4 +97,60 @@
.catalog_search_button:active {
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) {}

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

@ -1,12 +1,13 @@
.info_panel {
height: 230px;
height: 280px;
overflow: hidden;
}
.info_panel img {
left: 10vw;
bottom: 32vw;
scale: 1.2;
min-width: 100%;
min-height: 200%;
position: relative;
object-fit: cover;
z-index: 0;
@ -14,7 +15,10 @@
.info_panel .container {
/* position: absolute; */
top: 50%;
height: 0px !important;
z-index: 15;
position: relative;
}
.info_panel .container p {
@ -24,7 +28,7 @@
.info_panel .button_call {
width: 350px;
margin-left: 5vw;
margin-left: 2vw;
background-color: #57a946;
}
@ -34,4 +38,35 @@
.info_panel .button_call:active {
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) {}

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

@ -35,4 +35,22 @@ main {
.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) {} */