[extensions-web] Start hacking on new layout.

[Jasper St. Pierre <jstpierre src gnome org>]

commit da4690dc61ee3ea06be74cc05897968381502081
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Sat Jun 2 15:54:25 2012 -0400

    Start hacking on new layout.

 .../extensions/templates/extensions/detail.html    |   53 +++++++++++---------
 sweettooth/static/css/sweettooth.css               |   48 +++++++++---------
 2 files changed, 53 insertions(+), 48 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/detail.html b/sweettooth/extensions/templates/extensions/detail.html
index d5e8cdc..15c903f 100644
--- a/sweettooth/extensions/templates/extensions/detail.html
+++ b/sweettooth/extensions/templates/extensions/detail.html
@@ -30,33 +30,38 @@
         <div class="configure-button"></div>
       </div>
 
-      {% block icon %}
-      <img src="{{ extension.icon.url }}" class="icon">
-      {% endblock icon %}
+      <div class="extension-header">
+        {% block icon %}
+        <img src="{{ extension.icon.url }}" class="icon">
+        {% endblock icon %}
 
-      {% if extension.screenshot %}
-      {% thumbnail extension.screenshot "300x200" as th %}
-      {% block screenshot %}
-      <a href="{{ extension.screenshot.url }}" class="screenshot"><img src="{{ th.url }}" /></a>
-      {% endblock screenshot %}
-      {% endthumbnail %}
-      {% else %}
-      {% block no-screenshot %}
-      {% endblock %}
-      {% endif %}
+        <h3 class="extension-name" id="extension_name">{{ extension.name }}</h3>
+        <span class="author">by <a href="{% url auth-profile user=extension.creator.username %}">{{ extension.creator }}</a></span>
+      </div>
 
-      <h3 class="extension-name" id="extension_name">{{ extension.name }}</h3>
-      <span class="author">by <a href="{% url auth-profile user=extension.creator.username %}">{{ extension.creator }}</a></span>
-      <p class="description" id="extension_description">
-        {{ extension.description }}
-      </p>
+      <div class="extension-details">
+        {% if extension.screenshot %}
+        {% thumbnail extension.screenshot "300x200" as th %}
+        {% block screenshot %}
+        <a href="{{ extension.screenshot.url }}" class="screenshot"><img src="{{ th.url }}" /></a>
+        {% endblock screenshot %}
+        {% endthumbnail %}
+        {% else %}
+        {% block no-screenshot %}
+        {% endblock %}
+        {% endif %}
 
-      <dl>
-      {% if extension.url %}
-        <dt>Extension Homepage</dt>
-        <dd><a href="{{ extension.url }}" id="extension_url">{{ extension.url }}</a></dd>
-      {% endif %}
-      </dl>
+        <p class="description" id="extension_description">
+          {{ extension.description }}
+        </p>
+
+        <dl>
+          {% if extension.url %}
+          <dt>Extension Homepage</dt>
+          <dd><a href="{{ extension.url }}" id="extension_url">{{ extension.url }}</a></dd>
+          {% endif %}
+        </dl>
+      </div>
 
       {% if is_unreviewed %}
       <p class="step">
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 38d9e9d..fe1c80b 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -281,15 +281,17 @@ li.extension:last-child {
     opacity: 1.0;
 }
 
-.extension .extension-name {
-    margin-left: 48px;
-    font-size: 1.3em;
+.extension .extension-name a {
+    color: #000;
+    text-decoration: none;
 }
 
-.extension .extension-name, .extension .extension-name a {
-    display: inline;
-    text-decoration: none;
-    color: #000;
+.extension .extension-name {
+    display: inline-block;
+    line-height: 32px;
+    margin: 0;
+    margin-left: 8px;
+    font-size: 1.3em;
 }
 
 .extension .extension-name a:hover {
@@ -307,7 +309,7 @@ li.extension:last-child {
 .extension ._gnome-switch {
     position: absolute;
     margin-left: -100px;
-    margin-top: 8px;
+    margin-top: 4px;
 }
 
 ._gnome-switch.customized .error {
@@ -322,33 +324,26 @@ li.extension:last-child {
 }
 
 .extension .description {
+    margin: 0.5em;
     font-size: 1.2em;
-}
-
-.extension .description,
-.extension dl {
-    margin-left: 48px;
+    overflow: auto;
 }
 
 .extension .screenshot {
-    float: right;
-    display: block;
-    width: 300px;
-    height: 200px;
-    margin-left: 1em;
-    margin-bottom: 0.5em;
-    position: relative;
+    margin-right: 0.5em;
+    border: 1px solid #cccccc;
+    background: #ffffff;
+    padding: 0.5em;
     font-size: 1.2em;
     font-weight: bold;
+    float: left;
 }
 
 .extension .icon {
     width: 32px;
     height: 32px;
-    position: absolute;
-    left: 0px;
-    margin-top: 4px;
-    padding: 2px 16px 2px 2px;
+    display: inline-block;
+    vertical-align: bottom;
 }
 
 .extension .upload {
@@ -361,6 +356,11 @@ li.extension:last-child {
     background-color: #eee;
 }
 
+.extension .screenshot.upload.placeholder {
+    width: 250px;
+    height: 200px;
+}
+
 .extension .screenshot.upload.placeholder .text {
     display: table;
     width: 100%;