From 04edb29fe69cf00ffaf453269dc32ea70125f5fa Mon Sep 17 00:00:00 2001 From: Ryan Toronto Date: Fri, 14 Sep 2018 16:46:37 -0400 Subject: [PATCH 01/26] Add tailwind --- app/pods/components/bar-chart/template.hbs | 2 +- app/pods/components/comment-box/template.hbs | 2 +- .../confirm-delete-post/template.hbs | 6 +- app/pods/components/tag-list/template.hbs | 7 +- app/pods/components/ui-button/template.hbs | 8 +- .../components/ui-card/header/template.hbs | 7 +- .../ui-selectable-list/item/template.hbs | 6 +- app/pods/dashboard/template.hbs | 8 +- .../media/albums/album/image/template.hbs | 4 +- .../media/albums/album/index/template.hbs | 4 +- app/pods/media/albums/index/template.hbs | 7 +- app/pods/media/styles/style/template.hbs | 2 +- app/pods/media/styles/template.hbs | 20 +- app/pods/media/template.hbs | 10 +- app/pods/posts/index/template.hbs | 26 +- app/pods/posts/post/edit/template.hbs | 18 +- app/pods/posts/post/index/template.hbs | 26 +- app/pods/posts/post/template.hbs | 6 +- app/pods/tags/index/template.hbs | 4 +- app/pods/tags/tag/template.hbs | 10 +- app/styles/app.scss | 68 +- app/tailwind/components/your-component.css | 17 + app/tailwind/config/background-colors.js | 16 + app/tailwind/config/background-size.js | 18 + app/tailwind/config/border-colors.js | 20 + app/tailwind/config/border-radius.js | 23 + app/tailwind/config/border-widths.js | 20 + app/tailwind/config/colors.js | 102 +++ app/tailwind/config/font-weights.js | 25 + app/tailwind/config/fonts.js | 57 ++ app/tailwind/config/height.js | 34 + app/tailwind/config/letter-spacing.js | 17 + app/tailwind/config/line-height.js | 18 + app/tailwind/config/margin.js | 33 + app/tailwind/config/max-height.js | 18 + app/tailwind/config/max-width.js | 27 + app/tailwind/config/min-height.js | 19 + app/tailwind/config/min-width.js | 18 + app/tailwind/config/negative-margin.js | 32 + app/tailwind/config/opacity.js | 21 + app/tailwind/config/padding.js | 32 + app/tailwind/config/screens.js | 25 + app/tailwind/config/shadows.js | 24 + app/tailwind/config/svg-fill.js | 17 + app/tailwind/config/svg-stroke.js | 17 + app/tailwind/config/tailwind.js | 146 ++++ app/tailwind/config/text-colors.js | 16 + app/tailwind/config/text-sizes.js | 31 + app/tailwind/config/width.js | 50 ++ app/tailwind/config/z-index.js | 22 + app/tailwind/modules.css | 32 + app/tailwind/utilities/your-utility.css | 65 ++ package.json | 1 + yarn.lock | 714 +++++++++++++++++- 54 files changed, 1833 insertions(+), 145 deletions(-) create mode 100644 app/tailwind/components/your-component.css create mode 100644 app/tailwind/config/background-colors.js create mode 100644 app/tailwind/config/background-size.js create mode 100644 app/tailwind/config/border-colors.js create mode 100644 app/tailwind/config/border-radius.js create mode 100644 app/tailwind/config/border-widths.js create mode 100644 app/tailwind/config/colors.js create mode 100644 app/tailwind/config/font-weights.js create mode 100644 app/tailwind/config/fonts.js create mode 100644 app/tailwind/config/height.js create mode 100644 app/tailwind/config/letter-spacing.js create mode 100644 app/tailwind/config/line-height.js create mode 100644 app/tailwind/config/margin.js create mode 100644 app/tailwind/config/max-height.js create mode 100644 app/tailwind/config/max-width.js create mode 100644 app/tailwind/config/min-height.js create mode 100644 app/tailwind/config/min-width.js create mode 100644 app/tailwind/config/negative-margin.js create mode 100644 app/tailwind/config/opacity.js create mode 100644 app/tailwind/config/padding.js create mode 100644 app/tailwind/config/screens.js create mode 100644 app/tailwind/config/shadows.js create mode 100644 app/tailwind/config/svg-fill.js create mode 100644 app/tailwind/config/svg-stroke.js create mode 100644 app/tailwind/config/tailwind.js create mode 100644 app/tailwind/config/text-colors.js create mode 100644 app/tailwind/config/text-sizes.js create mode 100644 app/tailwind/config/width.js create mode 100644 app/tailwind/config/z-index.js create mode 100644 app/tailwind/modules.css create mode 100644 app/tailwind/utilities/your-utility.css diff --git a/app/pods/components/bar-chart/template.hbs b/app/pods/components/bar-chart/template.hbs index 341d53b..080ddeb 100644 --- a/app/pods/components/bar-chart/template.hbs +++ b/app/pods/components/bar-chart/template.hbs @@ -7,7 +7,7 @@ attachment='bottom middle' offset='14px 0'}} -
+

