All4DK
/
wikipoints
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

FIX - стили, подгон изображений под разные размеры экрана

This commit is contained in:
Krivchikov Dmitry 2015-04-05 17:35:37 +03:00
parent a1351e281f
commit c43369dc12
2 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ground/views/point.php
View File

@ -87,7 +87,7 @@
нет известных нам точек. нет известных нам точек.
<?php else: ?> <?php else: ?>
<?php foreach ($closestPoints as $cPoint): ?> <?php foreach ($closestPoints as $cPoint): ?>
<a href="/page/point/id/<?= $cPoint->id ?>" style="display: inline-block; height: 139px; width: 16,6%; overflow: hidden;"><img src="<?= $cPoint->getImg() ?>" title="<?= $cPoint->name ?>" style="width: 186px; height: 139px;"/></a> <a href="/page/point/id/<?= $cPoint->id ?>" class="pagePoinsNearCards"><img src="<?= $cPoint->getImg() ?>" title="<?= $cPoint->name ?>" class="pagePoinsNearCardsImg"/></a>
<?php endforeach; ?> <?php endforeach; ?>
<?php endif; ?> <?php endif; ?>
</div> </div>
@ -97,7 +97,7 @@
<div class="col-md-12"> <div class="col-md-12">
<h3 style="margin-top: 0;">Похожие:</h3> <h3 style="margin-top: 0;">Похожие:</h3>
<?php foreach ($similarPoints as $sPoint): ?> <?php foreach ($similarPoints as $sPoint): ?>
<a href="/page/point/id/<?= $sPoint->id ?>" style="display: inline-block; height: 139px; width: 16,6%; overflow: hidden;"><img src="<?= $sPoint->getImg() ?>" title="<?= $sPoint->name ?>" style="width: 186px; height: 139px;"/></a> <a href="/page/point/id/<?= $sPoint->id ?>" class="pagePoinsNearCards"><img src="<?= $sPoint->getImg() ?>" title="<?= $sPoint->name ?>" class="pagePoinsNearCardsImg"/></a>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
</div> </div>

17
public/css/style.css
View File

@ -87,7 +87,8 @@ div#box {background-image: url('/img/back.png'); background-repeat: no-repeat; b
/* ------------- PAGE --------------------*/ /* ------------- PAGE --------------------*/
.coords-container {text-align: right; margin-bottom: 20px; color: #777;font-size: 0.9em;} .coords-container {text-align: right; margin-bottom: 20px; color: #777;font-size: 0.9em;}
#pageSmoothBackground {z-index: -100; width: 106%; height: 106%; position: fixed; top: -3%; left: -3%; background-size: cover; -webkit-filter: blur(5px);} #pageSmoothBackground {z-index: -100; width: 106%; height: 106%; position: fixed; top: -3%; left: -3%; background-size: cover; -webkit-filter: blur(5px);}
.pagePoinsNearCards {display: inline-block; width: 186px; height: 139px; overflow: hidden;}
.pagePoinsNearCardsImg {width: 186px; height: 139px;}
/* -------------------------------------------*/ /* -------------------------------------------*/
@ -95,6 +96,11 @@ div#box {background-image: url('/img/back.png'); background-repeat: no-repeat; b
/* -------------------------------------------*/ /* -------------------------------------------*/
/* Target landscape smartphones, portrait tablets, narrow desktops */ /* Target landscape smartphones, portrait tablets, narrow desktops */
@media screen and (max-width:1200px) {
.pagePoinsNearCards {display: inline-block; width: 153px; height: 114px; overflow: hidden;}
.pagePoinsNearCardsImg {width: 153px; height: 114px;}
}
@media screen and (max-width:1000px) { @media screen and (max-width:1000px) {
.modal-dialog { .modal-dialog {
width: 100%!important; width: 100%!important;
@ -127,6 +133,11 @@ div#box {background-image: url('/img/back.png'); background-repeat: no-repeat; b
#pageSmoothBackground {display: none;} #pageSmoothBackground {display: none;}
} }
@media screen and (max-width:990px) {
.pagePoinsNearCards {display: inline-block; width: 116px; height: 87px; overflow: hidden;}
.pagePoinsNearCardsImg {width: 116px; height: 87px;}
}
@media screen and (max-width:815px) { @media screen and (max-width:815px) {
body { body {
padding: 0!important; padding: 0!important;
@ -140,6 +151,8 @@ div#box {background-image: url('/img/back.png'); background-repeat: no-repeat; b
width: 115px; width: 115px;
height: 69px; height: 69px;
} }
.pagePoinsNearCards {display: inline-block; width: 120px; height: 90px; overflow: hidden;}
.pagePoinsNearCardsImg {width: 120px; height: 90px;}
} }
@media screen and (max-width:640px) { @media screen and (max-width:640px) {
@ -147,4 +160,6 @@ div#box {background-image: url('/img/back.png'); background-repeat: no-repeat; b
position: initial; position: initial;
text-align: center; text-align: center;
} }
.pagePoinsNearCards {display: inline-block; width: 201px; height: 150px; overflow: hidden;}
.pagePoinsNearCardsImg {width: 201px; height: 150px;}
} }