Skip to content

Commit d26c347

Browse files
SivanCSivanC
committed
Major CSS refactor
Simplify HTML structure with the removal of superfluous classes and divs from ReadButton.html and LocateButton.html macros. Simplify or remove many CSS styling rules, move away from mixin-focused styling and unnecessary class descriptors. Overhaul rules for dropper menu positioning to attach it more firmly to details element.
1 parent 0d18d90 commit d26c347

File tree

3 files changed

+88
-101
lines changed

3 files changed

+88
-101
lines changed

‎openlibrary/macros/LocateButton.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22

33
$ locateUrl = "/books/XXX/-/borrow?action=locate".replace('XXX', edition_key or '')
44

5-
<div class="cta-button-group">
6-
<a class="cta-btn cta-btn--available" href="$locateUrl">
7-
<span class="btn-label">Locate</span>
8-
</a>
9-
</div>
5+
<a class="cta-btn cta-btn--available cta-btn--w-icon" href="$locateUrl">
6+
<span class="btn-icon map"></span>
7+
<span class="btn-label">Locate</span>
8+
</a>

‎openlibrary/macros/ReadButton.html‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,46 +18,44 @@
1818
$ title = _("Read ebook from Internet Archive")
1919
$ analytics_action = "Read"
2020

21-
<div class="dropdown-button-group cta-dropper">
22-
<div class="cta-button-group cta-dropper__button">
21+
<div class="cta-dropper">
22+
<div class="cta-button-group cta-dropper-button">
2323
<a href="$(stream_url)" title="$title" class="cta-btn cta-btn--ia cta-btn--available cta-btn--$(action)"
2424
$:analytics_attr(analytics_action)
2525
$if loan:
2626
data-userid="$(loan['userid'])"
2727
>$label</a>
2828
</div>
29-
<details class="cta-dropper__details">
30-
<summary class="cta-dropper__summary">
29+
<details>
30+
<summary>
3131
</summary>
32-
<div class="cta-dropper__content">
33-
<ul class="cta-dropper__content-list">
34-
$if listen:
35-
<li>
36-
<a href="$(stream_url)&_autoReadAloud=show"
37-
title="$title using Read Aloud"
38-
$:analytics_attr(action.capitalize() + 'Listen')
39-
class="cta-btn cta-btn--available cta-btn--w-icon">
40-
<span class="btn-icon listen"></span>
41-
<span class="btn-label">$_("Listen")</span>
42-
</a>
43-
</li>
32+
<ul class="dropper-menu">
33+
$if listen:
4434
<li>
45-
<a class="cta-btn cta-btn--available cta-btn--w-icon">
46-
<span class="btn-icon search"></span>
47-
<span class="btn-label">Search Inside</span>
35+
<a href="$(stream_url)&_autoReadAloud=show"
36+
title="$title using Read Aloud"
37+
$:analytics_attr(action.capitalize() + 'Listen')
38+
class="cta-btn cta-btn--available cta-btn--w-icon">
39+
<span class="btn-icon listen"></span>
40+
<span class="btn-label">$_("Listen")</span>
4841
</a>
4942
</li>
43+
<li>
44+
<a class="cta-btn cta-btn--available cta-btn--w-icon">
45+
<span class="btn-icon search"></span>
46+
<span class="btn-label">Search Inside</span>
47+
</a>
48+
</li>
49+
<li>
50+
<a class="cta-btn cta-btn--available cta-btn--w-icon">
51+
<span class="btn-icon download"></span>
52+
<span class="btn-label">Download</span>
53+
</a>
54+
</li>
55+
$if edition_key:
5056
<li>
51-
<a class="cta-btn cta-btn--available cta-btn--w-icon">
52-
<span class="btn-icon download"></span>
53-
<span class="btn-label">Download</span>
54-
</a>
57+
$:macros.LocateButton(edition_key=edition_key)
5558
</li>
56-
$if edition_key:
57-
<li>
58-
$:macros.LocateButton(edition_key=edition_key)
59-
</li>
60-
</ul>
61-
</div>
59+
</ul>
6260
</details>
6361
</div>

‎static/css/components/generic-dropper.less‎

Lines changed: 57 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -89,112 +89,102 @@
8989
text-overflow: ellipsis;
9090
}
9191

92-
.cta-btn .listen {
93-
background-image: url(/static/images/icons/icon_listen.png);
94-
background-repeat: no-repeat;
95-
background-size: contain;
96-
background-position: center;
97-
}
98-
.cta-btn .search {
99-
background-image: url(/static/images/icons/icon_search.png);
100-
background-repeat: no-repeat;
101-
background-size: contain;
102-
background-position: center;
103-
}
104-
.cta-btn .download {
105-
background-image: url(/static/images/icons/icon_download.png);
106-
background-repeat: no-repeat;
107-
background-size: contain;
108-
background-position: center;
109-
}
110-
.cta-btn .map {
111-
background-image: url(/static/images/icons/icon_map.png);
112-
background-repeat: no-repeat;
113-
background-size: contain;
114-
background-position: center;
115-
}
11692

