Commit Graph

28 Commits

Author SHA1 Message Date
Joey Parrish 1ce2aa8c2a fix(demo): fix centering of MDL icons
Some icons on the demo were not centered correctly, such as the custom
content tab's "plus" button.  Some conflicting styles were changing
the line-height.

Change-Id: I08c9bb01642346b1a3b1162f779300221ae23246
2020-06-15 12:03:54 -07:00
Joey Parrish f01d4edd94 fix(demo): Fix error text overflow
Some very long URLs can appear in the error text, and word wrapping is
very helpful.  This change sets styles on the element to wrap text
anywhere.

Change-Id: I9b1ddc97f90d5f1b2f5e532efd7c53f747576db5
2020-06-11 15:14:53 -07:00
Joey Parrish a7e55404ee fix(demo): Fix missing icon for demo app menu
This icon went missing in the change "Apply upstream styles for icons
font" (Change-Id: I615c1dfd86e5b9802d03050c5db0154ac196c2ef).  We may
not be using that CSS class name any more, but the MDL library still
is.  So this override that was removed needed to come back, albeit for
a different reason than before.

Change-Id: Ibf7e865604f09d9d02fe15fe9f577ea63cdf6d1d
2020-06-11 15:14:44 -07:00
Joey Parrish c1b109aabc fix: Correct license headers in CSS/LESS
This corrects/normalizes the license headers in CSS and LESS files.
The LESS tool respects the same "/*!" syntax for forcing the inclusion
of a license header, but will not dedup these licenses.  So the LESS
files generally will not use this syntax.  Instead, the build system
prepends a license header after compilation.

The exception is for our SVG spinner, which is based on third-party
CSS from codepen.  The copyright header for this is forced into the
output to give proper credit to the original author.

Issue #2638

Change-Id: I4c58e2b082f2d5e550a6f0a30feaaf9ebf82a53a
2020-06-09 16:19:38 -07:00
Joey Parrish d60cb13c47 fix(ui): Apply upstream styles for icons font
When we changed the font for the icons without changing the class
name, we lost upstream styles from the font server.  This was not
obvious in our demo, but was more obvious in other apps where the font
size was different.

By using the same class name as used by the font server, we get those
upstream styles applied correctly.

Issue #2633

Change-Id: I615c1dfd86e5b9802d03050c5db0154ac196c2ef
2020-06-09 19:16:23 +00:00
Joey Parrish 32ebfa730c Push demo app footer to the bottom of the page
For large screens, this fixes the empty whitespace below the footer.
The main content will now expand if necessary to push the footer to
the bottom.

Fixes: b/131849286

Change-Id: I8608e7f733a06c567ce5a01ea5b87f85f901c023
2020-04-07 17:59:17 +00:00
Jacob Trimble 326f5cd02a Use short license in more files.
Some of the files still used the old long license.  This increased the
size of the compiled bundle since it had both versions.

Change-Id: Iec137f71547f91369a563145f870eb26ddc96a96
2020-02-11 19:09:44 +00:00
Joey Parrish b0217f5e6f Work around Material Icons font bug
This works around google/material-design-icons#958 by switching from
the default "solid" style to the "rounded" icon style.

Change-Id: Iea29ed3732d252bd2d089c802c478a97cbda163d
2020-02-10 23:14:16 +00:00
Theodore Abshire 1d100c0da6 Work around MDL button bug in iOS 13.
In iOS 13, buttons with mdl ripple containers are broken;
seemingly, iOS 13 does not like the container having a default
opacity of 0.
This changes the default opacity to 0.01.

Fixes #2376

Change-Id: I0218d3911cce1c4b776ca6debf51ff62e4bbe4f3
2020-02-04 23:07:33 +00:00
Sandra Lokshina a38f61b1b6 Integrate ad experience into the demo page.
Different ads have been added to three assets.
Demo search CSS has been adjusted a bit for better
experience.
Feature name has been changed from "AD" to "ADS" to
reflect the fact that a single asset can have more
than one ad.

Issue #2222:

Change-Id: I12a63b813fb4bac79362f1689b485a824f5a9682
2020-01-29 18:21:16 +00:00
Theodore Abshire c702ce18a8 Added asset feature for "AD".
Change-Id: I16a90c0b9846c4e90df7be53fecc1aeddd0a22e4
2020-01-15 13:21:05 -08:00
Sandra Lokshina a62bd79a33 Add 'audio only' to the search terms on the demo page.
This also centers the search options a bit to accommodate
an additional field.

Change-Id: Ic05a4faa7b820d69e03e16a9e526c39e8cde58c0
2019-08-23 22:15:45 +00:00
Theodore Abshire f24c4a783f Added stylelint, a linter for our CSS/less files.
Also unified CSS/less style based on that.
This does have to use a forked version of stylelint, since there
is a bug (?) in the globbing library they use that causes it to
fail on our buildbot. I found the simplest solution was just to add
an option to disable globbing, a feature we weren't using anyway.

Closes #1867

Change-Id: I9295b01d5b15d060356e314938b64b551b75de6a
2019-08-08 18:38:19 +00:00
Theodore Abshire ccd53ba170 Change progress bar to a circle.
This looks nicer, as the progress indicator is around the download button,
instead of being on the other side of the asset card.

