RanchiMall/cc
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

general fixes

Browse Source
This commit is contained in:
sairaj mote 2022-01-12 21:18:37 +05:30
parent 5d830b1168
commit 111fa4f0d3
5 changed files with 113 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components.js
View File

@ -4399,7 +4399,7 @@ customElements.define('tags-input', class extends HTMLElement {
return ['placeholder', 'limit'] return ['placeholder', 'limit']
} }
get value() { get value() {
return [...this.tags].join() return [...this.tags]
} }
get isValid() { get isValid() {
return this.tags.size return this.tags.size

198
css/main.css
View File

@ -1,8 +1,7 @@
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
-webkit-box-sizing: border-box; box-sizing: border-box;
box-sizing: border-box;
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
} }
@ -64,8 +63,7 @@ a {
text-decoration: none; text-decoration: none;
} }
a:focus-visible { a:focus-visible {
-webkit-box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
} }
button, button,
@ -75,22 +73,15 @@ button,
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
position: relative; position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
border: none; border: none;
background-color: transparent; background-color: transparent;
overflow: hidden; overflow: hidden;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s; transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
} }
@ -101,9 +92,7 @@ button,
border-radius: 0.3rem; border-radius: 0.3rem;
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
-webkit-box-pack: center; justify-content: center;
-ms-flex-pack: center;
justify-content: center;
} }
.button--primary { .button--primary {
background-color: var(--accent-color); background-color: var(--accent-color);
@ -140,10 +129,7 @@ tags-input {
sm-button { sm-button {
--padding: 0.5rem 0.8rem; --padding: 0.5rem 0.8rem;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s; transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
} }
sm-button[variant=primary] .icon { sm-button[variant=primary] .icon {
fill: rgba(var(--background-color), 1); fill: rgba(var(--background-color), 1);
@ -217,8 +203,6 @@ ul {
} }
.flex { .flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
} }
@ -255,15 +239,11 @@ ul {
} }
.align-start { .align-start {
-webkit-box-align: start; align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
} }
.align-center { .align-center {
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
} }
.text-center { .text-center {
@ -271,15 +251,11 @@ ul {
} }
.justify-start { .justify-start {
-webkit-box-pack: start; justify-content: start;
-ms-flex-pack: start;
justify-content: start;
} }
.justify-center { .justify-center {
-webkit-box-pack: center; justify-content: center;
-ms-flex-pack: center;
justify-content: center;
} }
.justify-right { .justify-right {
@ -287,8 +263,7 @@ ul {
} }
.align-self-center { .align-self-center {
-ms-flex-item-align: center; align-self: center;
align-self: center;
} }
.justify-self-center { .justify-self-center {
@ -304,16 +279,11 @@ ul {
} }
.direction-column { .direction-column {
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
} }
.space-between { .space-between {
-webkit-box-pack: justify; justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
} }
.w-100 { .w-100 {
@ -323,10 +293,7 @@ ul {
.interact { .interact {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s; transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
@ -348,8 +315,7 @@ ul {
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
fill: rgba(var(--text-color), 0.8); fill: rgba(var(--text-color), 0.8);
-ms-flex-negative: 0; flex-shrink: 0;
flex-shrink: 0;
} }
.button__icon { .button__icon {
@ -377,10 +343,7 @@ ul {
#confirmation_popup, #confirmation_popup,
#prompt_popup { #prompt_popup {
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
} }
#confirmation_popup h4, #confirmation_popup h4,
#prompt_popup h4 { #prompt_popup h4 {
@ -410,8 +373,7 @@ button:active,
.button:active, .button:active,
sm-button:not([disabled]):active, sm-button:not([disabled]):active,
.interact:active { .interact:active {
-webkit-transform: scale(0.96); transform: scale(0.96);
transform: scale(0.96);
} }
.popup__header { .popup__header {
@ -419,9 +381,7 @@ sm-button:not([disabled]):active,
gap: 0.5rem; gap: 0.5rem;
width: 100%; width: 100%;
padding: 0 1.5rem 0 0.5rem; padding: 0 1.5rem 0 0.5rem;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
} }
@ -432,9 +392,7 @@ sm-button:not([disabled]):active,
.logo { .logo {
display: grid; display: grid;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%; width: 100%;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 0 0.5rem; gap: 0 0.5rem;
@ -453,12 +411,8 @@ sm-button:not([disabled]):active,
} }
details summary { details summary {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: justify; justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@ -469,8 +423,7 @@ details[open] > summary {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
details[open] > summary .icon { details[open] > summary .icon {
-webkit-transform: rotate(180deg); transform: rotate(180deg);
transform: rotate(180deg);
} }
sm-select, sm-select,
@ -537,14 +490,12 @@ sm-copy {
padding: 1.5rem 0; padding: 1.5rem 0;
} }
#landing > section { #landing > section {
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center; text-align: center;
} }
#landing h1 { #landing h1 {
margin-top: -2ch; margin-top: -2ch;
font-size: clamp(2rem,5vw,5rem); font-size: clamp(2rem, 5vw, 5rem);
} }
#landing p { #landing p {
max-width: 100%; max-width: 100%;
@ -553,9 +504,7 @@ sm-copy {
#sign_in, #sign_in,
#sign_up { #sign_up {
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
} }
#sign_in section, #sign_in section,
#sign_up section { #sign_up section {
@ -595,14 +544,13 @@ sm-copy {
} }
#main_header { #main_header {
position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
display: grid; display: grid;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
grid-template-columns: 1fr auto auto; grid-template-columns: 1fr auto auto;
grid-column: 1/-1; grid-column: 1/-1;
background-color: var(--foreground-color); background-color: var(--foreground-color);
@ -610,6 +558,7 @@ sm-copy {
} }
#options_panel { #options_panel {
position: -webkit-sticky;
position: sticky; position: sticky;
top: 6.5rem; top: 6.5rem;
z-index: 1; z-index: 1;
@ -623,9 +572,7 @@ sm-copy {
.outline-button { .outline-button {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
-webkit-box-pack: center; justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0.5rem 0; padding: 0.5rem 0;
} }
.outline-button::after { .outline-button::after {
@ -634,10 +581,7 @@ sm-copy {
width: 1rem; width: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
height: 0.2rem; height: 0.2rem;
-webkit-transition: opacity 0.1s, -webkit-transform 0.3s;
transition: opacity 0.1s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.1s; transition: transform 0.3s, opacity 0.1s;
transition: transform 0.3s, opacity 0.1s, -webkit-transform 0.3s;
bottom: 0; bottom: 0;
background-color: rgba(var(--text-color), 0.5); background-color: rgba(var(--text-color), 0.5);
opacity: 0; opacity: 0;
@ -648,8 +592,7 @@ sm-copy {
} }
.outline-button:active::after { .outline-button:active::after {
opacity: 1; opacity: 1;
-webkit-transform: scaleX(2); transform: scaleX(2);
transform: scaleX(2);
} }
.outline-button--active::after { .outline-button--active::after {
opacity: 1; opacity: 1;
@ -702,10 +645,6 @@ sm-copy {
} }
.article-link { .article-link {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative; position: relative;
padding: 1rem; padding: 1rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
@ -716,16 +655,14 @@ sm-copy {
text-transform: uppercase; text-transform: uppercase;
} }
.default-article::before { .default-article::after {
-ms-flex-item-align: start; content: "";
align-self: flex-start;
content: "Actively written";
margin-bottom: 0.3rem;
font-size: 0.7rem; font-size: 0.7rem;
background-color: var(--accent-color); background-color: var(--accent-color);
padding: 0.2rem 0.4rem; padding: 0.3rem;
border-radius: 0.2rem; border-radius: 0.5rem;
font-weight: 500; font-weight: 500;
margin: auto 0 auto auto;
color: var(--foreground-color); color: var(--foreground-color);
} }
@ -768,18 +705,12 @@ sm-copy {
} }
#insert_section_button { #insert_section_button {
-ms-flex-item-align: start; align-self: flex-start;
align-self: flex-start;
} }
#article_wrapper { #article_wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 1rem; padding: 1rem;
gap: 1rem 0; gap: 1rem 0;
height: 100%; height: 100%;
@ -815,21 +746,14 @@ sm-copy {
.content-card { .content-card {
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color); background-color: var(--foreground-color);
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.16) inset; box-shadow: 0 0 0 1px rgba(var(--text-color), 0.16) inset;
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.16) inset;
} }
.content-card.selected { .content-card.selected {
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color) inset; box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
} }
.content-card--empty { .content-card--empty {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
} }
.content-card--empty .content__area { .content-card--empty .content__area {
min-height: calc(60vh + 3rem); min-height: calc(60vh + 3rem);
@ -842,7 +766,7 @@ sm-copy {
} }
.content-card .submit-entry sm-spinner { .content-card .submit-entry sm-spinner {
--height: 0.8rem; --height: 0.8rem;
--width: .8rem; --width: 0.8rem;
} }
.content__header { .content__header {
@ -858,10 +782,7 @@ sm-copy {
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
background-color: rgba(var(--text-color), 0.02); background-color: rgba(var(--text-color), 0.02);
border-radius: 0.5rem; border-radius: 0.5rem;
-webkit-transition: -webkit-box-shadow 0.1s;
transition: -webkit-box-shadow 0.1s;
transition: box-shadow 0.1s; transition: box-shadow 0.1s;
transition: box-shadow 0.1s, -webkit-box-shadow 0.1s;
height: 60vh; height: 60vh;
overflow-y: auto; overflow-y: auto;
} }
@ -872,8 +793,7 @@ sm-copy {
} }
.content__area:focus-within { .content__area:focus-within {
outline: none; outline: none;
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color) inset; box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
} }
.content__options { .content__options {
@ -903,9 +823,7 @@ sm-copy {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.content__author div:last-of-type { .content__author div:last-of-type {
-webkit-box-flex: 1; flex: 1;
-ms-flex: 1;
flex: 1;
} }
.content__score { .content__score {
@ -939,22 +857,17 @@ sm-copy {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
-webkit-transition: -webkit-transform 0.1s;
transition: -webkit-transform 0.1s;
transition: transform 0.1s; transition: transform 0.1s;
transition: transform 0.1s, -webkit-transform 0.1s;
background-color: var(--foreground-color); background-color: var(--foreground-color);
border: solid thin rgba(var(--text-color), 0.2); border: solid thin rgba(var(--text-color), 0.2);
padding: 0.2rem; padding: 0.2rem;
border-radius: 0.3rem; border-radius: 0.3rem;
-webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.2); box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.2);
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.2);
} }
.formatting-button { .formatting-button {
padding: 0.3rem; padding: 0.3rem;
border-radius: 0.3rem; border-radius: 0.3rem;
-webkit-transition: background-color 0.1s;
transition: background-color 0.1s; transition: background-color 0.1s;
} }
.formatting-button.active:hover { .formatting-button.active:hover {
@ -974,7 +887,6 @@ sm-copy {
margin: 1rem 0; margin: 1rem 0;
border-radius: 0.2rem; border-radius: 0.2rem;
border: solid thin rgba(var(--text-color), 0.3); border: solid thin rgba(var(--text-color), 0.3);
-webkit-box-shadow: 0.3rem 0.5rem 0 0.1rem rgba(var(--text-color), 0.8);
box-shadow: 0.1rem 0.2rem 0 0.1rem rgba(var(--text-color), 0.8); box-shadow: 0.1rem 0.2rem 0 0.1rem rgba(var(--text-color), 0.8);
overflow: hidden; overflow: hidden;
justify-self: center; justify-self: center;
@ -1011,8 +923,6 @@ sm-copy {
.history-entry:last-of-type::before { .history-entry:last-of-type::before {
content: "CREATED"; content: "CREATED";
letter-spacing: 0.03em; letter-spacing: 0.03em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
justify-self: flex-start; justify-self: flex-start;
font-weight: 500; font-weight: 500;
@ -1071,10 +981,10 @@ sm-copy {
grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
-ms-flex-line-pack: start; align-content: flex-start;
align-content: flex-start;
} }
#preview_page header { #preview_page header {
position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
@ -1104,15 +1014,12 @@ sm-copy {
} }
.preview-group__buttons { .preview-group__buttons {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
background-color: var(--foreground-color); background-color: var(--foreground-color);
border: solid thin rgba(var(--text-color), 0.2); border: solid thin rgba(var(--text-color), 0.2);
padding: 0.2rem; padding: 0.2rem;
border-radius: 0.3rem; border-radius: 0.3rem;
-webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.2); box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.2);
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.2);
} }
.preview-group__buttons button { .preview-group__buttons button {
padding: 0.5rem; padding: 0.5rem;
@ -1138,27 +1045,21 @@ sm-copy {
} }
#article_name_wrapper { #article_name_wrapper {
-webkit-box-pack: start; justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
} }
.article-section { .article-section {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-ms-scroll-snap-type: x mandatory; -ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
overflow-x: auto; overflow-x: auto;
-ms-flex-negative: 0; flex-shrink: 0;
flex-shrink: 0;
} }
.content-card { .content-card {
scroll-snap-align: start; scroll-snap-align: start;
-ms-flex-negative: 0; flex-shrink: 0;
flex-shrink: 0; width: min(45ch, 100% - 2rem);
width: min(45ch, calc(100% - 2rem));
} }
.formatting-button { .formatting-button {
@ -1303,10 +1204,7 @@ sm-copy {
.interact, .interact,
button { button {
-webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, transform 0.3s; transition: background-color 0.3s, transform 0.3s;
transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
} }
.interact:hover, .interact:hover,
button:hover { button:hover {
@ -1315,7 +1213,6 @@ button:hover {
.content-card:not(.selected) sm-checkbox { .content-card:not(.selected) sm-checkbox {
opacity: 0; opacity: 0;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.content-card:hover sm-checkbox, .content-card:focus-within sm-checkbox { .content-card:hover sm-checkbox, .content-card:focus-within sm-checkbox {
@ -1323,7 +1220,6 @@ button:hover {
} }
.preview-group__buttons { .preview-group__buttons {
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s; transition: opacity 0.1s;
opacity: 0; opacity: 0;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

102
css/main.scss
View File

@ -64,7 +64,7 @@ strong {
a { a {
color: var(--accent-color); color: var(--accent-color);
text-decoration: none; text-decoration: none;
&:focus-visible { &:focus-visible {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
} }
@ -98,7 +98,7 @@ button,
color: rgba(var(--background-color), 1); color: rgba(var(--background-color), 1);
} }
} }
.icon-only{ .icon-only {
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.3rem; border-radius: 0.3rem;
} }
@ -414,13 +414,13 @@ details {
} }
sm-select, sm-select,
sm-option, sm-option,
strip-option{ strip-option {
font-size: 0.9rem; font-size: 0.9rem;
} }
strip-select{ strip-select {
--gap: 0; --gap: 0;
} }
strip-option{ strip-option {
font-weight: 500; font-weight: 500;
--border-radius: 0.3rem; --border-radius: 0.3rem;
--active-option-color: var(--accent-color); --active-option-color: var(--accent-color);
@ -447,7 +447,7 @@ sm-copy {
border-radius: 0.5rem; border-radius: 0.5rem;
line-height: 1.5; line-height: 1.5;
} }
.page{ .page {
height: 100%; height: 100%;
} }
.page-layout, .page-layout,
@ -467,11 +467,11 @@ sm-copy {
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
h1{ h1 {
margin-top: -2ch; margin-top: -2ch;
font-size: clamp(2rem,5vw,5rem); font-size: clamp(2rem, 5vw, 5rem);
} }
p{ p {
max-width: 100%; max-width: 100%;
} }
} }
@ -480,7 +480,7 @@ sm-copy {
#sign_up { #sign_up {
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
align-items: center; align-items: center;
section{ section {
margin-top: -6rem; margin-top: -6rem;
justify-self: center; justify-self: center;
width: min(24rem, 100%); width: min(24rem, 100%);
@ -538,14 +538,14 @@ sm-copy {
overflow-x: auto; overflow-x: auto;
min-height: 3.2rem; min-height: 3.2rem;
} }
.outline-button{ .outline-button {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
justify-content: center; justify-content: center;
padding: 0.5rem 0; padding: 0.5rem 0;
&::after{ &::after {
position: absolute; position: absolute;
content: ''; content: "";
width: 1rem; width: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
height: 0.2rem; height: 0.2rem;
@ -554,16 +554,16 @@ sm-copy {
background-color: rgba(var(--text-color), 0.5); background-color: rgba(var(--text-color), 0.5);
opacity: 0; opacity: 0;
} }
&:hover:not(.outline-button--active)::after{ &:hover:not(.outline-button--active)::after {
opacity: 1; opacity: 1;
background-color: rgba(var(--text-color), 0.5); background-color: rgba(var(--text-color), 0.5);
} }
&:active::after{ &:active::after {
opacity: 1; opacity: 1;
transform: scaleX(2); transform: scaleX(2);
} }
&--active{ &--active {
&::after{ &::after {
opacity: 1; opacity: 1;
background-color: var(--accent-color); background-color: var(--accent-color);
} }
@ -612,7 +612,6 @@ sm-copy {
} }
.article-link { .article-link {
flex-direction: column;
position: relative; position: relative;
padding: 1rem; padding: 1rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
@ -623,15 +622,14 @@ sm-copy {
} }
} }
.default-article { .default-article {
&::before { &::after {
align-self: flex-start; content: "";
content: "Actively written";
margin-bottom: 0.3rem;
font-size: 0.7rem; font-size: 0.7rem;
background-color: var(--accent-color); background-color: var(--accent-color);
padding: 0.2rem 0.4rem; padding: 0.3rem;
border-radius: 0.2rem; border-radius: 0.5rem;
font-weight: 500; font-weight: 500;
margin: auto 0 auto auto;
color: var(--foreground-color); color: var(--foreground-color);
} }
} }
@ -694,7 +692,7 @@ sm-copy {
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--accent-color); background-color: var(--accent-color);
} }
button{ button {
margin-left: auto; margin-left: auto;
} }
} }
@ -723,13 +721,13 @@ sm-copy {
height: 100%; height: 100%;
} }
} }
.submit-entry{ .submit-entry {
border-radius: 0.2rem; border-radius: 0.2rem;
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
color: var(--accent-color); color: var(--accent-color);
sm-spinner{ sm-spinner {
--height: 0.8rem; --height: 0.8rem;
--width: .8rem; --width: 0.8rem;
} }
} }
} }
@ -771,25 +769,25 @@ sm-copy {
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.content__author{ .content__author {
display: grid; display: grid;
gap: 0.3rem; gap: 0.3rem;
grid-template-columns: auto max-content; grid-template-columns: auto max-content;
div:first-of-type{ div:first-of-type {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
div:last-of-type{ div:last-of-type {
flex: 1; flex: 1;
} }
} }
.content__score{ .content__score {
font-size: 0.8rem; font-size: 0.8rem;
margin-left: 0.2rem; margin-left: 0.2rem;
line-height: 100%; line-height: 100%;
} }
.filled-star{ .filled-star {
fill: var(--yellow); fill: var(--yellow);
} }
@ -837,23 +835,21 @@ sm-copy {
position: relative; position: relative;
padding: 1rem; padding: 1rem;
margin: 1rem 0; margin: 1rem 0;
border-radius: .2rem; border-radius: 0.2rem;
border: solid thin rgba(var(--text-color), 0.3); border: solid thin rgba(var(--text-color), 0.3);
-webkit-box-shadow: .3rem .5rem 0 .1rem rgba(var(--text-color), 0.8); -webkit-box-shadow: 0.3rem 0.5rem 0 0.1rem rgba(var(--text-color), 0.8);
box-shadow: .1rem .2rem 0 .1rem rgba(var(--text-color), 0.8); box-shadow: 0.1rem 0.2rem 0 0.1rem rgba(var(--text-color), 0.8);
overflow: hidden; overflow: hidden;
justify-self: center; justify-self: center;
padding-left: 1.3rem padding-left: 1.3rem figcaption {
figcaption { margin-top: 0.5rem;
margin-top: .5rem; color: rgba(var(--text-color), 0.8);
color: rgba(var(--text-color), 0.8); font-size: 0.8rem;
font-size: .8rem; margin-left: auto;
margin-left: auto
} }
} }
#version_history_panel {
#version_history_panel{
border-radius: 0.5rem; border-radius: 0.5rem;
width: min(24rem, 100%); width: min(24rem, 100%);
background-color: var(--foreground-color); background-color: var(--foreground-color);
@ -862,7 +858,7 @@ sm-copy {
padding: 1rem; padding: 1rem;
} }
} }
#version_timeline{ #version_timeline {
padding: 1rem; padding: 1rem;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
@ -980,7 +976,7 @@ sm-copy {
} }
} }
#publish_article_popup{ #publish_article_popup {
--min-height: 50vh; --min-height: 50vh;
} }
@ -993,21 +989,21 @@ sm-copy {
margin-left: auto; margin-left: auto;
} }
} }
#article_name_wrapper{ #article_name_wrapper {
justify-content: flex-start; justify-content: flex-start;
} }
.article-section{ .article-section {
display: flex; display: flex;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
overflow-x: auto; overflow-x: auto;
flex-shrink: 0; flex-shrink: 0;
} }
.content-card{ .content-card {
scroll-snap-align: start; scroll-snap-align: start;
flex-shrink: 0; flex-shrink: 0;
width: min(45ch, calc(100% - 2rem)); width: min(45ch, calc(100% - 2rem));
} }
.formatting-button{ .formatting-button {
padding: 0.5rem; padding: 0.5rem;
} }
.hide-on-mobile { .hide-on-mobile {
@ -1053,7 +1049,7 @@ sm-copy {
display: none; display: none;
} }
#landing h1 { #landing h1 {
-webkit-text-stroke-width: .1rem; -webkit-text-stroke-width: 0.1rem;
} }
#main_header { #main_header {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
@ -1084,7 +1080,7 @@ sm-copy {
#article_wrapper { #article_wrapper {
padding: 1.5rem; padding: 1.5rem;
} }
.article-section{ .article-section {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(40ch, 1fr)); grid-template-columns: repeat(auto-fill, minmax(40ch, 1fr));
} }
@ -1164,4 +1160,4 @@ sm-copy {
opacity: 1; opacity: 1;
} }
} }
} }

