Merge pull request #82 from EbookFoundation/foundation/fixes

Fixes
EbookFoundation · May 18, 2018 · 55bc6ef · 55bc6ef
2 parents ad7aff9 + 022e69a
commit 55bc6ef
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 68 deletions.
diff --git a/frontend/templates/base.html b/frontend/templates/base.html
@@ -65,8 +65,11 @@
         <div id="header-login">
             {% block signin %}
             {% if user.is_authenticated %}
-            <a href="{% url 'supporter' user %}#edit">
+            <a href="{% url 'supporter' user %}#edit" class="notifications-badge-holder">
                 <img class="user-avatar" src="{{ user.profile.avatar_url }}" height=36 width="36" alt="Avatar for {{ user.username }}" title="{{ user.username }}" />
+                {% if unseen_count %}
+                <span class="notifications-badge unseen_count">{{ unseen_count }}</span>
+                {% endif %}
             </a>
             {% else %}
                 <a class="notbutton hijax" href="{% url 'superlogin' %}?next={% if request.GET.next %}{{ request.GET.next|urlencode }}{% else %}{{ request.get_full_path|urlencode}}{% endif %}"><span>Log In</span></a>
@@ -87,8 +90,8 @@
                     <li>
                         <a href="#">Account</a>
                         <ul class="menu vertical nested">
-                            <li><a href="/notification">Notices</a>
-                                <a  class="notbutton" href="/notification"><span>Notices: </span>
+                            <li>
+                                <a class="notbutton" href="/notification"><span>Notices: </span>
                                     {% if unseen_count %}
                                     <span id="i_haz_notifications" class="unseen_count">{{ unseen_count }}</span>
                                     {% else %}

diff --git a/frontend/templates/book_panel.html b/frontend/templates/book_panel.html
@@ -54,7 +54,9 @@
                     {% include "book_panel_addbutton.html" %}
                 </div>		
                 <div class="white_text bottom_button" >
-                {% if purchased %}
+                {% if work.epubfiles %}
+                    <a href="{% url 'read' workid %}" class="hijax"><span class="read_itbutton button_text"><span>Read it Now</span></span></a>
+                {% elif purchased %}
                     <a href="{% url 'download' workid %}" class="hijax"><span class="read_itbutton button_text"><span>Read it Now</span></span></a>
                 {% elif borrowed %}
                     <a href="{% url 'download' workid %}" class="hijax"><span class="read_itbutton button_text"><span>Read it Now</span></span></a>
@@ -227,7 +229,7 @@
         </div>
     {% elif request.user.is_anonymous %}
         <div class="listview panelfront side1 create-account">
-            <span title="{% if workid %}{% url 'work' workid %}{% else %}{% url 'googlebooks' googlebooks_id %}{% endif %}">Login to Fave</span>
+            <span class="hide-for-small-only" title="{% if workid %}{% url 'work' workid %}{% else %}{% url 'googlebooks' googlebooks_id %}{% endif %}">Login to Fave</span>
         </div>
     {% elif work in wishlist %}
         {% if supporter == request.user %}
@@ -258,7 +260,7 @@
         </div>
     {% endif %}
 
-    <div class="listview panelfront side1 booklist-status">
+    <div class="listview panelfront side1 booklist-status hide-for-small-only">
 		{% if status == "ACTIVE" %}
 		    {% if work.last_campaign.type == 1 %}
 		        <div class="booklist-status-label">{{ work.percent_of_goal }}%</div>
@@ -297,8 +299,7 @@
 		    {% endif %}
 		{% endif %}
     </div>
-    <div class="listview panelfront side1 icons">
-
+    <div class="listview panelfront side1 icons hide-for-small-only">
     	{% comment %}
     		For status icons, we should display...
     			If there is an ebook: options to get it
@@ -307,7 +308,19 @@
     			Otherwise: number of wishes
     	{% endcomment %}
         {% if purchased or borrowed or first_ebook %}
