hide on small

foundation/fixes
nicholas antonov 2018-05-18 13:51:38 -04:00
parent 3495e36afd
commit 6f4561b3dd
3 changed files with 25 additions and 33 deletions

View File

@ -229,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 %}
@ -260,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>
@ -299,7 +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

File diff suppressed because one or more lines are too long

View File

@ -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;
}