CSS Cleanups, part 2 (#10527)
* padding-top on body * padding-top on body * move cheese around * . * :( * rename
This commit is contained in:
ludwiczakpawel
GitHub
parent
cf443c3ae7
commit
9d384e1a93
43 changed files with 673 additions and 614 deletions
|
|
@ -6,21 +6,21 @@ function initializeSpecialNavigationFunctionality() {
|
|||
if (connectLink) {
|
||||
if (document.getElementById('notifications-container')) {
|
||||
notificationsLink.blur();
|
||||
notificationsLink.classList.add('top-bar__link--current');
|
||||
notificationsLink.classList.add('crayons-header__link--current');
|
||||
} else {
|
||||
notificationsLink.classList.remove('top-bar__link--current');
|
||||
notificationsLink.classList.remove('crayons-header__link--current');
|
||||
}
|
||||
if (document.getElementById('chat')) {
|
||||
connectLink.blur();
|
||||
connectLink.classList.add('top-bar__link--current');
|
||||
connectLink.classList.add('crayons-header__link--current');
|
||||
} else {
|
||||
connectLink.classList.remove('top-bar__link--current');
|
||||
connectLink.classList.remove('crayons-header__link--current');
|
||||
}
|
||||
if (document.getElementById('moderation-page')) {
|
||||
moderationLink.blur();
|
||||
moderationLink.classList.add('top-bar__link--current');
|
||||
moderationLink.classList.add('crayons-header__link--current');
|
||||
} else {
|
||||
moderationLink.classList.remove('top-bar__link--current');
|
||||
moderationLink.classList.remove('crayons-header__link--current');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,23 +8,23 @@ function getClassList(className) {
|
|||
function blur(event, className) {
|
||||
setTimeout(() => {
|
||||
if (document.activeElement !== getById(className)) {
|
||||
getClassList('top-bar__menu').remove('showing');
|
||||
getClassList('crayons-header__menu').remove('showing');
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
|
||||
function removeShowingMenu() {
|
||||
getClassList('top-bar__menu').remove('showing');
|
||||
getClassList('crayons-header__menu').remove('showing');
|
||||
setTimeout(() => {
|
||||
getClassList('top-bar__menu').remove('showing');
|
||||
getClassList('crayons-header__menu').remove('showing');
|
||||
}, 5);
|
||||
setTimeout(() => {
|
||||
getClassList('top-bar__menu').remove('showing');
|
||||
getClassList('crayons-header__menu').remove('showing');
|
||||
}, 150);
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
getClassList('top-bar__menu').toggle('showing');
|
||||
getClassList('crayons-header__menu').toggle('showing');
|
||||
}
|
||||
|
||||
function initializeTouchDevice() {
|
||||
|
|
@ -40,9 +40,9 @@ function initializeTouchDevice() {
|
|||
// Use a named function instead of anonymous so duplicate event handlers are discarded
|
||||
getById('navigation-butt').addEventListener('click', toggleMenu);
|
||||
} else {
|
||||
getClassList('top-bar__menu').add('desktop');
|
||||
getClassList('crayons-header__menu').add('desktop');
|
||||
getById('navigation-butt').addEventListener('focus', (e) =>
|
||||
getClassList('top-bar__menu').add('showing'),
|
||||
getClassList('crayons-header__menu').add('showing'),
|
||||
);
|
||||
getById('last-nav-link').addEventListener('blur', (e) =>
|
||||
blur(e, 'second-last-nav-link'),
|
||||
|
|
|
|||
|
|
@ -11,21 +11,6 @@
|
|||
#{$property}: var(--#{$cssVariable}, #{$fallback});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* Makes working with themeable CSS variables easier. Used when
|
||||
* a CSS variable requires !important as a postfix of the CSS property's
|
||||
* value where the CSS variable is being used.
|
||||
*
|
||||
* $property: the CSS property to theme.
|
||||
* $cssVariable: The CSS variable that will store the themed value.
|
||||
* $fallback: The value to use as a fallback but as well for the CSS variable default value.
|
||||
*/
|
||||
@mixin themeable-important($property, $cssVariable, $fallback) {
|
||||
#{$property}: #{$fallback} !important;
|
||||
#{$property}: var(--#{$cssVariable}, #{$fallback}) !important;
|
||||
}
|
||||
|
||||
/* Mixin for a load more wrapper, made by a container div and child button */
|
||||
@mixin load-more() {
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
height: 10px;
|
||||
}
|
||||
|
||||
body.default-navbar-config {
|
||||
body.default-header {
|
||||
.crayons-article .crayons-article__body [id] {
|
||||
scroll-margin-top: var(--header-height);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,27 +12,42 @@
|
|||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.branded-2 {
|
||||
border-top: var(--su-2) solid var(--accent-brand);
|
||||
}
|
||||
|
||||
.branded-2 {
|
||||
border-top: var(--su-2) solid var(--accent-brand);
|
||||
}
|
||||
.branded-3 {
|
||||
border-top: var(--su-3) solid var(--accent-brand);
|
||||
}
|
||||
|
||||
.branded-3 {
|
||||
border-top: var(--su-3) solid var(--accent-brand);
|
||||
}
|
||||
.branded-4 {
|
||||
border-top: var(--su-4) solid var(--accent-brand);
|
||||
}
|
||||
|
||||
.branded-4 {
|
||||
border-top: var(--su-4) solid var(--accent-brand);
|
||||
}
|
||||
.branded-5 {
|
||||
border-top: var(--su-5) solid var(--accent-brand);
|
||||
}
|
||||
|
||||
.branded-5 {
|
||||
border-top: var(--su-5) solid var(--accent-brand);
|
||||
}
|
||||
.branded-6 {
|
||||
border-top: var(--su-6) solid var(--accent-brand);
|
||||
}
|
||||
|
||||
.branded-6 {
|
||||
border-top: var(--su-6) solid var(--accent-brand);
|
||||
}
|
||||
.branded-7 {
|
||||
border-top: var(--su-7) solid var(--accent-brand);
|
||||
}
|
||||
|
||||
.branded-7 {
|
||||
border-top: var(--su-7) solid var(--accent-brand);
|
||||
@media print {
|
||||
.print-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide headers for screen readers */
|
||||
// TODO: remove when #10424 and #10508 are merged.
|
||||
.visually-hidden-header {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -202,3 +202,47 @@
|
|||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Zen Mode
|
||||
// It's here because it affects the layout.
|
||||
.zen-mode {
|
||||
--site-width: 1024px;
|
||||
--header-height: 0;
|
||||
.crayons-layout {
|
||||
--layout: var(--layout-sidebar-left-width) 1fr;
|
||||
@media (min-width: $breakpoint-m) {
|
||||
--layout: var(--layout-sidebar-left-width) 1fr;
|
||||
}
|
||||
}
|
||||
.crayons-header,
|
||||
.crayons-footer,
|
||||
.crayons-article-sticky,
|
||||
.crayons-layout__sidebar-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Used for bigger sections paddings (posts for example)
|
||||
// It's here because it affects the layout.
|
||||
:root {
|
||||
--content-padding-x: var(--su-3);
|
||||
--content-padding-y: var(--su-3);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
--content-padding-x: var(--su-5);
|
||||
--content-padding-y: var(--su-5);
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
--content-padding-x: var(--su-8);
|
||||
--content-padding-y: var(--su-7);
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) {
|
||||
--content-padding-x: var(--su-9);
|
||||
}
|
||||
}
|
||||
|
||||
.text-padding {
|
||||
padding: var(--content-padding-y) var(--content-padding-x);
|
||||
}
|
||||
|
|
|
|||
33
app/assets/stylesheets/base/main.scss
Normal file
33
app/assets/stylesheets/base/main.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
@import '../config/import';
|
||||
|
||||
body {
|
||||
background: var(--body-bg);
|
||||
color: var(--body-color);
|
||||
font-family: var(--ff-sans-serif);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
|
||||
&.hidden-shell {
|
||||
padding-top: 0 !important;
|
||||
|
||||
.crayons-header,
|
||||
.crayons-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.default-header {
|
||||
padding-top: var(--header-height);
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
flex: 1 auto;
|
||||
visibility: visible;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
|
@ -47,7 +47,6 @@ pre {
|
|||
|
||||
// Set core body defaults
|
||||
body {
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
scroll-behavior: smooth;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
|
|
@ -84,12 +83,22 @@ textarea {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
// Drop default outline (Crayons provides custom)
|
||||
input[type='text'],
|
||||
textarea,
|
||||
input[type='url'],
|
||||
input[type='email'],
|
||||
input[type='password'] {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Correct the inability to style clickable types in iOS and Safari.
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Remove default stylings for fieldset
|
||||
|
|
|
|||
|
|
@ -1,4 +1,15 @@
|
|||
@import '../mixins';
|
||||
@import '../config/import';
|
||||
|
||||
:root {
|
||||
--content-rythm: var(--su-2);
|
||||
--content-font-size: var(--fs-l);
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
--content-rythm: var(--su-4);
|
||||
--content-font-size: var(--fs-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: OpenDyslexic;
|
||||
|
|
@ -47,3 +58,225 @@ body {
|
|||
--content-font-family: var(--ff-dyslexic);
|
||||
}
|
||||
}
|
||||
|
||||
.text-styles {
|
||||
font-size: var(--content-font-size);
|
||||
font-family: var(--content-font-family);
|
||||
|
||||
a {
|
||||
code {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
&.anchor {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
top: -50px;
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--ff-sans-serif);
|
||||
margin: var(--content-rythm) 0;
|
||||
margin-top: calc(var(--content-rythm) * 2);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.85em;
|
||||
line-height: 1.25em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.7em;
|
||||
font-weight: 400;
|
||||
line-height: 1.25em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.32em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 25%;
|
||||
opacity: 0.1;
|
||||
border: 1px solid var(--body-color);
|
||||
margin: 1.3em auto 1.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: var(--content-rythm) 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: var(--su-6);
|
||||
margin: var(--content-rythm) 0;
|
||||
br {
|
||||
line-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 0.7em 0 1.9em;
|
||||
list-style-type: square;
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin: var(--su-2) 0;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.4em;
|
||||
color: var(--body-color);
|
||||
opacity: 0.75;
|
||||
display: block;
|
||||
}
|
||||
|
||||
p + figcaption {
|
||||
margin-top: -0.8em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid var(--base-50);
|
||||
padding: 0 var(--su-4);
|
||||
margin: var(--content-rythm) 0;
|
||||
|
||||
p:first-child {
|
||||
margin: var(--su-2) 0;
|
||||
}
|
||||
|
||||
&.twitter-tweet {
|
||||
font-family: var(--ff-sans-serif);
|
||||
background: var(--body-color-inverted);
|
||||
max-width: 456px;
|
||||
border: 1px solid #e9eef2;
|
||||
font-size: 0.75em;
|
||||
line-height: 1.35em;
|
||||
border-radius: 5px;
|
||||
margin: 1.6em auto;
|
||||
padding: 60px 10px 18px;
|
||||
color: white;
|
||||
min-height: 60px;
|
||||
padding: 33px 15px 8px;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-s) {
|
||||
padding: 60px 22px 18px;
|
||||
min-height: 105px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #444d56;
|
||||
vertical-align: middle;
|
||||
background-color: #fafbfc;
|
||||
border: solid 1px #c6cbd1;
|
||||
border-bottom-color: #959da5;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #959da5;
|
||||
}
|
||||
|
||||
pre:not(.highlight),
|
||||
div.highlight {
|
||||
margin: var(--content-rythm) 0;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: calc(50vh + 180px);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
a.article-body-image-wrapper {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: var(--content-rythm) 0;
|
||||
}
|
||||
|
||||
.fluidvids {
|
||||
margin: var(--content-rythm) 0;
|
||||
|
||||
iframe {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrapper-paragraph {
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
font-size: 0.78em;
|
||||
margin: 0.8em auto 1.2em;
|
||||
table-layout: fixed;
|
||||
|
||||
th {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 5px 1vw;
|
||||
background: var(--body-bg);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 5px 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
.twitter-tweet {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,4 +8,7 @@
|
|||
-webkit-appearance: none;
|
||||
font-stretch: condensed;
|
||||
font-weight: bold;
|
||||
&.cta-danger {
|
||||
background: $red;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,19 @@
|
|||
@import '../config/import';
|
||||
|
||||
.top-bar {
|
||||
.crayons-header {
|
||||
--indicator-outline: var(--header-bg);
|
||||
--dropdown-display: none;
|
||||
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 102; // Must be higher than the z-index of the broadcast-wrapper.
|
||||
height: var(--header-height);
|
||||
background: var(--header-bg);
|
||||
box-shadow: 0 1px 1px var(--header-shadow);
|
||||
|
||||
&,
|
||||
&::after,
|
||||
&::before,
|
||||
& *,
|
||||
& *::after,
|
||||
& *::before {
|
||||
box-sizing: border-box; // todo: make it global when ready
|
||||
.default-header & {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 102; // Must be higher than the z-index of the broadcast-wrapper.
|
||||
}
|
||||
|
||||
&__container {
|
||||
|
|
@ -45,7 +39,7 @@
|
|||
}
|
||||
|
||||
// Logo
|
||||
.top-bar--logo {
|
||||
.site-logo {
|
||||
display: flex;
|
||||
|
||||
.logo {
|
||||
|
|
@ -59,7 +53,7 @@
|
|||
}
|
||||
|
||||
// Search bar
|
||||
.top-bar--search {
|
||||
.crayons-header--search {
|
||||
max-width: 420px;
|
||||
flex: 1 auto;
|
||||
margin: 0 var(--su-2);
|
||||
|
|
@ -70,45 +64,47 @@
|
|||
}
|
||||
|
||||
// Actions on right side...
|
||||
.top-bar__links {
|
||||
height: var(--header-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.top-bar__link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: var(--su-2);
|
||||
margin: 0 var(--su-1);
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
color: var(--header-icons-color);
|
||||
outline: 0;
|
||||
transition: background var(--transition-props);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
--indicator-outline: var(--header-bg-hover);
|
||||
|
||||
color: var(--header-icons-color-hover);
|
||||
background: var(--header-bg-hover);
|
||||
.crayons-header {
|
||||
&__links {
|
||||
height: var(--header-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&--current {
|
||||
--indicator-outline: var(--header-bg-current);
|
||||
&__link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: var(--su-2);
|
||||
margin: 0 var(--su-1);
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
color: var(--header-icons-color);
|
||||
outline: 0;
|
||||
transition: background var(--transition-props);
|
||||
|
||||
color: var(--header-icons-color-hover);
|
||||
background: var(--header-bg-current) !important;
|
||||
.crayons-indicator {
|
||||
display: none;
|
||||
&:hover,
|
||||
&:focus {
|
||||
--indicator-outline: var(--header-bg-hover);
|
||||
|
||||
color: var(--header-icons-color-hover);
|
||||
background: var(--header-bg-hover);
|
||||
}
|
||||
|
||||
&--current {
|
||||
--indicator-outline: var(--header-bg-current);
|
||||
|
||||
color: var(--header-icons-color-hover);
|
||||
background: var(--header-bg-current) !important;
|
||||
.crayons-indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown under profile picture / hamburger icon
|
||||
.top-bar__menu {
|
||||
.crayons-header__menu {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -132,7 +128,7 @@
|
|||
&.desktop:focus {
|
||||
--dropdown-display: block;
|
||||
|
||||
.top-bar__menu__trigger {
|
||||
.crayons-header__menu__trigger {
|
||||
color: var(--header-icons-color-hover);
|
||||
background: var(--header-bg-hover);
|
||||
}
|
||||
|
|
@ -225,3 +221,29 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-progress {
|
||||
--duration: 3600ms;
|
||||
--delay: 250ms;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background: var(--accent-brand);
|
||||
z-index: 103;
|
||||
height: var(--su-1);
|
||||
width: 0;
|
||||
&.showing {
|
||||
display: block;
|
||||
animation: showProgressBar var(--duration) ease-in-out;
|
||||
animation-delay: var(--delay);
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes showProgressBar {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
@import 'config/generator';
|
||||
|
||||
@import 'base/reset';
|
||||
@import 'base/main';
|
||||
@import 'base/helpers';
|
||||
@import 'base/icons';
|
||||
@import 'base/layout';
|
||||
|
|
@ -15,6 +16,7 @@
|
|||
@import 'components/comments';
|
||||
@import 'components/dropdowns';
|
||||
@import 'components/forms';
|
||||
@import 'components/header';
|
||||
@import 'components/headers';
|
||||
@import 'components/indicators';
|
||||
@import 'components/loaders';
|
||||
|
|
@ -29,13 +31,3 @@
|
|||
@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';
|
||||
|
|
|
|||
|
|
@ -398,7 +398,6 @@
|
|||
}
|
||||
|
||||
.toggles button {
|
||||
@include themeable-important(color, theme-color, $black);
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
margin: 8px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import 'variables';
|
||||
|
||||
#error_explanation {
|
||||
width: 100%;
|
||||
border: 2px solid #d94949;
|
||||
|
|
@ -22,3 +24,39 @@
|
|||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove post confirmation
|
||||
.delete-confirm.container {
|
||||
padding: 150px 10px;
|
||||
min-height: 300px;
|
||||
text-align: center;
|
||||
h4 {
|
||||
background: $black;
|
||||
padding: 5px 8px;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
margin-bottom: 0px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
a.delete-link {
|
||||
background: $red;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
&:hover {
|
||||
color: white;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
form button {
|
||||
background: $red;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
border: 0px;
|
||||
border-radius: 3px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
@import 'comments';
|
||||
@import 'notifications';
|
||||
@import 'notifications-welcome-broadcast';
|
||||
@import 'signup-modal';
|
||||
@import 'live';
|
||||
@import 'preact/sidebar-widget';
|
||||
@import 'preact/article-form';
|
||||
|
|
|
|||
|
|
@ -3,18 +3,6 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
body {
|
||||
background: var(--body-bg);
|
||||
color: var(--body-color);
|
||||
font-family: var(--ff-sans-serif);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: scroll;
|
||||
padding-top: var(--header-height);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#audiocontent {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -36,44 +24,6 @@ body {
|
|||
height: 90vh;
|
||||
}
|
||||
|
||||
.zen-mode {
|
||||
.top-bar,
|
||||
.crayons-article-sticky,
|
||||
.crayons-article-actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.top-bar,
|
||||
.crayons-article-sticky {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.config_minimize_newest_listings {
|
||||
#sidebar-listings-widget {
|
||||
.widget-body {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.universal-page-content-wrapper {
|
||||
flex: 1 auto;
|
||||
visibility: visible;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Hide headers for screen readers */
|
||||
.visually-hidden-header {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-brand-color);
|
||||
text-decoration: none;
|
||||
|
|
@ -90,33 +40,6 @@ div {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.cta {
|
||||
color: $black;
|
||||
background: $green;
|
||||
font-family: $helvetica-condensed;
|
||||
-webkit-appearance: none;
|
||||
font-stretch: condensed;
|
||||
font-weight: bold;
|
||||
&.cta-danger {
|
||||
background: $red;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
textarea,
|
||||
input[type='url'],
|
||||
input[type='email'] {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.partner-image-dark-mode {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -130,9 +53,7 @@ body.ten-x-hacker-theme {
|
|||
.icon-image,
|
||||
.dev-badge,
|
||||
.chatchannels__config img,
|
||||
.message__actions img,
|
||||
.external-link-img,
|
||||
.group-img {
|
||||
.message__actions img {
|
||||
-webkit-filter: invert(95%);
|
||||
filter: invert(95%);
|
||||
}
|
||||
|
|
@ -146,10 +67,6 @@ body.ten-x-hacker-theme {
|
|||
.partner-image-light-mode {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.not-dark-theme-text-compatible {
|
||||
@include themeable-important(color, theme-secondary-color, white);
|
||||
}
|
||||
}
|
||||
|
||||
.broadcast-wrapper {
|
||||
|
|
@ -160,6 +77,10 @@ body.ten-x-hacker-theme {
|
|||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 101; // Must be higher than the z-index of the sticky-nav.
|
||||
|
||||
.static-header & {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.broadcast-visible {
|
||||
|
|
@ -171,17 +92,6 @@ body.ten-x-hacker-theme {
|
|||
align-self: center;
|
||||
}
|
||||
|
||||
body.static-navbar-config {
|
||||
padding-top: 0;
|
||||
.top-bar {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.broadcast-wrapper {
|
||||
position: relative; // Unset fixed position for static navbar config.
|
||||
}
|
||||
}
|
||||
|
||||
.trusted-visible-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -190,56 +100,6 @@ body.trusted-status-true .trusted-visible-block {
|
|||
display: flex !important;
|
||||
}
|
||||
|
||||
body.hidden-shell {
|
||||
.top-bar,
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
.container {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.universal-page-content-wrapper {
|
||||
margin-top: calc(var(--header-height) * -1) !important;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove post confirmation
|
||||
.delete-confirm.container {
|
||||
padding: 150px 10px;
|
||||
min-height: 300px;
|
||||
text-align: center;
|
||||
h4 {
|
||||
background: $black;
|
||||
padding: 5px 8px;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
margin-bottom: 0px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
a.delete-link {
|
||||
background: $red;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
&:hover {
|
||||
color: white;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
form button {
|
||||
background: $red;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
border: 0px;
|
||||
border-radius: 3px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-shell-loader {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import 'config/import';
|
||||
@import 'variables';
|
||||
|
||||
#audiocontent {
|
||||
position: fixed;
|
||||
|
|
@ -187,36 +186,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.navigation-progress {
|
||||
--duration: 3600ms;
|
||||
--delay: 250ms;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background: var(--accent-brand);
|
||||
z-index: 103;
|
||||
height: var(--su-1);
|
||||
width: 0;
|
||||
&.showing {
|
||||
display: block;
|
||||
animation: showProgressBar var(--duration) ease-in-out;
|
||||
animation-delay: var(--delay);
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes showProgressBar {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.global-notice {
|
||||
font-family: var(--ff-sans-serif);
|
||||
background: $green;
|
||||
color: black;
|
||||
background: var(--accent-success-darker);
|
||||
color: white;
|
||||
padding: 20px 0px 20px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
|
|
|||
9
app/assets/stylesheets/views.scss
Normal file
9
app/assets/stylesheets/views.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@import 'views/article';
|
||||
@import 'views/article-form';
|
||||
@import 'views/footer';
|
||||
@import 'views/listings';
|
||||
@import 'views/dashboard';
|
||||
@import 'views/profile';
|
||||
@import 'views/signin';
|
||||
@import 'views/signup-modal';
|
||||
@import 'views/sponsors';
|
||||
|
|
@ -168,10 +168,10 @@
|
|||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--base-0);
|
||||
padding: var(--su-2) var(--article-padding-x);
|
||||
margin: calc(var(--article-padding-y) * -1)
|
||||
calc(var(--article-padding-x) * -1) var(--su-6)
|
||||
calc(var(--article-padding-x) * -1);
|
||||
padding: var(--su-2) var(--content-padding-x);
|
||||
margin: calc(var(--content-padding-y) * -1)
|
||||
calc(var(--content-padding-x) * -1) var(--su-6)
|
||||
calc(var(--content-padding-x) * -1);
|
||||
|
||||
> :first-child {
|
||||
margin-left: calc(var(--su-2) * -1);
|
||||
|
|
|
|||
|
|
@ -1,28 +1,5 @@
|
|||
@import '../config/import';
|
||||
|
||||
:root {
|
||||
--article-rythm: var(--su-2);
|
||||
--article-padding-x: var(--su-3);
|
||||
--article-padding-y: var(--su-3);
|
||||
--article-font-size: var(--fs-l);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
--article-padding-x: var(--su-5);
|
||||
--article-padding-y: var(--su-5);
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
--article-rythm: var(--su-4);
|
||||
--article-padding-x: var(--su-8);
|
||||
--article-padding-y: var(--su-7);
|
||||
--article-font-size: var(--fs-xl);
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) {
|
||||
--article-padding-x: var(--su-9);
|
||||
}
|
||||
}
|
||||
|
||||
.article-wrapper {
|
||||
// Hack preventing content exceeding its container - it works for scenarios where we have
|
||||
// `pre` tag having wide (overflowing) text. And the container itself is part of a layout
|
||||
|
|
@ -66,8 +43,8 @@
|
|||
word-break: break-word;
|
||||
|
||||
&__meta {
|
||||
padding: var(--article-padding-y) var(--article-padding-x) 0
|
||||
var(--article-padding-x);
|
||||
padding: var(--content-padding-y) var(--content-padding-x) 0
|
||||
var(--content-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,7 +57,7 @@
|
|||
}
|
||||
|
||||
&__main {
|
||||
padding: var(--article-padding-y) var(--article-padding-x);
|
||||
padding: var(--content-padding-y) var(--content-padding-x);
|
||||
gap: var(--su-7);
|
||||
}
|
||||
|
||||
|
|
@ -88,231 +65,6 @@
|
|||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
.text-styles {
|
||||
font-size: var(--article-font-size);
|
||||
font-family: var(--content-font-family);
|
||||
|
||||
a {
|
||||
code {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
&.anchor {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
top: -50px;
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--ff-sans-serif);
|
||||
margin: var(--article-rythm) 0;
|
||||
margin-top: calc(var(--article-rythm) * 2);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.85em;
|
||||
line-height: 1.25em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.7em;
|
||||
font-weight: 400;
|
||||
line-height: 1.25em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.32em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 25%;
|
||||
opacity: 0.1;
|
||||
border: 1px solid var(--body-color);
|
||||
margin: 1.3em auto 1.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: var(--article-rythm) 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: var(--su-6);
|
||||
margin: var(--article-rythm) 0;
|
||||
br {
|
||||
line-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 0.7em 0 1.9em;
|
||||
list-style-type: square;
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin: var(--su-2) 0;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.4em;
|
||||
color: var(--body-color);
|
||||
opacity: 0.75;
|
||||
display: block;
|
||||
}
|
||||
|
||||
p + figcaption {
|
||||
margin-top: -0.8em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid var(--base-50);
|
||||
padding: 0 var(--su-4);
|
||||
margin: var(--article-rythm) 0;
|
||||
|
||||
p:first-child {
|
||||
margin: var(--su-2) 0;
|
||||
}
|
||||
|
||||
&.twitter-tweet {
|
||||
font-family: var(--ff-sans-serif);
|
||||
background: var(--body-color-inverted);
|
||||
max-width: 456px;
|
||||
border: 1px solid #e9eef2;
|
||||
font-size: 0.75em;
|
||||
line-height: 1.35em;
|
||||
border-radius: 5px;
|
||||
margin: 1.6em auto;
|
||||
padding: 60px 10px 18px;
|
||||
color: white;
|
||||
min-height: 60px;
|
||||
padding: 33px 15px 8px;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-s) {
|
||||
padding: 60px 22px 18px;
|
||||
min-height: 105px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #444d56;
|
||||
vertical-align: middle;
|
||||
background-color: #fafbfc;
|
||||
border: solid 1px #c6cbd1;
|
||||
border-bottom-color: #959da5;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #959da5;
|
||||
}
|
||||
|
||||
pre:not(.highlight),
|
||||
div.highlight {
|
||||
margin: var(--article-rythm) 0;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: calc(50vh + 180px);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
a.article-body-image-wrapper {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: var(--article-rythm) 0;
|
||||
}
|
||||
|
||||
.fluidvids {
|
||||
margin: var(--article-rythm) 0;
|
||||
|
||||
iframe {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrapper-paragraph {
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
font-size: 0.78em;
|
||||
margin: 0.8em auto 1.2em;
|
||||
table-layout: fixed;
|
||||
|
||||
th {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 5px 1vw;
|
||||
background: var(--body-bg);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 5px 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
.twitter-tweet {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.text-padding {
|
||||
padding: var(--article-padding-y) var(--article-padding-x);
|
||||
}
|
||||
|
||||
.crayons-article-actions {
|
||||
position: fixed;
|
||||
|
|
@ -515,7 +267,7 @@
|
|||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: calc(var(--header-height) + var(--layout-padding));
|
||||
.static-navbar-config & {
|
||||
.static-header & {
|
||||
top: var(--layout-padding);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
105
app/assets/stylesheets/views/signup-modal.scss
Normal file
105
app/assets/stylesheets/views/signup-modal.scss
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
@import '../config/import';
|
||||
|
||||
.authentication-modal {
|
||||
&__box {
|
||||
position: relative;
|
||||
margin-left: var(--su-4);
|
||||
margin-right: var(--su-4);
|
||||
height: auto;
|
||||
width: auto;
|
||||
|
||||
@include generate-box(
|
||||
$level: 2,
|
||||
$bg: var(--base-inverted),
|
||||
$border: var(--base),
|
||||
$color: var(--card-color)
|
||||
);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
margin: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__close-btn {
|
||||
position: absolute;
|
||||
top: var(--su-3);
|
||||
right: var(--su-3);
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: grid;
|
||||
grid-gap: var(--su-2);
|
||||
padding: var(--su-4);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
padding: var(--su-8) var(--su-8) var(--su-6);
|
||||
}
|
||||
}
|
||||
&__image-container {
|
||||
width: var(--su-8);
|
||||
height: var(--su-8);
|
||||
margin-bottom: var(--su-2);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
border-radius: var(--radius);
|
||||
transform: rotate(-10deg);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: grid;
|
||||
grid-gap: var(--su-1);
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: var(--card-color);
|
||||
font-size: var(--fs-2xl);
|
||||
line-height: var(--lh-tight);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
font-size: var(--fs-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: var(--card-color-secondary);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: grid;
|
||||
grid-gap: var(--su-1);
|
||||
padding: 0 var(--su-4) var(--su-4);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
justify-self: center;
|
||||
padding: 0 var(--su-8) var(--su-7);
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
border-top: 2px solid var(--base-100);
|
||||
padding: var(--su-2) var(--su-4);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
padding: var(--su-5) var(--su-8);
|
||||
}
|
||||
}
|
||||
|
||||
&__footer-label {
|
||||
font-size: var(--fs-s);
|
||||
line-height: var(--lh-tight);
|
||||
color: var(--card-color-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -58,7 +58,7 @@ class UserDecorator < ApplicationDecorator
|
|||
config_theme.tr("_", "-"),
|
||||
"#{config_font_name.tr('_', '-')}-article-body",
|
||||
"trusted-status-#{trusted}",
|
||||
"#{config_navbar.tr('_', '-')}-navbar-config",
|
||||
"#{config_navbar.tr('_', '-')}-header",
|
||||
]
|
||||
body_class.join(" ")
|
||||
end
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { addDecorator, addParameters } from '@storybook/preact';
|
|||
|
||||
import '../../assets/stylesheets/minimal.scss';
|
||||
import '../../assets/stylesheets/crayons.scss';
|
||||
import '../../assets/stylesheets/views.scss';
|
||||
import '../../assets/javascripts/lib/xss';
|
||||
import '../../assets/javascripts/utilities/timeAgo';
|
||||
import './storybook.scss';
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export const SearchForm = ({
|
|||
>
|
||||
<input name="utf8" type="hidden" value="✓" />
|
||||
<input
|
||||
className="top-bar--search-input crayons-textfield"
|
||||
className="crayons-header--search-input crayons-textfield"
|
||||
type="text"
|
||||
name="q"
|
||||
id={searchBoxId}
|
||||
|
|
|
|||
|
|
@ -71,5 +71,8 @@ You can access all of the SCSS files in `app/assets/stylesheets` folder.
|
|||
- `crayons.scss` - this is one importing everything Crayons-related like
|
||||
variables, components styling, utility classes etc.
|
||||
|
||||
- `views.scss` - this one contains views-specific styling. It is separated
|
||||
from Crayons to make Crayons library DEV agnostic.
|
||||
|
||||
- `minimal.scss` - this one is actually one of the main stylesheets from
|
||||
pre-Crayons era. It imports everything basically :).
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Search } from '../Search';
|
|||
import 'focus-visible';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const root = document.getElementById('top-bar--search');
|
||||
const root = document.getElementById('header-search');
|
||||
|
||||
render(<Search />, root);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,28 +21,6 @@ if (mainNavMoreTrigger) {
|
|||
mainNavMoreTrigger.addEventListener('click', toggleMainNavMore);
|
||||
}
|
||||
|
||||
function toggleListingsMinimization() {
|
||||
if (document.body.classList.contains('config_minimize_newest_listings')) {
|
||||
// Un-minimize
|
||||
localStorage.setItem('config_minimize_newest_listings', 'no');
|
||||
document.body.classList.remove('config_minimize_newest_listings');
|
||||
} else {
|
||||
// Minimize
|
||||
localStorage.setItem('config_minimize_newest_listings', 'yes');
|
||||
document.body.classList.add('config_minimize_newest_listings');
|
||||
}
|
||||
}
|
||||
|
||||
const sidebarListingsMinimizeButton = document.getElementById(
|
||||
'sidebar-listings-widget-minimize-button',
|
||||
);
|
||||
if (sidebarListingsMinimizeButton) {
|
||||
sidebarListingsMinimizeButton.addEventListener(
|
||||
'click',
|
||||
toggleListingsMinimization,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders tags followed in the left side bar of the homepage.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<nav class="flex mb-4" aria-label="Display Ads navigation">
|
||||
<%= form_tag("/admin/display_ads", method: "get") do %>
|
||||
<%= text_field_tag(:search, params[:search], aria: { label: "Search" }, class: "top-bar--search-input crayons-textfield", placeholder: "Search by Org name") %>
|
||||
<%= text_field_tag(:search, params[:search], aria: { label: "Search" }, class: "crayons-header--search-input crayons-textfield", placeholder: "Search by Org name") %>
|
||||
<% end %>
|
||||
<div class="ml-auto">
|
||||
<div class="justify-content-end">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<% if articles %>
|
||||
<div class="crayons-card crayons-card--secondary text-padding mb-4">
|
||||
<h2 class="crayons-title">Read next</h2>
|
||||
|
||||
<section class="crayons-card crayons-card--secondary text-padding mb-4 print-hidden">
|
||||
<h2 class="crayons-title">Read next</h2>
|
||||
<% articles.each do |article| %>
|
||||
<a href="<%= article.path %>" data-preload-image="<%= cloud_cover_url(article.main_image) %>" class="crayons-link mt-6 block">
|
||||
<div class="flex items-center">
|
||||
|
|
@ -19,5 +19,5 @@
|
|||
</div>
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
</section>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<% @actor = @article.organization || @article.user %>
|
||||
<div class="crayons-article-sticky grid gap-4 break-word" id="article-show-primary-sticky-nav">
|
||||
<div class="crayons-article-sticky grid gap-4 break-word print-hidden" id="article-show-primary-sticky-nav">
|
||||
<div class="crayons-card crayons-card--secondary branded-7 p-4 pt-0 hidden l:grid gap-4" style="border-top-color: <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %>;">
|
||||
<div class="-mt-4">
|
||||
<a href="<%= @actor.path %>" class="flex">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<style>
|
||||
body {
|
||||
padding-top: 0;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
body > footer,
|
||||
#top-bar {
|
||||
display: none
|
||||
.crayons-footer,
|
||||
.crayons-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.universal-page-content-wrapper {
|
||||
.wrapper {
|
||||
overflow: unset;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
<div class="crayons-article-form__body text-padding">
|
||||
<div class="crayons-article-form__toolbar">
|
||||
<button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-left fw-normal" type="button">
|
||||
<%= (inline_svg_tag("image.svg", aria: true, class: "crayons-icon", title: "Image") + "Upload image").delete!("\n").html_safe %>
|
||||
<%= ("#{inline_svg_tag('image.svg', aria: true, class: 'crayons-icon', title: 'Image')}Upload image").delete!("\n").html_safe %>
|
||||
<input type="file" id="image-upload-field" class="w-100 h-100 absolute left-0 right-0 top-0 bottom-0 overflow-hidden opacity-0 cursor-pointer" multiple accept="image/*" data-max-file-size-mb="25" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<footer class="crayons-footer">
|
||||
<footer class="crayons-footer print-hidden">
|
||||
<div id="footer-container" class="crayons-layout crayons-footer__container">
|
||||
<div class="crayons-footer__info">
|
||||
<div><a href="/" class="crayons-footer__logo" aria-label="<%= community_name %> Home"><%= logo_svg %></a></div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="crayons-dropdown left-2 right-2 s:left-auto p-0 top-bar__menu__dropdown">
|
||||
<div class="crayons-dropdown left-2 right-2 s:left-auto p-0 crayons-header__menu__dropdown">
|
||||
<% if user_signed_in? %>
|
||||
<div id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-1">
|
||||
<a id="first-nav-link" class="crayons-link crayons-link--block">
|
||||
|
|
|
|||
|
|
@ -3,12 +3,14 @@
|
|||
<style>
|
||||
<% Rails.application.config.assets.compile = true %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["views.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["minimal.css"].to_s.html_safe %>
|
||||
</style>
|
||||
<% elsif @story_show %>
|
||||
<style>
|
||||
<% Rails.application.config.assets.compile = true %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["views.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<% if @article_show %>
|
||||
<%= Rails.application.assets["comments.css"].to_s.html_safe %>
|
||||
|
|
@ -22,6 +24,7 @@
|
|||
<style>
|
||||
<% Rails.application.config.assets.compile = true %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["views.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["articles.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["buttons.css"].to_s.html_safe %>
|
||||
|
|
@ -37,6 +40,7 @@
|
|||
<style>
|
||||
<% Rails.application.config.assets.compile = true %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["views.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["articles.css"].to_s.html_safe %>
|
||||
|
|
@ -50,6 +54,7 @@
|
|||
<% elsif view_class.start_with? "comments" %>
|
||||
<style>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["views.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["comments.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["ltags/LiquidTags.css"].to_s.html_safe %>
|
||||
|
|
@ -59,34 +64,40 @@
|
|||
<% elsif view_class.include?("registrations") || @new_article_not_logged_in %>
|
||||
<style>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["views.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
</style>
|
||||
<% elsif view_class.include? "listings-" %>
|
||||
<style>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["views.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["listings.css"].to_s.html_safe %>
|
||||
</style>
|
||||
<% elsif view_class.include? "credits-" %>
|
||||
<style>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["views.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["credits.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["views.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["video-collection.css"].to_s.html_safe %>
|
||||
</style>
|
||||
<% elsif view_class.include? "badges-index" %>
|
||||
<%= stylesheet_link_tag "crayons", media: "all" %>
|
||||
<%= stylesheet_link_tag "views", media: "all" %>
|
||||
<%= stylesheet_link_tag "minimal", media: "all" %>
|
||||
<style>
|
||||
<%= Rails.application.assets["badges.css"].to_s.html_safe %>
|
||||
</style>
|
||||
<% else %>
|
||||
<%= stylesheet_link_tag "crayons", media: "all" %>
|
||||
<%= stylesheet_link_tag "views", media: "all" %>
|
||||
<%= stylesheet_link_tag "minimal", media: "all" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<div class="navigation-progress" id="navigation-progress">
|
||||
</div>
|
||||
<header class="top-bar" id="top-bar" role="banner">
|
||||
<div class="navigation-progress" id="navigation-progress"></div>
|
||||
<header class="crayons-header print-hidden" role="banner">
|
||||
<a href="#articles-list" class="skip-content-link">Skip to content</a>
|
||||
<div class="top-bar__container">
|
||||
<a href="/" class="top-bar--logo" aria-label="<%= community_name %> Home"><%= logo_svg %></a>
|
||||
<div class="crayons-header__container">
|
||||
<a href="/" class="site-logo" aria-label="<%= community_name %> Home"><%= logo_svg %></a>
|
||||
|
||||
<div id="pwa-nav-buttons" class="pwa-nav-buttons">
|
||||
<button type="button" id="app-back-button">
|
||||
|
|
@ -17,26 +16,26 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div class="top-bar--search" id="top-bar--search">
|
||||
<div class="crayons-header--search" id="header-search">
|
||||
<form acceptCharset="UTF-8" method="get" action="/search">
|
||||
<input class="top-bar--search-input crayons-textfield" type="text" name="q" id="nav-search" placeholder="Search..." autoComplete="off" />
|
||||
<input class="crayons-header--search-input crayons-textfield" type="text" name="q" id="nav-search" placeholder="Search..." autoComplete="off" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="top-bar__links">
|
||||
<div class="crayons-header__links">
|
||||
<% if user_signed_in? %>
|
||||
<a href="/new" class="crayons-btn hidden mr-2 whitespace-nowrap s:block">Write a post</a>
|
||||
|
||||
<a id="moderation-link" class="top-bar__link trusted-visible-block" aria-label="Moderation" href="<%= mod_path %>">
|
||||
<a id="moderation-link" class="crayons-header__link trusted-visible-block" aria-label="Moderation" href="<%= mod_path %>">
|
||||
<%= inline_svg_tag("mod.svg", aria: true, class: "crayons-icon", title: "Moderation") %>
|
||||
</a>
|
||||
|
||||
<a href="/connect" id="connect-link" class="top-bar__link" aria-label="Connect">
|
||||
<a href="/connect" id="connect-link" class="crayons-header__link" aria-label="Connect">
|
||||
<%= inline_svg_tag("connect.svg", aria: true, class: "crayons-icon", title: "Connect") %>
|
||||
<span class="crayons-indicator crayons-indicator--accent hidden" id="connect-number"></span>
|
||||
</a>
|
||||
|
||||
<a href="/notifications" id="notifications-link" class="top-bar__link" aria-label="Notifications">
|
||||
<a href="/notifications" id="notifications-link" class="crayons-header__link" aria-label="Notifications">
|
||||
<%= inline_svg_tag("bell.svg", aria: true, class: "crayons-icon", title: "Notifications") %>
|
||||
<span class="crayons-indicator crayons-indicator--critical hidden" id="notifications-number"></span>
|
||||
</a>
|
||||
|
|
@ -45,12 +44,12 @@
|
|||
Log in
|
||||
</a>
|
||||
|
||||
<a href="<%= sign_up_path(state:"new-user") %>" class="crayons-btn hidden mr-2 whitespace-nowrap s:block" data-no-instant>
|
||||
<a href="<%= sign_up_path(state: "new-user") %>" class="crayons-btn hidden mr-2 whitespace-nowrap s:block" data-no-instant>
|
||||
Create account
|
||||
</a>
|
||||
<% end %>
|
||||
<div class="top-bar__menu <% unless user_signed_in? %>s:hidden<% end %>" id="top-bar__menu">
|
||||
<button type="button" class="top-bar__menu__trigger" id="navigation-butt" aria-label="Navigation menu">
|
||||
<div class="crayons-header__menu <% unless user_signed_in? %>s:hidden<% end %>" id="crayons-header__menu">
|
||||
<button type="button" class="crayons-header__menu__trigger" id="navigation-butt" aria-label="Navigation menu">
|
||||
<% if user_signed_in? %>
|
||||
<span class="crayons-avatar crayons-avatar--l"><img class="crayons-avatar__image" alt="" id="nav-profile-image" /></span>
|
||||
<% else %>
|
||||
|
|
|
|||
|
|
@ -27,9 +27,6 @@
|
|||
if (navigator.userAgent === 'DEV-Native-ios') {
|
||||
document.body.classList.add("dev-ios-native-body");
|
||||
}
|
||||
if (localStorage.getItem('config_minimize_newest_listings') === 'yes') {
|
||||
document.body.classList.add("config_minimize_newest_listings");
|
||||
}
|
||||
if (window.frameElement) { // Hide top bar and footer when loaded within iframe
|
||||
document.body.classList.add("hidden-shell");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,19 +24,19 @@
|
|||
<%= stylesheet_link_tag "admin" %>
|
||||
|
||||
</head>
|
||||
<body class="admin"
|
||||
<body class="admin default-header"
|
||||
data-honybadger-key="<%= ApplicationConfig["HONEYBADGER_JS_API_KEY"] %>"
|
||||
data-release-footprint="<%= ApplicationConfig["RELEASE_FOOTPRINT"] %>"
|
||||
data-ga-tracking="<%= SiteConfig.ga_tracking_id %>">
|
||||
<header class="top-bar" id="top-bar" role="banner">
|
||||
<div class="top-bar__container">
|
||||
<a href="/" class="top-bar--logo" aria-label="<%= community_name %> Home"><%= logo_svg %></a>
|
||||
<header class="crayons-header" role="banner">
|
||||
<div class="crayons-header__container">
|
||||
<a href="/" class="site-logo" aria-label="<%= community_name %> Home"><%= logo_svg %></a>
|
||||
<h1 class="pl-4 fs-l">
|
||||
Admin
|
||||
<span class="color-base-40">»</span> <span class="fw-bold"><%= controller_name.titleize %></span>
|
||||
</h1>
|
||||
|
||||
<div class="top-bar__links">
|
||||
<div class="crayons-header__links">
|
||||
<a href="/" aria-label="<%= community_name %> Home">Go to <%= community_name %> home page</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div id="base-payment-pointer" data-payment-pointer="<%= SiteConfig.payment_pointer %>"></div>
|
||||
<% end %>
|
||||
<style>.app-shell-loader {display: none;}</style>
|
||||
<div id="page-content" class="universal-page-content-wrapper <%= view_class %>" data-current-page="<%= current_page %>">
|
||||
<div id="page-content" class="wrapper <%= view_class %>" data-current-page="<%= current_page %>">
|
||||
<% if flash[:global_notice] %>
|
||||
<div class="global-notice">
|
||||
<%= flash[:global_notice] %>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,9 @@
|
|||
<% cache(release_adjusted_cache_key("onboarding-css"), expires_in: 10.hours) do %>
|
||||
<%= Rails.application.assets["preact/onboarding-modal.css"].to_s.html_safe %>
|
||||
<% end %>
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
.top-bar {
|
||||
|
||||
.crayons-header,
|
||||
.crayons-footer {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
<% cache(release_adjusted_cache_key("top-html-and-config--#{user_signed_in?}")) do %>
|
||||
<body
|
||||
data-user-status="<%= user_logged_in_status %>"
|
||||
class="<%= SiteConfig.default_font.tr("_", "-") %>-article-body"
|
||||
class="<%= SiteConfig.default_font.tr("_", "-") %>-article-body default-header"
|
||||
data-pusher-key="<%= ApplicationConfig["PUSHER_KEY"] %>"
|
||||
data-app-name="<%= ApplicationConfig["APP_NAME"] %>"
|
||||
data-honybadger-key="<%= ApplicationConfig["HONEYBADGER_JS_API_KEY"] %>"
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ RSpec.describe UserDecorator, type: :decorator do
|
|||
it "creates proper body class with defaults" do
|
||||
expected_result = %W[
|
||||
default sans-serif-article-body
|
||||
trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config
|
||||
trusted-status-#{user.trusted} #{user.config_navbar}-header
|
||||
].join(" ")
|
||||
expect(user.decorate.config_body_class).to eq(expected_result)
|
||||
end
|
||||
|
|
@ -134,7 +134,7 @@ RSpec.describe UserDecorator, type: :decorator do
|
|||
user.config_font = "sans_serif"
|
||||
expected_result = %W[
|
||||
default sans-serif-article-body
|
||||
trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config
|
||||
trusted-status-#{user.trusted} #{user.config_navbar}-header
|
||||
].join(" ")
|
||||
expect(user.decorate.config_body_class).to eq(expected_result)
|
||||
end
|
||||
|
|
@ -143,7 +143,7 @@ RSpec.describe UserDecorator, type: :decorator do
|
|||
user.config_theme = "night_theme"
|
||||
expected_result = %W[
|
||||
night-theme sans-serif-article-body
|
||||
trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config
|
||||
trusted-status-#{user.trusted} #{user.config_navbar}-header
|
||||
].join(" ")
|
||||
expect(user.decorate.config_body_class).to eq(expected_result)
|
||||
end
|
||||
|
|
@ -152,7 +152,7 @@ RSpec.describe UserDecorator, type: :decorator do
|
|||
user.config_theme = "pink_theme"
|
||||
expected_result = %W[
|
||||
pink-theme sans-serif-article-body
|
||||
trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config
|
||||
trusted-status-#{user.trusted} #{user.config_navbar}-header
|
||||
].join(" ")
|
||||
expect(user.decorate.config_body_class).to eq(expected_result)
|
||||
end
|
||||
|
|
@ -161,7 +161,7 @@ RSpec.describe UserDecorator, type: :decorator do
|
|||
user.config_theme = "minimal_light_theme"
|
||||
expected_result = %W[
|
||||
minimal-light-theme sans-serif-article-body
|
||||
trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config
|
||||
trusted-status-#{user.trusted} #{user.config_navbar}-header
|
||||
].join(" ")
|
||||
expect(user.decorate.config_body_class).to eq(expected_result)
|
||||
end
|
||||
|
|
@ -170,7 +170,7 @@ RSpec.describe UserDecorator, type: :decorator do
|
|||
user.config_navbar = "static"
|
||||
expected_result = %W[
|
||||
default sans-serif-article-body
|
||||
trusted-status-#{user.trusted} static-navbar-config
|
||||
trusted-status-#{user.trusted} static-header
|
||||
].join(" ")
|
||||
expect(user.decorate.config_body_class).to eq(expected_result)
|
||||
end
|
||||
|
|
@ -183,7 +183,7 @@ RSpec.describe UserDecorator, type: :decorator do
|
|||
|
||||
expected_result = %w[
|
||||
default sans-serif-article-body
|
||||
trusted-status-true default-navbar-config
|
||||
trusted-status-true default-header
|
||||
].join(" ")
|
||||
expect(user.decorate.config_body_class).to eq(expected_result)
|
||||
end
|
||||
|
|
|
|||
|
|
@ -794,7 +794,7 @@ RSpec.describe User, type: :model do
|
|||
|
||||
describe "theming properties" do
|
||||
it "creates proper body class with defaults" do
|
||||
classes = "default sans-serif-article-body trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config"
|
||||
classes = "default sans-serif-article-body trusted-status-#{user.trusted} #{user.config_navbar}-header"
|
||||
expect(user.decorate.config_body_class).to eq(classes)
|
||||
end
|
||||
|
||||
|
|
@ -816,28 +816,28 @@ RSpec.describe User, type: :model do
|
|||
it "creates proper body class with sans serif config" do
|
||||
user.config_font = "sans_serif"
|
||||
|
||||
classes = "default sans-serif-article-body trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config"
|
||||
classes = "default sans-serif-article-body trusted-status-#{user.trusted} #{user.config_navbar}-header"
|
||||
expect(user.decorate.config_body_class).to eq(classes)
|
||||
end
|
||||
|
||||
it "creates proper body class with open dyslexic config" do
|
||||
user.config_font = "open_dyslexic"
|
||||
|
||||
classes = "default open-dyslexic-article-body trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config"
|
||||
classes = "default open-dyslexic-article-body trusted-status-#{user.trusted} #{user.config_navbar}-header"
|
||||
expect(user.decorate.config_body_class).to eq(classes)
|
||||
end
|
||||
|
||||
it "creates proper body class with night theme" do
|
||||
user.config_theme = "night_theme"
|
||||
|
||||
classes = "night-theme sans-serif-article-body trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config"
|
||||
classes = "night-theme sans-serif-article-body trusted-status-#{user.trusted} #{user.config_navbar}-header"
|
||||
expect(user.decorate.config_body_class).to eq(classes)
|
||||
end
|
||||
|
||||
it "creates proper body class with pink theme" do
|
||||
user.config_theme = "pink_theme"
|
||||
|
||||
classes = "pink-theme sans-serif-article-body trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config"
|
||||
classes = "pink-theme sans-serif-article-body trusted-status-#{user.trusted} #{user.config_navbar}-header"
|
||||
expect(user.decorate.config_body_class).to eq(classes)
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue