[deploy] Frontend cleanups (#10416)
This commit is contained in:
ludwiczakpawel
GitHub
parent
727b1a6134
commit
3e9b56a7dd
46 changed files with 154 additions and 1233 deletions
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
@import 'crayons';
|
||||
@import 'variables';
|
||||
@import 'scaffolds';
|
||||
@import 'top-bar';
|
||||
|
||||
.pagination {
|
||||
justify-content: right;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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% {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <TodaysPodcast /> 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1207,11 +1207,6 @@ a.header-link {
|
|||
}
|
||||
}
|
||||
|
||||
.comments-hidden-message {
|
||||
p {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
#response-templates-data {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'config/import';
|
||||
@import '../config/import';
|
||||
|
||||
:root {
|
||||
--syntax-background-color: #08090a;
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
.social-links .social-media-svg {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'config/import';
|
||||
@import '../config/import';
|
||||
|
||||
.crayons-footer {
|
||||
--footer-padding: var(--su-4);
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'config/import';
|
||||
@import '../config/import';
|
||||
|
||||
.top-bar {
|
||||
--indicator-outline: var(--header-bg);
|
||||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
<% if articles %>
|
||||
<div class="more-articles crayons-card crayons-card--secondary">
|
||||
<h1 class="fs-4xl fw-bold mb-4">
|
||||
Read Next
|
||||
</h1>
|
||||
<div class="crayons-card crayons-card--secondary text-padding mb-4">
|
||||
<h2 class="fs-2xl m:fs-3xl fw-bold">Read next</h2>
|
||||
|
||||
<% articles.each do |article| %>
|
||||
<a href="<%= article.path %>" data-preload-image="<%= cloud_cover_url(article.main_image) %>">
|
||||
<div class="single-other-article">
|
||||
<div class="picture">
|
||||
<a href="<%= article.path %>" data-preload-image="<%= cloud_cover_url(article.main_image) %>" class="crayons-link mt-6 block">
|
||||
<div class="flex items-center">
|
||||
<span class="crayons-avatar crayons-avatar--2xl mr-4 shrink-0">
|
||||
<%= 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" }) %>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3 class="fs-2xl fw-bold mb-0"><%= article.title %></h3>
|
||||
<h4 class="fs-base">
|
||||
image_options: { loading: "lazy", alt: "#{article.cached_user.username} profile image", class: "crayons-avatar__image" }) %>
|
||||
</span>
|
||||
<div>
|
||||
<h3 class="fs-xl mb-0 lh-tight"><%= article.title %></h3>
|
||||
<p class="opacity-75 pt-1">
|
||||
<%= article.cached_user.name %> - <time datetime="<%= article.published_timestamp %>"><%= article.readable_publish_date %></time>
|
||||
</h4>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<div>
|
||||
<div class="align-center">
|
||||
<% if @comments_to_show_count && @article.comments_count > @comments_to_show_count %>
|
||||
<a class="full-discussion-button"
|
||||
href="<%= @article.path %>/comments">
|
||||
VIEW FULL DISCUSSION (<%= @article.comments_count %> COMMENTS)
|
||||
</a>
|
||||
<div class="mb-4">
|
||||
<a class="crayons-btn crayons-btn--secondary w-100" href="<%= @article.path %>/comments">
|
||||
View full discussion (<%= @article.comments_count %> comments)
|
||||
</a>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @article.any_comments_hidden %>
|
||||
<div class="comments-hidden-message">
|
||||
<p>
|
||||
Some comments have been hidden by the post's author - <a href="/faq">find out more</a>
|
||||
</p>
|
||||
</div>
|
||||
<p class="fs-s color-base-60 mb-4">
|
||||
Some comments have been hidden by the post's author - <a href="/faq">find out more</a>
|
||||
</p>
|
||||
<% end %>
|
||||
|
||||
<%= render "articles/conduct_and_abuse_actions", page: "articles_show" %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<a href="/code-of-conduct">code of conduct</a>
|
||||
-
|
||||
<a href="/report-abuse">report abuse</a>
|
||||
<a href="/code-of-conduct" class="crayons-link crayons-link--brand">Code of Conduct</a>
|
||||
<span class="opacity-25 px-2">•</span>
|
||||
<a href="/report-abuse" class="crayons-link crayons-link--brand">Report abuse</a>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<section id="comments" data-updated-at="<%= Time.current %>" class="crayons-card text-padding mb-4">
|
||||
<% if @article.show_comments %>
|
||||
<header class="relative flex justify-between items-center">
|
||||
<h3 class="fs-2xl fw-bold">Discussion</h3>
|
||||
<h3 class="fs-2xl m:fs-3xl fw-bold">Discussion</h3>
|
||||
<div id="comment-subscription">
|
||||
<div role="presentation" class="crayons-btn-group">
|
||||
<span class="crayons-btn crayons-btn--outlined">Subscribe</span>
|
||||
|
|
@ -27,9 +27,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="show-comments-footer">
|
||||
<%= render "articles/comments_actions" %>
|
||||
</div>
|
||||
<%= render "articles/comments_actions" %>
|
||||
<% end %>
|
||||
</section>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
var sortBy = filterXSS(params.sort_by || "");
|
||||
var sortDirection = filterXSS(params.sort_direction || "");
|
||||
|
||||
substories.innerHTML = '<div class="query-results-nothing"><div class="query-results-loader"></div><br/></div>';
|
||||
substories.innerHTML = '<div class="p-9 align-center crayons-card"><br></div>';
|
||||
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 = '<div class="query-results-nothing">No results match that query</div>'
|
||||
document.getElementById("substories").innerHTML = '<div class="p-9 align-center crayons-card">No results match that query</div>'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
<nav class="mb-6" id="sidebar-nav" aria-label="Primary sidebar nav">
|
||||
<% if user_signed_in? %>
|
||||
<a class="sidebar-profile" id="sidebar-profile" href="#">
|
||||
<img src="" class="sidebar-profile--avatar" id="sidebar-profile--avatar" alt="" width="48" height="48">
|
||||
<div class="sidebar-profile--details">
|
||||
<h4 class="sidebar-profile--name" id="sidebar-profile--name"></h4>
|
||||
<small class="sidebar-profile--username" id="sidebar-profile--username"></small>
|
||||
<a class="crayons-link crayons-link--block mb-2 flex break-word items-start" id="sidebar-profile" href="#">
|
||||
<span class="crayons-avatar crayons-avatar--xl shrink-0 mr-2">
|
||||
<img src="" class="crayons-avatar__image" id="sidebar-profile--avatar" alt="" width="48" height="48">
|
||||
</span>
|
||||
|
||||
<div class="flex-1">
|
||||
<h4 class="fs-base fw-bold" id="sidebar-profile--name"></h4>
|
||||
<small class="fs-s opacity-75" id="sidebar-profile--username"></small>
|
||||
</div>
|
||||
</a>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -91,6 +91,5 @@
|
|||
<%= render "articles/sidebar_additional" %>
|
||||
</div>
|
||||
|
||||
<%= render "stories/narrow_nav_menu" %>
|
||||
<%= render "stories/stories_list_script" %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -26,8 +26,7 @@
|
|||
<div class="articles-list crayons-layout__content" id="articles-list">
|
||||
<div id="banner-section"></div>
|
||||
<div class="substories" id="substories">
|
||||
<div class="query-results-nothing">
|
||||
<div class="query-results-loader"></div>
|
||||
<div class="p-9 align-center crayons-card">
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,5 +37,4 @@
|
|||
</div>
|
||||
<%= render "articles/search" %>
|
||||
|
||||
<%= render "stories/narrow_nav_menu" %>
|
||||
<%= render "stories/stories_list_script" %>
|
||||
|
|
|
|||
|
|
@ -93,6 +93,5 @@
|
|||
<%= render "articles/tags/sidebar_additional" %>
|
||||
</div>
|
||||
|
||||
<%= render "stories/narrow_nav_menu" %>
|
||||
<%= render "stories/stories_list_script" %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@
|
|||
</header>
|
||||
<div class="widget-body">
|
||||
<%= sanitize @tag_model.rules_html %>
|
||||
<a class="cta cta-button" href="/new/<%= @tag %>">
|
||||
WRITE A POST
|
||||
<a class="crayons-btn crayons-btn--s" href="/new/<%= @tag %>">
|
||||
Write a post
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
<h3 id="comments-header"><%= @commentable.title %></h3>
|
||||
<h4>
|
||||
<%= @commentable.is_a?(PodcastEpisode) ? @commentable.podcast.name : @commentable.user.name %>
|
||||
<span class="published-at"><%= "on " + @commentable.published_at.strftime("%B %d, %Y") if @commentable.published_at %></span>
|
||||
<span class="published-at"><%= "on #{@commentable.published_at.strftime('%B %d, %Y')}" if @commentable.published_at %></span>
|
||||
</h4>
|
||||
</a>
|
||||
<% if @commentable.processed_html.present? %>
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
</div>
|
||||
<center style="margin:30px 0px 22px;">
|
||||
<% if @commentable.any_comments_hidden %>
|
||||
<div class="comments-hidden-message">
|
||||
<div class="fs-s color-base-60">
|
||||
<p>
|
||||
Some comments have been hidden by the post's author - <a href="/faq#what-does-comment-hidden-by-post-author-mean">find out more</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -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") %>
|
||||
</a>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
</style>
|
||||
<% elsif @article_index %>
|
||||
<style>
|
||||
|
|
@ -33,14 +26,11 @@
|
|||
<%= 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["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["footer.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["preact/sidebar-widget.css"].to_s.html_safe %>
|
||||
<% unless @home_page %>
|
||||
<%= Rails.application.assets["user-profile-header.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["sidebar-data.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["index-comments.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["footer.css"].to_s.html_safe %>
|
||||
<% end %>
|
||||
</style>
|
||||
<% 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 %>
|
||||
</style>
|
||||
<% elsif view_class.start_with? "comments" %>
|
||||
<style>
|
||||
<%= 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 %>
|
||||
<%= Rails.application.assets["comments.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["footer.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["ltags/LiquidTags.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["syntax.css"].to_s.html_safe %>
|
||||
<% if view_class.include? "comments-settings" %>
|
||||
<%= Rails.application.assets["article-show.css"].to_s.html_safe %>
|
||||
<% end %>
|
||||
</style>
|
||||
<% elsif view_class.include?("registrations") || @new_article_not_logged_in %>
|
||||
<style>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["article-form-needed-legacy.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["footer.css"].to_s.html_safe %>
|
||||
</style>
|
||||
<% elsif view_class.include? "listings-" %>
|
||||
<style>
|
||||
<%= 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 %>
|
||||
<%= Rails.application.assets["listings.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["footer.css"].to_s.html_safe %>
|
||||
</style>
|
||||
<% elsif view_class.include? "credits-" %>
|
||||
<style>
|
||||
<%= 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 %>
|
||||
<%= Rails.application.assets["credits.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["footer.css"].to_s.html_safe %>
|
||||
</style>
|
||||
<% elsif view_class.include? "videos-index" %>
|
||||
<style>
|
||||
<%= 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 %>
|
||||
<%= Rails.application.assets["video-collection.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["footer.css"].to_s.html_safe %>
|
||||
</style>
|
||||
<% elsif view_class.include? "badges-index" %>
|
||||
<%= stylesheet_link_tag "crayons", media: "all" %>
|
||||
|
|
|
|||
|
|
@ -24,5 +24,4 @@
|
|||
<%= render "organizations/sidebar_additional" %>
|
||||
</div>
|
||||
|
||||
<%= render "stories/narrow_nav_menu" %>
|
||||
<%= render "stories/stories_list_script" %>
|
||||
|
|
|
|||
|
|
@ -32,5 +32,4 @@
|
|||
<%= render "podcast_episodes/sidebar_additional" %>
|
||||
</div>
|
||||
|
||||
<%= render "stories/narrow_nav_menu" %>
|
||||
<%= render "stories/stories_list_script" %>
|
||||
|
|
|
|||
|
|
@ -86,22 +86,20 @@
|
|||
<a href="<%= @episode.website_url %>">Episode source</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="comments-container-container">
|
||||
<div
|
||||
class="comments-container"
|
||||
id="comments-container"
|
||||
data-commentable-id="<%= @episode.id %>"
|
||||
data-commentable-type="PodcastEpisode">
|
||||
<%= render "/comments/form",
|
||||
commentable: @episode,
|
||||
commentable_type: "PodcastEpisode" %>
|
||||
<div class="comment-trees" id="comment-trees-container">
|
||||
<% 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 %>
|
||||
<div
|
||||
class="comments-container"
|
||||
id="comments-container"
|
||||
data-commentable-id="<%= @episode.id %>"
|
||||
data-commentable-type="PodcastEpisode">
|
||||
<%= render "/comments/form",
|
||||
commentable: @episode,
|
||||
commentable_type: "PodcastEpisode" %>
|
||||
<div class="comment-trees" id="comment-trees-container">
|
||||
<% 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 %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,5 +9,4 @@
|
|||
<%= render "podcast_episodes/sidebar_additional" %>
|
||||
</div>
|
||||
|
||||
<%= render "stories/narrow_nav_menu" %>
|
||||
<%= render "stories/stories_list_script" %>
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@
|
|||
<% cache(release_adjusted_cache_key("top-html-and-config--#{user_signed_in?}")) do %>
|
||||
<body
|
||||
data-user-status="<%= user_logged_in_status %>"
|
||||
data-last-updated="<%= Time.current %>"
|
||||
class="<%= SiteConfig.default_font.tr("_", "-") %>-article-body"
|
||||
data-pusher-key="<%= ApplicationConfig["PUSHER_KEY"] %>"
|
||||
data-app-name="<%= ApplicationConfig["APP_NAME"] %>"
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<div class="narrow-nav-menu" id="narrow-nav-menu" aria-label="feed-nav-menu">
|
||||
<a href="<%= list_path %>" class="<%= "selected" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"><MY <%= community_name %> FEED></a>
|
||||
<a href="<%= list_path %>/top/week" class="<%= "selected" if timeframe_check("week") %>"><PAST WEEK></a>
|
||||
<a href="<%= list_path %>/top/month" class="<%= "selected" if timeframe_check("month") %>"><PAST MONTH></a>
|
||||
<a href="<%= list_path %>/top/year" class="<%= "selected" if timeframe_check("year") %>"><PAST YEAR></a>
|
||||
<a href="<%= list_path %>/top/infinity" class="<%= "selected" if timeframe_check("infinity") %>"><INFINITY></a>
|
||||
<a href="<%= list_path %>/latest" class="<%= "selected" if timeframe_check("latest") %>"><LATEST></a>
|
||||
</div>
|
||||
|
|
@ -214,5 +214,4 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= render "stories/narrow_nav_menu" %>
|
||||
<%= render "stories/stories_list_script" %>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue