data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

tweak design, fix a11y of sensitive media, remove will-change:transform

Browse source
This commit is contained in:
Nolan Lawson 2018-01-21 13:35:03 -08:00
parent c08e8f2d4d
commit 174e9fc900
4 changed files with 52 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
routes/_components/Status.html
View file

@ -38,26 +38,28 @@
{{/if}} {{/if}}
{{#if originalMediaAttachments && originalMediaAttachments.length}} {{#if originalMediaAttachments && originalMediaAttachments.length}}
{{#if status.sensitive}} {{#if status.sensitive}}
<button type="button" <div class="status-sensitive-media-container {{sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden'}}"
class="status-sensitive-media-button {{sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden'}}" >
aria-label="{{sensitiveShown ? 'Hide sensitive media' : 'Show sensitive media'}}" <button type="button" class="status-sensitive-media-button"
on:click="onClickSensitiveMediaButton()" > aria-label="{{sensitiveShown ? 'Hide sensitive media: ' : 'Show sensitive media'}}"
{{#if !sensitiveShown}} on:click="onClickSensitiveMediaButton()" >
{{#if !sensitiveShown}}
<div class="status-sensitive-media-warning"> <div class="status-sensitive-media-warning">
<span> <span>
Sensitive content. Click to show. Sensitive content. Click to show.
</span> </span>
</div> </div>
{{/if}} {{/if}}
<div class="svg-wrapper"> <div class="svg-wrapper">
<svg> <svg>
<use xlink:href="{{sensitiveShown ? '#fa-eye-slash' : '#fa-eye'}}" /> <use xlink:href="{{sensitiveShown ? '#fa-eye-slash' : '#fa-eye'}}" />
</svg> </svg>
</div> </div>
</button>
{{#if sensitiveShown}} {{#if sensitiveShown}}
<Media mediaAttachments="{{originalMediaAttachments}}" sensitive="{{status.sensitive}}"/> <Media mediaAttachments="{{originalMediaAttachments}}" sensitive="{{status.sensitive}}"/>
{{/if}} {{/if}}
</button> </div>
{{else}} {{else}}
<Media mediaAttachments="{{originalMediaAttachments}}" sensitive="{{status.sensitive}}"/> <Media mediaAttachments="{{originalMediaAttachments}}" sensitive="{{status.sensitive}}"/>
{{/if}} {{/if}}
@ -81,7 +83,19 @@
".............. status-toolbar"; ".............. status-toolbar";
grid-template-columns: 58px 1fr; grid-template-columns: 58px 1fr;
border-bottom: 1px solid var(--main-border); border-bottom: 1px solid var(--main-border);
/* will-change: transform; */ /* TODO: is this necessary? */ }
@media (max-width: 767px) {
.status-article {
grid-template-areas:
".............. status-boosted"
"status-sidebar status-author"
"status-sidebar status-spoiler"
"status-sidebar status-spoiler-button"
"status-sidebar status-content"
"status-media status-media"
"status-toolbar status-toolbar";
}
} }
:global(.status-sidebar) { :global(.status-sidebar) {
@ -192,24 +206,39 @@
height: 18px; height: 18px;
} }
.status-sensitive-media-button { .status-sensitive-media-container {
grid-area: status-media; grid-area: status-media;
margin: 10px 0; margin: 10px 0;
padding: 0;
position: relative; position: relative;
border-radius: 0; border-radius: 0;
border: none; border: none;
background: none; background: none;
fill: var(--mask-svg-fill);
} }
.status-sensitive-media-button.status-sensitive-media-hidden { .status-sensitive-media-button {
margin: 0;
padding: 0;
border: none;
background: none;
width: 100%;
height: 100%;
}
.status-sensitive-media-shown .status-sensitive-media-button {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.status-sensitive-media-container.status-sensitive-media-hidden {
width: 100%; width: 100%;
margin: 10px auto; margin: 10px auto;
height: 200px; height: 200px;
} }
.status-sensitive-media-button .status-sensitive-media-warning { .status-sensitive-media-container .status-sensitive-media-warning {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -222,7 +251,7 @@
z-index: 60; z-index: 60;
} }
.status-sensitive-media-button .svg-wrapper { .status-sensitive-media-container .svg-wrapper {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -235,10 +264,10 @@
pointer-events: none; pointer-events: none;
background: var(--mask-bg); background: var(--mask-bg);
} }
.status-sensitive-media-button.status-sensitive-media-shown .svg-wrapper { .status-sensitive-media-container.status-sensitive-media-shown .svg-wrapper {
background: none; background: none;
} }
.status-sensitive-media-button svg { .status-sensitive-media-container svg {
width: 24px; width: 24px;
height: 24px; height: 24px;
fill: var(--mask-svg-fill); fill: var(--mask-svg-fill);
@ -247,7 +276,7 @@
margin: 1px; margin: 1px;
padding: 6px 10px; padding: 6px 10px;
} }
.status-sensitive-media-button.status-sensitive-media-hidden svg { .status-sensitive-media-container.status-sensitive-media-hidden svg {
fill: var(--deemphasized-text-color); fill: var(--deemphasized-text-color);
background: var(--mask-opaque-bg); background: var(--mask-opaque-bg);
} }

1
routes/_components/VirtualListItem.html
View file

@ -11,7 +11,6 @@
top: 0; top: 0;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
/* will-change: transform; */ /* causes jank in mobile Firefox */
} }
.virtual-list-item.shown { .virtual-list-item.shown {
opacity: 1; opacity: 1;

1
scss/global.scss
View file

@ -21,7 +21,6 @@ body {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
will-change: transform; /* avoids "repaint on scroll" in Chrome */
} }
main { main {

2
templates/2xx.html
View file

@ -11,7 +11,7 @@
<style> <style>
/* auto-generated w/ build-sass.js */ /* auto-generated w/ build-sass.js */
body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666;--focus-outline:#c5d1f6} body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666;--focus-outline:#c5d1f6}
body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:absolute;top:72px;left:0;right:0;bottom:0;will-change:transform}main{position:relative;width:602px;max-width:100vw;padding:15px 0;box-sizing:border-box;margin:15px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0} body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:absolute;top:72px;left:0;right:0;bottom:0}main{position:relative;width:602px;max-width:100vw;padding:15px 0;box-sizing:border-box;margin:15px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}
body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666;--focus-outline:#bfbfbf} body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666;--focus-outline:#bfbfbf}
</style> </style>