diff --git a/website/_includes/_mixins.jade b/website/_includes/_mixins.jade index 692b47887..5dace47e0 100644 --- a/website/_includes/_mixins.jade +++ b/website/_includes/_mixins.jade @@ -58,7 +58,9 @@ mixin api(path) mixin help(tooltip, icon_size) span(data-tooltip=tooltip)&attributes(attributes) - +icon("help", icon_size || 16).o-icon--inline + if tooltip + span.u-hidden(aria-role="tooltip")=tooltip + +icon("help_o", icon_size || 16).o-icon--inline //- Aside for text @@ -147,18 +149,23 @@ mixin code(label, language, prompt, height, icon, wrap) block -//- Code blocks to display old/new versions +//- Wrapper for code blocks to display old/new versions mixin code-wrapper() span.u-inline-block.u-padding-top.u-width-full block -mixin code-old() - +code(false, false, false, false, "reject").o-block-small +//- Code blocks to display old/new versions + label - [string] ARIA label for block. Defaults to "correct"/"incorrect". + +mixin code-old(label) + - var label = label || 'incorrect' + +code(false, false, false, false, "reject").o-block-small(aria-label=label) block -mixin code-new() - +code(false, false, false, false, "accept").o-block-small +mixin code-new(label) + - var label = label || 'correct' + +code(false, false, false, false, "accept").o-block-small(aria-label=label) block @@ -244,10 +251,16 @@ mixin label-inline() //- Tag + tooltip - [string] optional tooltip text. + hide_icon - [boolean] hide tooltip icon -mixin tag() - span.u-text-tag.u-text-tag--spaced(aria-hidden="true")&attributes(attributes) +mixin tag(tooltip, hide_icon) + div.u-text-tag.u-text-tag--spaced(data-tooltip=tooltip)&attributes(attributes) block + if tooltip + if !hide_icon + | #[+icon("help", 12).o-icon--tag] + | #[span.u-hidden(aria-role="tooltip")=tooltip] //- "Requires model" tag with tooltip and list of capabilities @@ -256,10 +269,7 @@ mixin tag() mixin tag-model(...capabs) - var intro = "To use this functionality, spaCy needs a model to be installed" - var ext = capabs.length ? " that supports the following capabilities: " + capabs.join(', ') : "" - - span.u-nowrap - +tag Needs model - +help(intro + ext + ".").u-color-theme + +tag(intro + ext + ".") Needs model //- "New" tag to label features new in a specific version @@ -269,8 +279,8 @@ mixin tag-model(...capabs) mixin tag-new(version) - var version = (typeof version == 'number') ? version.toFixed(1) : version - +tag(data-tooltip="This feature is new and was introduced in spaCy v#{version}.") - | v#{version} + - var tooltip = "This feature is new and was introduced in spaCy v" + version + +tag(tooltip, true) v#{version} //- List diff --git a/website/_includes/_svg.jade b/website/_includes/_svg.jade index 144f9dc1a..0f7266c0a 100644 --- a/website/_includes/_svg.jade +++ b/website/_includes/_svg.jade @@ -31,8 +31,11 @@ svg(style="position: absolute; visibility: hidden; width: 0; height: 0;" width=" symbol#svg_star(viewBox="0 0 24 24") path(d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z") - symbol#svg_help(viewBox="0 0 24 24") - path(d="M12 6c2.203 0 3.984 1.781 3.984 3.984 0 2.484-3 2.766-3 5.016h-1.969c0-3.234 3-3 3-5.016 0-1.078-0.938-1.969-2.016-1.969s-2.016 0.891-2.016 1.969h-1.969c0-2.203 1.781-3.984 3.984-3.984zM12 20.016c4.406 0 8.016-3.609 8.016-8.016s-3.609-8.016-8.016-8.016-8.016 3.609-8.016 8.016 3.609 8.016 8.016 8.016zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984zM11.016 18v-2.016h1.969v2.016h-1.969z") + symbol#svg_help(viewBox="0 0 24 28") + path(d="M14 21.5v-3c0-0.281-0.219-0.5-0.5-0.5h-3c-0.281 0-0.5 0.219-0.5 0.5v3c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5zM18 11c0-2.859-3-5-5.688-5-2.547 0-4.453 1.094-5.797 3.328-0.141 0.219-0.078 0.5 0.125 0.656l2.063 1.563c0.078 0.063 0.187 0.094 0.297 0.094 0.141 0 0.297-0.063 0.391-0.187 0.734-0.938 1.047-1.219 1.344-1.437 0.266-0.187 0.781-0.375 1.344-0.375 1 0 1.922 0.641 1.922 1.328 0 0.812-0.422 1.219-1.375 1.656-1.109 0.5-2.625 1.797-2.625 3.313v0.562c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5v0c0-0.359 0.453-1.125 1.188-1.547 1.188-0.672 2.812-1.578 2.812-3.953zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z") + + symbol#svg_help_o(viewBox="0 0 24 28") + path(d="M13.75 18.75v2.5c0 0.281-0.219 0.5-0.5 0.5h-2.5c-0.281 0-0.5-0.219-0.5-0.5v-2.5c0-0.281 0.219-0.5 0.5-0.5h2.5c0.281 0 0.5 0.219 0.5 0.5zM17.75 11c0 2.219-1.547 3.094-2.688 3.734-0.812 0.469-1.313 0.766-1.313 1.266v0.5c0 0.281-0.219 0.5-0.5 0.5h-2.5c-0.281 0-0.5-0.219-0.5-0.5v-1.062c0-1.922 1.375-2.531 2.484-3.031 0.938-0.438 1.516-0.734 1.516-1.437 0-0.906-1.141-1.578-2.172-1.578-0.547 0-1.125 0.172-1.484 0.422-0.344 0.234-0.672 0.578-1.25 1.297-0.094 0.125-0.234 0.187-0.391 0.187-0.109 0-0.219-0.031-0.297-0.094l-1.687-1.281c-0.203-0.156-0.25-0.453-0.109-0.672 1.281-2.016 3.078-3 5.453-3v0c2.562 0 5.437 2.031 5.437 4.75zM12 4c-5.516 0-10 4.484-10 10s4.484 10 10 10 10-4.484 10-10-4.484-10-10-10zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12v0c6.625 0 12 5.375 12 12z") symbol#svg_reject(viewBox="0 0 24 24") path(d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z") diff --git a/website/assets/css/_base/_objects.sass b/website/assets/css/_base/_objects.sass index 8494ee36a..afbf52f8d 100644 --- a/website/assets/css/_base/_objects.sass +++ b/website/assets/css/_base/_objects.sass @@ -93,6 +93,10 @@ &.o-icon--inline margin: 0 0.5rem 0 0.1rem + &.o-icon--tag + vertical-align: bottom + height: 100% + .o-emoji margin-right: 0.75rem vertical-align: text-bottom