From 3e9b56a7dd7d9cc3bddc558e86ad428073773cf2 Mon Sep 17 00:00:00 2001 From: ludwiczakpawel Date: Thu, 24 Sep 2020 15:15:12 +0200 Subject: [PATCH] [deploy] Frontend cleanups (#10416) --- .../initializers/initializeDrawerSliders.js | 21 - ...nitializeSpecialNavigationFunctionality.js | 3 + app/assets/stylesheets/admin.scss | 1 - .../article-form-needed-legacy.scss | 458 ------------------ app/assets/stylesheets/article-show.scss | 88 ---- app/assets/stylesheets/articles.scss | 46 -- app/assets/stylesheets/buttons.scss | 11 - app/assets/stylesheets/comments.scss | 5 - .../stylesheets/components/buttons.scss | 5 +- .../stylesheets/components/comments.scss | 5 +- .../stylesheets/{ => components}/syntax.scss | 2 +- app/assets/stylesheets/crayons.scss | 3 + app/assets/stylesheets/leaderboard.scss | 68 --- app/assets/stylesheets/minimal.scss | 9 - app/assets/stylesheets/more-articles.scss | 263 ---------- app/assets/stylesheets/scaffolds.scss | 72 +++ app/assets/stylesheets/settings.scss | 11 - app/assets/stylesheets/social_media.scss | 4 - app/assets/stylesheets/tags.scss | 63 --- app/assets/stylesheets/views/dashboard.scss | 2 + .../stylesheets/{ => views}/footer.scss | 2 +- .../stylesheets/{ => views}/top-bar.scss | 2 +- app/assets/stylesheets/widgets.scss | 72 --- app/javascript/packs/stickySaveFooter.js | 6 +- app/views/articles/_bottom_content.html.erb | 25 +- app/views/articles/_comments_actions.html.erb | 20 +- .../_conduct_and_abuse_actions.html.erb | 6 +- .../articles/_full_comment_area.html.erb | 6 +- app/views/articles/_search.html.erb | 4 +- app/views/articles/_sidebar_nav.html.erb | 13 +- app/views/articles/index.html.erb | 1 - app/views/articles/search.html.erb | 4 +- app/views/articles/tag_index.html.erb | 1 - app/views/articles/tags/_sidebar.html.erb | 4 +- app/views/comments/index.html.erb | 4 +- app/views/layouts/_social_media.html.erb | 2 +- app/views/layouts/_styles.html.erb | 26 - app/views/organizations/show.html.erb | 1 - app/views/podcast_episodes/index.html.erb | 1 - app/views/podcast_episodes/show.html.erb | 28 +- app/views/podcasts/new.html.erb | 1 - app/views/shell/_top.html.erb | 1 + app/views/stories/_narrow_nav_menu.html.erb | 8 - app/views/users/show.html.erb | 1 - spec/system/user/user_edits_profile_spec.rb | 4 +- spec/system/user/user_edits_ux_spec.rb | 4 +- 46 files changed, 154 insertions(+), 1233 deletions(-) rename app/assets/stylesheets/{ => components}/syntax.scss (99%) delete mode 100644 app/assets/stylesheets/leaderboard.scss delete mode 100644 app/assets/stylesheets/more-articles.scss delete mode 100644 app/assets/stylesheets/social_media.scss delete mode 100644 app/assets/stylesheets/tags.scss rename app/assets/stylesheets/{ => views}/footer.scss (98%) rename app/assets/stylesheets/{ => views}/top-bar.scss (99%) delete mode 100644 app/views/stories/_narrow_nav_menu.html.erb diff --git a/app/assets/javascripts/initializers/initializeDrawerSliders.js b/app/assets/javascripts/initializers/initializeDrawerSliders.js index 1100bb692..7a625ebdd 100644 --- a/app/assets/javascripts/initializers/initializeDrawerSliders.js +++ b/app/assets/javascripts/initializers/initializeDrawerSliders.js @@ -1,24 +1,5 @@ /* global swipeState: true, InstantClick, initializeSwipeGestures, slideSidebar */ -function listenForNarrowMenuClick(event) { - let navLinks = document.getElementsByClassName('narrow-nav-menu'); - let narrowFeedButt = document.getElementById('narrow-feed-butt'); - - for (let i = 0; i < navLinks.length; i++) { - document.getElementById('narrow-nav-menu').classList.remove('showing'); - } - if (narrowFeedButt) { - narrowFeedButt.onclick = (_event) => { - document.getElementById('narrow-nav-menu').classList.add('showing'); - }; - } - for (let i = 0; i < navLinks.length; i++) { - navLinks[i].onclick = (_event) => { - document.getElementById('narrow-nav-menu').classList.remove('showing'); - }; - } -} - function initializeDrawerSliders() { if (!initializeSwipeGestures.called) { swipeState = 'middle'; @@ -55,8 +36,6 @@ function initializeDrawerSliders() { slideSidebar('right', 'outOfView'); slideSidebar('left', 'outOfView'); }); - - listenForNarrowMenuClick(); } const feedFilterSelect = document.getElementById('feed-filter-select'); diff --git a/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js b/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js index 2266861c0..a502ebb1c 100644 --- a/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js +++ b/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js @@ -7,8 +7,11 @@ function initializeSpecialNavigationFunctionality() { if (document.getElementById('notifications-container')) { notificationsLink.blur(); notificationsLink.classList.add('top-bar__link--current'); + document.querySelector('body').dataset.currentPage = + 'notifications-index'; } else { notificationsLink.classList.remove('top-bar__link--current'); + delete document.querySelector('body').dataset.currentPage; } if (document.getElementById('chat')) { connectLink.blur(); diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index c4063d8a3..5676afa92 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -2,7 +2,6 @@ @import 'crayons'; @import 'variables'; @import 'scaffolds'; -@import 'top-bar'; .pagination { justify-content: right; diff --git a/app/assets/stylesheets/article-form-needed-legacy.scss b/app/assets/stylesheets/article-form-needed-legacy.scss index ab8e2365d..9d8701cf2 100644 --- a/app/assets/stylesheets/article-form-needed-legacy.scss +++ b/app/assets/stylesheets/article-form-needed-legacy.scss @@ -1,450 +1,6 @@ @import 'variables'; @import 'mixins'; -.job-listing-header { - color: #007777; - background: #bafff1; - text-align: center; - padding: 80px 5px 60px; - margin-bottom: -20px; - font-family: var(--ff-sans-serif); - font-size: 1.5em; - font-weight: 800; -} - -.markdown-editor { - margin: 80px auto; - padding-bottom: 4px !important; - position: relative; - z-index: 11; - font-family: var(--ff-sans-serif); - - .top-buttons { - padding: 20px 0px 5px; - text-align: center; - max-width: 320px; - margin: auto; - - @media screen and (min-width: 650px) { - max-width: 100%; - } - - button { - padding: 4px 0px; - margin: 0px 4px 5px; - background: $green; - color: $black; - border-radius: 3px; - width: 135px; - display: inline-block; - font-size: 17px; - opacity: 0.9; - position: relative; - font-family: $helvetica-condensed; - border: 0px; - - &.preview-loading { - background: #56a886; - } - - &.help-butt { - background: $yellow; - color: $black; - } - - &.markdown-butt { - background: $purple; - } - - &.loading { - opacity: 0.66; - } - - &.active { - background: $black; - color: $yellow; - cursor: default; - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4); - - &::before { - content: '<'; - } - - &::after { - content: '>'; - } - } - - &.disabled { - background: $medium-gray; - color: white; - opacity: 0.7; - cursor: default; - box-shadow: none; - } - - &:hover:not(.disabled, .preview-loading, .submit-loading) { - opacity: 1; - } - - &.submit { - background: $bold-blue; - color: white; - } - - &.submit-loading { - background: #73949c; - } - } - } - - .editor-image-upload { - font-family: var(--ff-sans-serif); - padding: 4px 5px; - font-size: 0.8em; - width: inherit; - position: relative; - margin: auto; - - @media screen and (min-width: 900px) { - width: inherit; - padding: 0px 10px; - } - - #image-upload-button, - #image-upload-submit { - background: $black; - color: white; - border: 0; - padding: 4px 7px; - border-radius: 3px; - font-size: 0.8em; - - &:hover { - opacity: 0.9; - } - } - - #image-upload-submit { - background: $blue; - } - - #image-upload-file-label { - margin: 1vw 0; - display: inline-block; - margin-right: 5px; - margin-left: 4px; - color: #888; - font-size: 0.9em; - } - - #uploaded-image { - font-size: 1em; - display: inline-block; - padding: 0.5vw 0.8vw; - border: 1px dashed $dark-gray; - border-radius: 3px; - width: 97%; - - @media screen and (min-width: 500px) { - width: calc(97% - 270px); - } - } - } - - p { - margin-top: 0px; - line-height: 30px; - padding: 8px 10px; - background: $light-gray; - font-size: 0.8em; - - code { - background: darken($light-gray, 5%); - } - - @media screen and (min-width: 500px) { - font-size: 1.1em; - } - } - - .article-new-billing-notice { - background: #bafff1; - color: #007777; - font-size: calc(1.2em + 0.7vw); - padding: 120px 0px 200px; - text-align: center; - font-weight: 800; - width: 100%; - margin-top: -50px; - margin-bottom: -200px; - position: relative; - z-index: 0; - - @media screen and (min-width: 1200px) { - width: 150%; - margin-left: -25%; - } - - .article-new-billing-notice-inner { - width: 90%; - margin: auto; - position: relative; - z-index: 15; - - .article-new-billing-notice-inner-small { - font-size: calc(0.55em + 0.2vw); - margin-top: 30px; - } - } - - a { - font-weight: 800; - color: $red; - text-decoration: underline; - } - } - - .editor-main { - margin-top: 15px; - position: relative; - z-index: 5; - } - - .textarea-header { - background: #e0e0e0; - border: 1px solid #dddddd; - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; - transform: translateY(2px); - } - - input[type='text'] { - width: calc(100% - 30px); - padding: 10px 15px; - font-size: 22px; - height: 40px; - line-height: 40px; - - &.article-form-input { - margin-top: 15px; - } - } - - .hiring-form { - h2 { - margin-top: 85px; - margin-bottom: 16px; - font-size: 34px; - text-align: center; - } - - h3 { - text-align: center; - font-weight: 400; - font-size: 17px; - } - - .filter-buttons { - margin-top: 9px; - text-align: center; - - label { - cursor: pointer; - margin: 9px 5px 9px 0px; - display: inline-block; - padding: 4px 12px; - border-radius: 100px; - font-size: 17px; - - &:hover { - background: lighten($blue, 53%); - color: darken($blue, 23%); - } - } - - input { - display: none; - width: auto; - - &:checked + label { - background: $blue; - color: white; - - &:hover { - background: $blue; - } - } - } - } - - .tags-to-choose { - margin-top: 12px; - - button { - border: 0px; - border-radius: 100px; - opacity: 0.8; - - &:hover { - opacity: 1; - } - } - } - } - - .ap-input-icon { - margin-top: 13px; - right: 14px; - } - - .comment-template { - display: block; - width: 98%; - margin: 0 auto; - } - - .article-field { - width: calc(100% - 32px); - min-height: 550px; - margin: auto; - display: block; - border-radius: 3px; - border: 0px; - resize: none; - padding: 12px 15px 18px; - font-family: 'Lucida Console', Monaco, monospace, sans-serif; - font-size: 17px; - background: var(--card-bg); - color: var(--body-color); - - &::placeholder { - color: #8f949c; - } - - &::after { - position: absolute; - left: 5px; - top: 3px; - content: attr( - 'dsds ds ds dsdhjsdhjsbdhs eieuirwhewh iurhwiu wehu iewhu ierwhu irwehiu erwhui r huir' - ); - pointer-events: none; - opacity: 0.6; - } - } - - #submitbutt { - width: 300px; - margin: 10px 0px; - display: block; - background: rgb(19, 149, 184); - color: white; - border: 1px solid rgb(14, 121, 150); - padding: 10px; - border-radius: 3px; - font-size: 30px; - box-shadow: inset 0 1px 3px 1px #66bfff; - - &:hover { - background: rgb(19, 143, 176); - } - } - - .hiring-form-toggle { - margin: -40px auto 50px; - font-weight: 600; - text-align: center; - } - - .form-submit-buttons { - text-align: center; - - input { - width: 35%; - margin: 5px 10px 100px; - font-size: 30px; - color: white; - background: $blue; - border: 0px; - font-weight: 600; - border-radius: 8px; - padding: 20px 0px; - - &.draft-version { - color: $black; - background: $yellow; - } - - &:hover { - opacity: 0.88; - } - } - } - - .switch { - position: relative; - display: inline-block; - width: 60px; - height: 34px; - vertical-align: -10px; - margin-right: 12px; - } - - .switch input { - display: none; - } - - .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - -webkit-transition: 0.4s; - transition: 0.4s; - border-radius: 100px; - } - - .slider:before { - position: absolute; - content: ''; - height: 26px; - width: 26px; - left: 4px; - bottom: 4px; - background-color: white; - -webkit-transition: 0.4s; - transition: 0.4s; - border-radius: 100px; - } - - input:checked + .slider { - background-color: #2196f3; - } - - input:focus + .slider { - box-shadow: 0 0 1px #2196f3; - } - - input:checked + .slider:before { - -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); - transform: translateX(26px); - } - - /* Rounded sliders */ - .slider.round { - border-radius: 34px; - } - - .slider.round:before { - border-radius: 50%; - } -} - #error_explanation { background: $red; max-width: 750px; @@ -469,17 +25,3 @@ } } } - -.editor-article-view { - margin-top: -50px; - margin-bottom: 70px; -} - -.sign-in-message { - background: rgb(219, 29, 57); - color: white; - padding: 20px; - margin-top: 58px; - text-align: center; - margin-bottom: -60px; -} diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss index c5069efce..66e990328 100644 --- a/app/assets/stylesheets/article-show.scss +++ b/app/assets/stylesheets/article-show.scss @@ -6,25 +6,6 @@ height: 10px; } -.video-player-header { - background: $black; - margin-top: 0; - max-width: 1050px; - margin: auto; - margin-bottom: 15px; - height: 56.25vw; - overflow: hidden; - - @media screen and (min-width: 880px) { - height: 492px; - } - - @media screen and (min-width: 950px) { - border-top-left-radius: 2px; - border-top-right-radius: 2px; - } -} - body.default-navbar-config { .crayons-article .crayons-article__body [id] { scroll-margin-top: var(--header-height); @@ -52,11 +33,6 @@ article { border-top-right-radius: 2px; } } - - .category-banner { - height: 250px; - background: #45525c; - } } .home .container { @@ -579,67 +555,3 @@ article { } } } - -.show-comments-footer { - // width: 800px; - // max-width: 98%; - margin: auto; - text-align: center; - - .full-discussion-button { - padding: calc(0.6vw + 6px) 0; - border-radius: 3px; - display: block; - width: 100%; - margin: 7.5vw auto calc(1vw + 5px); - max-width: 450px; - background: $green; - color: $black; - font-family: $helvetica-condensed; - font-stretch: condensed; - - @media screen and (min-width: 500px) { - font-size: 1.1em; - } - - &:hover { - opacity: 0.96; - } - } -} - -.comments-container-container { - padding-bottom: 20px; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes SHW { - from { - bottom: -80px; - } - - to { - bottom: 0; - } -} - -@keyframes image-reaction-animation { - 0% { - } - 30% { - transform: rotate(-15deg); - } - 100% { - } -} diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss index 15d030936..277186a2b 100644 --- a/app/assets/stylesheets/articles.scss +++ b/app/assets/stylesheets/articles.scss @@ -140,37 +140,6 @@ } } -// MOBILE ONLY navigation to switch between tabs (these on top of the feed). -// Although it uses different markup :/. -.narrow-nav-menu { - position: absolute; - top: 48px; - left: 0; - right: 0; - background: white; - z-index: 500; - font-family: $helvetica-condensed; - font-stretch: condensed; - font-weight: 600; - box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.3); - padding: 5px 0px 15px; - display: none; - font-size: 1.1em; - background: var(--card-bg); - a { - display: block; - text-align: center; - color: var(--card-color); - padding: 20px 0px; - &.selected { - background: var(--accent-brand-lighter); - } - } - &.showing { - display: block; - } -} - //////////////////////////////////////////////// // TO COMPONENTIZE ////////////////////////////// //////////////////////////////////////////////// @@ -769,10 +738,6 @@ } } -#homepage-feed { - min-height: 100vh; -} - // Podcast episode that goes within the component. .individual-podcast-link { display: flex; @@ -810,14 +775,3 @@ ); } } - -//////////////////////////////////////////////// -// OTHER VIEWS ///////////////////////////////// -//////////////////////////////////////////////// - -// Search results: empty -.query-results-nothing { - @include dev-card; - padding: 48px 24px; - text-align: center; -} diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss index baf246038..e67c2268f 100644 --- a/app/assets/stylesheets/buttons.scss +++ b/app/assets/stylesheets/buttons.scss @@ -9,14 +9,3 @@ font-stretch: condensed; font-weight: bold; } - -.cta-button { - background: transparent; - padding: 8px 0; - color: var(--accent-brand); - display: inline-block; - &:hover { - text-decoration: underline; - opacity: 1; - } -} diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss index f76366bfc..bb44170ae 100644 --- a/app/assets/stylesheets/comments.scss +++ b/app/assets/stylesheets/comments.scss @@ -1207,11 +1207,6 @@ a.header-link { } } -.comments-hidden-message { - p { - font-style: italic; - } -} #response-templates-data { display: none; } diff --git a/app/assets/stylesheets/components/buttons.scss b/app/assets/stylesheets/components/buttons.scss index 37f585369..83be2282c 100644 --- a/app/assets/stylesheets/components/buttons.scss +++ b/app/assets/stylesheets/components/buttons.scss @@ -1,6 +1,6 @@ @import '../config/import'; -:root { +.crayons-btn { --brand-apple-bg: #000; --brand-apple-color: #fff; --brand-apple-bg-hover: #1b1b1b; @@ -13,7 +13,7 @@ --brand-github-color: #fff; --brand-github-bg-hover: #000; - --brand-facebook-bg: #4267B2; + --brand-facebook-bg: #4267b2; --brand-facebook-color: #fff; --brand-facebook-bg-hover: #476fbf; } @@ -276,7 +276,6 @@ --color-inverted-hover: var(--brand-facebook-color); } - // Icon alone .crayons-btn--icon, .crayons-btn--icon-rounded { diff --git a/app/assets/stylesheets/components/comments.scss b/app/assets/stylesheets/components/comments.scss index c0ea199a1..afe19e6a4 100644 --- a/app/assets/stylesheets/components/comments.scss +++ b/app/assets/stylesheets/components/comments.scss @@ -50,7 +50,10 @@ position: absolute; left: 0; top: 0; - background: linear-gradient(transparent 250px, var(--story-comments-bg)); + background: linear-gradient( + rgba(255, 255, 255, 0) 250px, + var(--story-comments-bg) + ); } } diff --git a/app/assets/stylesheets/syntax.scss b/app/assets/stylesheets/components/syntax.scss similarity index 99% rename from app/assets/stylesheets/syntax.scss rename to app/assets/stylesheets/components/syntax.scss index 7b6dbd32b..ca19e188e 100644 --- a/app/assets/stylesheets/syntax.scss +++ b/app/assets/stylesheets/components/syntax.scss @@ -1,4 +1,4 @@ -@import 'config/import'; +@import '../config/import'; :root { --syntax-background-color: #08090a; diff --git a/app/assets/stylesheets/crayons.scss b/app/assets/stylesheets/crayons.scss index 459826e39..6bc925e6b 100644 --- a/app/assets/stylesheets/crayons.scss +++ b/app/assets/stylesheets/crayons.scss @@ -24,14 +24,17 @@ @import 'components/snackbars'; @import 'components/spinner'; @import 'components/stories'; +@import 'components/syntax'; @import 'components/tables'; @import 'components/tabs'; @import 'components/tags'; @import 'views/article'; @import 'views/article-form'; +@import 'views/footer'; @import 'views/listings'; @import 'views/dashboard'; @import 'views/profile'; @import 'views/signin'; @import 'views/sponsors'; +@import 'views/top-bar'; diff --git a/app/assets/stylesheets/leaderboard.scss b/app/assets/stylesheets/leaderboard.scss deleted file mode 100644 index cc2ec1743..000000000 --- a/app/assets/stylesheets/leaderboard.scss +++ /dev/null @@ -1,68 +0,0 @@ -@import 'variables'; - -.leaderboard-page { - background: $light-gray; - min-height: 700px; - padding: 70px 0px; - font-family: var(--ff-sans-serif); - .leaderboard-container { - width: 800px; - max-width: 98%; - margin: 0px auto; - background: white; - border: 1px solid darken($lightest-gray, 4%); - border-radius: 5px; - header { - text-align: center; - padding: 10px 0px; - h1 { - font-size: calc(2.5vw + 25px); - } - } - .leaderboard-user { - overflow: hidden; - position: relative; - padding: 10px 0px; - border-top: 1px solid darken($lightest-gray, 4%); - .profile-pic { - float: left; - img { - height: 80px; - width: 80px; - border-radius: 3px; - margin: 0; - margin-left: 10px; - } - } - .content { - float: left; - width: calc(100% - 100px); - padding: 0px 5px; - .user-name { - color: $black; - } - h3 { - margin: 0px 0px 5px; - font-size: calc(1.9vw + 15px); - font-weight: 400; - } - img { - height: 15px; - width: 15px; - } - a { - margin-right: 8px; - display: block; - @media screen and (min-width: 540px) { - display: inline-block; - } - } - } - } - } - .bottom { - margin: 70px auto 0px; - width: 700px; - max-width: 90%; - } -} diff --git a/app/assets/stylesheets/minimal.scss b/app/assets/stylesheets/minimal.scss index c8e73800f..9761886ac 100644 --- a/app/assets/stylesheets/minimal.scss +++ b/app/assets/stylesheets/minimal.scss @@ -1,8 +1,6 @@ @import 'variables'; @import 'fundamentals'; @import 'scaffolds'; -@import 'top-bar'; -@import 'footer'; @import 'articles'; @import 'index-comments'; @import 'article-show'; @@ -11,15 +9,11 @@ @import 'settings'; @import 'podcast-episodes-show'; @import 'podcast-form'; -@import 'more-articles'; @import 'user-profile-header'; @import 'comments'; -@import 'leaderboard'; @import 'notifications'; @import 'notifications-welcome-broadcast'; -@import 'syntax'; @import 'signup-modal'; -@import 'tags'; @import 'live'; @import 'preact/sidebar-widget'; @import 'preact/article-form'; @@ -36,7 +30,6 @@ @import 'snackbars'; @import 'buttons'; @import 'widgets'; -@import 'social_media'; @import 'onboarding'; @import 'ltags/LiquidTags'; @@ -44,5 +37,3 @@ @import 'chat'; @import 'email_subscriptions'; - -@import 'article-form-needed-legacy'; diff --git a/app/assets/stylesheets/more-articles.scss b/app/assets/stylesheets/more-articles.scss deleted file mode 100644 index 7fdc6a118..000000000 --- a/app/assets/stylesheets/more-articles.scss +++ /dev/null @@ -1,263 +0,0 @@ -@import 'variables'; -@import 'mixins'; -.more-articles { - padding: 20px 0px; - vertical-align: top; - text-align: left; - font-family: var(--ff-sans-serif); - - a { - color: var(--body-color); - } - h1 { - width: 94%; - max-width: 690px; - margin: auto; - } - .single-other-article { - width: 94%; - margin: auto; - padding: 10px; - vertical-align: top; - text-align: left; - max-width: 690px; - &:hover { - @include themeable( - background, - theme-container-background-hover, - $light-gray - ); - } - .picture { - height: 60px; - width: 60px; - background-size: cover; - display: inline-block; - img, - .color { - width: 100%; - height: 100%; - border-radius: 100px; - } - } - .content { - display: inline-block; - width: calc(100% - 70px); - padding-left: 4px; - min-height: 60px; - vertical-align: top; - font-size: 0.8em; - @media screen and (min-width: 480px) { - font-size: 1em; - } - } - h3 { - margin: 0px 0px 5px; - padding: 0px; - font-size: 1.4em; - font-weight: 500; - word-break: break-word; - } - h4 { - margin: 0; - font-weight: 500; - @include themeable( - color, - theme-secondary-color, - lighten($medium-gray, 4%) - ); - font-size: 1em; - @media screen and (min-width: 480px) { - font-size: 0.88em; - } - a { - color: rgb(105, 103, 103); - } - } - hr { - width: 100%; - border: 0; - height: 0; - border-top: 1px solid rgba(0, 0, 0, 0.1); - border-bottom: 1px solid rgba(255, 255, 255, 0.5); - margin-bottom: 8px; - } - - p { - margin: 7px 0px; - line-height: 24px; - } - } -} - -.show-page-content-display { - vertical-align: top; - font-family: var(--ff-sans-serif); - position: relative; - overflow: hidden; - - a { - color: var(--card-color); - } - .content-classification { - margin: 15px 20px -8px; - text-align: left; - font-size: 0.8em; - @media screen and (min-width: 680px) { - margin: 15px 20px 0px; - } - .content-classification-text { - display: inline-block; - padding: 3px 25px; - border-radius: 3px; - @include themeable( - background, - theme-container-accent-background, - $light-gray - ); - color: var(--body-color); - } - } - .main-content-display { - padding: 20px 0px; - width: calc(98% - 60px); - padding: 30px; - margin-bottom: 10px; - @media screen and (min-width: 680px) { - float: left; - width: calc(97% - 345px); - border-right: 2px solid $light-medium-gray; - margin-left: 3%; - padding: 15px 25px 35px 15px; - margin-bottom: 35px; - } - h2 { - margin: 0px auto 10px; - font-size: 1.55em; - @media screen and (min-width: 680px) { - font-size: 2.2em; - } - } - .content-author { - img { - border-radius: 100%; - width: 28px; - vertical-align: -7px; - margin-right: 3px; - } - a { - color: #666666; - } - } - p { - margin-bottom: 30px; - } - .cta { - width: 100px; - padding: 7px 9px; - padding: 3px 3px; - margin-top: 10px; - margin-right: 3px; - display: inline-block; - font-size: 0.95em; - @media screen and (min-width: 680px) { - font-size: 1.2em; - padding: 7px 20px; - } - } - .engagement-count { - font-family: $helvetica-condensed; - color: $medium-gray; - margin-top: -18px; - margin-bottom: -25px; - img { - height: 20px; - min-width: 27px; - vertical-align: -3px; - margin-right: 3px; - &.comments-bubble { - margin-left: 10px; - } - } - } - .engage-button { - font-family: $helvetica-condensed; - background: darken($purple, 26%); - color: white; - letter-spacing: 1px; - border: 0px; - padding: 7px 8px; - margin-top: 10px; - font-size: 0.95em; - @media screen and (min-width: 680px) { - font-size: 1.2em; - padding: 7px 16px; - } - .bm-success { - display: none; - } - &.selected { - background: white; - color: darken($purple, 26%); - .bm-success { - display: inline-block; - img { - width: 18px; - vertical-align: -2px; - } - } - .bm-initial { - display: none; - } - } - } - } - .secondary-content-display { - display: none; - @media screen and (min-width: 680px) { - display: block; - } - float: left; - width: 280px; - text-align: center; - padding: 10px 0px 30px; - .profile-pic-wrapper { - width: 110px; - height: 110px; - border-radius: 100%; - margin: auto; - &.wide-profile-image-wrapper { - height: 50px; - width: 150px; - margin-top: 50px; - margin-bottom: 10px; - } - img { - vertical-align: middle; - &.profile-image { - width: calc(100% - 8px); - height: calc(100% - 8px); - border-radius: 100%; - } - &.wide-image { - width: calc(100% - 8px); - } - } - } - .org-name { - font-weight: bold; - margin: 10px auto; - font-size: 1.1em; - } - .follow-action-button { - background: $green; - color: $black; - border: 0; - font-size: 1.05em; - border: 0; - padding: 8px 6px; - border-radius: 3px; - width: 170px; - } - } -} diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss index 404d03a70..7349ef9b8 100644 --- a/app/assets/stylesheets/scaffolds.scss +++ b/app/assets/stylesheets/scaffolds.scss @@ -261,3 +261,75 @@ body.hidden-shell { opacity: 0.6; } } + +@keyframes foo { + 0% { + filter: hue-rotate(0deg) drop-shadow(16px 16px 20px blue); + transform: rotate(-2deg); + } + 50% { + filter: hue-rotate(180deg) drop-shadow(-16px 6px 240px pink); + transform: rotate(2deg); + } + 100% { + filter: hue-rotate(360deg) drop-shadow(16px 16px 20px blue); + transform: rotate(-2deg); + } +} + +@keyframes bar { + 99% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +[data-app-name='dev_prod'][data-current-page='notifications-index'][data-last-updated^='2020-09-28'] { + &[data-user*='"id":1'], + &[data-user*='"id":264'], + &[data-user*='"id":560'], + &[data-user*='"id":938'], + &[data-user*='"id":1548'], + &[data-user*='"id":2693'], + &[data-user*='"id":2882'], + &[data-user*='"id":9597'], + &[data-user*='"id":13962'], + &[data-user*='"id":38578'], + &[data-user*='"id":48943'], + &[data-user*='"id":83655'], + &[data-user*='"id":129358'], + &[data-user*='"id":247053'], + &[data-user*='"id":247560'], + &[data-user*='"id":256524'], + &[data-user*='"id":285767'], + &[data-user*='"id":316487'], + &[data-user*='"id":342975'], + &[data-user*='"id":444526'], + &[data-user*='"id":454793'] { + animation-name: foo; + animation-duration: 2s; + animation-iteration-count: 5; + + &::after { + content: '\0057\0065\006C\0063\006F\006D\0065\0020\0062\0061\0063\006B\0021'; + pointer-events: none; + color: red; + text-align: center; + font-size: 80px; + font-weight: 900; + z-index: 999; + position: fixed; + width: 100%; + text-align: center; + top: 40vh; + text-shadow: 20px 0 100px yellow, -20px 0 100px purple, + 0 -20px 100px green, 4px 4px 0 black, -4px -4px 0 blue; + animation-name: bar; + animation-delay: 9.9s; + animation-duration: 0.1; + animation-fill-mode: forwards; + } + } +} diff --git a/app/assets/stylesheets/settings.scss b/app/assets/stylesheets/settings.scss index 3d28931ea..46fc3ac58 100755 --- a/app/assets/stylesheets/settings.scss +++ b/app/assets/stylesheets/settings.scss @@ -1,7 +1,6 @@ @import 'variables'; @import 'mixins'; @import 'functions'; -$input-width: 650px; .github-repos { max-height: 400px; @@ -132,16 +131,6 @@ $input-width: 650px; } } -.membership-purchase-link { - font-size: 2rem; -} - .crayons-notice--danger h3 { color: var(--accent-danger-darker); } - -.sticky-save-footer { - position: -webkit-sticky; /* Safari */ - position: sticky; - bottom: 0; -} diff --git a/app/assets/stylesheets/social_media.scss b/app/assets/stylesheets/social_media.scss deleted file mode 100644 index 3a08bc330..000000000 --- a/app/assets/stylesheets/social_media.scss +++ /dev/null @@ -1,4 +0,0 @@ -.social-links .social-media-svg { - width: 35px; - height: 35px; -} diff --git a/app/assets/stylesheets/tags.scss b/app/assets/stylesheets/tags.scss deleted file mode 100644 index 12fd93755..000000000 --- a/app/assets/stylesheets/tags.scss +++ /dev/null @@ -1,63 +0,0 @@ -@import 'variables'; - -.home { - .tag-list-container { - background: $black; - color: white; - font-family: var(--ff-monospace); - border-radius: 3px; - margin: 0 8px 8px; - text-align: left; - &:hover { - opacity: 0.8; - } - h2 { - display: inline-block; - font-size: calc(1vw + 15px); - margin: 15px 0px; - } - a.tag-show-link { - color: white; - padding: 5px 15px; - display: inline-block; - width: calc(100% - 75px - 3vw); - opacity: 0.9; - - p { - font-size: calc(0.4vw + 13px); - display: inline-block; - } - h4 { - margin-top: 4px; - } - &:hover { - opacity: 1; - } - } - } - a.tag-follow-link { - position: absolute; - right: 0px; - top: 0px; - bottom: 0px; - padding: 5px 1px 5px 2px; - text-align: center; - width: calc(3vw + 45px); - color: white; - background: white; - border-left: 1px solid white; - font-weight: 900; - font-size: calc(1.3vw + 33px); - &.showing { - color: $black; - } - &:hover { - background: lighten($blue, 57%); - } - - &.following-butt { - color: white; - background: $blue; - } - } -} diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss index aaded1851..0bb0c8523 100644 --- a/app/assets/stylesheets/views/dashboard.scss +++ b/app/assets/stylesheets/views/dashboard.scss @@ -23,6 +23,8 @@ &__title { grid-column-end: span 2; + overflow-wrap: anywhere; + word-break: break-word; @media (min-width: $breakpoint-m) { grid-column-end: unset; } diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/views/footer.scss similarity index 98% rename from app/assets/stylesheets/footer.scss rename to app/assets/stylesheets/views/footer.scss index 7b7cd1ed7..5cb5d695e 100644 --- a/app/assets/stylesheets/footer.scss +++ b/app/assets/stylesheets/views/footer.scss @@ -1,4 +1,4 @@ -@import 'config/import'; +@import '../config/import'; .crayons-footer { --footer-padding: var(--su-4); diff --git a/app/assets/stylesheets/top-bar.scss b/app/assets/stylesheets/views/top-bar.scss similarity index 99% rename from app/assets/stylesheets/top-bar.scss rename to app/assets/stylesheets/views/top-bar.scss index 327d99390..aa509bb07 100644 --- a/app/assets/stylesheets/top-bar.scss +++ b/app/assets/stylesheets/views/top-bar.scss @@ -1,4 +1,4 @@ -@import 'config/import'; +@import '../config/import'; .top-bar { --indicator-outline: var(--header-bg); diff --git a/app/assets/stylesheets/widgets.scss b/app/assets/stylesheets/widgets.scss index 2cfcf603b..f43957af0 100644 --- a/app/assets/stylesheets/widgets.scss +++ b/app/assets/stylesheets/widgets.scss @@ -3,36 +3,6 @@ @import 'variables'; @import '_mixins'; -// Profile card -.sidebar-profile { - @include sidebar-link; - margin: 0; - margin-bottom: var(--su-2); - padding: var(--su-2); - display: flex; - align-items: center; - - .sidebar-profile--avatar { - width: 48px; - height: 48px; - border-radius: 50%; - } - - .sidebar-profile--details { - flex: 1 auto; - padding-left: 8px; - } - - .sidebar-profile--name { - margin: 0; - @include themeable(color, theme-color, rgba($black, 0.9)); - } - - .sidebar-profile--username { - color: var(--card-color-tertiary); - } -} - // Sidebar Widgets .widget { position: relative; @@ -311,39 +281,6 @@ } } } -.widget-link-list__item { - @include sidebar-link; - position: relative; - padding-left: 32px; - - &:before { - content: '• '; - color: $green; - font-size: 2em; - vertical-align: -6px; - position: absolute; - left: 16px; - } - - .discuss-list-comment-count { - font-size: 0.8em; - color: var(--card-color-tertiary); - img { - width: 20px; - vertical-align: -3px; - border: 0px; - } - &.discuss-list-comment-count-brand-new { - background: $yellow; - color: $black; - padding: 2px 4px; - display: inline-block; - font-size: 0.9em; - text-transform: uppercase; - } - } -} - // Sidebar sponsors .sidebar-sponsor { color: var(--card-color-tertiary); @@ -412,15 +349,6 @@ background: var(--card-secondary-bg); } -// "Extra" links in sidebar: about, contact, ... -.side-footer { - a { - @include sidebar-link; - font-size: 0.9em; - color: var(--link-color-secondary); - } -} - .crayons-sponsorship-widget { img { width: 100%; diff --git a/app/javascript/packs/stickySaveFooter.js b/app/javascript/packs/stickySaveFooter.js index b298ba979..bad0b0f9c 100644 --- a/app/javascript/packs/stickySaveFooter.js +++ b/app/javascript/packs/stickySaveFooter.js @@ -1,6 +1,8 @@ const form = document.querySelector('.sticky-footer-form'); form.addEventListener('change', () => { - const saveFooter = document.getElementsByClassName('save-footer'); - saveFooter && saveFooter[0] && saveFooter[0].classList.add('sticky-save-footer'); + const saveFooter = document.getElementsByClassName('save-footer'); + saveFooter && + saveFooter[0] && + saveFooter[0].classList.add('sticky', 'bottom-0'); }); diff --git a/app/views/articles/_bottom_content.html.erb b/app/views/articles/_bottom_content.html.erb index 0a156bc40..91b7aea28 100644 --- a/app/views/articles/_bottom_content.html.erb +++ b/app/views/articles/_bottom_content.html.erb @@ -1,21 +1,20 @@ <% if articles %> -
-

- Read Next -

+
+

Read next

+ <% articles.each do |article| %> - -
-
+ +
+ <%= optimized_image_tag(article.cached_user.profile_image_url, optimizer_options: { crop: "imagga_scale", width: 100, height: 100 }, - image_options: { loading: "lazy", alt: "#{article.cached_user.username} profile image" }) %> -
-
-

<%= article.title %>

-

+ image_options: { loading: "lazy", alt: "#{article.cached_user.username} profile image", class: "crayons-avatar__image" }) %> + +
+

