Pavel Popeskul / savelovsky

Go to a project
Toggle navigation Toggle navigation pinning
Pavel Popeskul
1c876fd4 1 parent b79d0285

mobile last

Expand all
Inline Side-by-side
Showing 24 changed files with 360 additions and 86 deletions
......@@ -20,5 +20,8 @@
"bootstrap": "^3.3.6",
"jquery": "^2.2.1",
"bootstrap-select": "1.12.2"
},
"devDependencies": {
"sidr": "^2.2.1"
}
}
......
......@@ -9,15 +9,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -23,15 +23,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -23,15 +23,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
This diff is collapsed. Click to expand it.
......@@ -23,15 +23,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -21,6 +21,10 @@
<a href="/" class="icon icon__logo"></a>
</div>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<div class="promo__title">Выборы в Совет <br> депутатов Савёловского района</div>
<br>
......@@ -31,7 +35,7 @@
<button type="button" class="btn btn-default btn__big">Познакомится с кандидатами</button>
<div class="promo__nav">
<div class="promo__nav header__nav__wrapper">
<ul class="nav nav--promo">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="#">Кандидаты</a></li>
......
This diff is collapsed. Click to expand it.
......@@ -23,15 +23,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -23,15 +23,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -9,15 +9,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -9,6 +9,10 @@
<a href="/" class="icon icon__logo"></a>
</div>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<div class="promo__title">Выборы в Совет <br> депутатов Савёловского района</div>
<br>
......@@ -19,7 +23,7 @@
<button type="button" class="btn btn-default btn__big">Познакомится с кандидатами</button>
<div class="promo__nav">
<div class="promo__nav header__nav__wrapper">
<ul class="nav nav--promo">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="#">Кандидаты</a></li>
......
This diff is collapsed. Click to expand it.
$(document).ready(function() {
$('#right-menu').sidr({
name: 'sidr-right',
side: 'right',
source: '.header__nav__wrapper',
onOpen: function() {
$('.mobile-menu').addClass('active');
},
onClose: function() {
$('.mobile-menu').removeClass('active');
}
});
});
$(document).mouseup(function (e){
var container = $("#sidr-right");
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
$.sidr('close', 'sidr-right');
}
});
\ No newline at end of file
......
.btn {
outline: none;
white-space: normal;
&:active, &:focus {
outline: none;
......@@ -17,13 +18,16 @@
border: 1px solid #fb1e42;
color: white;
&:hover, &:focus {
&:hover, &:focus, &:active {
background-color: #fb1e42;
border: 1px solid #fb1e42;
color: white;
}
&:hover {
&:active {
background-color: #fb1e42;
border: 1px solid #fb1e42;
color: white;
}
}
......@@ -32,13 +36,16 @@
background-color: #125f8e;
border: 1px solid #125f8e;
&:hover, &:focus {
&:hover, &:focus, &:active {
background-color: #125f8e;
border: 1px solid #125f8e;
color: white;
}
&:hover {
&:active {
background-color: #125f8e;
border: 1px solid #125f8e;
color: white;
}
}
......@@ -56,24 +63,22 @@
letter-spacing: 0.09em;
transition: all 0.2s ease;
text-transform: uppercase;
&:hover {
background-color: rgba(18, 95, 142, 0.8);
color: white;
}
&:focus {
text-decoration: none;
background-color: #125f8e;
color: white;
@media(@xs){
width: 100%;
font-size: 12px;
padding: 10px 0px;
}
&:active {
&:hover, &:focus, &:active {
background-color: rgba(18, 95, 142, 0.8);
border: 1px solid rgba(18, 95, 142, 0.8);
color: white;
}
&:focus {
&:hover {
&:active {
background-color: rgba(18, 95, 142, 0.8);
border: 1px solid rgba(18, 95, 142, 0.8);
color: white;
}
}
......@@ -91,8 +96,18 @@
background: #fb1e42;
color: white;
&:hover, &:focus {
&:hover, &:focus, &:active {
background-color: #fb1e42;
border: 1px solid #fb1e42;
color: white;
}
&:hover {
&:active {
background-color: #fb1e42;
border: 1px solid #fb1e42;
color: white;
}
}
}
}
\ No newline at end of file
......
......@@ -2,6 +2,10 @@
.content {
min-height: 500px;
padding: 30px 0px;
@media(@md){
padding: 20px 0px;
min-height: inherit;
}
&__container {
.container();
......@@ -15,12 +19,22 @@
height: 150px;
position: relative;
overflow: hidden;
@media(@sm){
height: inherit;
width: 100%;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
@media(@sm){
position: relative;
left: inherit;
top: initial;
transform: none;
}
}
}
}
......@@ -186,7 +200,6 @@
}
}
.progress {
position: relative;
......
body, html{
min-width: 970px;
//min-width: 970px;
}
.head-h1 {
......
......@@ -8,6 +8,9 @@
//background-color: #D7D7D7;
background: #125f8e;
color: white;
@media(@md){
padding: 20px 0px;
}
&__container {
.container();
......@@ -15,14 +18,19 @@
&__left {
float: left;
@media(@md){
width: 100%;
text-align: center;
margin-bottom: 20px;
}
}
&__right {
float: right;
}
p {
//color: ;
@media(@md){
width: 100%;
text-align: center;
}
}
}
......
......@@ -14,20 +14,37 @@
&__logo {
.make-xs-column(2);
width: initial;
}
&__title {
font-size: 18px;
font-weight: bold;
margin-top: 10px;
@media(@md){
font-size: 14px;
margin-top: 0;
}
}
&__nav {
.make-xs-column(18.5);
@media(@md){
float: none;
width: 100%;
padding: 0px 60px 0px 67px;
}
&__wrapper {
@media(@md){
display: none;
}
}
}
&__do {
.make-xs-column(3.5);
.make-md-column(24);
.make-lg-column(3.5);
margin-top: 15px;
text-align: right;
......@@ -37,6 +54,76 @@
}
}
.mobile-menu {
position: absolute;
top: 20px;
right: 10px;
width: 43px;
height: 40px;
color: #345;
border: 2px solid white;
background: #125f8e;
z-index: 2;
cursor: pointer;
font-size: 20px;
display: none;
@media(@md){
display: block;
}
span {
position: relative;
background-color: white;
height: 2px;
display: block;
width: 22px;
margin: 17px auto 0;
//transition: all 0.4s;
//transition-delay: 0.3s;
&:before,
&:after {
content: '';
position: absolute;
display: block;
width: 20px;
height: 0;
left: 1px;
top: 50%;
margin-top: -7px;
//transition: all 0.3s 0.3s;
}
&:before {
box-shadow: 0 14px 0 1px white;
}
&:after {
box-shadow: 0 0 0 1px white;
}
}
&.active {
span {
background-color: transparent;
&:before {
transform: rotate(-45deg);
}
&:after {
transform: rotate(45deg);
}
&:before,
&:after {
margin-top: 0;
box-shadow: 0 0 0 1px white;
}
}
}
}
.nav {
&--promo {
......@@ -88,4 +175,6 @@
}
}
}
}
\ No newline at end of file
}
......
......@@ -6,5 +6,10 @@
width: 60px;
height: 68px;
background-size: cover;
@media(@md){
width: 45px;
height: 50px;
}
}
}
\ No newline at end of file
......
@import "../../bower_components/bootstrap/less/bootstrap";
@import "../../bower_components/bootstrap-select/less/bootstrap-select";
@import (inline)"../../bower_components/sidr/dist/stylesheets/jquery.sidr.dark.css";
@import "fonts";
@import "variables";
......
......@@ -3,6 +3,9 @@
text-align: center;
padding: 30px 0px;
color: #125f8e;
@media(@md){
padding: 0;
}
&__row {
.row;
......@@ -11,19 +14,36 @@
&__logo {
margin-bottom: 30px;
display: inline-block;
@media(@md){
margin-bottom: 10px;
}
}
&__title {
.head-h1;
@media(@md){
font-size: 20px;
}
@media(@xs){
font-size: 18px;
}
}
&__nav {
margin-top: 30px;
@media(@md){
display: block;
}
li {
margin: 0px 10px;
margin: 0px 10px 10px 10px;
@media(@xs){
width: 100%;
margin: 0px 0px 10px 0px;
}
a {
display: inline-block;
color: #125f8e;
font-size: 19px;
border-bottom: 1px rgba(18, 95, 142, 0.5) dashed;
......
......@@ -27,7 +27,7 @@
// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 970px;
@screen-lg: 990px;
@screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;
......@@ -58,12 +58,12 @@
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
@container-tablet: (950px + @grid-gutter-width);
@container-tablet: (100%);
//** For `@screen-sm-min` and up.
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: (950px + @grid-gutter-width);
@container-desktop: (100%);
//** For `@screen-md-min` and up.
@container-md: @container-desktop;
......
......@@ -6,17 +6,29 @@
padding: 20px 20px;
&__map {
.make-xs-column(10);
.make-xs-column(24);
.make-lg-column(10);
@media(@md){
padding: 0;
}
&__iframe {
width: 100%;
height: 200px;
@media(@md){
height: 300px;
}
}
}
&__description {
.make-xs-column(12);
.make-xs-column(24);
.make-lg-column(12);
margin-top: 80px;
@media(@md){
margin-top: 20px;
padding: 0;
}
}
&__label {
......@@ -57,8 +69,7 @@
}
&__block {
float: left;
margin: 0px -20px;
margin: 0px -10px;
margin-bottom: 20px;
&:last-child {
......@@ -68,28 +79,64 @@
&__profile {
.make-xs-column(24);
padding: 0;
margin-bottom: 20px;
@media(@sm){
padding: 0;
}
&__wrapper {
.make-xs-column(15);
.make-xs-column(24);
.make-md-column(15);
}
&__img {
.make-xs-column(9);
.make-xs-column(24);
.make-md-column(9);
padding: 0;
@media(@sm){
text-align: center;
//padding: 0;
}
}
&__description {
.make-xs-column(15);
.make-xs-column(24);
.make-md-column(15);
padding: 0;
@media(@sm){
//padding: 0;
}
&__wrapper {
.make-xs-column(15);
}
p {
@media(@sm){
font-size: 18px;
}
}
}
}
&__description {
.make-xs-column(8);
.make-xs-column(24);
.pull-right;
@media(@sm){
padding: 0;
}
p {
@media(@sm){
font-size: 18px;
}
}
&__wrapper {
.make-sm-column(24);
.make-md-column(9);
}
}
}
......