diff --git a/app/assets/images/comment.svg b/app/assets/images/comment.svg new file mode 100644 index 000000000..a2c4cfcf6 --- /dev/null +++ b/app/assets/images/comment.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/heart-filled.svg b/app/assets/images/heart-filled.svg new file mode 100644 index 000000000..ada446fde --- /dev/null +++ b/app/assets/images/heart-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/heart.svg b/app/assets/images/heart.svg new file mode 100644 index 000000000..8c3fc2c8c --- /dev/null +++ b/app/assets/images/heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/save-filled.svg b/app/assets/images/save-filled.svg new file mode 100644 index 000000000..6e6b571b7 --- /dev/null +++ b/app/assets/images/save-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/save.svg b/app/assets/images/save.svg new file mode 100644 index 000000000..3dc6c7409 --- /dev/null +++ b/app/assets/images/save.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/twemoji/fire.svg b/app/assets/images/twemoji/fire.svg new file mode 100644 index 000000000..e7af06a92 --- /dev/null +++ b/app/assets/images/twemoji/fire.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/assets/images/unicorn-filled.svg b/app/assets/images/unicorn-filled.svg new file mode 100644 index 000000000..a90fbcfbb --- /dev/null +++ b/app/assets/images/unicorn-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/unicorn.svg b/app/assets/images/unicorn.svg new file mode 100644 index 000000000..a965374a7 --- /dev/null +++ b/app/assets/images/unicorn.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/javascripts/initializers/initializeArticleReactions.js b/app/assets/javascripts/initializers/initializeArticleReactions.js index 3094c0abc..d7b2b2775 100644 --- a/app/assets/javascripts/initializers/initializeArticleReactions.js +++ b/app/assets/javascripts/initializers/initializeArticleReactions.js @@ -145,23 +145,11 @@ function requestReactionCounts(articleId) { ajaxReq.send(); } -function jumpToComments() { - document.getElementById('jump-to-comments').onclick = (e) => { - e.preventDefault(); - document.getElementById('comments').scrollIntoView({ - behavior: 'instant', - block: 'start', - }); - }; -} - function initializeArticleReactions() { setCollectionFunctionality(); setTimeout(() => { - var reactionButts = document.getElementsByClassName( - 'article-reaction-butt', - ); + var reactionButts = document.getElementsByClassName('crayons-reaction'); // we wait for the article to appear, // we also check that reaction buttons are there as draft articles don't have them @@ -176,9 +164,5 @@ function initializeArticleReactions() { }; } } - - if (document.getElementById('jump-to-comments')) { - jumpToComments(); - } }, 3); } diff --git a/app/assets/javascripts/initializers/initializeBaseUserData.js b/app/assets/javascripts/initializers/initializeBaseUserData.js index 5610f341d..9fb7ad218 100644 --- a/app/assets/javascripts/initializers/initializeBaseUserData.js +++ b/app/assets/javascripts/initializers/initializeBaseUserData.js @@ -42,16 +42,16 @@ function addRelevantButtonsToArticle(user) { if (articleContainer) { if (parseInt(articleContainer.dataset.authorId, 10) === user.id) { let actions = [ - `EDIT`, + `Edit`, ]; if (JSON.parse(articleContainer.dataset.published) === true) { actions.push( - `MANAGE`, + `Manage`, ); } if (user.pro) { actions.push( - `STATS`, + `Stats`, ); } document.getElementById('action-space').innerHTML = actions.join(''); @@ -71,17 +71,17 @@ function addRelevantButtonsToComments(user) { butt.innerHTML = 'Settings'; - butt.style.display = 'inline-block'; + '" rel="nofollow" class="crayons-link crayons-link--block" data-no-instant>Settings'; butt.classList.remove('hidden'); + butt.classList.add('block'); } if ( action === 'hide-button' && parseInt(commentableUserId, 10) === user.id ) { - butt.style.display = 'inline-block'; butt.classList.remove('hidden'); + butt.classList.add('block'); } } @@ -91,10 +91,13 @@ function addRelevantButtonsToComments(user) { let butt = modButts[i]; if (butt.classList.contains('mod-actions-comment-button')) { butt.innerHTML = - 'Moderate'; + 'Moderate'; } butt.className = 'mod-actions'; - butt.style.display = 'inline-block'; + butt.classList.remove('hidden'); + butt.classList.add('block'); } } } diff --git a/app/assets/javascripts/initializers/initializeCommentDropdown.js b/app/assets/javascripts/initializers/initializeCommentDropdown.js index 2863ccf12..fadbed722 100644 --- a/app/assets/javascripts/initializers/initializeCommentDropdown.js +++ b/app/assets/javascripts/initializers/initializeCommentDropdown.js @@ -1,25 +1,24 @@ -'use strict'; + function initializeCommentDropdown() { const announcer = document.getElementById('article-copy-link-announcer'); function isClipboardSupported() { return ( - typeof navigator.clipboard !== "undefined" && - navigator.clipboard !== null + typeof navigator.clipboard !== 'undefined' && navigator.clipboard !== null ); } function isNativeAndroidDevice() { return ( navigator.userAgent === 'DEV-Native-android' && - typeof AndroidBridge !== "undefined" && + typeof AndroidBridge !== 'undefined' && AndroidBridge !== null ); } function removeClass(className) { - return element => element.classList.remove(className); + return (element) => element.classList.remove(className); } function getAllByClassName(className) { @@ -54,7 +53,8 @@ function initializeCommentDropdown() { AndroidBridge.copyToClipboard(inputValue); showAnnouncer(); } else if (isClipboardSupported()) { - navigator.clipboard.writeText(inputValue) + navigator.clipboard + .writeText(inputValue) .then(() => { showAnnouncer(); }) @@ -72,7 +72,7 @@ function initializeCommentDropdown() { event.target.matches('.dropbtn') || event.target.matches('clipboard-copy') || event.target.matches('clipboard-copy input') || - event.target.matches('clipboard-copy img') || + event.target.matches('clipboard-copy svg') || event.target.parentElement.classList.contains('dropdown-link-row') ); } @@ -94,7 +94,7 @@ function initializeCommentDropdown() { } function removeAllShowing() { - getAllByClassName('showing').forEach(removeClass('showing')); + getAllByClassName('crayons-dropdown').forEach(removeClass('block')); } function outsideClickListener(event) { @@ -108,16 +108,16 @@ function initializeCommentDropdown() { function dropdownFunction(e) { var button = e.target.parentElement; var dropdownContent = button.parentElement.getElementsByClassName( - 'dropdown-content', + 'crayons-dropdown', )[0]; - if (dropdownContent.classList.contains('showing')) { - dropdownContent.classList.remove('showing'); + if (dropdownContent.classList.contains('block')) { + dropdownContent.classList.remove('block'); removeClickListener(); removeCopyListener(); hideAnnouncer(); } else { removeAllShowing(); - dropdownContent.classList.add('showing'); + dropdownContent.classList.add('block'); const clipboardCopyElement = document.getElementsByTagName( 'clipboard-copy', )[0]; diff --git a/app/assets/javascripts/utilities/buildCommentHTML.js.erb b/app/assets/javascripts/utilities/buildCommentHTML.js.erb index 295b06528..180ffa251 100644 --- a/app/assets/javascripts/utilities/buildCommentHTML.js.erb +++ b/app/assets/javascripts/utilities/buildCommentHTML.js.erb @@ -54,14 +54,14 @@ function buildCommentHTML(comment) { <%= image_tag("three-dots.svg", class: "dropdown-icon", alt: "Toggle dropdown menu") %>\ \
\ -
\ - \ +
\ + \ Permalink\ \ - \ + \ Settings\ \ - Report Abuse\ + Report Abuse\
\
\
\ diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss index e3bfd85dc..902f68c7a 100644 --- a/app/assets/stylesheets/article-show.scss +++ b/app/assets/stylesheets/article-show.scss @@ -866,498 +866,6 @@ article { } } - .article-actions { - text-align: center; - padding: 5px 0 12px; - position: fixed; - bottom: 0; - z-index: 22; - width: 100%; - @include themeable(background, theme-container-background, $tan); - @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow); - - @media screen and (min-width: 950px) { - border-radius: 3px 3px 0 0; - } - - .dropdown-content { - clipboard-copy { - display: flex; - flex-flow: row wrap; - position: relative; - width: calc(100% - 24px); - margin-left: 12px; - cursor: pointer; - #article-copy-link-input { - border-radius: 3px; - border: 1px dashed black; - flex: 1 1 auto; - font-size: 1em; - margin: 10px auto; - padding: 4px 6px; - width: auto; - } - - img { - flex: 1 0 24px; - max-width: 24px; - margin-left: 5px; - @include themeable(filter, theme-social-icon-invert, invert(0)); - } - input { - cursor: pointer; - } - #article-copy-link-announcer { - flex: 1 0 100%; - color: $bold-blue; - position: absolute; - bottom: -8px; - padding-left: 0px; - font-size: 12px; - text-align: left; - - &[hidden] { - display: none; - } - } - } - } - @media screen and (min-width: 880px) { - width: 880px; - } - @media screen and (min-width: 1365px) { - margin-left: -1px; - margin-right: -1px; - width: calc(55px + 1.1vw); - top: 0%; - padding: calc(11px + 6%) 0px; - bottom: 5%; - left: calc(50% - 672px); - background: transparent; - border: 0; - box-shadow: none; - transition: opacity 0.25s; - padding-right: 2px; - - .article-share-action-block { - width: 100% !important; - } - - button, - a { - display: block !important; - width: 100% !important; - padding: 7px 0px !important; - margin-left: 0px !important; - margin-right: 0px !important; - border: 0px !important; - transition-delay: 0.1s; - - &.user-animated { - img { - animation: image-reaction-animation 0.3s !important; - } - } - &:focus-visible { - outline: 0; - box-shadow: 0px 0px 4px $medium-gray !important; - } - } - - a { - margin-top: 5px !important; - font-size: 0.67em !important; - padding: 10px 0px 9px !important; - &.article-actions-comments-count { - padding: 12px 0 !important; - } - } - - .dropdown-content { - left: 80px !important; - bottom: 0px !important; - @media screen and (min-width: 1365px) { - bottom: -185px !important; - } - a { - background: transparent !important; - padding-left: 10px !important; - } - } - } - @media screen and (min-width: 1439px) { - width: calc(90px + 1.1vw); - left: calc(50% - 711px); - a { - font-size: 0.7em !important; - } - button { - padding: 9px 0px !important; - } - .dropdown-content { - left: 100px !important; - } - } - @media screen and (min-width: 1530px) { - width: 156px; - left: calc(50% - 750px); - button, - a { - width: 140px !important; - } - a { - font-size: 0.79em !important; - } - .dropdown-content { - left: 150px !important; - } - button { - padding: 12px 0px !important; - } - } - button { - background: transparent; - margin: 0px calc(0.22vw + 2px); - padding: 2px calc(0.88vw + 6px); - padding-right: calc(0.88vw + 10px); - border: 0px; - font-weight: bold; - font-stretch: condensed; - - img { - height: 23px; - width: 23px; - transition: -webkit-filter 0.2s, opacity 0.2s; - padding: 4px; - border-radius: 100px; - transition: box-shadow 0.18s; - background: var(--card-bg); - @media screen and (min-width: 500px) { - height: 26px; - width: 26px; - } - @media screen and (min-width: 1365px) { - height: 19px; - width: 19px; - } - @media screen and (min-width: 1439px) { - height: 23px; - width: 23px; - } - @media screen and (min-width: 1530px) { - height: 28px; - width: 28px; - padding: 7px; - } - } - &:hover { - img { - box-shadow: 0px 0px 0px 2px var(--accent-brand-lighter); - } - } - - .reaction-number { - display: inline-block; - vertical-align: 6px; - margin-left: 5px; - vertical-align: 10px; - color: var(--card-color-tertiary); - font-size: 13px; - width: 27px; - - @media screen and (min-width: 500px) { - width: 37px; - font-size: 16px; - vertical-align: 9px; - } - @media screen and (min-width: 1365px) { - font-size: 12px; - vertical-align: 9px; - margin-left: 1px; - width: 28px; - } - @media screen and (min-width: 1439px) { - font-size: 15px; - vertical-align: 9px; - width: 37px; - margin-left: 7px; - } - @media screen and (min-width: 1530px) { - font-size: 16px; - vertical-align: 15px; - } - } - &.activated { - img { - filter: none; - opacity: 1; - } - } - - &.user-activated { - img { - filter: none; - opacity: 1; - box-shadow: 0px 0px 0px 2px #ffc0d3; - background: linear-gradient(111deg, #ffb4cb, #ff80a8); - } - - &.unicorn-reaction-button { - img { - box-shadow: 0px 0px 0px 2px #d0e3ff; - background: linear-gradient(111deg, #c5d9f8, #90bbff); - } - } - - &.readinglist-reaction-button { - img { - box-shadow: 0px 0px 0px 2px #cfc9f3; - background: linear-gradient(111deg, #cac3f3, #958aee); - } - } - - &.user-animated { - img { - animation: image-reaction-animation 0.3s !important; - } - } - } - } - - .article-share-action-block { - display: inline-block; - position: relative; - width: 40px; - - button { - min-width: 38px; - opacity: 0.7; - - &:hover { - opacity: 1; - } - - .dropdown-icon { - vertical-align: -2px; - } - } - img { - background: transparent !important; - } - &:hover { - img { - box-shadow: none !important; - } - } - .dropdown-content { - display: none; - position: fixed; - bottom: 55px; - right: 0; - left: 0; - z-index: 100; - background: var(--header-bg); - font-size: 1em; - text-align: left; - min-width: 300px; - padding-bottom: 15px; - padding-top: 15px; - - @media screen and (min-width: 500px) { - position: absolute; - right: -20px; - border-radius: 3px; - font-size: 0.92em; - border: 1px solid $light-medium-gray; - box-shadow: $shadow; - left: auto; - bottom: 48px; - min-width: 312px; - padding-bottom: 6px; - padding-top: 6px; - } - - &.showing { - display: block; - } - - .dropdown-link-row { - input[type='text'] { - border: 1px dashed black; - padding: 4px 6px; - font-size: 1em; - width: calc(100% - 50px); - border-radius: 3px; - margin: 10px auto 5px; - margin-left: 15px; - } - - input[type='checkbox'] { - float: right; - cursor: pointer; - @media screen and (min-width: 400px) { - margin: 5px; - } - @media screen and (min-width: 500px) { - margin: 3px; - } - @media screen and (min-width: 1365px) { - margin: 1px; - } - } - - a { - font-weight: bold; - color: var(--body-color); - padding: 12px 18px; - width: calc(100% - 36px); - display: block; - font-size: 0.8em; - } - - &.notification-subscriptions-area-row { - padding: 0px; - @include themeable( - border-bottom, - theme-container-border, - 1px solid $medium-gray - ); - } - .notification-subscriptions-area-header { - padding: 12px 6px; - padding-left: 12px; - font-size: 0.7em; - font-weight: bold; - margin-top: -5px; - @media screen and (min-width: 500px) { - border-top-right-radius: 3px; - border-top-left-radius: 3px; - } - @include themeable-important( - background, - theme-container-background, - darken($tan, 3%) - ); - button.notification-subscription-label { - display: inline-block; - width: 90px !important; - margin-left: 5px !important; - text-align: center !important; - float: right !important; - padding: 4px 0px !important; - @include themeable-important( - border, - theme-border, - 1px solid $light-medium-gray - ); - border-radius: 100px; - &.selected { - visibility: hidden !important; - } - } - } - button.notification-subscription-label { - width: 100% !important; - opacity: 1 !important; - text-align: left; - font-size: 0.8em; - box-sizing: border-box !important; - padding: 13px 4px !important; - padding-left: 13px !important; - margin: auto !important; - cursor: pointer !important; - color: var(--body-color); - .selected-emoji { - visibility: hidden; - margin-left: 4px; - font-size: 1.2em; - vertical-align: -0.1em; - } - &.selected { - .selected-emoji { - display: inline-block; - visibility: visible; - } - color: var(--body-color); - } - } - } - } - } - - .article-actions-comments-count { - display: none; - position: relative; - color: var(--card-color-tertiary); - font-weight: bold; - font-size: calc(0.8em + 0.1vw); - vertical-align: calc(7px - 0.07vw); - font-family: $helvetica-condensed; - font-stretch: condensed; - padding: 4px 0.88vw; - border-radius: 3px; - .article-actions-comments-count-number { - display: none; - } - @media screen and (min-width: 620px) { - display: inline-block; - } - - @media screen and (min-width: $max-width) { - font-size: 0.92em; - vertical-align: 6px; - } - @media screen and (min-width: 1439px) { - .article-actions-comments-count-number { - display: inline-block; - } - } - } - - .article-actions-tweet-button { - padding: 2px 0 2px !important; - border-radius: 3px; - margin-right: 0.15vw; - margin-left: calc(0.2vw + 11px); - vertical-align: calc(3px - 0.07vw); - text-align: center; - width: 50px; - display: none; - - img { - height: 23px; - width: 23px; - vertical-align: -4px; - } - - @media screen and (min-width: 500px) { - display: inline-block; - vertical-align: calc(6px - 0.07vw); - } - @media screen and (min-width: 1365px) { - padding: 7px 0px !important; - img { - height: 17px; - width: 17px; - } - } - @media screen and (min-width: 1439px) { - padding: 8px 0px !important; - img { - height: 20px; - width: 20px; - } - } - @media screen and (min-width: 1530px) { - padding: 20px 0px 12px !important; - img { - height: 23px; - width: 23px; - } - } - } - } - .html-variant-wrapper { width: 88%; margin: 0 auto 25px; @@ -1368,22 +876,6 @@ article { } } -.dev-ios-native-body { - .container { - .article-actions { - padding: 4px 0 0; - border-top: 1px solid rgba(0, 0, 0, 0.33); - transition: padding 0.33s; - - .article-share-action-block { - .dropdown-content { - bottom: 43px; - } - } - } - } -} - .showpage-reaction-cta { width: 390px; max-width: 78%; @@ -1406,20 +898,23 @@ article { } .show-comments-header { - width: 800px; - max-width: 90%; + // width: 800px; + // max-width: 90%; margin: auto; margin-bottom: -50px; text-align: center; font-family: var(--ff-default); } - +.primary-sticky-nav { + display: none; +} +.article-actions { + display: none; +} .show-comments-footer { - width: 800px; - max-width: 98%; + // width: 800px; + // max-width: 98%; margin: auto; - margin-top: -80px; - padding-bottom: var(--su-6); text-align: center; .full-discussion-button { diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss index b1c4b8fc7..ec5ee96fc 100644 --- a/app/assets/stylesheets/base/layout.scss +++ b/app/assets/stylesheets/base/layout.scss @@ -123,13 +123,16 @@ } .crayons-layout--article { + --layout-gap: 0; @media (min-width: $breakpoint-m) { + --layout-gap: var(--su-2); --layout-sidebar-left-width: var(--su-9); --layout: var(--layout-sidebar-left-width) 1fr; --layout-sidebar-left-row-end: span 2; } @media (min-width: $breakpoint-l) { + --layout-gap: var(--su-4); --layout-sidebar-right-width: 3fr; --layout-sidebar-left-row-end: initial; --layout-content-width: 7fr; diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss index 3eb628c3c..892f049c4 100644 --- a/app/assets/stylesheets/comments.scss +++ b/app/assets/stylesheets/comments.scss @@ -126,7 +126,7 @@ a.header-link { .comments-container { padding-top: 10px; margin: auto; - margin-bottom: 100px; + margin-bottom: var(--su-4); text-align: left; &.comments-dedicated-page-container { width: 800px; @@ -143,15 +143,15 @@ a.header-link { } .markdown-guide { position: absolute; - left: 22px; - bottom: 3px; + left: var(--su-1); + bottom: var(--su-1); } .editor-image-upload { display: flex; align-items: center; font-size: 0.8em; position: absolute; - left: calc(0.2vw + 70px); + left: calc(var(--su-8) + var(--su-2)); bottom: 0px; width: initial; text-align: left; @@ -202,7 +202,7 @@ a.header-link { } .editor-response-templates { position: absolute; - left: 52px; + left: var(--su-7); bottom: 4px; button { background: none; @@ -257,47 +257,21 @@ a.header-link { } } form { - width: 104%; - @include themeable( - background, - theme-container-accent-background, - $light-gray - ); overflow: auto; position: relative; - margin-bottom: 4px; z-index: 4; - margin-left: -2%; - @include themeable( - border-top, - theme-container-border, - 1px solid $light-medium-gray - ); - @media screen and (min-width: 820px) { - width: calc(100% - 2px); - margin-left: 0%; - @include themeable( - border, - theme-container-border, - 1px solid $light-medium-gray - ); - } .field { margin-bottom: 0px; } .response-templates-container { - &.hidden { - display: none; - } display: flex; - width: calc(100% - 52px); max-height: calc(40vh + 80px); - margin: 15px auto 2px; + margin-bottom: var(--su-4); + padding-bottom: var(--su-4); flex-direction: column; overflow-y: auto; - font-size: 16px; - font-family: var(--ff-default); + font-size: var(--fs-base); @include themeable( background, theme-container-accent-background, @@ -309,9 +283,6 @@ a.header-link { display: inline-block; margin: 0 auto; width: 75px; - &.hidden { - display: none; - } } header > button { @@ -425,8 +396,7 @@ a.header-link { margin-bottom: -5px; } textarea { - width: calc(100% - 52px); - margin: 15px auto 2px; + width: 100%; display: block; resize: vertical; border-radius: 3px; @@ -513,8 +483,8 @@ a.header-link { // this css is added to differentiate the code within a pre tag since pre tag already has black bg. #preview-div pre code { - background-color: white; - color: black; + background-color: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.9); } .actions { @@ -569,7 +539,6 @@ a.header-link { } } input[type='submit'] { - margin-right: 19px; background: $bold-blue; } &.submitting { @@ -872,24 +841,22 @@ a.header-link { background-color: rgba(0, 0, 0, 0.1); padding: 0.1em 0.3em 0; } + .highlight { + display: grid; + justify-content: stretch; + + code { + width: 100%; + } + } pre { - width: 88%; - margin-left: -3%; - margin-left: 0px; - padding-left: 4%; - padding-right: 7%; - padding-top: 6%; - padding-bottom: 6%; overflow-wrap: normal; overflow-x: auto; code { - background: #29292e; - color: black; + color: inherit; white-space: pre; font-size: 1em; - background-color: white; - padding-top: 0; - padding-bottom: 2%; + padding: 0; overflow-x: auto; } } @@ -966,27 +933,26 @@ a.header-link { .dropdown-content { display: none; + font-size: var(--fs-base); position: absolute; right: 0; - border: 1px solid $light-medium-gray; border-radius: 3px; - background: white; + @include generate-box( + $level: 2, + $bg: var(--card-bg), + $border: var(--card-color), + $color: var(--card-color) + ); z-index: 20; - width: 130px; - box-shadow: $shadow; + width: 160px; &.showing { display: block; } } .dropdown-content a { - color: black; padding: 12px 16px; - width: 98px; - height: 14px; - font-weight: bold; display: block; - font-size: 14px; white-space: nowrap; } diff --git a/app/assets/stylesheets/components/tags.scss b/app/assets/stylesheets/components/tags.scss index 3d3c9083c..1ea9fe432 100644 --- a/app/assets/stylesheets/components/tags.scss +++ b/app/assets/stylesheets/components/tags.scss @@ -18,7 +18,7 @@ opacity: 0.5; } - &:hover { + &[href]:hover { color: var(--tag-color-hover); } } diff --git a/app/assets/stylesheets/config/_generator.scss b/app/assets/stylesheets/config/_generator.scss index 678eb8036..035d58ff6 100644 --- a/app/assets/stylesheets/config/_generator.scss +++ b/app/assets/stylesheets/config/_generator.scss @@ -170,7 +170,8 @@ 'center': center, 'end': flex-end, 'between': space-between, - 'around': space-around + 'around': space-around, + 'stretch': stretch ), (), true diff --git a/app/assets/stylesheets/minimal.scss b/app/assets/stylesheets/minimal.scss index 5f5955583..3c1262132 100644 --- a/app/assets/stylesheets/minimal.scss +++ b/app/assets/stylesheets/minimal.scss @@ -24,7 +24,6 @@ @import 'preact/sidebar-widget'; @import 'preact/article-form'; @import 'tag-edit'; -@import 'sticky-nav'; @import 'sidebar-data'; @import 'video-collection'; @import 'listings'; diff --git a/app/assets/stylesheets/more-articles.scss b/app/assets/stylesheets/more-articles.scss index 270b3029a..e3359b554 100644 --- a/app/assets/stylesheets/more-articles.scss +++ b/app/assets/stylesheets/more-articles.scss @@ -5,7 +5,6 @@ vertical-align: top; text-align: center; font-family: var(--ff-default); - margin: 0 auto 32px; a { color: var(--body-color); @@ -94,7 +93,6 @@ .show-page-content-display { vertical-align: top; font-family: var(--ff-default); - margin: 0 auto 32px; position: relative; overflow: hidden; diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss index 627843f28..aeb2c1e0e 100644 --- a/app/assets/stylesheets/scaffolds.scss +++ b/app/assets/stylesheets/scaffolds.scss @@ -37,15 +37,15 @@ body { .zen-mode { .top-bar, - .primary-sticky-nav, - .article-actions { - display: none !important; + .crayons-article-sticky, + .crayons-article-actions { + display: none; } } @media print { .top-bar, - .article-actions { + .crayons-article-sticky { display: none; } } @@ -59,7 +59,6 @@ body { } .universal-page-content-wrapper { - overflow: hidden; min-height: 88vh; visibility: visible; font-size: 18px; @@ -145,7 +144,6 @@ body.night-theme, body.ten-x-hacker-theme { .on-page-nav-butt img, .icon-img, - .dropdown-icon, .reaction-button:not(.reacted) img, .image-upload-button button, .icon-image, diff --git a/app/assets/stylesheets/sticky-nav.scss b/app/assets/stylesheets/sticky-nav.scss deleted file mode 100644 index 8c7739421..000000000 --- a/app/assets/stylesheets/sticky-nav.scss +++ /dev/null @@ -1,160 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -.primary-sticky-nav { - display: none; - @media screen and (min-width: $max-width) { - display: block; - position: fixed; - left: calc(50% + 298px); - top: 70px; - bottom: 20px; - padding: 0 2px; - display: flex; - flex-flow: column wrap; - overflow: hidden; - z-index: 100; - width: 300px; - } - &.hidden { - display: none; - } - .primary-sticky-nav-author { - a { - color: var(--card-color); - } - .primary-sticky-nav-author-top-profile-image { - width: 35px; - height: 35px; - border-radius: 360px; - margin-right: 5px; - vertical-align: -2px; - } - .primary-sticky-nav-author-name { - font-size: 1.3em; - font-weight: bold; - } - .primary-sticky-nav-author-username { - font-size: 0.8em; - font-weight: bold; - } - .primary-sticky-nav-author-summary { - font-weight: 400; - color: var(--card-color-tertiary); - padding: 10px 0px 5px; - font-style: italic; - font-size: 0.88em; - overflow: hidden; - text-overflow: ellipsis; - overflow-wrap: break-word; - } - .primary-sticky-nav-author-follow { - padding-top: 8px; - button { - width: 100%; - font-size: 1.25em; - border: 0px; - border-radius: 3px; - padding: 3px; - height: 44px; - } - } - } - .primary-sticky-nav-profile-image { - height: 23px; - width: 23px; - border-radius: 100px; - vertical-align: -5px; - } - .primary-sticky-nav-title { - padding: 8px 0px 9px; - margin-left: 15px; - font-weight: bold; - img { - width: 19px; - height: 19px; - vertical-align: -1px; - } - a { - color: var(--card-color); - display: inline-block; - } - } - .primary-sticky-nav-element { - display: block; - padding: 10px 13px; - font-size: 0.9em; - font-weight: bold; - @include dev-card; - margin-left: 10px; - color: var(--card-color); - width: 262px; - border-radius: 3px; - .primary-sticky-nav-element-details { - margin-top: 9px; - font-size: 0.8em; - color: var(--card-color-tertiary); - } - } - .user-metadata-details { - margin-top: 10px; - margin-left: 2px; - font-family: var(--ff-accent); - .row { - padding: calc(3px + 0.1vw) 0px; - display: inline-block; - width: 96%; - } - .key { - font-size: 0.8em; - font-weight: 800; - margin-bottom: 2px; - color: var(--card-color-tertiary); - } - .value { - display: inline-block; - font-size: 0.92em; - margin-bottom: 4px; - } - } - .html-variant-wrapper { - margin: 10px; - } -} - -.primary-sticky-nav-org-summary { - font-weight: 400; - color: var(--card-color); - padding: 4px 0px; - font-size: 0.95em; - margin-top: 20px; - border-top: 1px solid $light-medium-gray; - p { - margin: 12px 0px; - } - code { - background: $light-gray; - border-radius: 3px; - padding: 3px 4px; - color: #333842; - font-family: var(--ff-accent); - } - .primary-sticky-nav-org-cta-link-wrapper { - text-align: center; - } - a.primary-sticky-nav-org-cta-link { - display: inline-block; - font-size: 1.25em; - border: 0px; - border-radius: 100px; - padding: 6px 38px; - margin-top: 20px; - background: white; - color: $black; - font-family: $helvetica-condensed; - font-weight: bold; - text-align: center; - font-stretch: condensed; - margin-bottom: 5px; - } -} diff --git a/app/assets/stylesheets/syntax.scss b/app/assets/stylesheets/syntax.scss index db7f15da1..621333f8d 100644 --- a/app/assets/stylesheets/syntax.scss +++ b/app/assets/stylesheets/syntax.scss @@ -4,7 +4,7 @@ div.highlight pre.highlight code { } div.inner-comment div.body div.highlight pre.highlight { - background: #29292e; + background: #08090a; code { font-size: inherit; white-space: inherit; @@ -13,7 +13,7 @@ div.inner-comment div.body div.highlight pre.highlight { } } -$code-highlight-background-color: #29292e; +$code-highlight-background-color: #08090a; $code-highlight-text-color: #f8f8f2; $code-highlight-comment-color: #808080; $code-highlight-declaration-color: #f39c12; diff --git a/app/assets/stylesheets/user-profile-header.scss b/app/assets/stylesheets/user-profile-header.scss index a8b2367d2..13c8a63ad 100644 --- a/app/assets/stylesheets/user-profile-header.scss +++ b/app/assets/stylesheets/user-profile-header.scss @@ -214,8 +214,6 @@ } } .user-metadata-details { - font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, - monospace; width: 97%; overflow-y: auto; @media screen and (min-width: 1100px) { @@ -236,7 +234,6 @@ position: absolute; top: 45%; transform: translateY(-45%); - border-left: 3px solid $outline-color; padding: 15px 0px; } .row { diff --git a/app/assets/stylesheets/views/article-form.scss b/app/assets/stylesheets/views/article-form.scss index 573a63a3c..c0fc7ef84 100644 --- a/app/assets/stylesheets/views/article-form.scss +++ b/app/assets/stylesheets/views/article-form.scss @@ -75,7 +75,6 @@ display: flex; flex-direction: column; height: 100%; - padding: var(--article-padding-y) var(--article-padding-x); overflow: auto; height: calc( 100vh - var(--header-height) - var(--article-form-actions-height) @@ -162,7 +161,7 @@ &__toolbar { position: sticky; - top: calc(var(--article-padding-y) * -1); + top: 0; background: var(--base-0); padding: var(--su-2) var(--article-padding-x); margin: calc(var(--article-padding-y) * -1) @@ -207,7 +206,6 @@ &__tagsfield { position: relative; - margin-bottom: calc(var(--article-padding-y) * 2); } &__help { diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss index c80e26669..faf325780 100644 --- a/app/assets/stylesheets/views/article.scss +++ b/app/assets/stylesheets/views/article.scss @@ -4,55 +4,76 @@ --article-rythm: var(--su-2); --article-padding-x: var(--su-3); --article-padding-y: var(--su-3); + --article-font-size: var(--fs-l); @media (min-width: $breakpoint-s) { - --article-padding-x: var(--su-4); - --article-padding-y: var(--su-4); + --article-padding-x: var(--su-5); + --article-padding-y: var(--su-5); } @media (min-width: $breakpoint-m) { --article-rythm: var(--su-4); - --article-padding-x: var(--su-6); - --article-padding-y: var(--su-6); + --article-padding-x: var(--su-8); + --article-padding-y: var(--su-7); + --article-font-size: var(--fs-xl); } - @media (min-width: $breakpoint-l) { - --article-padding-x: var(--su-8); + @media (min-width: $breakpoint-xl) { + --article-padding-x: var(--su-9); } } .crayons-article { &__cover { - margin: calc(var(--article-padding-y) * -1) - calc(var(--article-padding-x) * -1) var(--article-padding-x) - calc(var(--article-padding-x) * -1); - width: calc(100% + (var(--article-padding-x) * 2)); + position: relative; + width: 100%; + padding-top: 42%; &__image { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; border-radius: var(--radius) var(--radius) 0 0; - background-size: cover; - background-position: center center; - padding-top: 42%; + object-fit: cover; + width: 100%; + height: 100%; + } + } + + &__video { + background: black; + + &__player { + &:empty { + width: 100%; + padding-top: 56.25%; + } } } &__header { - margin-bottom: var(--su-6); + margin-bottom: var(--article-padding-y); + + &__meta { + padding: var(--article-padding-y) var(--article-padding-x) 0 + var(--article-padding-x); + } } - &__tags { - // TODO: replace with actual component one day... - font-family: var(--ff-accent); - font-size: var(--fs-s); + &__subheader { + font-size: var(--fs-base); + color: var(--base-60); display: flex; + flex-wrap: wrap; + align-items: center; } &__body { - font-size: var(--fs-l); - font-family: var(--ff-serif); - @media (min-width: $breakpoint-m) { - font-size: var(--fs-xl); - } + padding: 0 var(--article-padding-x) var(--article-padding-y) + var(--article-padding-x); + font-size: var(--article-font-size); a { code { @@ -222,36 +243,47 @@ } pre { - background: #29292e; + background: #08090a; overflow-x: auto; color: #eff0f9; - padding: var(--su-6) var(--su-8); + padding: var(--article-padding-y) var(--article-padding-x); margin: var(--article-rythm) 0; - margin-left: calc(var(--su-8) * -1); - margin-right: calc(var(--su-8) * -1); - width: calc(100% + var(--su-8) + var(--su-8)); + margin-left: calc(var(--article-padding-x) * -1); + margin-right: calc(var(--article-padding-x) * -1); + width: calc(100% + var(--article-padding-x) + var(--article-padding-x)); overflow-wrap: normal; border-radius: 0; code { - background: #29292e; + background: #08090a; color: #eff0f9; white-space: pre; } } + .highlight { + display: grid; + justify-content: stretch; + margin-left: calc(var(--article-padding-x) * -1); + margin-right: calc(var(--article-padding-x) * -1); + + pre.highlight { + display: block; + margin: 0; + margin-left: 0; + margin-right: 0; + width: 100%; + } + } + img { height: auto; position: relative; display: block; margin: auto; - left: -4%; - max-width: 108%; - - @media screen and (min-width: 430px) { - left: -6px; - max-width: calc(100% + 12px); - } + max-width: 100%; + max-height: calc(50vh + 180px); + border-radius: var(--radius); } a.article-body-image-wrapper { @@ -276,16 +308,6 @@ width: 100%; margin-left: 0%; overflow-x: auto; - - @media screen and (min-width: 430px) { - width: 108%; - margin-left: -4%; - } - - @media screen and (min-width: 800px) { - width: 110%; - margin-left: -5%; - } } table { @@ -294,10 +316,6 @@ margin: 0.8em auto 1.2em; table-layout: fixed; - @media screen and (min-width: 500px) { - font-size: 0.9em; - } - th { border: 1px solid rgba(0, 0, 0, 0.1); padding: 5px 1vw; @@ -317,6 +335,222 @@ } } +.crayons-article-actions { + position: fixed; + left: 0; + right: 0; + bottom: 0; + padding: var(--su-2); + @supports (padding-button: constant(safe-area-inset-bottom)) { + padding-bottom: env(safe-area-inset-bottom); + } + display: flex; + align-items: center; + background: var(--body-bg); + box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1); + z-index: 200; + justify-content: space-around; + + @media (min-width: $breakpoint-m) { + padding: 0; + padding-bottom: 0; + display: grid; + gap: var(--su-6); + position: sticky; + box-shadow: none; + justify-content: stretch; + top: calc(var(--header-height) + var(--layout-padding) + 6vh); + .static-navbar-config & { + top: var(--layout-padding); + } + } +} + +.crayons-reaction { + --reaction-color: var(--button-ghost-color); + --reaction-border: inset 0 0 0 0 transparent; + --reaction-bg: transparent; + + border: none; + padding: 0; + background: transparent; + display: inline-flex; + flex-direction: row; + align-items: center; + + @media (min-width: $breakpoint-m) { + flex-direction: column; + } + + &__icon { + padding: var(--su-2); + box-shadow: var(--reaction-border); + background: var(--reaction-bg); + color: var(--reaction-color); + border-radius: 50%; + transition: all var(--transition-props); + + &--active { + display: none; + } + } + + &__count { + color: var(--base-70); + font-size: var(--fs-s); + display: block; + min-width: var(--su-7); + + @media (min-width: $breakpoint-m) { + min-width: auto; + } + } + + &.user-activated { + --reaction-border: inset 0 0 0 2px var(--reaction-color); + .crayons-reaction__icon--inactive { + display: none; + } + .crayons-reaction__icon--active { + display: block; + } + + .crayons-reaction__count { + color: var(--reaction-color); + } + } + + &--like { + &:hover, + &.user-activated { + --reaction-color: var(--accent-danger); + --reaction-bg: var(--accent-danger-a10); + } + } + + &--unicorn { + &:hover, + &.user-activated { + --reaction-color: var(--accent-success-darker); + --reaction-bg: var(--accent-success-a10); + } + } + + &--readinglist { + &:hover, + &.user-activated { + --reaction-color: var(--accent-brand); + --reaction-bg: var(--accent-brand-a10); + } + } +} + +.user-animated { + .crayons-reaction__icon { + position: relative; + &:before { + content: ''; + position: absolute; + pointer-events: none; + left: 0; + top: 0; + right: 0; + bottom: 0; + border-radius: 50%; + box-shadow: 0 0 0 4px currentColor; + opacity: 0; + transform: scale(2); + animation-name: ringPop; + animation-duration: 0.25s; + } + + &:after { + content: ''; + position: absolute; + pointer-events: none; + left: 0; + top: 0; + right: 0; + bottom: 0; + border-radius: 50%; + box-shadow: 0 0 0 0 transparent; + opacity: 0; + transform: scale(1); + animation-name: ringPop2; + animation-duration: 0.75s; + } + + animation-name: iconPop; + animation-duration: 0.25s; + } + + @keyframes iconPop { + 0% { + transform: scale(0.65); + } + + 50% { + transform: scale(1.1); + } + + 100% { + transform: scale(1); + } + } + + @keyframes ringPop { + 0% { + transform: scale(2); + box-shadow: 0 0 0 4px currentColor; + opacity: 0; + } + + 100% { + box-shadow: 0 0 0 1px currentColor; + transform: scale(1); + opacity: 1; + } + } + + @keyframes ringPop2 { + 0% { + box-shadow: 0 0 0 currentColor; + transform: scale(1); + opacity: 0.6; + } + + 100% { + box-shadow: 0 0 1px 1px transparent; + transform: scale(4); + opacity: 0; + } + } +} + +.crayons-article-sticky { + position: sticky; + top: calc(var(--header-height) + var(--layout-padding)); + .static-navbar-config & { + top: var(--layout-padding); + } +} + +.user-metadata-details { + li + li { + margin-top: var(--su-3); + } + .key { + font-size: var(--fs-xs); + font-weight: var(--fw-bold); + text-transform: uppercase; + color: var(--card-color-tertiary); + } +} + +.text-padding { + padding: var(--article-padding-y) var(--article-padding-x); +} + .crayons-article { .article-collection-wrapper { font-family: var(--ff-default); diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index ec044f099..a17ad8bbe 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -119,11 +119,11 @@ module ApplicationHelper tags: %w[p b i em strike strong u br] end - def follow_button(followable, style = "full") + def follow_button(followable, style = "full", classes = "") return if followable == DELETED_USER tag :button, # Yikes - class: "cta follow-action-button", + class: "crayons-btn follow-action-button " + classes, data: { :info => { id: followable.id, className: followable.class.name, style: style }.to_json, "follow-action-button" => true diff --git a/app/javascript/article-form/__tests__/__snapshots__/articleForm.test.jsx.snap b/app/javascript/article-form/__tests__/__snapshots__/articleForm.test.jsx.snap index 4998bf701..b0711587b 100644 --- a/app/javascript/article-form/__tests__/__snapshots__/articleForm.test.jsx.snap +++ b/app/javascript/article-form/__tests__/__snapshots__/articleForm.test.jsx.snap @@ -78,7 +78,9 @@ exports[` renders properly 1`] = `
-
+
{ return ( -
+
+
diff --git a/app/views/articles/_video_player.html.erb b/app/views/articles/_video_player.html.erb index 97d7e3dd2..3e297cbb8 100644 --- a/app/views/articles/_video_player.html.erb +++ b/app/views/articles/_video_player.html.erb @@ -1,8 +1,8 @@ -
+
<% minutes, seconds = article.video_duration_in_minutes.split(":") %>
-
+
<% unless internal_navigation? || user_signed_in? %>