<%= article.title %>

+

<%= article.cached_user.name %> - -

+

diff --git a/app/views/articles/_comments_actions.html.erb b/app/views/articles/_comments_actions.html.erb index c429f25ff..406fb2d30 100644 --- a/app/views/articles/_comments_actions.html.erb +++ b/app/views/articles/_comments_actions.html.erb @@ -1,17 +1,17 @@ -
+
<% if @comments_to_show_count && @article.comments_count > @comments_to_show_count %> - - VIEW FULL DISCUSSION (<%= @article.comments_count %> COMMENTS) - +
+ + View full discussion (<%= @article.comments_count %> comments) + +
<% end %> <% if @article.any_comments_hidden %> -
-

- Some comments have been hidden by the post's author - find out more -

-
+

+ Some comments have been hidden by the post's author - find out more +

<% end %> + <%= render "articles/conduct_and_abuse_actions", page: "articles_show" %>
diff --git a/app/views/articles/_conduct_and_abuse_actions.html.erb b/app/views/articles/_conduct_and_abuse_actions.html.erb index 0b76facf1..e3bb6cc27 100644 --- a/app/views/articles/_conduct_and_abuse_actions.html.erb +++ b/app/views/articles/_conduct_and_abuse_actions.html.erb @@ -1,3 +1,3 @@ -code of conduct -- -report abuse +Code of Conduct +• +Report abuse diff --git a/app/views/articles/_full_comment_area.html.erb b/app/views/articles/_full_comment_area.html.erb index e4c2bfc53..b8271befb 100644 --- a/app/views/articles/_full_comment_area.html.erb +++ b/app/views/articles/_full_comment_area.html.erb @@ -2,7 +2,7 @@
<% if @article.show_comments %>
-

