istio
/
istio.io
mirror of https://github.com/istio/istio.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve mobile layout 

* Change search box size on mobile displays

*Aalways set body class to docs, set container to layout type

* partial for #213

* fix shifting text on mobile displays with blog page
This commit is contained in:
Dave 2017-05-15 12:20:40 -04:00 committed by Martin Taillefer
parent c2b96efd07
commit ce63a064e7
10 changed files with 58 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
_layouts/base.html
View File

@ -61,12 +61,7 @@ layout: compress
<![endif]--> <![endif]-->
</head> </head>
{% if page.bodyclass == nil %} <body>
<body class="{{page.layout}}">
{% else %}
<body class="{{page.bodyclass}}">
{% endif %}
<script src="{{home}}/js/navtree.js"></script> <script src="{{home}}/js/navtree.js"></script>
{{ content }} {{ content }}

3
_layouts/blog.html
View File

@ -3,7 +3,7 @@ layout: default
--- ---
{% include home.html %} {% include home.html %}
<div class="container"> <div class="container blog">
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-10 col-lg-7 nofloat center-block {{page.type}}"> <div class="col-sm-12 col-md-10 col-lg-7 nofloat center-block {{page.type}}">
{{ content }} {{ content }}
@ -15,4 +15,3 @@ layout: default
</div> </div>
</div> </div>
<script src="{{home}}/js/mc-validate.js"></script>

2
_layouts/docs.html
View File

@ -4,7 +4,7 @@ layout: default
{% include home.html %} {% include home.html %}
{% include doc-top-nav.html %} {% include doc-top-nav.html %}
<div class="container"> <div class="container docs">
<div class="row"> <div class="row">
<div class="col-md-11 nofloat center-block"> <div class="col-md-11 nofloat center-block">
<div class="row"> <div class="row">

2
_layouts/faq.html
View File

@ -1,7 +1,7 @@
--- ---
layout: default layout: default
--- ---
<div class="container"> <div class="container faq">
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-10 col-lg-7 nofloat center-block {{page.type}}"> <div class="col-sm-12 col-md-10 col-lg-7 nofloat center-block {{page.type}}">
{{ content }} {{ content }}

2
_sass/base/_common.scss
View File

@ -40,7 +40,7 @@
right: 45px; right: 45px;
margin-top: 15px; margin-top: 15px;
@media (min-width: 768px) { @media (min-width: 1024px) {
display: block !important; display: block !important;
margin-left: 20px; margin-left: 20px;
} }

33
_sass/layouts/_blog.scss
View File

@ -72,27 +72,28 @@
} }
.read-more { .read-more {
font-size: 14px; font-size: 14px;
margin: $spacing--xl 0; margin: $spacing--xl 0;
.read-more-text::after { .read-more-text::after {
background: url('../img/more-arrow.svg') no-repeat center/contain; background: url('../img/more-arrow.svg') no-repeat center/contain;
content: ''; content: '';
display: inline-block; display: inline-block;
height: 24px; height: 24px;
margin: 0 0 0 10px; margin: 0 0 0 10px;
vertical-align: middle; vertical-align: middle;
width: 24px; width: 24px;
} }
.read-more-text { .read-more-text {
&:hover { &:hover {
&:after { &:after {
background: url('../img/more-arrow-dark.svg') no-repeat center/contain; background: url('../img/more-arrow-dark.svg') no-repeat center/contain;
}
} }
} }
}
} }
.pagination { .pagination {
padding-bottom: $spacing--xxl; padding-bottom: $spacing--xxl;
width: 100%; width: 100%;

7
_sass/layouts/_landing.scss
View File

@ -26,8 +26,11 @@
.jumbotron { .jumbotron {
margin: 0; margin: 0;
padding-left: 200px;
padding-right: 200px; @media (min-width: $desktop-large) {
padding-left: 200px;
padding-right: 200px;
}
} }
.traffic, .policy { .traffic, .policy {

2
_sass/modules/_footer.scss
View File

@ -3,7 +3,7 @@ footer {
box-shadow: 0px 500px 0px 500px $footerColor; box-shadow: 0px 500px 0px 500px $footerColor;
color: $white; color: $white;
overflow: hidden; overflow: hidden;
padding: 15px 0 0px; padding: 15px 0 50px 0;
position: relative; position: relative;
@media (max-width: 767px) { @media (max-width: 767px) {

6
js/mc-validate.js
View File

@ -29,8 +29,10 @@ $(document).ready(function() {
*/ */
getAjaxSubmitUrl: function() { getAjaxSubmitUrl: function() {
var url = $("form#mc-embedded-subscribe-form").attr("action"); var url = $("form#mc-embedded-subscribe-form").attr("action");
url = url.replace("/post?u=", "/post-json?u="); if (url) {
url += "&c=?"; url = url.replace("/post?u=", "/post-json?u=");
url += "&c=?";
}
return url; return url;
}, },
/** /**

25
js/search.js
View File

@ -14,5 +14,30 @@
e.preventDefault(); e.preventDefault();
doSearch(); doSearch();
}); });
function setSearchBoxSize() {
var width = screen.width < 1024 ? "20" : "30";
$("input[name='q']").attr("size", width);
}
var resizeTimeout;
function resizeThrottler() {
function timeoutHandler() {
resizeTimeout = null;
actualResizeHandler();
}
// ignore resize events as long as an actualResizeHandler execution is in the queue
if ( !resizeTimeout ) {
resizeTimeout = setTimeout(timeoutHandler, 66);
}
}
function actualResizeHandler() {
setSearchBoxSize();
}
$(window).on('resize', resizeThrottler);
setSearchBoxSize();
}); });
}(jQuery)); }(jQuery));