-            <a href="{% url 'download' workid %}" class="hijax" title="Download this work"><div class="read_itbutton"><span>Read it Now</span></div></a>
+            {% if work.epubfiles %}
+                <a href="{% url 'read' workid %}" class="hijax">
+                    <span class="read_itbutton button_text">
+                        <span>Read it Now</span>
+                    </span>
+                </a>
+            {% else %}
+                <a href="{% url 'download' workid %}" class="hijax" title="Download this work">
+                    <div class="read_itbutton">
+                        <span>Read it Now</span>
+                    </div>
+                </a>
+            {% endif %}
         {% elif borrowable %}
             <a href="{% url 'borrow' workid %}?library={{library}}" class="hijax" title="Borrow this work"><div class="read_itbutton"><span>Borrow It</span></div></a>
         {% elif in_library %}
@@ -328,4 +341,4 @@
     </div>
 </div>
 </div>
-{% endwith %}
+{% endwith %}
diff --git a/static/scss/book_list.css b/static/scss/book_list.css
diff --git a/static/scss/book_list.scss b/static/scss/book_list.scss
@@ -1,4 +1,5 @@
 @import "variables.scss";
+@import "foundation";
 
 /* Cross-browser language */
 @mixin opacity($op)
@@ -28,28 +29,29 @@
 
 div.book-list.listview{
     clear:both;
-    display:block;
+    display: flex;
     vertical-align: middle;
+    align-items: center;
     @include height(43px);
     margin:0 5px 0 0;
     padding:7px 0;
     position: relative;
 
+    & > div {
+        padding: 10px;
+    }
+
 	/* row is a container for divs with individual content elements */
 	/* these elements are styled differently to create list and panel views */
     div {
         &.unglue-this {
-            float: left;
         }
         &.book-thumb {
-            margin-right: 5px;
-            float: left;
         }
         &.book-name {
-            width:235px;
-            margin-right:10px;
-            background:url("#{$image-base}booklist/booklist-vline.png") right center no-repeat;
-            float: left;
+            flex: 1;
+            max-width: 300px;
+            padding: 0 7px;
 
             .title {
                 display:block;
@@ -77,28 +79,15 @@ div.book-list.listview{
                 margin-top: -1px;
                 padding-right: 15px;
                 border: 1px solid $blue-grey;
-                @include border-radius(0, 10px, 10px, 0);
+                @include border-radius(10px);
                 border-left: none;
             }
 
             &.listview {
-                z-index:100;
-                // z-index only works on positioned elements, so if you
-                // do not include this the absolutely positioned add-wishlist
-                // div stacks above it! crazytown.
-                position: absolute;
-                left: 42px;
             }
         }
         &.add-wishlist, &.remove-wishlist, &.on-wishlist, &.create-account, &.pledge {
-            margin-right: 10px;
-            padding-right: 10px;
-            width: 136px;
-            background:url("#{$image-base}booklist/booklist-vline.png") right center no-repeat;
 
-            //position: absolute;
-            margin-left:255px;
-            float:left;
 
             span {
                 font-weight:normal;
@@ -134,9 +123,6 @@ div.book-list.listview{
         }
 
         &.booklist-status {
-            //width: 110px;
-            margin-right:85px;
-            float: left;
         }
     }
 }
@@ -302,9 +288,9 @@ ul.navigation li a:hover, ul.navigation li.active a {
 }
 
 .listview.icons {
-    position: absolute;
-    right: 31px;
-
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
     .booklist-status-img {
         @include one-border-radius(4px);
         background-color: #fff;
@@ -324,6 +310,12 @@ ul.navigation li a:hover, ul.navigation li.active a {
     }
 }
 
+@include breakpoint(medium up) {
+    .book-name {
+        flex: 100%;
+    }
+}
+
 div#content-block-content {
   padding-bottom: 10px;
 }