minicms/core
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

FEATURE #1525: responsive designs for small devices

Browse Source
This commit is contained in:
peter
2016-04-01 23:32:40 +02:00
parent 7a71bbe90e
commit 34060ebf2e
6 changed files with 114 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/visitor/cwbs_template/about.html
+3 -3
View File
@@ -36,7 +36,7 @@
</div>
<div id="content">
<div class="white-wrapper backgrounded text-center">
<div class="white-wrapper backgrounded text-center p-lr-50-sm">
<div class="row column text-center m-b-25">
<h2 id="about">O nás</h2>
</div>
@@ -68,13 +68,13 @@
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
</p>
</div>
</div>
<div class="green-wrapper clearfix">
<div class="row column text-center" id="questions">
<h4 class="w-t">MÁTE DOTAZY? NEBO NÁM CHCETE ZASLAT RYCHLOU POPTÁVKU?</h4>
<a href="#" class="button secondary m-t-25 large rounded">RYCHLÝ FORMULÁŘ</a>
</div>
</div>
</div>
<footer class="large">
<div class="row text-center">
<ul class="menu social-icons">
@@ -112,7 +112,7 @@
</li>
</ul>
<div class="clearfix"></div>
<ul class="menu">
<ul class="menu hide-for-small-only">
<li><a href="#">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
resources/views/visitor/cwbs_template/contact.html
+1 -1
View File
@@ -56,7 +56,7 @@
<iframe class="column large-12 medium-6 p-lr-0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2560.626144078246!2d14.390829515545695!3d50.074562779425236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470b95000e41d5fb%3A0xf58ae0d8a9f480ed!2zxaB2w6lkc2vDoSAxMTI3LzI5LCBTbcOtY2hvdiwgMTUwIDAwIFByYWhhLVByYWhhIDU!5e0!3m2!1scs!2scz!4v1458938407867" width="100%" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="large-6 column green-wrapper p-25" id="contact-form">
<div class="column large-12 medium-8 medium-centered p-lr-0">
<div class="column large-12 medium-8 medium-centered p-lr-0 p-lr-50-sm">
<h6 class="text-center uppercase m-b-25 bold">Rychlý formulář</h6>
<div class="column medium-6">
<input type="text" class="rounded large" placeholder="jméno a příjmení">
resources/views/visitor/cwbs_template/galerie.html
+1 -1
View File
@@ -225,7 +225,7 @@
</li>
</ul>
<div class="clearfix"></div>
<ul class="menu">
<ul class="menu hide-for-small-only">
<li><a href="#">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
resources/views/visitor/cwbs_template/homepage.html
+28 -28
View File
@@ -77,7 +77,7 @@
</script>
</div>
<div id="content">
<div class="row column text-center m-t-25">
<div class="row column text-center m-t-25 p-lr-50-sm">
<h2 id="assortment">Náš sortiment</h2>
<hr>
<p class="text-center">
@@ -91,7 +91,7 @@
</p>
</div>
<div class="row m-b-25 m-t-25" data-equalizer data-equalize-on="medium">
<div class="row m-b-25 m-t-25 p-lr-50-sm" data-equalizer data-equalize-on="medium">
<div class="column text-center small-12 medium-6 large-3" data-equalizer-watch>
<img class="thumbnail" src="http://placehold.it/250x250">
<h5 class="assortment-h5">Silikonové náramky</h5>
@@ -281,7 +281,7 @@
<a href="#" class="button secondary m-t-25 large rounded">RYCHLÝ FORMULÁŘ</a>
</div>
</div>
<div class="white-wrapper clearfix">
<div class="white-wrapper clearfix p-lr-50-sm">
<div class="row column" id="design">
<div class="columns medium-7">
<h6>Design a potisk</h6>
@@ -336,58 +336,58 @@
<button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span><i class="fa fa-fw fa-2x fa-chevron-left"></i></button>
<button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span><i class="fa fa-fw fa-2x fa-chevron-right"></i></button>
<li class="orbit-slide is-active row p-lr-15">
<div class="column medium-3">
<img src=" http://placehold.it/250x250">.
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
</li>
<li class="orbit-slide row p-lr-15">
<div class="column medium-3">
<img src=" http://placehold.it/250x250">.
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
</li>
<li class="orbit-slide row p-lr-15">
<div class="column medium-3">
<img src=" http://placehold.it/250x250">.
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
</li>
<li class="orbit-slide row p-lr-15">
<div class="column medium-3">
<img src=" http://placehold.it/250x250">.
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
</li>
@@ -432,7 +432,7 @@
</li>
</ul>
<div class="clearfix"></div>
<ul class="menu">
<ul class="menu hide-for-small-only">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
resources/views/visitor/cwbs_template/sortiment.html
+34 -34
View File
@@ -40,18 +40,18 @@
<div class="row column text-center m-b-25">
<h2 id="assortment">Silikonové náramky</h2>
</div>
<div class="row text-center">
<div class="product-category column medium-4 text-right">
<a href="#" class="button success large long rounded active">S debossem</a>
<div class="row text-center assorment-holder">
<div class="product-category column medium-4 small-12 text-right">
<a href="#" class="button success large long rounded active small-extra-large">S debossem</a>
</div>
<div class="product-category column medium-4">
<a href="#" class="button success large long rounded">S embossem</a>
<div class="product-category column medium-4 small-12">
<a href="#" class="button success large long rounded small-extra-large">S embossem</a>
</div>
<div class="product-category column medium-4 text-left">
<a href="#" class="button success large long rounded">S potiskem</a>
<div class="product-category column medium-4 small-12 text-left">
<a href="#" class="button success large long rounded small-extra-large">S potiskem</a>
</div>
<div class="clearfix"></div>
<p class="m-b-25 m-t-50">
<p class="m-b-25 m-t-50 p-lr-50-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore<br>
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br>
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>
@@ -64,71 +64,71 @@
<button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span><i class="fa fa-fw fa-2x fa-chevron-left"></i></button>
<button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span><i class="fa fa-fw fa-2x fa-chevron-right"></i></button>
<li class="orbit-slide is-active row p-lr-15">
<div class="column medium-3">
<img src=" http://placehold.it/250x250">.
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
</li>
<li class="orbit-slide row p-lr-15">
<div class="column medium-3">
<img src=" http://placehold.it/250x250">.
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
</li>
<li class="orbit-slide row p-lr-15">
<div class="column medium-3">
<img src=" http://placehold.it/250x250">.
</div>
<div class="column medium-3">
<div class="column medium- small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
</li>
<li class="orbit-slide row p-lr-15">
<div class="column medium-3">
<img src=" http://placehold.it/250x250">.
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="green-wrapper clearfix">
<div class="row column text-center" id="questions">
<h4 class="w-t">MÁTE DOTAZY? NEBO NÁM CHCETE ZASLAT RYCHLOU POPTÁVKU?</h4>
<a href="#" class="button secondary m-t-25 large rounded">RYCHLÝ FORMULÁŘ</a>
</div>
</div>
</div>
<footer class="large">
<div class="row text-center">
<ul class="menu social-icons">
@@ -166,7 +166,7 @@
</li>
</ul>
<div class="clearfix"></div>
<ul class="menu">
<ul class="menu hide-for-small-only">
<li><a href="#">Home</a></li>
<li><a href="#" class="active">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
resources/views/visitor/cwbs_template/style.css
Vendored
+39
View File
@@ -149,4 +149,43 @@ footer a:hover {color: #46c1be;}
#content .contact-detail h2{text-align: center; font-size: 1rem; font-weight: 500; margin-bottom: 25px; margin-top: 25px;}
#content .contact-p {text-align: center; padding-right: 0; font-size: 0.8rem; line-height: 1.1;}
}
@media (max-width:639px) {
.orbit.header .orbit-next, .orbit.header .orbit-previous {font-size: 0.7rem; transform: translateY(-20%);}
.orbit.header .orbit-slide {height: 500px}
.orbit.header .orbit-slide:before { top: 35%; height: 45%;}
.orbit.header .orbit-slide .img {height: 500px;}
.orbit.header .orbit-slide h2 {top: 42%; padding: 20px 100px; line-height: 0.9;}
.orbit.header .orbit-slide h3 {display: none;}
.orbit.header .orbit-bullets {display: none;}
#chevron-down {display: none;}
.assortment-h5 {text-align: left; padding-left: 185px; font-size: 1.3rem;}
.assortment-p {text-align: left; padding-left: 185px; font-size: 0.75rem; width: 100%;}
.assortment-more-btn {text-align: left; padding-left: 185px; display: block;}
img.thumbnail {float: left; width: 150px; height: auto;}
#content h4 {font-size: 1rem; line-height: 1; width: 50%; float: left; padding-left: 30px; padding-right: 30px; text-align: left;}
#questions .button { margin-top: 7px !important;}
#design h6, #design p {text-align: center;}
.design-ul-block {width: 95%; margin: auto;}
#design .design-ul-block li h6, #design .design-ul-block li p {text-align: left;}
.contact-detail {text-align: center; margin-top: -50px;}
#content .contact-detail h2{text-align: center; font-size: 1rem; font-weight: 500; margin-bottom: 25px; margin-top: 25px;}
#content .contact-p {text-align: center; padding-right: 0; font-size: 0.8rem; line-height: 1.1;}
.orbit.footer .orbit-slide {height: 500px;}
.orbit.footer .orbit-slide .small-6{margin-bottom: 10px; float: left;}
.orbit.footer .orbit-slide .small-6:nth-child(even):after{}
.orbit.footer .orbit-slide .img {height: 530px;}
.assorment-holder .small-12 {text-align: center !important; margin-bottom: 15px;}
.small-extra-large {font-size: 1.2rem !important; width: 80%;}
footer {padding-top: 20px;}
.p-lr-50-sm {padding-left: 50px; padding-right: 50px;}
}