Полностью переделан header Правки для PR-9remotes/origin/PR-46
booblegum
9 years ago
parent
ae875b576f
commit
1327847e53
17 changed files with 1073 additions and 527 deletions
@ -0,0 +1,186 @@ |
||||
{% load staticfiles %} |
||||
{% load thumbnail %} |
||||
{% load user_tags %} |
||||
{% load activeurl %} |
||||
{% load sass_tags %} |
||||
{% load common_tags %} |
||||
|
||||
{% if request.user.is_contractor %} |
||||
{% url 'users:contractor-profile' pk=request.user.pk as profile_url %} |
||||
{% elif request.user.is_customer %} |
||||
{% url 'users:customer-profile-open-projects' pk=request.user.pk as profile_url %} |
||||
{% endif %} |
||||
|
||||
<link rel='stylesheet' href='{% sass_src "partials/sass/header.sass" %}'> |
||||
|
||||
<div class="wrTop {% if request.user.is_authenticated %} disTab {% endif %}"> |
||||
<div class="container-fluid topMain"> |
||||
<div class="row"> |
||||
<div style="float: left"> |
||||
<a href="/"> |
||||
<div class="logo"></div> |
||||
</a> |
||||
</div> |
||||
|
||||
{% activeurl %} |
||||
<div style="height: 100%; display: inline-block; text-align: center"> |
||||
{% if request.user.is_authenticated %} |
||||
|
||||
<ul class="mainMenu"> |
||||
<li class="icon_tm1"> |
||||
<a href="{% url 'projects:project-filter' %}">Поиск заказов</a> |
||||
<span></span> |
||||
</li> |
||||
|
||||
{% if request.user.is_contractor %} |
||||
<li class="officeList icon_tml"> |
||||
<a href="{% url 'users:contractor-office' %}"> |
||||
Мой офис {% count_new_message_orders request.user %} |
||||
</a> |
||||
<span></span> |
||||
</li> |
||||
<li class="icon_tm3"> |
||||
<a href="{% url 'work_sell:list' %}">Готовые проекты</a> |
||||
<span></span> |
||||
</li> |
||||
{% endif %} |
||||
|
||||
{% if request.user.is_customer %} |
||||
<li class="icon_tm2"> |
||||
<a href="{% url 'users:contractor-filter' %}">Поиск исполнителей</a> |
||||
<span></span> |
||||
</li> |
||||
<li class="icon_tm3"> |
||||
<a href="{% url 'work_sell:list' %}">Готовые проекты</a> |
||||
<span></span> |
||||
</li> |
||||
{% endif %} |
||||
</ul> |
||||
<div style="clear: both"></div> |
||||
{% else %} |
||||
<ul class="mainMenu"> |
||||
<li class="icon_tm1"> |
||||
<a href="{% url 'projects:project-filter' %}">Поиск заказов</a> |
||||
<span></span> |
||||
</li> |
||||
<li class="icon_tm2"> |
||||
<a href="{% url 'users:contractor-filter' %}">Поиск исполнителей</a> |
||||
<span></span> |
||||
</li> |
||||
<li class="icon_tm3"> |
||||
<a href="{% url 'work_sell:list' %}">Готовые проекты</a> |
||||
<span></span> |
||||
</li> |
||||
</ul> |
||||
|
||||
{% endif %} |
||||
</div> |
||||
{% endactiveurl %} |
||||
<div style="float: right"> |
||||
{% if request.user.is_authenticated %} |
||||
{% if request.user.is_contractor %} |
||||
{% contractor_indicator request.user %} |
||||
{% endif %} |
||||
|
||||
<div class="infoProfile disTab"> |
||||
<div class="btn-group" role="group"> |
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" |
||||
aria-haspopup="true" aria-expanded="false"> |
||||
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span> |
||||
</button> |
||||
<ul class="dropdown-menu menu-drop-new"> |
||||
{% if request.user.is_contractor %} |
||||
<li class="icon_mm1"> |
||||
<a href="{% url 'auth_login' %}"> |
||||
Войти заказчиком |
||||
<span></span> |
||||
</a> |
||||
</li> |
||||
{% else %} |
||||
<li class="icon_mm2"> |
||||
<a href="{% url 'auth_login' %}"> |
||||
Войти исполнителем |
||||
<span></span> |
||||
</a> |
||||
</li> |
||||
{% endif %} |
||||
<li class="icon_mm8"> |
||||
<a href="{{ profile_url }}"> |
||||
Профиль<span></span> |
||||
</a> |
||||
</li> |
||||
<li class="icon_chat"> |
||||
<a href="{% url 'chat:chat-user' %}">Сообщения<span></span></a> |
||||
{% if request.user %} |
||||
<div class="circle js-all-messages">{{ new_messages_count| max_count:99 }}</div> |
||||
{# {% count_new_message request.user %}#} |
||||
{% endif %} |
||||
</li> |
||||
<li class="icon_mm4"> |
||||
<a href="{% url 'wallets:score-detail' pk=request.user.pk %}">Счет<span></span></a> |
||||
</li> |
||||
<li class="icon_mm5"> |
||||
<a href="{% url 'users:user-profile-edit' pk=request.user.pk %}">Настройки<span></span></a> |
||||
</li> |
||||
|
||||
<li class="icon_mm6"> |
||||
<a href="/pages/faq">FAQ<span></span></a> |
||||
</li> |
||||
{% if request.user.is_contractor %} |
||||
<li class="icon_mm2"> |
||||
<a href="{% url 'auth_logout' %}">Выйти<span></span></a> |
||||
</li> |
||||
{% else %} |
||||
<li class="icon_mm7"> |
||||
<a href="{% url 'auth_logout' %}">Выйти<span></span></a> |
||||
</li> |
||||
{% endif %} |
||||
|
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="imgProfile"> |
||||
{% if request.user.is_contractor %} |
||||
<a href="{{ profile_url }}"> |
||||
{% if request.user.avatar %} |
||||
{% thumbnail request.user.avatar "75x75" crop="center" as im %} |
||||
<img src="{{ im.url }}" alt="profile-image"> |
||||
{% endthumbnail %} |
||||
{% else %} |
||||
<img src="{% static 'img/profile.jpg' %}" alt="profile-image"> |
||||
{% endif %} |
||||
</a> |
||||
{% elif request.user.is_customer %} |
||||
<a href="{{ profile_url }}"> |
||||
{% if request.user.avatar %} |
||||
{% thumbnail request.user.avatar "75x75" crop="center" as im %} |
||||
<img src="{{ im.url }}" alt="profile-image"> |
||||
{% endthumbnail %} |
||||
{% else %} |
||||
<img src="{% static 'img/profile.jpg' %}" alt="profile-image"> |
||||
{% endif %} |
||||
</a> |
||||
{% endif %} |
||||
</div> |
||||
{% if request.user.is_contractor %} |
||||
<div class="user-info"> |
||||
<a href="{% url 'wallets:score-detail' pk=request.user.pk %}" |
||||
class="cash">{{ user_balance|floatformat:2 }}р</a> |
||||
<a href="{% url 'chat:chat-user' %}#order{{ fist_order_id }}" |
||||
class="icon_hand">{{ num_orders_in_work }}</a> |
||||
<a href="{% url 'chat:chat-user' %}" class="icon_chat js-all-messages"> |
||||
{{ new_messages_count| max_count:99 }} |
||||
</a> |
||||
</div> |
||||
{% endif %} |
||||
|
||||
{% else %} |
||||
<a href="{% url 'registration_register' %}" class="reg">Регистрация</a> |
||||
<a href="{% url 'auth_login' %}"> |
||||
<div class="lock"></div> |
||||
</a> |
||||
{% endif %} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,370 @@ |
||||
@import "base/variavles" |
||||
|
||||
.wrTop |
||||
width: 100% |
||||
background-color: black |
||||
|
||||
.topMain |
||||
width: 1200px |
||||
margin: 0 auto |
||||
color: #ffffff |
||||
.dropdown-menu > li > a |
||||
display: inline-block |
||||
.col-lg-7 |
||||
width: 55% |
||||
.col-lg-2 |
||||
width: 19% |
||||
.mainMenu li |
||||
cursor: pointer |
||||
padding-right: 25px |
||||
a |
||||
font-size: 15px |
||||
//&:hover |
||||
cursor: pointer |
||||
|
||||
.user-info |
||||
float: right |
||||
height: 100% |
||||
a |
||||
display: block |
||||
color: white |
||||
cursor: pointer |
||||
&:hover |
||||
text-decoration: none |
||||
color: #FF0029 |
||||
.cash |
||||
text-align: right |
||||
padding-top: 4px |
||||
.icon_hand |
||||
padding-left: 26px |
||||
background: |
||||
image: url("#{$static}/img/icons/icon_hands.png") |
||||
size: 24px 24px |
||||
repeat: no-repeat |
||||
&:hover |
||||
background-image: url("#{$static}/img/icons/icon_hands_red.png") |
||||
.icon_chat |
||||
margin-top: 4px |
||||
padding-left: 26px |
||||
background: |
||||
image: url("#{$static}/img/icons/icon_speach-ball.png") |
||||
size: 18px 18px |
||||
repeat: no-repeat |
||||
&:hover |
||||
background-image: url("#{$static}/img/icons/icon_speach-ball_red.png") |
||||
|
||||
.circle |
||||
background-color: red |
||||
border-radius: 50% |
||||
width: 30px |
||||
height: 30px |
||||
line-height: 30px |
||||
display: inline-block |
||||
text-align: center |
||||
//align-items: center |
||||
|
||||
.logo |
||||
width: 183px |
||||
height: 36px |
||||
background: url('#{$static}/img/logo.png') no-repeat center |
||||
background-size: cover |
||||
float: left |
||||
margin: 18px 0 21px 10px |
||||
cursor: pointer |
||||
|
||||
.mainMenu |
||||
float: left |
||||
margin: 26px 0 0 0 |
||||
padding-left: 60px |
||||
li |
||||
float: left |
||||
position: relative |
||||
padding-right: 30px |
||||
list-style: none |
||||
a |
||||
text-decoration: none |
||||
border-bottom: 3px solid transparent |
||||
-webkit-transition: all 0.4s ease-out |
||||
-moz-transition: all 0.4s ease-out |
||||
transition: all 0.4s ease-out |
||||
&:hover a |
||||
border-color: #ff0029 |
||||
span |
||||
content: '' |
||||
position: absolute |
||||
height: 23px |
||||
left: 0 |
||||
top: -1px |
||||
.icon_tm1 span |
||||
width: 26px |
||||
//background: url('../img/listMain.png') no-repeat left |
||||
background-size: cover |
||||
background: url('#{$static}/img/listMain.png') no-repeat 0 0 |
||||
.icon_tm2 span |
||||
width: 22px |
||||
background-size: cover |
||||
background: url('#{$static}/img/listMain.png') no-repeat -26px 0 |
||||
.icon_tm3 span |
||||
width: 24px |
||||
background-size: cover |
||||
background: url('#{$static}/img/listMain.png') no-repeat -48px 0 |
||||
|
||||
.icon_tml span |
||||
content: '' |
||||
position: absolute |
||||
width: 27px |
||||
height: 24px |
||||
//left: -35px |
||||
top: 0 |
||||
background: url('#{$static}/img/list4.png') no-repeat center !important |
||||
background-size: cover !important |
||||
|
||||
.icon_tml:hover span |
||||
background: url('#{$static}/img/list4tml.png') no-repeat center !important |
||||
background-size: cover !important |
||||
|
||||
.icon_tm1:hover span |
||||
width: 26px |
||||
background: url('#{$static}/img/listMain2.png') no-repeat left !important |
||||
background-size: cover |
||||
background-position: 0 0 !important |
||||
|
||||
.icon_tm2:hover span |
||||
width: 22px |
||||
background: url('#{$static}/img/listMain2.png') no-repeat left !important |
||||
background-size: cover |
||||
background-position: -26px 0 !important |
||||
|
||||
.icon_tm3:hover span |
||||
width: 26px !important |
||||
background: url('#{$static}/img/listMain2.png') no-repeat left !important |
||||
background-size: cover |
||||
background-position: -49px 0 !important |
||||
|
||||
.rating |
||||
width: 46px |
||||
height: 46px |
||||
float: right |
||||
border-radius: 100% |
||||
background-color: #4D4D4D |
||||
margin: 15px 0 0 10px |
||||
position: relative |
||||
|
||||
.ratingInset |
||||
width: 46px |
||||
height: 46px |
||||
border-radius: 100% |
||||
background-color: #FF0027 |
||||
position: absolute |
||||
/*left:-1.859px;*/ |
||||
/*bottom: 3px;*/ |
||||
clip: rect(0, 22px, 50px, 0) |
||||
transform: rotate(-90deg) |
||||
|
||||
.iconRating |
||||
width: 100% |
||||
height: 100% |
||||
position: absolute |
||||
left: 0 |
||||
top: 0 |
||||
background: url('#{$static}/img/button12.png') no-repeat center |
||||
|
||||
.ratingPer |
||||
color: #ff2c2c |
||||
font-size: 18px |
||||
font-family: 'pfdintextcomppro-regular', sans-serif |
||||
float: right |
||||
margin: 28px 0 0 9px |
||||
cursor: pointer |
||||
|
||||
.mainMenu li |
||||
&:last-child |
||||
padding-right: 0 |
||||
a |
||||
color: white |
||||
font-size: 18px |
||||
padding: 30px 0 27px 40px |
||||
font-family: 'pfbeausanspro-reg', sans-serif |
||||
&.active > a |
||||
border-color: #ff0029 |
||||
&.icon_tm1.active span |
||||
background: url('#{$static}/img/listMain2.png') no-repeat !important |
||||
&.officeList.active span |
||||
background: url('#{$static}/img/list4tml.png') no-repeat center !important |
||||
&.icon_tm2.active span |
||||
background: url('#{$static}/img/listMain2.png') no-repeat center !important |
||||
&.icon_tm3.active span |
||||
background: url('#{$static}/img/listMain2.png') no-repeat right !important |
||||
|
||||
li.officeList.icon_tml > a > .count |
||||
display: inline-block |
||||
color: red |
||||
font-family: 'pfbeausanspro-reg', sans-serif |
||||
//padding: 5px 7px 3px 7px |
||||
background: none |
||||
border-radius: 0 |
||||
position: inherit |
||||
//right: -34px |
||||
//top: -4px |
||||
|
||||
.reg, .reg:link, .reg:visited |
||||
color: #fb1818 |
||||
font-size: 16px |
||||
text-transform: uppercase |
||||
float: left |
||||
line-height: 75px |
||||
font-family: 'pfdintextcomppro-regular', sans-serif |
||||
letter-spacing: 4px |
||||
text-decoration: none |
||||
|
||||
.lock |
||||
width: 75px |
||||
height: 75px |
||||
background: url('#{$static}/img/lock.png') no-repeat center, white |
||||
float: right |
||||
cursor: pointer |
||||
margin-left: 20px |
||||
margin-right: 0 |
||||
|
||||
.imgProfile |
||||
width: 75px |
||||
height: 75px |
||||
float: right |
||||
margin: 0 |
||||
padding-left: 5px |
||||
img |
||||
display: block |
||||
width: 100% |
||||
height: 100% |
||||
|
||||
.infoProfile |
||||
float: right |
||||
.btn-group |
||||
.btn |
||||
width: 75px |
||||
height: 75px |
||||
float: left |
||||
border-radius: 0 !important |
||||
background-color: black |
||||
border: none |
||||
span |
||||
color: white |
||||
font-size: 26px |
||||
.dropdown-toggle |
||||
&:hover, &:active, &:focus |
||||
-webkit-box-shadow: inset 0 3px 5px rgba(255, 0, 39, 0.99) |
||||
-moz-box-shadow: inset 0 3px 5px rgba(255, 0, 39, 0.99) |
||||
box-shadow: inset 0 3px 5px rgba(255, 0, 39, 0.99) |
||||
background-color: rgb(255, 0, 39) |
||||
.dropdown-menu |
||||
border-radius: 0 |
||||
background-color: black |
||||
left: -174px |
||||
margin: -1px 100% 0 0 |
||||
float: left |
||||
width: 250px |
||||
height: auto |
||||
padding: 30px 20px 15px 40px |
||||
border-top: 3px solid #ff2c2c |
||||
li |
||||
margin-bottom: 10px |
||||
&:last-child |
||||
margin-bottom: 0 |
||||
a |
||||
color: white |
||||
font-size: 17px |
||||
font-family: 'pfbeausanspro-reg', sans-serif |
||||
position: relative |
||||
&:link, &:visited |
||||
color: white |
||||
font-size: 17px |
||||
font-family: 'pfbeausanspro-reg', sans-serif |
||||
position: relative |
||||
&:hover, &:active |
||||
background-color: black !important |
||||
color: #ff2c2c |
||||
span |
||||
content: '' |
||||
position: absolute |
||||
width: 20px |
||||
left: -18px |
||||
top: 4px |
||||
.icon_mm1 a span |
||||
height: 20px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu.png') no-repeat 0 0 |
||||
.icon_mm2 a span |
||||
height: 22px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu.png') no-repeat 0 -20px |
||||
.icon_mm3 a span |
||||
height: 13px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu.png') no-repeat 0 -42px |
||||
top: 6px |
||||
.icon_mm4 a span |
||||
height: 20px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu.png') no-repeat 0 -55px |
||||
.icon_mm5 a span |
||||
height: 20px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu.png') no-repeat 0 -75px |
||||
.icon_mm6 a span |
||||
height: 20px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu.png') no-repeat 0 -95px |
||||
.icon_mm7 a span |
||||
height: 20px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu.png') no-repeat 0 0 |
||||
.icon_mm8 a span |
||||
height: 20px |
||||
background-size: contain |
||||
background: url('#{$static}/img/user-5.png') no-repeat 0 0 |
||||
.icon_chat a span |
||||
height: 20px |
||||
background: |
||||
image: url("#{$static}/img/icons/icon_speach-ball.png") |
||||
size: contain |
||||
repeat: no-repeat |
||||
|
||||
.icon_mm1 a:hover span |
||||
height: 20px |
||||
background: url('#{$static}/img/menu2.png') no-repeat center !important |
||||
background-size: cover !important |
||||
background-position: 0 0 !important |
||||
.icon_mm2 a:hover span |
||||
height: 22px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu2.png') no-repeat 0 -20px |
||||
.icon_mm3 a:hover span |
||||
height: 13px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu2.png') no-repeat 0 -42px |
||||
.icon_mm4 a:hover span |
||||
height: 20px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu2.png') no-repeat 0 -55px |
||||
.icon_mm5 a:hover span |
||||
height: 20px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu2.png') no-repeat 0 -75px |
||||
.icon_mm6 a:hover span |
||||
height: 20px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu2.png') no-repeat 0 -95px |
||||
.icon_mm7 a:hover span |
||||
height: 20px |
||||
background-size: cover |
||||
background: url('#{$static}/img/menu2.png') no-repeat 0 0 |
||||
.icon_mm8 a:hover span |
||||
height: 20px |
||||
background-size: contain |
||||
background: url('#{$static}/img/user-4.png') no-repeat 0 0 |
||||
.icon_chat a:hover span |
||||
height: 20px |
||||
background: |
||||
image: url("#{$static}/img/icons/icon_speach-ball_red.png") |
||||
size: contain |
||||
repeat: no-repeat |
||||
@ -1,5 +1,5 @@ |
||||
<p class="ratingPer">{{ current_indicator }}%</p> |
||||
<div class="rating"> |
||||
<div class="ratingInset" style="clip:rect(0px, {{ current_indicator_px }}px, 50px, 0px);"></div> |
||||
<div class="iconRating"></div> |
||||
<p class="ratingPer">{{ current_indicator }}%</p> |
||||
</div> |
||||
|
||||
Loading…
Reference in new issue