strk/friendica
1
0
Fork 0
Code Issues Pull requests Releases Wiki 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>

36
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;}