mirror of https://github.com/istio/istio.io.git
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
Martin Taillefer
parent
c2b96efd07
commit
ce63a064e7
|
|
@ -61,12 +61,7 @@ layout: compress
|
|||
<![endif]-->
|
||||
</head>
|
||||
|
||||
{% if page.bodyclass == nil %}
|
||||
<body class="{{page.layout}}">
|
||||
{% else %}
|
||||
<body class="{{page.bodyclass}}">
|
||||
{% endif %}
|
||||
|
||||
<body>
|
||||
<script src="{{home}}/js/navtree.js"></script>
|
||||
|
||||
{{ content }}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ layout: default
|
|||
---
|
||||
{% include home.html %}
|
||||
|
||||
<div class="container">
|
||||
<div class="container blog">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-lg-7 nofloat center-block {{page.type}}">
|
||||
{{ content }}
|
||||
|
|
@ -15,4 +15,3 @@ layout: default
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{home}}/js/mc-validate.js"></script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ layout: default
|
|||
{% include home.html %}
|
||||
{% include doc-top-nav.html %}
|
||||
|
||||
<div class="container">
|
||||
<div class="container docs">
|
||||
<div class="row">
|
||||
<div class="col-md-11 nofloat center-block">
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
<div class="container">
|
||||
<div class="container faq">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-lg-7 nofloat center-block {{page.type}}">
|
||||
{{ content }}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
right: 45px;
|
||||
margin-top: 15px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 1024px) {
|
||||
display: block !important;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,27 +72,28 @@
|
|||
}
|
||||
|
||||
.read-more {
|
||||
font-size: 14px;
|
||||
margin: $spacing--xl 0;
|
||||
font-size: 14px;
|
||||
margin: $spacing--xl 0;
|
||||
|
||||
.read-more-text::after {
|
||||
background: url('../img/more-arrow.svg') no-repeat center/contain;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin: 0 0 0 10px;
|
||||
vertical-align: middle;
|
||||
width: 24px;
|
||||
}
|
||||
.read-more-text::after {
|
||||
background: url('../img/more-arrow.svg') no-repeat center/contain;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin: 0 0 0 10px;
|
||||
vertical-align: middle;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.read-more-text {
|
||||
&:hover {
|
||||
&:after {
|
||||
background: url('../img/more-arrow-dark.svg') no-repeat center/contain;
|
||||
.read-more-text {
|
||||
&:hover {
|
||||
&:after {
|
||||
background: url('../img/more-arrow-dark.svg') no-repeat center/contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding-bottom: $spacing--xxl;
|
||||
width: 100%;
|
||||
|
|
@ -132,4 +133,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -26,8 +26,11 @@
|
|||
|
||||
.jumbotron {
|
||||
margin: 0;
|
||||
padding-left: 200px;
|
||||
padding-right: 200px;
|
||||
|
||||
@media (min-width: $desktop-large) {
|
||||
padding-left: 200px;
|
||||
padding-right: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.traffic, .policy {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ footer {
|
|||
box-shadow: 0px 500px 0px 500px $footerColor;
|
||||
color: $white;
|
||||
overflow: hidden;
|
||||
padding: 15px 0 0px;
|
||||
padding: 15px 0 50px 0;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
|
|
|||
|
|
@ -29,8 +29,10 @@ $(document).ready(function() {
|
|||
*/
|
||||
getAjaxSubmitUrl: function() {
|
||||
var url = $("form#mc-embedded-subscribe-form").attr("action");
|
||||
url = url.replace("/post?u=", "/post-json?u=");
|
||||
url += "&c=?";
|
||||
if (url) {
|
||||
url = url.replace("/post?u=", "/post-json?u=");
|
||||
url += "&c=?";
|
||||
}
|
||||
return url;
|
||||
},
|
||||
/**
|
||||
|
|
|
|||
25
js/search.js
25
js/search.js
|
|
@ -14,5 +14,30 @@
|
|||
e.preventDefault();
|
||||
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));
|
||||
|
|
|
|||
Loading…
Reference in New Issue