Change-Id: If44cc39691664b95c05665665260c5938123cc4f
2019-08-02 18:58:12 +00:00
Theodore Abshire 2c51de2574 Re-added hidden 'noinput' param to demo.
Change-Id: I137fdaf04342f20c8e389340473d0994c527998c
2019-07-29 10:38:59 -07:00
Theodore Abshire 0b9de75617 Made close button on errors easier to click.
This makes the close (X) button on the error bigger.
It also makes the documentation link smaller; specifically, it makes the
link div only the size of the text, rather than the entire width of the
error bar.

Closes #2057

Change-Id: Icb7519daea4831edcc2f42cbb851a34356bc8548
2019-07-25 10:58:34 -07:00
Theodore Abshire 06132d8fb1 Increase specificity of close button style.
The specificity of the css style for the close button was too low.
This meant that, in compiled mode, the close button was using the
normal button style, which was (among other things) invisible
against white backgrounds.

Change-Id: If8f73032ade3780870c913f427259d13643d47fb
2019-06-07 18:23:29 +00:00
Joey Parrish d5bd9985da Fix demo error display for large errors
When the error text is very large, it was overflowing into the "x"
button to close the error display.  This fixes the layout of the error
box and makes the text small enough (through padding) to avoid the
"x".

Change-Id: I77f46da67abd27df3ac8c3ad2811f8b557b0601b
2019-06-03 21:04:46 +00:00
Theodore Abshire 96c1f8795c Switch to using tippy.js for tooltips.
Previously, we were using MDL tooltips for our tooltips.
They seemed fine at first, but proved very temperamental; we had to
jump through hoops to get them to work inside MDL cards, and they kept
breaking for various reasons.
This instead adds the third-party tippy.js module, and uses that to make
tooltips instead.

Change-Id: I37ae9c9ade4e3c4dd6cbb1b86601377ed5d9e54f
2019-05-21 16:46:02 +00:00
Theodore Abshire d3b2df8037 Fix centering of asset card titles.
Change-Id: I2895424a8048d36038c86c0767b4b4412168eacd
2019-05-16 21:11:49 +00:00
Theodore Abshire 75b561444c Move download buttons to corner.
Instead of the download button being a button called "Download" or
"Delete", this moves it to the upper-right corner and made it into an
MDL icon instead of text. That way, there's no confusion between
removing a custom asset from storage and removing a custom asset from
the assets list.

Change-Id: I74d426bc9e9030598b741afc58a3ba7d6cec4c4a
2019-05-15 18:02:18 +00:00
Joey Parrish 23c79955a7 Fix inlining of external CSS
Importing in less is not enough.  It will not necessarily inline what
is imported by default.  The "inline" option, however, will force the
CSS file to be inlined.  Without this, some of the `@import`
statements are put directly into the output file, triggering
additional network requests at runtime.  This also adds the "css"
option, which forces less to treat these inputs as CSS and not as
LESS.

Finally, we import MDL for the demo app as a node dependency instead
of loading it from another origin.

This improves the demo's Lighthouse scores of "First Contentful Paint"
by 27% and "First Meaningful Paint" by 14%.

Change-Id: I28e627d3df494e3c4893d31b6bf818f09e8153e9
2019-05-13 17:43:40 +00:00
Joey Parrish 58cedb0367 Add @license to all LESS and CSS files
Change-Id: Ibefe715afcb3676d5a2694032b9c99fe98dd2c44
2019-05-10 17:26:14 +00:00
Joey Parrish 34585af993 Inline external CSS for quicker load
This reduces the number of resources we have to load by using LESS to
import them into the compiled CSS bundle.

This also gets rid of a flash of unstyled content in compiled mode by
always including the compiled CSS in HTML directly, regardless of
mode.  If the app is running in uncompiled mode, LESS is still loaded
and can override the compiled styles.

Change-Id: I8cde25c15c281029a129225fc85a8baee767f424
2019-05-09 19:05:17 +00:00
Theodore Abshire 64b5456c4e Change video-container into a class, from an id.
This is so that the video is properly fullscreen on Safari.
Changing video-container into a class changes its specificity, and thus
changes in which order the css properties are applied.

Change-Id: I8b1e9e9479724d009014b97973a1aa1271a33773
2019-05-07 18:07:06 +00:00
Theodore Abshire d462e87131 Gave highlighted asset cards a colored border.
The difference between the normal white background and the light-blue
highlighted asset cards was perhaps a bit too subtle for people with
vision problems.
This, instead of changing the background color, instead adds a reasonably
dark colored border.

Change-Id: I7a2ba1ba1613ca540ac05b3b464614616f8e8fd7
2019-05-06 16:53:01 +00:00
Joey Parrish 269b53b7a0 Improve lighthouse score
- Use a minified mux.js and awesomplete.js
 - Add rel=noopener to offsite target=_blank links for security
 - Improve contrast on selected nav button and footer text
 - Add empty alt attributes to asset images, since these are
   not necessary to understand the page

Change-Id: I253c7354243aaa0fe98e1f075dae304ddad4a3e2
2019-05-01 17:25:45 -07:00
Theodore Abshire efc2ed3df1 Added new demo page.
This is a complete replacement for the old demo page, made to be more
modern-looking and easier to maintain. It contains new features such as
remembering the URIs you provide for custom assets, and searching through
the default assets by feature.
This demo page is not quite ready for release yet, but it's getting close.

Change-Id: Iad01d1fc02c3cd238d73b9b9e02dbb4301cb6f2a
2019-05-01 19:58:18 +00:00