{{highlightedLabel}}

diff --git a/app/pods/components/comment-box/template.hbs b/app/pods/components/comment-box/template.hbs index fe88dbb..67e85ac 100644 --- a/app/pods/components/comment-box/template.hbs +++ b/app/pods/components/comment-box/template.hbs @@ -14,7 +14,7 @@ {{#if isLong}} Show {{if isExpanded "less" "more"}} {{/if}} diff --git a/app/pods/components/confirm-delete-post/template.hbs b/app/pods/components/confirm-delete-post/template.hbs index 10b7d15..a37047c 100644 --- a/app/pods/components/confirm-delete-post/template.hbs +++ b/app/pods/components/confirm-delete-post/template.hbs @@ -1,11 +1,11 @@ {{#ui-modal onClose=(action on-cancel)}} -
-

+
+

Delete post?

-

+

Are you sure you want to delete {{post.title}}? This action cannot be undone.

diff --git a/app/pods/components/tag-list/template.hbs b/app/pods/components/tag-list/template.hbs index 075111a..ee82982 100644 --- a/app/pods/components/tag-list/template.hbs +++ b/app/pods/components/tag-list/template.hbs @@ -1,5 +1,10 @@ {{#each (sort-by 'name' tags) as |tag|}} - {{#link-to 'tags.tag' tag.slug class='dib transition mr1 near-black link f8 fw5 ttu br-pill bg-light-gray hover-bg-moon-gray ph2 pv1'}} + {{#link-to 'tags.tag' tag.slug + class=' + inline-block no-underline transition mr-1 + text-black text-10px font-medium uppercase + rounded-full bg-grey-lighter hover:bg-grey-light + px-2 py-1'}} {{tag.name}} {{/link-to}} {{/each}} diff --git a/app/pods/components/ui-button/template.hbs b/app/pods/components/ui-button/template.hbs index e6940ea..9fc1f4b 100644 --- a/app/pods/components/ui-button/template.hbs +++ b/app/pods/components/ui-button/template.hbs @@ -3,12 +3,14 @@ disabled={{disabled}} data-test-id={{data-test-id}} class=" - leading-tight inline-block mb3 pointer f5 pv2 ph3 br2 fw3 bn bg-blue white - {{if disabled 'o-50' 'dim'}} + leading-tight inline-block + mb-4 pointer text-base py-2 px-3 rounded font-light border-0 + bg-blue text-white + {{if disabled 'opacity-50' 'dim'}} "> {{#if task.isRunning}} -
+
{{ui-spinner}}
{{/if}} diff --git a/app/pods/components/ui-card/header/template.hbs b/app/pods/components/ui-card/header/template.hbs index 46b6804..125cbf4 100644 --- a/app/pods/components/ui-card/header/template.hbs +++ b/app/pods/components/ui-card/header/template.hbs @@ -1,6 +1,7 @@ -
-

{{yield}}

- +
+

{{yield}}

+ ×
diff --git a/app/pods/components/ui-selectable-list/item/template.hbs b/app/pods/components/ui-selectable-list/item/template.hbs index 84ef4e3..dff8551 100644 --- a/app/pods/components/ui-selectable-list/item/template.hbs +++ b/app/pods/components/ui-selectable-list/item/template.hbs @@ -1,11 +1,13 @@
  • + class=' + flex items-center + no-underline text-grey-dark p-2 rounded hover:bg-grey-lightest mb-2'> {{yield}} - + {{#if selected}} {{fa-icon 'check'}} {{/if}} diff --git a/app/pods/dashboard/template.hbs b/app/pods/dashboard/template.hbs index 6118d8c..290c0cc 100644 --- a/app/pods/dashboard/template.hbs +++ b/app/pods/dashboard/template.hbs @@ -2,7 +2,7 @@ did-insert=(action 'activateKeyboard') will-destroy=(action 'deactivateKeyboard')}} -

    Welcome, Sam!

    +

    Welcome, Sam!

    Latest posts

    @@ -10,19 +10,19 @@ {{ui-spinner}} {{/liquid-if}} -
    +
    {{#ui-card}}

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    {{/ui-card}}
    -
    +
    {{#ui-card}}

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    {{/ui-card}}
    -
    +
    {{#ui-card}}

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    {{/ui-card}} diff --git a/app/pods/media/albums/album/image/template.hbs b/app/pods/media/albums/album/image/template.hbs index 64b63bd..852d1c1 100644 --- a/app/pods/media/albums/album/image/template.hbs +++ b/app/pods/media/albums/album/image/template.hbs @@ -1,7 +1,7 @@ -{{#link-to 'media.albums.album.index' class='link dark-gray dim'}} +{{#link-to 'media.albums.album.index' class='no-underline text-grey-darkest dim'}} < {{model.album.title}} {{/link-to}}

    {{model.title}}

    - + diff --git a/app/pods/media/albums/album/index/template.hbs b/app/pods/media/albums/album/index/template.hbs index ae3eb76..b94e73c 100644 --- a/app/pods/media/albums/album/index/template.hbs +++ b/app/pods/media/albums/album/index/template.hbs @@ -1,4 +1,4 @@ -{{#link-to 'media.albums' class='link dark-gray dim'}} +{{#link-to 'media.albums' class='no-underline text-grey-darkest dim'}} < All albums {{/link-to}} @@ -7,7 +7,7 @@
    {{#each model.images as |image|}} {{#link-to 'media.albums.album.image' image class='dim'}} - + {{/link-to}} {{/each}}
    diff --git a/app/pods/media/albums/index/template.hbs b/app/pods/media/albums/index/template.hbs index 9415cbf..48b36db 100644 --- a/app/pods/media/albums/index/template.hbs +++ b/app/pods/media/albums/index/template.hbs @@ -2,10 +2,11 @@
    {{#each (sort-by 'id' model) as |album|}} - {{#link-to 'media.albums.album.index' album class='db w4 mb3 mr3 link gray dim'}} + {{#link-to 'media.albums.album.index' album + class='block w-32 mb-3 mr-3 no-underline text-grey-dark dim'}} -

    {{album.title}}

    + class='w-32 h-32 rounded border border-grey'> +

    {{album.title}}

    {{/link-to}} {{/each}}
    diff --git a/app/pods/media/styles/style/template.hbs b/app/pods/media/styles/style/template.hbs index b159255..de5a9f0 100644 --- a/app/pods/media/styles/style/template.hbs +++ b/app/pods/media/styles/style/template.hbs @@ -1,5 +1,5 @@
    {{#each model as |image|}} - + {{/each}}
    diff --git a/app/pods/media/styles/template.hbs b/app/pods/media/styles/template.hbs index 68bab14..a84fb69 100644 --- a/app/pods/media/styles/template.hbs +++ b/app/pods/media/styles/template.hbs @@ -1,20 +1,20 @@ -
    -

    Photo styles

    +
    +

    Photo styles

    {{#link-to 'media.styles.style' 'light' - class='flex link b silver pb2 mr3 bb bw1 b--transparent' - activeClass='b--inherit'}} -
    -

    + class='flex no-underline text-bold text-grey-dark mr-4 border-bottom border-color-transparent' + activeClass='border-color-inherit'}} +

    +

    LIGHT

    {{/link-to}} {{#link-to 'media.styles.style' 'dark' - class='flex link b near-black pb2 bb bw1 b--transparent' - activeClass='b--inherit'}} -
    -

    + class='flex no-underline text-bold text-black border-bottom-1 border-color-transparent' + activeClass='border-color-inherit'}} +

    +

    DARK

    {{/link-to}} diff --git a/app/pods/media/template.hbs b/app/pods/media/template.hbs index 11f3b61..aa0738d 100644 --- a/app/pods/media/template.hbs +++ b/app/pods/media/template.hbs @@ -1,11 +1,15 @@ -{{#link-to 'media.albums' class='link dark-gray dim mr3' activeClass='silver'}} +{{#link-to 'media.albums' + class='no-underline text-grey-darkest dim mr-4' + activeClass='text-grey-dark'}} Albums {{/link-to}} -{{#link-to 'media.styles' class='link dark-gray dim' activeClass='silver'}} +{{#link-to 'media.styles' + class='no-underline text-grey-darkest dim' + activeClass='text-grey-dark'}} Styles {{/link-to}} -
    +
    {{outlet}} diff --git a/app/pods/posts/index/template.hbs b/app/pods/posts/index/template.hbs index 4e34306..c7f4d9e 100644 --- a/app/pods/posts/index/template.hbs +++ b/app/pods/posts/index/template.hbs @@ -5,31 +5,31 @@ {{/if}} {{#if model}} -
    -
    +
    +
    {{bar-chart data=authorData selectedLabel=selectedAuthor on-click=(action 'toggleBar' 'selectedAuthor')}} -

    +

    Authors

    -
    +
    {{bar-chart data=categoryData color='green' selectedLabel=selectedCategory on-click=(action 'toggleBar' 'selectedCategory')}} -

    +

    Categories

    -
    +
    {{bar-chart data=commentsData color='red' selectedLabel=selectedPost on-click=(action 'toggleBar' 'selectedPost')}} -

    +

    Comments

    @@ -37,7 +37,7 @@ {{/if}} {{#if model}} - +
    + -
    @@ -64,18 +64,20 @@ {{keyboard-press key="Enter" on-press=(action "openPost" navigatedPost)}} {{#each posts as |post|}} -
    - {{#link-to 'posts.post' post.id class='link dark-gray dim'}} + {{#link-to 'posts.post' post.id class='no-underline text-grey-darkest'}} {{post.title}} {{/link-to}} {{moment-format post.date 'MMM D, YYYY'}} {{post.author}} {{tag-list tags=post.tags}} + + class="hidden group-hover:block no-transition text-grey-dark no-underline"> {{fa-icon "trash"}} Delete diff --git a/app/pods/posts/post/edit/template.hbs b/app/pods/posts/post/edit/template.hbs index 38a2232..bcd0c8f 100644 --- a/app/pods/posts/post/edit/template.hbs +++ b/app/pods/posts/post/edit/template.hbs @@ -1,22 +1,24 @@ -
    -
    -

    - {{input value=model.title class='w-100 pa2'}} +
    +
    +

    + {{input + value=model.title + class='w-full p-2 border border-grey-lighter'}}

    -
    +
    {{textarea value=model.text rows=20 - class='pa2 b--light-gray w-100'}} + class='p-2 border border-grey-lighter w-full'}}
    -
    +
    {{#ui-button task=save data-test-id="save"}} Save {{/ui-button}} {{#if save.last.isError}} -

    +

    {{fa-icon 'exclamation-circle'}} Whoops - your post was not saved. Please try again!

    diff --git a/app/pods/posts/post/index/template.hbs b/app/pods/posts/post/index/template.hbs index d937c03..c1cabec 100644 --- a/app/pods/posts/post/index/template.hbs +++ b/app/pods/posts/post/index/template.hbs @@ -1,21 +1,25 @@

    {{model.title}}

    -

    - {{#link-to 'posts.post.edit' model.id class='dim link silver'}} +

    + {{#link-to 'posts.post.edit' model.id class='dim no-underline text-grey-dark'}} Edit post {{/link-to}}

    -
    -

    +

    +

    Tags:

    - + {{fa-icon 'pencil'}} @@ -25,9 +29,9 @@ {{tag-list tags=model.tags}}
    -
    +
    -
    +
    {{{model.text}}}
    @@ -35,13 +39,13 @@ Activity

    -
    +
      {{#each (sort-by 'createdAt:desc' model.activities) as |activity|}}
    • · {{activity.text}} - {{moment-from-now activity.createdAt}} + {{moment-from-now activity.createdAt}}
      • {{/each}}
    @@ -54,7 +58,7 @@ {{/if}} -
    +
    {{#if model.comments}}