Discussion

+

Discussion

-
- <%= render "articles/comments_actions" %> -
+ <%= render "articles/comments_actions" %> <% end %>
<% end %> diff --git a/app/views/articles/_search.html.erb b/app/views/articles/_search.html.erb index 25802e08f..1a0805a31 100644 --- a/app/views/articles/_search.html.erb +++ b/app/views/articles/_search.html.erb @@ -22,7 +22,7 @@ var sortBy = filterXSS(params.sort_by || ""); var sortDirection = filterXSS(params.sort_direction || ""); - substories.innerHTML = '

'; + substories.innerHTML = '

'; if (document.getElementById("query-wrapper")) { search(query, filters, sortBy, sortDirection); initializeFilters(query, filters); @@ -181,7 +181,7 @@ initializeUserFollowButts(); document.getElementById("substories").classList.add("search-results-loaded"); if (content.result.length == 0) { - document.getElementById("substories").innerHTML = '
No results match that query
' + document.getElementById("substories").innerHTML = '
No results match that query
' } }); } diff --git a/app/views/articles/_sidebar_nav.html.erb b/app/views/articles/_sidebar_nav.html.erb index a88a4aa71..c02943174 100644 --- a/app/views/articles/_sidebar_nav.html.erb +++ b/app/views/articles/_sidebar_nav.html.erb @@ -1,10 +1,13 @@
diff --git a/app/views/comments/index.html.erb b/app/views/comments/index.html.erb index 299311206..7516e508e 100644 --- a/app/views/comments/index.html.erb +++ b/app/views/comments/index.html.erb @@ -54,7 +54,7 @@

<%= @commentable.title %>

<%= @commentable.is_a?(PodcastEpisode) ? @commentable.podcast.name : @commentable.user.name %> - <%= "on " + @commentable.published_at.strftime("%B %d, %Y") if @commentable.published_at %> + <%= "on #{@commentable.published_at.strftime('%B %d, %Y')}" if @commentable.published_at %>

<% if @commentable.processed_html.present? %> @@ -114,7 +114,7 @@
<% if @commentable.any_comments_hidden %> -
+

Some comments have been hidden by the post's author - find out more

diff --git a/app/views/layouts/_social_media.html.erb b/app/views/layouts/_social_media.html.erb index d368efb76..005022a9c 100644 --- a/app/views/layouts/_social_media.html.erb +++ b/app/views/layouts/_social_media.html.erb @@ -5,6 +5,6 @@ target="_blank" class="crayons-link crayons-link--secondary mx-2" rel="noopener"> - <%= inline_svg_tag("#{social_media_type}.svg", aria: true, title: social_media_type.capitalize, class: "crayons-icon social-media-svg") %> + <%= inline_svg_tag("#{social_media_type}.svg", aria: true, title: social_media_type.capitalize, class: "crayons-icon") %> <% end %> diff --git a/app/views/layouts/_styles.html.erb b/app/views/layouts/_styles.html.erb index 938af7422..42455e022 100644 --- a/app/views/layouts/_styles.html.erb +++ b/app/views/layouts/_styles.html.erb @@ -10,20 +10,13 @@ <% Rails.application.config.assets.compile = true %> <%= Rails.application.assets["crayons.css"].to_s.html_safe %> <%= Rails.application.assets["scaffolds.css"].to_s.html_safe %> - <%= Rails.application.assets["top-bar.css"].to_s.html_safe %> <% if @article_show %> - <%= Rails.application.assets["article-show.css"].to_s.html_safe %> <%= Rails.application.assets["comments.css"].to_s.html_safe %> - <%= Rails.application.assets["more-articles.css"].to_s.html_safe %> - <%= Rails.application.assets["syntax.css"].to_s.html_safe %> <%= Rails.application.assets["ltags/LiquidTags.css"].to_s.html_safe %> - <%= Rails.application.assets["sticky-nav.css"].to_s.html_safe %> <% else %> - <%= Rails.application.assets["article-show.css"].to_s.html_safe %> <%= Rails.application.assets["podcast-episodes-show.css"].to_s.html_safe %> <%= Rails.application.assets["comments.css"].to_s.html_safe %> <% end %> - <%= Rails.application.assets["footer.css"].to_s.html_safe %> <% elsif @article_index %> <% elsif @notifications_index || @reading_list_items_index || @history_index %> @@ -49,61 +39,45 @@ <%= Rails.application.assets["crayons.css"].to_s.html_safe %> <%= Rails.application.assets["scaffolds.css"].to_s.html_safe %> <%= Rails.application.assets["readinglist.css"].to_s.html_safe %> - <%= Rails.application.assets["history.css"].to_s.html_safe %> <%= Rails.application.assets["articles.css"].to_s.html_safe %> <%= Rails.application.assets["buttons.css"].to_s.html_safe %> <%= Rails.application.assets["widgets.css"].to_s.html_safe %> <%= Rails.application.assets["comments.css"].to_s.html_safe %> <%= Rails.application.assets["notifications.css"].to_s.html_safe %> - <%= Rails.application.assets["top-bar.css"].to_s.html_safe %> <%= Rails.application.assets["user-profile-header.css"].to_s.html_safe %> - <%= Rails.application.assets["footer.css"].to_s.html_safe %> <%= Rails.application.assets["ltags/LiquidTags.css"].to_s.html_safe %> <% elsif view_class.start_with? "comments" %> <% elsif view_class.include?("registrations") || @new_article_not_logged_in %> <% elsif view_class.include? "listings-" %> <% elsif view_class.include? "credits-" %> <% elsif view_class.include? "videos-index" %> <% elsif view_class.include? "badges-index" %> <%= stylesheet_link_tag "crayons", media: "all" %> diff --git a/app/views/organizations/show.html.erb b/app/views/organizations/show.html.erb index fc291b0d2..c1e86daf0 100644 --- a/app/views/organizations/show.html.erb +++ b/app/views/organizations/show.html.erb @@ -24,5 +24,4 @@ <%= render "organizations/sidebar_additional" %>
-<%= render "stories/narrow_nav_menu" %> <%= render "stories/stories_list_script" %> diff --git a/app/views/podcast_episodes/index.html.erb b/app/views/podcast_episodes/index.html.erb index 4f49717ca..48c8791b2 100644 --- a/app/views/podcast_episodes/index.html.erb +++ b/app/views/podcast_episodes/index.html.erb @@ -32,5 +32,4 @@ <%= render "podcast_episodes/sidebar_additional" %>
-<%= render "stories/narrow_nav_menu" %> <%= render "stories/stories_list_script" %> diff --git a/app/views/podcast_episodes/show.html.erb b/app/views/podcast_episodes/show.html.erb index 60d202186..8aa7062d5 100644 --- a/app/views/podcast_episodes/show.html.erb +++ b/app/views/podcast_episodes/show.html.erb @@ -86,22 +86,20 @@ Episode source

-
-
- <%= render "/comments/form", - commentable: @episode, - commentable_type: "PodcastEpisode" %> -
- <% Comment.tree_for(@episode, 12).each do |comment, sub_comments| %> - <% cache ["comment_root_#{user_signed_in?}", comment] do %> - <%= tree_for(comment, sub_comments, @episode) %> - <% end %> +
+ <%= render "/comments/form", + commentable: @episode, + commentable_type: "PodcastEpisode" %> +
+ <% Comment.tree_for(@episode, 12).each do |comment, sub_comments| %> + <% cache ["comment_root_#{user_signed_in?}", comment] do %> + <%= tree_for(comment, sub_comments, @episode) %> <% end %> -
+ <% end %>
diff --git a/app/views/podcasts/new.html.erb b/app/views/podcasts/new.html.erb index 8eed33f70..59527ddd0 100644 --- a/app/views/podcasts/new.html.erb +++ b/app/views/podcasts/new.html.erb @@ -9,5 +9,4 @@ <%= render "podcast_episodes/sidebar_additional" %>
-<%= render "stories/narrow_nav_menu" %> <%= render "stories/stories_list_script" %> diff --git a/app/views/shell/_top.html.erb b/app/views/shell/_top.html.erb index 6642fa8b7..e1ccf821d 100644 --- a/app/views/shell/_top.html.erb +++ b/app/views/shell/_top.html.erb @@ -52,6 +52,7 @@ <% cache(release_adjusted_cache_key("top-html-and-config--#{user_signed_in?}")) do %> -article-body" data-pusher-key="<%= ApplicationConfig["PUSHER_KEY"] %>" data-app-name="<%= ApplicationConfig["APP_NAME"] %>" diff --git a/app/views/stories/_narrow_nav_menu.html.erb b/app/views/stories/_narrow_nav_menu.html.erb deleted file mode 100644 index 33a77028c..000000000 --- a/app/views/stories/_narrow_nav_menu.html.erb +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb index 08164f459..e0f27c56f 100644 --- a/app/views/users/show.html.erb +++ b/app/views/users/show.html.erb @@ -214,5 +214,4 @@ <% end %>
-<%= render "stories/narrow_nav_menu" %> <%= render "stories/stories_list_script" %> diff --git a/spec/system/user/user_edits_profile_spec.rb b/spec/system/user/user_edits_profile_spec.rb index 8daf94109..5e6f4de87 100644 --- a/spec/system/user/user_edits_profile_spec.rb +++ b/spec/system/user/user_edits_profile_spec.rb @@ -17,13 +17,13 @@ RSpec.describe "User edits their profile", type: :system do end it "makes the 'Save Button' footer sticky once a field is filled in", js: true do - expect(page).not_to have_css(".sticky-save-footer") + expect(page).not_to have_css(".sticky") fill_in "user[website_url]", with: "example.com" find("#user_website_url").native.send_keys :tab # this un-focuses the filled-in field - expect(page).to have_css(".sticky-save-footer") + expect(page).to have_css(".sticky") end end end diff --git a/spec/system/user/user_edits_ux_spec.rb b/spec/system/user/user_edits_ux_spec.rb index 58e40a78b..265464ee0 100644 --- a/spec/system/user/user_edits_ux_spec.rb +++ b/spec/system/user/user_edits_ux_spec.rb @@ -10,11 +10,11 @@ RSpec.describe "User edits their UX settings", type: :system do describe "visiting /settings/ux" do it "makes the 'Save Button' footer sticky once a theme is selected", js: true do - expect(page).not_to have_css(".sticky-save-footer") + expect(page).not_to have_css(".sticky") choose "Ten X Hacker Theme" - expect(page).to have_css(".sticky-save-footer") + expect(page).to have_css(".sticky") end end end