30
index.html
View File

@ -10,8 +10,8 @@
<link rel="stylesheet" href="css/main.min.css"> <link rel="stylesheet" href="css/main.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap" rel="stylesheet"> <link
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"> rel="stylesheet">
<script src="purify.min.js" defer></script> <script src="purify.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script> <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script>
@ -1493,8 +1493,9 @@
animateTo(getRef('article_name_wrapper'), slideInRight, animOptions) animateTo(getRef('article_name_wrapper'), slideInRight, animOptions)
} }
} }
} else if (e.target.classList.contains('heading')) { } else if (e.target.closest('text-field')) {
floGlobals.appObjects[floGlobals.currentArticle.id].sections[e.target.dataset.index].title = e.target.value.trim() const heading = e.target.closest('.heading');
floGlobals.appObjects[floGlobals.currentArticle.id].sections[heading.dataset.index].title = e.target.value.trim()
floCloudAPI.updateObjectData(floGlobals.currentArticle.id) floCloudAPI.updateObjectData(floGlobals.currentArticle.id)
.then((res) => { .then((res) => {
notify('Updated heading', 'success') notify('Updated heading', 'success')
@ -1693,20 +1694,27 @@
if (floGlobals.isSubAdmin) { if (floGlobals.isSubAdmin) {
const category = getRef('published_article_category').value const category = getRef('published_article_category').value
const tags = getRef('article_tags').value const tags = getRef('article_tags').value
console.log(category, tags)
return
getConfirmation('Request publishing?', { getConfirmation('Request publishing?', {
message: 'Send this article as publishing candidate on RanchiMall TImes', message: 'Send this article as publishing candidate on RanchiMall TImes',
confirmText: 'Request' confirmText: 'Request'
}) })
.then(res => { .then(res => {
if (res) { if (res) {
const content = getCleanExportContent();
const readTime = getReadingTime(createElement('div', { innerHTML: content }).textContent)
let allContributors = new Set()
selectedContent.forEach(({ contributors }) => {
contributors.forEach(id => allContributors.add(id))
});
floCloudAPI.sendGeneralData({ floCloudAPI.sendGeneralData({
articleID: pagesData.params.articleID, articleID: pagesData.params.articleID,
title: floGlobals.appObjects.cc.articleList[floGlobals.currentArticle.id].title, title: floGlobals.appObjects.cc.articleList[floGlobals.currentArticle.id].title,
content: getCleanExportContent(), content,
readTime,
category, category,
tags, tags,
contributors: [...allContributors]
}, 'publishing_requests', { }, 'publishing_requests', {
application: 'Test_RM_Times', application: 'Test_RM_Times',
receiverID: 'FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf' receiverID: 'FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf'
@ -2563,7 +2571,6 @@
} }
</script> </script>
<script id="onLoadStartUp"> <script id="onLoadStartUp">
floGlobals.isSubAdmin = false
let maxCardsPerSection let maxCardsPerSection
function onLoadStartUp() { function onLoadStartUp() {
@ -12417,13 +12424,6 @@
padding-top: 1.5rem padding-top: 1.5rem
} }
img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 40vh
}
time, time,
#reading_time { #reading_time {
font-size: .8rem font-size: .8rem