Skip to content

Commit

Permalink
Correcting the svg issue also for alternate theme
Browse files Browse the repository at this point in the history
Glitches on Safari iOS #138
  • Loading branch information
dascritch committed Apr 8, 2021
1 parent 2e32a8d commit 5580d08
Show file tree
Hide file tree
Showing 7 changed files with 13 additions and 24 deletions.
2 changes: 1 addition & 1 deletion build/cpu-audio.direct-download.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/cpu-audio.direct-download.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/cpu-audio.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/cpu-audio.js.map

Large diffs are not rendered by default.

9 changes: 4 additions & 5 deletions src/themes/default/scoped.css
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,7 @@ b, strong, h5 a {
align-self: center;
}

#control,
#actions {
.siders {
flex : 0 0 var(--cpu-height);
width : var(--cpu-height);
max-height : var(--cpu-height);
Expand Down Expand Up @@ -151,7 +150,7 @@ b, strong, h5 a {
opacity: 1;
}

#control svg, #actions svg {
.siders svg {
vertical-align : middle;
max-width : 100%;
max-height : 100%;
Expand Down Expand Up @@ -545,8 +544,8 @@ a:hover, button:hover, a:focus, button:focus,
padding-bottom: 2px;
}

#control svg, #actions svg {
/* Safari iOS is unable to recalc correctly. Keep this.. See https://github.com/dascritch/cpu-audio/issues/138 */
.siders svg {
/* Safari iOS is unable to recalc correctly. See https://github.com/dascritch/cpu-audio/issues/138 */
height : calc(var(--cpu-height) - 16px);
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/themes/default/template.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<!-- Here are inserted messages from cpu-audio.CPU.updateError(). Perhaps we should hide them at some sizes. And also put an ellipsis in css -->
</section>
<section id="pagemain">
<button type="button" id="control" tabindex="0">
<button type="button" id="control" tabindex="0" class="siders">
<!-- play / pause / loading -->
<svg id="loading" viewBox="0 0 32 32">
<title>${__.loading}</title>
Expand Down Expand Up @@ -73,7 +73,7 @@ <h5 id="title"><a href="#" id="canonical" aria-label="${__.canonical}"><!-- titl
<!-- here are inserted tracks for _chapters, cursors,… -->
</div>
</div>
<button id="actions" aria-label="${__.more}" title="${__.more}">
<button id="actions" aria-label="${__.more}" title="${__.more}" class="siders">
<svg viewBox="0 0 32 32" aria-hidden="true">
<circle cx="7" cy="16" r="3" />
<circle cx="16" cy="16" r="3" />
Expand Down
16 changes: 3 additions & 13 deletions src/themes/direct-download/template.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<section id="pageerror" role="alert">
</section>
<section id="pagemain">
<button type="button" id="control" tabindex="0">
<button type="button" id="control" tabindex="0" class="siders">
<!-- play / pause / loading -->
<svg id="loading" viewBox="0 0 32 32" aria-hidden="true">
<title>${__.loading}</title>
Expand Down Expand Up @@ -75,7 +75,7 @@ <h5 id="title"><a href="#" id="canonical" aria-label="${__.canonical}"></a></h5>
</div>
</div>
</div>
<a href="#" target="social" id="link" aria-label="${__.download}" title="${__.download}" download>
<a href="#" target="social" id="link" aria-label="${__.download}" title="${__.download}" download class="siders">
<!--
download link, instead of the actions button.
Even if the webcomponent will try to guess which is the prefered source for the clien platform, you can precise which link is to be downloaded :
Expand All @@ -97,17 +97,7 @@ <h5 id="title"><a href="#" id="canonical" aria-label="${__.canonical}"></a></h5>
<style>
/* Not the recommended way, but I didn't want to copy the whole scoped.css for invalidate only one^w a couple of rules */
#link {
background : none !important;,
flex : 0 0 var(--cpu-height);
width : var(--cpu-height);
max-height : var(--cpu-height);
height : 100%;
text-align : center;
vertical-align : middle;
}
#link svg {
max-width: 100%;
max-height: 100%;
background : none !important;
}
#link:hover, #link:focus {
background: var(--cpu-focus-background, var(--cpu-color)) !important;
Expand Down

0 comments on commit 5580d08

Please sign in to comment.