aspect ratio fixes for photos in testbubble theme

some other testbubble styling tweaks

diff --git a/view/theme/testbubble/photo_album.tpl b/view/theme/testbubble/photo_album.tpl
new file mode 100644 (file)
index 0000000..a0e3f46
--- /dev/null
+++ b/view/theme/testbubble/photo_album.tpl
@@ -0,0 +1,8 @@
+<div class="photo-album-image-wrapper" id="photo-album-image-wrapper-$id">
+       <a href="$photolink" class="photo-album-photo-link" id="photo-album-photo-link-$id" title="$phototitle">
+               <img src="$imgsrc" alt="$imgalt" title="$phototitle" class="photo-album-photo lframe  resize" id="photo-album-photo-$id" />
+       </div>
+               <p class='caption'>$desc</p>            
+       </a>
+       </div>
+<div class="photo-album-image-wrapper-end"></div>

diff --git a/view/theme/testbubble/photo_top.tpl b/view/theme/testbubble/photo_top.tpl
new file mode 100644 (file)
index 0000000..d552409
--- /dev/null
+++ b/view/theme/testbubble/photo_top.tpl
@@ -0,0 +1,8 @@
+
+<div class="photo-top-image-wrapper lframe" id="photo-top-image-wrapper-$id">
+       <div id="photo-album-wrapper-inner">
+       <a href="$photolink" class="photo-top-photo-link" id="photo-top-photo-link-$id" title="$phototitle"><img src="$imgsrc" alt="$imgalt" title="$phototitle" class="photo-top-photo" id="photo-top-photo-$id" /></a>
+       </div>
+       <div class="photo-top-album-name"><a href="$albumlink" class="photo-top-album-link" title="$albumalt" >$albumname</a></div>
+</div>
+<div class="photo-top-image-wrapper-end"></div>

diff --git a/view/theme/testbubble/style.css b/view/theme/testbubble/style.css
index 85a01d0d26bb6b8e57f5272ebb4961454723e28e..36fe1bbc1465ea854f014e91625126604858164a 100644 (file)
--- a/view/theme/testbubble/style.css
+++ b/view/theme/testbubble/style.css
@@ -840,11 +840,16 @@ profile-jot-banner-wrapper {
 /* = Posts = */
 /* ========= */
 
-.wall-item-outside-wrapper { 
-       margin-top: 50px;
+.wall-item-outside-wrapper {
+       max-width: 85%;
+       border-bottom: 1px solid #dedede;
+       margin-top: 20px;
+       padding-right: 10px;
+       overflow: hidden;
 }
+
 .wall-item-outside-wrapper-end { clear: both;}
-.wall-item-content-wrapper { position: relative; max-width: 95%; }
+.wall-item-content-wrapper { position: relative; max-width: 100%; }
 .wall-item-photo-menu { display: none;}
 .wall-item-photo-menu-button {
        display:none;
@@ -890,12 +895,13 @@ profile-jot-banner-wrapper {
 }
 
 .wall-item-outside-wrapper.comment .wall-item-tools {
-       margin: 5px 5px 10px 60px;
+       margin: 5px 5px 10px 70px;
        float: left;
 }
 
 .wall-item-like-buttons {
        float: left;
+       padding-left: 10px;
 }
 .wall-item-like-buttons a.icon {
        float: left;
@@ -924,9 +930,13 @@ profile-jot-banner-wrapper {
        float: left;    
 }
 .wall-item-title { font-size: 1.2em; font-weight: bold;}
-.wall-item-body { margin-left: 140px; padding-right: 20px; }
+.wall-item-body {
+       margin-left: 140px;
+       padding-right: 10px;
+       max-width: 85%;
+}
+
 .wall-item-body p {
-       max-width: 600px;
        font-size: 0.8em;
 }
 .wall-item-lock-wrapper { float: right; }
@@ -936,6 +946,7 @@ profile-jot-banner-wrapper {
        clear: left;
        font-size: 0.9em;
        margin: 4px 0px 0px 140px;
+       padding-left: 10px;
        font-variant:small-caps;
 }
 
@@ -1042,11 +1053,7 @@ profile-jot-banner-wrapper {
 .icon.drop,
 .icon.drophide { float: left; }
 #item-delete-selected {        overflow: auto; width: 100%;}
-.wall-item-outside-wrapper {
-       max-width: 83%;
-       border-bottom: 1px solid #dedede;
-       margin-top: 20px;
-}
+
 
 /* ============ */
 /* = Comments = */
@@ -1055,11 +1062,11 @@ profile-jot-banner-wrapper {
  .ccollapse-wrapper {
        font-size: 0.9em;
        color: #898989;
-       margin-left: 80px;
+       margin-left: 60px;
        font-variant:small-caps;
 }
  
-.wall-item-outside-wrapper.comment { margin-left: 80px; }
+.wall-item-outside-wrapper.comment { margin-left: 70px; }
 .wall-item-outside-wrapper.comment .wall-item-photo {
        width: 40px!important;
        height: 40px!important;
@@ -1072,7 +1079,13 @@ profile-jot-banner-wrapper {
        background-position: 35px center;
 }
 .wall-item-outside-wrapper.comment .wall-item-info { width: 60px; }
-.wall-item-outside-wrapper.comment .wall-item-body { margin-left: 60px; max-width: 85%;}
+.wall-item-outside-wrapper.comment .wall-item-body {
+       margin-left: 70px;
+       max-width: 85%;
+       padding-right: 10px;
+       padding-left: 10px;
+}
+
 .wall-item-outside-wrapper.comment .wall-item-author { margin-left: 60px;}
 
 .wall-item-outside-wrapper.comment .wall-item-photo-menu {
@@ -1249,9 +1262,18 @@ div[id$="wrapper"] br { clear: left; }
 /* = Photos = */
 /* ========== */
 
+#side-bar-photos-albums h3:before {
+       content: url("photography.png");
+       padding-right: 10px;
+       vertical-align: middle;
+}
+
 #side-bar-photos-albums li {
        font-size: 14px;
        font-variant: none;
+       text-align: left;
+       padding-left: 20px;
+       margin-bottom: 5px;
 }
 
 #photo-top-links {
@@ -1303,7 +1325,7 @@ div[id$="wrapper"] br { clear: left; }
        overflow: hidden;
 }
 
-#photo-photo { max-width: 100% }
+#photo-photo { max-width: 85%; height: auto; }
 #photo-photo img { max-width: 100% }
 
 .photo-top-image-wrapper a:hover,
@@ -1511,16 +1533,6 @@ input#photo_edit_form {
        margin-left: 190px;
 }
 
-#side-bar-photos-albums h3:before {
-       content: url("photography.png");
-       padding-right: 10px;
-       vertical-align: middle;
-}
-
-#side-bar-photos-albums li {
-       margin-bottom: 5px;
-}
-
 #photo-album-edit-wrapper {
        margin-bottom: 10px;
 }
@@ -1699,7 +1711,7 @@ margin-left: 0px;
 
 #prvmail-subject {
        font-weight: bold;
-       border: none;
+       border: 1px solid #dddddd;
 }
 
 /* ================= */