Merge pull request #82 from EbookFoundation/foundation/fixes

Fixes

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>
+                            <li>
-                                <a  class="notbutton" href="/notification"><span>Notices: </span>
+                                <a class="notbutton" href="/notification"><span>Notices: </span>
                                     {% if unseen_count %}
                                     <span id="i_haz_notifications" class="unseen_count">{{ unseen_count }}</span>
                                     {% else %}

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 %}

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;
+            flex: 1;
-            margin-right:10px;
+            max-width: 300px;
-            background:url("#{$image-base}booklist/booklist-vline.png") right center no-repeat;
+            padding: 0 7px;
-            float: left;
 
             .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;
+    flex: 1;
-    right: 31px;
+    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;
 }

static/scss/bookview.css

@@ -1,3 +1,3 @@
 .panelborders{border-width:1px 0px;border-style:solid none;border-color:#FFFFFF}.panelborders{border-width:1px 0px;border-style:solid none;border-color:#FFFFFF}@media screen and (max-width: 39.9375em){.wrapper{display:flex;flex-direction:column}.pubinfo{display:flex;flex-direction:column;align-items:center}.wrapper{margin:10px}.bookImage{order:0;display:flex;justify-content:center}.bookSidebar{order:1;flex-direction:row;flex-wrap:wrap}.book-sidebar-item{flex:auto;display:flex;justify-content:center}.book-sidebar-item span{display:none}.bookRead{flex:100%}.bookDownload{flex:100%}.bookDonate{flex:100%}.bookDescription{order:2}.bookComments{order:3;margin-top:15px}}@supports not (grid-template-rows: auto){.wrapper{display:flex;flex-direction:column}.pubinfo{display:flex;flex-direction:column;align-items:center}.wrapper{margin:10px}.bookImage{order:0;display:flex;justify-content:center}.bookSidebar{order:1;flex-direction:row;flex-wrap:wrap}.book-sidebar-item{flex:auto;display:flex;justify-content:center}.book-sidebar-item span{display:none}.bookRead{flex:100%}.bookDownload{flex:100%}.bookDonate{flex:100%}.bookDescription{order:2}.bookComments{order:3;margin-top:15px}}@supports (grid-template-rows: auto){@media print, screen and (min-width: 40em){.wrapper{display:grid;grid-template-columns:fit-content 1fr 20%;grid-template-rows:auto auto;grid-template-areas:"bookImage bookDescription bookSidebar" ".         bookComments    .";margin-left:auto;margin-right:auto;max-width:1000px}.bookDescription{padding-right:15px}.bookSidebar{flex-direction:column;margin-top:66px}}}.bookImage{grid-area:bookImage;padding:15px}.bookImage img{padding:5px;border:solid 5px #eee}.bookImage div{float:right}.bookDescription{grid-area:bookDescription}.bookSidebar{display:flex;grid-area:bookSidebar}.book-sidebar-item{margin-bottom:16px}.bookComments{grid-area:bookComments}.btn_wishlist span{text-align:right}.btn_wishlist div{float:none}.description-more-content{padding-top:20px}
 
-/*# sourceMappingURL=../../../../../../../static/scss/bookview.css.map */
+/*# sourceMappingURL=../../../../../../static/scss/bookview.css.map */

static/scss/faq.css

@@ -1,3 +1,3 @@
-.panelborders{border-width:1px 0px;border-style:solid none;border-color:#FFFFFF}.panelborders{border-width:1px 0px;border-style:solid none;border-color:#FFFFFF}.faq-container{display:flex;flex-direction:column;margin:0 auto;max-width:1024px}.faq-menu{min-width:200px}.faq-main{padding:0 25px}.faq-toplevel-nav{width:fit-content;margin:0 auto}.faq-toplevel-nav li{width:fit-content}.long-formula{white-space:pre-wrap}@media print, screen and (min-width: 40em){.faq-container{flex-direction:row}.faq-toplevel-nav>li>a,.faq-toplevel-nav>li>span{border-bottom:1px solid #edf3f4}}
+.panelborders{border-width:1px 0px;border-style:solid none;border-color:#FFFFFF}.panelborders{border-width:1px 0px;border-style:solid none;border-color:#FFFFFF}.faq-container{display:flex;flex-direction:column;margin:0 auto;max-width:1024px}.faq-menu{min-width:200px}.faq-main{padding:0 25px;max-width:100vw}.faq-toplevel-nav{width:fit-content;margin:0 auto}.faq-toplevel-nav li{width:fit-content}.long-formula{white-space:pre-wrap}@media print, screen and (min-width: 40em){.faq-container{flex-direction:row}.faq-toplevel-nav>li>a,.faq-toplevel-nav>li>span{border-bottom:1px solid #edf3f4}}
 
-/*# sourceMappingURL=../../../../../../../static/scss/faq.css.map */
+/*# sourceMappingURL=../../../../../../static/scss/faq.css.map */

static/scss/read.css

@@ -1,3 +1,3 @@
 .panelborders{border-width:1px 0px;border-style:solid none;border-color:#FFFFFF}
 
-/*# sourceMappingURL=../../../../../../../static/scss/read.css.map */
+/*# sourceMappingURL=../../../../../../static/scss/read.css.map */

static/scss/sitewide4.scss

@@ -397,29 +397,9 @@ h3 {
             }
         }
 
-        .unseen_count {
-            border: solid 2px;
-            @include one-border-radius(700px);
-            padding: 3px;
-            line-height: 16px;
-            width: 16px;
-            cursor: pointer;
-            text-align: center;
-
-            &#i_haz_notifications {
-                background-color: $call-to-action;
-                color: white;
-                border-color: white;
-            }
-
-            &#no_notifications_for_you {
-                border-color: $pale-blue;
-                background-color: $pale-blue;
-                color: $text-blue;
-            }
-        }
     }
 }
+
 .btn-signup {
   @include button-variant(#fff, $call-to-action,  $btn-default-border);
 }
@@ -427,12 +407,40 @@ h3 {
   @include button-variant(#fff, $bright-blue, $btn-default-border);
 }
 
-#i_haz_notifications_badge {
+.unseen_count {
+    border: solid 2px;
+    @include one-border-radius(700px);
+    padding: 3px;
+    line-height: 16px;
+    cursor: pointer;
+    text-align: center;
+
+    &#i_haz_notifications {
+        background-color: $call-to-action;
+        color: white;
+        border-color: white;
+    }
+
+    &#no_notifications_for_you {
+        border-color: $pale-blue;
+        background-color: $pale-blue;
+        color: $text-blue;
+    }
+}
+
+.notifications-badge-holder {
+    position: relative;
+}
+
+.notifications-badge {
     @include one-border-radius(700px);
     font-size: $font-size-default;
     border: solid 2px white;
-    margin-left: -7px;
+    position: absolute;
+    top: 0;
+    right: 0;
     margin-top: -10px;
+    margin-right: -10px;
     padding: 3px;
     background: $call-to-action;
     color: white;