tobias/friendica
1
0
Fork 0
Code Pull requests Activity

class and wrapper div added to photo for aspect ratio display

Browse source 
testbubble theme styling for aspect ratio on photos
This commit is contained in:
Devlon Duthie 2011-10-01 01:52:06 -05:00
parent 8fb2d02d3d
commit c15690563d
2 changed files with 25 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
view/photo_album.tpl
View file

@ -3,6 +3,5 @@
<img src="$imgsrc" alt="$imgalt" title="$phototitle" class="photo-album-photo lframe resize" id="photo-album-photo-$id" /> <img src="$imgsrc" alt="$imgalt" title="$phototitle" class="photo-album-photo lframe resize" id="photo-album-photo-$id" />
<p class='caption'>$desc</p> <p class='caption'>$desc</p>
</a> </a>
</div> </div>
<div class="photo-album-image-wrapper-end"></div> <div class="photo-album-image-wrapper-end"></div>

38
view/theme/testbubble/style.css
View file

@ -1250,7 +1250,7 @@ div[id$="wrapper"] br { clear: left; }
/* ========== */ /* ========== */
#side-bar-photos-albums li { #side-bar-photos-albums li {
font-size: 1.2em; font-size: 14px;
font-variant: none; font-variant: none;
} }
@ -1279,14 +1279,30 @@ div[id$="wrapper"] br { clear: left; }
background-color: #b20202; background-color: #b20202;
} }
.photo-album-image-wrapper, .photo-album-image-wrapper {
.photo-top-image-wrapper { float: left;
float: left;
margin: 0px 10px 10px 0px; margin: 0px 10px 10px 0px;
padding-bottom: 30px; padding-bottom: 30px;
position:relative; position:relative;
} }
.photo-top-image-wrapper {
float: left;
width: 180px;
height: 180px;
margin: 0px 10px 10px 0px;
padding-bottom: 30px;
position:relative;
}
#photo-album-wrapper-inner {
position: relative;
float: left;
width: 180px;
height: 180px;
overflow: hidden;
}
#photo-photo { max-width: 100% } #photo-photo { max-width: 100% }
#photo-photo img { max-width: 100% } #photo-photo img { max-width: 100% }
@ -1296,12 +1312,8 @@ div[id$="wrapper"] br { clear: left; }
border-bottom: 0px; border-bottom: 0px;
} }
.photo-top-photo, .photo-top-photo {}
.photo-album-photo { .photo-album-photo {}
width: 180px;
height: 180px;
overflow: hidden;
}
.photo-top-album-name { .photo-top-album-name {
position: absolute; position: absolute;
@ -2216,7 +2228,7 @@ margin-left: 0px;
display: inline; display: inline;
padding: 5px; padding: 5px;
margin-bottom: 10px; margin-bottom: 10px;
/* -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf; -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
-webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf; -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
box-shadow:inset 0px 1px 0px 0px #cfcfcf; box-shadow:inset 0px 1px 0px 0px #cfcfcf;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) ); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
@ -2228,7 +2240,7 @@ margin-left: 0px;
border-radius:5px;*/ border-radius:5px;*/
} }
/*.group-delete-wrapper:hover { .group-delete-wrapper:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) ); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% ); background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808'); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
@ -2245,7 +2257,7 @@ margin-left: 0px;
.group-delete-wrapper a { .group-delete-wrapper a {
color: #efefef; color: #efefef;
font-size: 0.9em; font-size: 0.9em;
}*/ }
#group-edit-desc { margin: 10px 0xp; } #group-edit-desc { margin: 10px 0xp; }
#group-new-text {font-size: 1.1em;} #group-new-text {font-size: 1.1em;}