Commits

bobf committed 89831cf

make contact form a popup instead of wasting screen space on the artist description section. much less cluttered

Comments (0)

Files changed (3)

soundbush/public/css/base.css

 }
 
 input.submit {
-  width: 5em;
   background: #000;
 }
 
   margin: 0 7px;
   background-image: url(../img/delete.png);
 }
+
+#artist-description {
+  height: 100px;
+  overflow: hidden;
+}
+
+#contact-artist {
+  margin-left: 10px;
+}

soundbush/public/js/main.js

 
         });
     });
+
+    $("#contact-artist").button({icons: {primary: "ui-icon-mail-closed"}});
+
+    $("#read-more").toggle(
+        function () {
+            $("#artist-description").css("height", "auto");
+            $(this).text("Show less");
+        },
+        function () {
+            $("#artist-description").css("height", "100px");
+            $(this).text("Show more");
+        });
+
+    $("#contact-submit").button();
+    $("#contact-artist").click(function () {
+        $("#contact-dialog").dialog({
+            resizable: false,
+            width: 500,
+            title: "Contact Artist",
+            modal: true
+        });
+    });
 };
 
 $(document).ready(function () {

soundbush/templates/artist.mako

 
 <%def name="renderCol1()">
 
-<div id="dialog" class="dialog"></div>
-
-    <table width="100%">
-    <tr>
-    <td valign="top" style="padding-right: 10px; border-right: 1px solid #999">
-    <h3>${c.htmlify(c.artist.displayname)}
-        <a class="rsslink" href="${c.urlbase}/_artist/rss/${c.artist.id}"><img
-        class="rsslink" src="${c.static}/img/feed-icon-14x14.png"/></a></h3>
-    <button id="contact-artist">Contact</button>
-    <div id="artist-description"><p>${c.htmlify(c.artist.description)}</p></div>
-
-    <a href="#" id="read-more">Read More</a>
-
-    </td>
-
-    <td valign="top" style="padding-left: 10px;">
-    <h3>Contact this artist directly</h3>
+<div style="display: none;" id="contact-dialog">
     <form action="${c.urlbase}/_artist/contact/${c.artist.id}" method="post">
         <table>
         <tr><td style="padding-right: 3em;">Name:</td>
         <tr><td valign="top">Message:</td>
             <td><textarea name="comments" rows="10"></textarea></td></tr>
         <tr><td></td><td style="text-align: right" align="right">
-            <input class="submit" type="submit" value="Submit"/></td></tr>
+            <input id="contact-submit" class="submit" type="submit" value="Submit"/></td></tr>
         </table>
     </form>
+</div>
+
+<div id="dialog" class="dialog"></div>
+
+    <table>
+    <tr>
+    <td>
+
+    <h3>${c.htmlify(c.artist.displayname)}
+        <a class="rsslink" href="${c.urlbase}/_artist/rss/${c.artist.id}"><img
+        class="rsslink" src="${c.static}/img/feed-icon-14x14.png"/></a></h3>
+
+    </td>
+
+    <td align="center">
+
+    <button id="contact-artist">Contact</button>
+
     </td></tr>
     </table>
 
+    <div id="artist-description"><p>${c.htmlify(c.artist.description)}</p></div>
+
+    <a href="#" id="read-more">Show More</a>
+
 %for i, track in enumerate(c.tracks):
         <%owner = c.user and c.user.id == track.author.id%>
         <div class="track-box">