diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index 5ab1e8aef..53abd01f8 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -191,10 +191,10 @@ $font-weight-bold: 600; * @presenter LineHeight */ -$line-height-large: 1.5; -$line-height-base: 1.3; -$line-height-small: 1.1; -$line-height-smaller: 1.0; +$line-height-large: 1.5rem; +$line-height-base: 1.3rem; +$line-height-small: 1.1rem; +$line-height-smaller: 1.0rem; /** * @tokens Letter Spacing @@ -352,3 +352,7 @@ $media-query-small: (min-width: 600px); $media-query-medium: (min-width: 768px); $media-query-large: (min-width: 1024px); $media-query-x-large: (min-width: 1200px); + +/** + * @tokens Background Images + */ diff --git a/webapp/components/Editor/ContentViewer.story.js b/webapp/components/Editor/ContentViewer.story.js new file mode 100644 index 000000000..b4997ece4 --- /dev/null +++ b/webapp/components/Editor/ContentViewer.story.js @@ -0,0 +1,78 @@ +import { storiesOf } from '@storybook/vue' +import { withA11y } from '@storybook/addon-a11y' +import ContentViewer from '~/components/Editor/ContentViewer.vue' +import helpers from '~/storybook/helpers' + +helpers.init() + +storiesOf('ContentViewer', module) + .addDecorator(withA11y) + .addDecorator((storyFn) => { + const ctx = storyFn() + return { + components: { ctx }, + template: ` + + + + `, + } + }) + .addDecorator(helpers.layout) + .add('Basic formatting', () => ({ + components: { ContentViewer }, + store: helpers.store, + data: () => ({ + content: ` +

Basic formatting

+

+ Here is some italic, bold and underline text. +
+ Also do we have some inline links here. +

+

Heading 3

+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+

Heading 4

+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+
Heading 5
+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+ +

Unordered List

+ + +

Ordered List

+
    +
  1. +

    ordered lists

    +

    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsu

    +
      +
    1. +

      can have indentations

      +
        +
      1. +

        and text parapgraphs, too

        +

        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

        +
        2. +
      +
      2. +
    +
    2. +
+ `, + }), + template: ``, + })) diff --git a/webapp/components/Editor/Editor.story.js b/webapp/components/Editor/Editor.story.js index 24e3fa927..dfcc3cdf4 100644 --- a/webapp/components/Editor/Editor.story.js +++ b/webapp/components/Editor/Editor.story.js @@ -79,15 +79,35 @@ storiesOf('Editor', module)

  • Also some list

  • with

  • several

    • -

  • points

    • +
  • +

    points

    + +

    • Ordered List

      -

    1. justo

      2. -

    2. dolores

      3. -

    3. et ea rebum

      4. -

    4. kasd gubergren

      5. +
    5. +

      ordered lists

      +

      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsu

      +
        +
      1. +

        can have indentations

        +
          +
        1. +

          and text parapgraphs, too

          +

          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

          +
          2. +
        +
        2. +
      +
    `, }), diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index f0e9c7909..67329a60b 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -327,5 +327,46 @@ li > p { p { margin: 0 0 $space-x-small; } + + ul { + padding-left: $space-x-large; + + li { + display: block; + text-indent: -$space-large; + + p:first-child:before { + content: '•'; + padding: $space-none $space-x-small; + margin-right: $space-x-small; + } + + p:not(:first-child) { + padding-left: $space-base; + } + } + } + + ol { + // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters + counter-reset: item; + padding-left: $space-x-large + 4px; + + li { + display: block; + text-indent: -$space-large - 4px; + + p:first-child:before { + content: counters(item, '.') '.'; + counter-increment: item; + padding: $space-none $space-x-small; + margin-right: $space-x-small; + } + + p:not(:first-child) { + padding-left: $space-base; + } + } + } } diff --git a/yarn.lock b/yarn.lock index 5a7953349..06e855034 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5107,7 +5107,7 @@ request-progress@3.0.0: dependencies: throttleit "^1.0.0" -"request@github:cypress-io/request#b5af0d1fa47eec97ba980cde90a13e69a2afcd16": +request@cypress-io/request#b5af0d1fa47eec97ba980cde90a13e69a2afcd16: version "2.88.1" resolved "https://codeload.github.com/cypress-io/request/tar.gz/b5af0d1fa47eec97ba980cde90a13e69a2afcd16" dependencies: