Fix picture detail styling.
authorRadek Czajka <radekczajka@nowoczesnapolska.org.pl>
Fri, 17 Jan 2014 12:01:46 +0000 (13:01 +0100)
committerRadek Czajka <radekczajka@nowoczesnapolska.org.pl>
Fri, 17 Jan 2014 12:01:46 +0000 (13:01 +0100)
apps/picture/templates/picture/picture_short.html
apps/picture/templates/picture/picture_wide.html
apps/wolnelektury_core/static/scss/main/book_box.scss
apps/wolnelektury_core/static/scss/main/picture_box.scss

index 6095f44..881dcfe 100644 (file)
@@ -4,7 +4,6 @@
 {% load picture_tags %}
 <div class="{% block box-class %}book-box{% endblock %} picture">
 <div class="book-box-inner">
-<div class="book-left-column">
 
 <div class="book-box-body">
 
@@ -80,4 +79,3 @@
     <div class="clearboth"></div>
 </div>
 </div>
-</div>
index 3125b0f..8525d32 100644 (file)
@@ -16,7 +16,7 @@
 {% block book-box-extra-info %}
 {% if themes or things%}
     <div class="hidden-box-wrapper" id="theme-list-wrapper">
-        <p><a class="mono hidden-box-trigger theme-list-link"
+        <p><a class="hidden-box-trigger theme-list-link"
                 href="#">{% trans "Motifs, themes and objects" %}</a></p>
         <div class="hidden-box">
          {% if themes %}
index cca6e4a..e72bca8 100755 (executable)
     }
 }
 
-/* FIXME: RWD */
-.picture.book-wide-box .right-column {
-    float: none;
-    @include size(width, 415px);
-    top: 0;
-    @include size(margin-left, 550px);
-    margin-top: 0em;
+@media screen and (min-width: 50em) {
+    .picture.book-wide-box .right-column {
+        float: none;
+        @include size(width, 415px);
+        top: 0;
+        @include size(margin-left, 550px);
+        margin-top: 0em;
+    }
 }
 
 
index 26adc58..a3e4911 100644 (file)
@@ -1,19 +1,53 @@
 .picture {
     &.book-wide-box {
-        img.cover {
-            width: 53.5em;
-            height: auto;
+        .cover-area {
+            position: static;
+            @include size(margin-right, 15px);
+
+            img.cover {
+                @include size(width, 535px);
+                height: auto;
+            }
         }
 
-        .book-box-tools {
-            margin-left:  50em; // 535px image + 15px margin @ 11pt
+        .book-box-head, .tags, .book-box-tools {
+            margin: 0;
+        }
+
+        
+        @media screen and (min-width: 62.5em) {
+            .book-box-head, .tags, .book-box-tools {
+                float: right;
+                @include size(width, 403px);
+            }
         }
 
         .other-tools {
             margin: 5em 0 0 0;
         }
-        #theme-list-wrapper {
-            margin-left: 55em;
+
+        .book-box-tools, .tags, #theme-list-wrapper {
+            clear: left;
+            margin-left: 0;
+        }
+        .book-box-body {
+            height: auto;
+            margin-bottom: 1em;
+        }
+
+        @media screen and (min-width: 50em) {
+            .book-box-body {
+                @include size(height, 170px);
+                margin-bottom: 0;
+            }
+            .book-box-tools, .tags {
+                clear: none;
+            }
+
+            #theme-list-wrapper {
+                clear: none;
+                @include size(margin-left, 550px);
+            }
         }
     }