From 78bc32bd59e684c4932955e18a3d00ecd95a257c Mon Sep 17 00:00:00 2001 From: fefa4ka Date: Thu, 30 Jun 2016 19:23:40 +0300 Subject: [PATCH] flexible and mobile layout --- zsite/static/imgs/logo_en_mobile.svg | 17 ++++ zsite/static/imgs/logo_ru_mobile.svg | 17 ++++ zsite/static/less/about.less | 40 +++++++- zsite/static/less/blog.less | 37 ++++++-- zsite/static/less/consultation.less | 11 ++- zsite/static/less/footer.less | 64 +++++++++---- zsite/static/less/header.less | 131 +++++++++++++++++++-------- zsite/static/less/main.less | 5 + zsite/static/less/mainpage.less | 21 ++++- zsite/static/less/service.less | 3 + zsite/static/less/sub_content.less | 35 ++++++- zsite/templates/base.html | 5 +- zsite/templates/menu_header.html | 2 +- 13 files changed, 309 insertions(+), 79 deletions(-) create mode 100644 zsite/static/imgs/logo_en_mobile.svg create mode 100644 zsite/static/imgs/logo_ru_mobile.svg diff --git a/zsite/static/imgs/logo_en_mobile.svg b/zsite/static/imgs/logo_en_mobile.svg new file mode 100644 index 0000000..26f0bb4 --- /dev/null +++ b/zsite/static/imgs/logo_en_mobile.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/zsite/static/imgs/logo_ru_mobile.svg b/zsite/static/imgs/logo_ru_mobile.svg new file mode 100644 index 0000000..a6b1985 --- /dev/null +++ b/zsite/static/imgs/logo_ru_mobile.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/zsite/static/less/about.less b/zsite/static/less/about.less index 7d7cbf8..0a0b448 100644 --- a/zsite/static/less/about.less +++ b/zsite/static/less/about.less @@ -36,7 +36,7 @@ } -.about-organizations, .about-clients { +.about-organizations { .make-row(); li { @@ -62,6 +62,29 @@ } .about-organizations { + @media (min-width: 0) { + li { + min-height: 100px; + } + + p { + display: none; + } + + a { + font-size: 11px; + } + } + @media (min-width: @screen-phone) { + p { + display: block; + } + + a { + font-size: 12px; + } + } + li { text-align: center; p { @@ -70,14 +93,23 @@ vertical-align: middle; } - a { - font-size: 12px; - } } } + .about-clients { + + .make-row(); + li { + @media (min-width: 0) { + .make-xs-column(6); + } + @media (min-width: @screen-phone) { + .make-xs-column(3); + .make-sm-column(2); + } + height: 190px; h5 { diff --git a/zsite/static/less/blog.less b/zsite/static/less/blog.less index 61679b2..bbb7ab9 100644 --- a/zsite/static/less/blog.less +++ b/zsite/static/less/blog.less @@ -16,26 +16,43 @@ .news-block { padding: 0 15px; + } + + + .news-block .plugin-blog-category-all, .plugin-blog-category-cases { .make-row(); + + @media (min-width: 0px) { + li { + width: 100%; + } + } + @media (min-width: 0px) { + li { + .make-xs-column(12); - li { - .make-xs-column(6); - .make-sm-column(3); + font-size: 12px; - min-height: 140px; - - font-size: 12px; + vertical-align: top; - vertical-align: top; + .date { + font-size: 10px; - .date { - font-size: 10px; + margin-top: 2px; + } + } + } + + @media (min-width: @screen-xs) { + li { + .make-xs-column(6); + .make-sm-column(3); - margin-top: 2px; + min-height: 140px; } } } diff --git a/zsite/static/less/consultation.less b/zsite/static/less/consultation.less index 620982d..c261da0 100644 --- a/zsite/static/less/consultation.less +++ b/zsite/static/less/consultation.less @@ -63,7 +63,7 @@ @media (min-width: 0) { .btn-xs; } - @media (min-width: 530px) { + @media (min-width: 760px) { .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base); } } @@ -73,6 +73,15 @@ } .consultation-person { + @media (min-width: 0) { + display: none; + } + + @media (min-width: @screen-tablet) { + display: block; + + } + .modal-form { text-align: right; } diff --git a/zsite/static/less/footer.less b/zsite/static/less/footer.less index 1d785ee..8a5f166 100644 --- a/zsite/static/less/footer.less +++ b/zsite/static/less/footer.less @@ -27,7 +27,16 @@ footer { } .about { - .make-xs-column(4); + + @media (min-width: 0px) { + .make-xs-column(6); + + } + + @media (min-width: @screen-phone) { + .make-xs-column(4); + } + .make-sm-column(3); .make-md-column(2); @@ -48,15 +57,32 @@ footer { } .menu { - .make-xs-column(4); + .make-xs-column(2); @media (min-width: 0px) { + display: none; margin-left: 30px; width: 150px; + + .footer-slogan { + display: none; + } + + margin-top: 40px; + margin-left: 55px; } - @media (min-width: 530px) { + @media (min-width: @screen-phone) { + display: block; + margin-left: initial; + + .footer-slogan { + display: block; + } + + margin-top: 0px; + margin-left: 0px; } @@ -74,15 +100,15 @@ footer { } .content { - .make-xs-column(6); + .make-md-column(6); @media (min-width: 0px) { - display: none; - } + display: none; + } - @media (min-width: 1024px) { - display: block; - } + @media (min-width: 1024px) { + display: block; + } .footer-ratings { margin-top: 39px; @@ -99,16 +125,20 @@ footer { } .contacts { - .make-sm-column(3); - .make-md-column(2); + + white-space: nowrap; - @media (min-width: 0px) { - display: none; - } + @media (min-width: 0px) { + .make-xs-column(6); - @media (min-width: 530px) { - display: block; - } + } + + @media (min-width: @screen-phone) { + display: block; + .make-xs-column(4); + .make-sm-column(3); + .make-md-column(2); + } margin-top: 39px; diff --git a/zsite/static/less/header.less b/zsite/static/less/header.less index 5b1b4ae..b7810e7 100644 --- a/zsite/static/less/header.less +++ b/zsite/static/less/header.less @@ -5,65 +5,109 @@ margin-bottom: -10px; } + .header-logo { - - - - .make-xs-column(6); - .make-sm-column(6); - .make-md-column(4); - .make-lg-column(4); + + @media (min-width: 0) { + .make-xs-column(12); - a, a:hover, a:focus { - border: 0 !important; + h2 { + font-size: 18px; + line-height: 19px; + margin-top: 5px; + opacity: 0.5; + } + + .header-logo-mobile { + display: block; + + width: 100% + } + + .header-logo-desktop { + display: none; + } } + + @media (min-width: @screen-phone) { + .make-xs-column(6); + .make-sm-column(5); + .make-md-column(4); + + h2 { + font-size: 14px; + line-height: 17px; - h2 { - position: absolute; - top: 58px; - left: 176px; - width: 160px; + position: absolute; - opacity: 0.5; + top: 58px; + left: 176px; + max-width: 160px; + + opacity: 0.5; - line-height: 17px; + + + margin: 10px 0; + } - font-size: 14px; + .header-logo-mobile { + display: none; + } - margin: 10px 0; + .header-logo-desktop { + display: block; + } } -} + margin-bottom: 15px; -.header-content { + a, a:hover, a:focus { + border: 0 !important; + } - @media (min-width: 0) { - display: none; - } - @media (min-width: 1000px) { - display: inline-block; - } +} - .make-md-column(4); - .make-lg-column(4); +.header-content { + + @media (min-width: 0) { + display: none; + } + + @media (min-width: 980px) { + display: block; + } + .make-sm-column(4); + + strong { + white-space: nowrap; + } } .header-contacts { - .make-xs-column(6); + .make-sm-column(3); .make-md-column(4); - .make-lg-column(4); + // .make-lg-column(4); @media (min-width: 0px) { - display: none; + display: none; + } + + @media (min-width: @screen-phone) { + display: block; + } + + @media (min-width: @screen-phone) { + .make-sm-column-offset(4); } - @media (min-width: 530px) { - display: block; + @media (min-width: 980px) { + .make-sm-column-offset(0); } height: 128px; @@ -72,6 +116,8 @@ margin-top: -4px; + white-space: nowrap; + ul { margin-right: -5px; margin-bottom: 0; @@ -116,6 +162,17 @@ .header-menu-font { font-family: @font-family-monospace; + + .header-menu-contacts { + margin-left: 15px; + @media (min-width: 0) { + display: inline-block; + } + + @media (min-width: @screen-phone) { + display: none; + } + } } @@ -140,8 +197,8 @@ margin-right: 10px; } - @media (min-width: 1200px) { - width: 150px; + @media (min-width: 1070px) { + width: 13.5%; margin: 0; } @@ -177,14 +234,14 @@ display: none; } - @media (min-width: 1200px) { + @media (min-width: 1070px) { display: block; } li { vertical-align: top; font-size: 12px; - width: 150px; + width: 13.5%; } } diff --git a/zsite/static/less/main.less b/zsite/static/less/main.less index 130ad18..df0beb6 100644 --- a/zsite/static/less/main.less +++ b/zsite/static/less/main.less @@ -30,6 +30,11 @@ @import 'nice.less'; +.container { + width: 100%; + padding-left: 25px; + padding-right: 30px; +} a, a:hover, a:active, a:focus { text-decoration: none; diff --git a/zsite/static/less/mainpage.less b/zsite/static/less/mainpage.less index 1276074..80b5b43 100644 --- a/zsite/static/less/mainpage.less +++ b/zsite/static/less/mainpage.less @@ -2,8 +2,25 @@ .make-row(); .department { - .make-xs-column(12); - .make-sm-column(3); + @media (min-width: 0px) { + .make-xs-column(12); + + margin-bottom: 15px; + } + + @media (min-width: @screen-phone) { + .make-xs-column(6); + min-height: 240px; + + margin-bottom: 0; + } + + @media (min-width: @screen-tablet) { + min-height: 1px; + } + + .make-sm-column(6); + .make-md-column(3); ul { li { diff --git a/zsite/static/less/service.less b/zsite/static/less/service.less index f446e7d..052edc8 100644 --- a/zsite/static/less/service.less +++ b/zsite/static/less/service.less @@ -442,6 +442,9 @@ .make-row(); li { font-size: 12px; + + overflow: hidden; + img { margin-bottom: 5px; } diff --git a/zsite/static/less/sub_content.less b/zsite/static/less/sub_content.less index 4c75714..63044bb 100644 --- a/zsite/static/less/sub_content.less +++ b/zsite/static/less/sub_content.less @@ -1,20 +1,45 @@ .sub-content { .make-row(); .menu-xs { - .make-xs-column(12); + + @media (min-width: 0) { + .make-xs-column(12); width: 100%; + + margin-top: -10px; + + .header { + display: none; + } + + margin-bottom: 10px; + } - @media (min-width: @screen-md-min) { + + @media (min-width: @screen-tablet) { width: 140px; + margin-top: 0; + + .header { + display: block; + } } } .menu { - .make-lg-column(3); .make-md-column(3); + + @media (min-width: 0) { + display: none; + } + + @media (min-width: @screen-tablet) { + display: block; + } } + .menu, .menu-xs { // .make-sm-column(1); @@ -30,12 +55,12 @@ font-size: 12px; - @media (min-width: 320px) { + @media (min-width: 0) { display: inline-block; margin-right: 15px; } - @media (min-width: @screen-md-min) { + @media (min-width: @screen-tablet) { display: block; margin-bottom: 5px; } diff --git a/zsite/templates/base.html b/zsite/templates/base.html index 2b672e9..acde8a9 100644 --- a/zsite/templates/base.html +++ b/zsite/templates/base.html @@ -29,7 +29,8 @@
-
{% trans "— There is nothing impossible. Almost nothing" %}
+
{% trans "— There is nothing impossible. Almost nothing" %}
{% show_menu 0 1 100 100 "menu_footer.html" %}
diff --git a/zsite/templates/menu_header.html b/zsite/templates/menu_header.html index 4b563c6..efb9909 100644 --- a/zsite/templates/menu_header.html +++ b/zsite/templates/menu_header.html @@ -1,7 +1,7 @@ {% load i18n menu_tags cms_tags cache %} {% if children|length > 1 %} -

{% trans 'Our Services' %}

+

{% trans 'Our Services' %} {% page_attribute "page_title" "contacts" %}

    {% for child in children %}