93+
/* Style for read button and dropper button */
11794
.cta-dropper {
11895
display: flex;
11996
margin-bottom: 10px;
120-
&__button {
121-
& .cta-btn {
97+
.cta-button-group.cta-dropper-button {
98+
.cta-btn {
12299
border-radius: 5px 2px 2px 5px;
123-
text-align: center;
124100
}
125-
border-right: 1px solid rgba(0,0,0,0);
126-
border-radius: 5px 2px 2px 5px;
101+
border-right: 1px solid transparent;
127102
flex-grow: 1;
128103
}
129-
&__details {
104+
details {
130105
background-color: @primary-blue;
131106
border-radius: 2px 5px 5px 2px;
107+
// raise dropper menu above "Want to Read" dropper
108+
z-index: @z-index-level-14;
109+
// mark details as nearest container ancestor to dropdown menu
110+
contain: layout;
132111
}
133-
&__summary {
112+
summary {
134113
cursor: pointer;
135114
list-style-type: none;
136115
&:hover { background-color: darken(@primary-blue, 20%); }
137116
border-radius: 2px 5px 5px 2px;
138117
}
139-
&__summary::after {
118+
summary::after {
140119
display: block;
141-
content: "";
142120
margin: 0 8px;
143121
padding-top: 16px;
144122
width: 24px;
145123
height: 24px;
124+
/* Style for animated arrow on dropdown button. Copied from "Want to Read" dropper above */
125+
content: "";
146126
background: url(/images/icons/icon_dropit.png) no-repeat center;
147127
background-position: 0;
148128
background-size: 45px;
129+
// whiten arrow png
149130
filter: brightness(0) invert(1);
150131
}
151-
&__details[open] summary::after {
132+
details[open] summary::after {
152133
content: "";
153134
background-position: -22px 50%;
154135
}
136+
}
155137

156-
&__content {
157-
background-color: @white;
158-
position: absolute;
159-
left: 35px;
160-
width: 194px;
161-
z-index: @z-index-level-14;
162-
margin-top: 10px;
163-
border: 1px solid;
164-
border-radius: 5px;
165-
border-color: @lighter-grey;
166-
}
167-
&__content .cta-dropper__content-list {
168-
margin: 0 5px;
169-
}
170-
&__content li+li {
171-
border-top: 1px solid;
172-
border-color: @lighter-grey;
138+
.cta-dropper .dropper-menu {
139+
margin: 0;
140+
border: 1px solid @lighter-grey;
141+
border-radius: 5px;
142+
background-color: @white;
143+
position: absolute;
144+
// align dropper menu with buttons
145+
right: 0px;
146+
width: 194px;
147+
li+li {
148+
border-top: 1px solid @lighter-grey;
173149
}
174-
&__content .cta-dropper__content-list li {
150+
li {
175151
list-style: none;
176152
margin: 0;
177153
}
178-
&__content-list .cta-btn {
154+
.cta-btn {
179155
&.cta-btn--w-icon, &:link, &:visited {
180156
background: @white;
181157
color: @black;
182158
text-align: left;
183-
padding: 5px;
159+
padding: 5px 10px;
160+
border-radius: 0;
184161
margin: 0;
185162
}
163+
.btn-label {
164+
padding: 0;
165+
}
166+
.btn-icon {
167+
display: inline-block;
168+
filter: invert(1);
169+
margin: 5px 2px -3px;
170+
width: 1.2em;
171+
height: 1.2em;
172+
}
173+
&:hover {
174+
background-color: @lighter-grey;
175+
}
186176
}
187-
&__content-list .cta-btn--w-icon:hover {
188-
background-color: rgba(0,0,0,0);
189-
}
190-
&__content-list .cta-btn .btn-label {
191-
padding: 0;
192-
}
193-
&__content-list .cta-btn .btn-icon {
194-
display: inline-block;
195-
filter: invert(1);
196-
margin: 5px 2px -3px;
197-
width: 1.2em;
198-
height: 1.2em;
199-
}
177+
}
178+
179+
// dropper menu icons
180+
.cta-btn {
181+
.listen, .search, .download, .map {
182+
background-repeat: no-repeat;
183+
background-size: contain;
184+
background-position: center;
185+
}
186+
.listen { background-image: url(/static/images/icons/icon_listen.png); }
187+
.search { background-image: url(/static/images/icons/icon_search.png); }
188+
.download { background-image: url(/static/images/icons/icon_download.png); }
189+
.map { background-image: url(/static/images/icons/icon_map.png); }
200190
}

0 commit comments

Comments
 (0)