general fixes

components.js

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

css/main.css

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

css/main.scss

@@ -545,7 +545,7 @@ sm-copy {
   padding: 0.5rem 0;
   &::after {
     position: absolute;
-    content: '';
+    content: "";
     width: 1rem;
     border-radius: 0.5rem;
     height: 0.2rem;
@@ -612,7 +612,6 @@ sm-copy {
 }
 
 .article-link {
-  flex-direction: column;
   position: relative;
   padding: 1rem;
   color: rgba(var(--text-color), 0.8);
@@ -623,15 +622,14 @@ sm-copy {
   }
 }
 .default-article {
-  &::before {
+  &::after {
-    align-self: flex-start;
+    content: "";
-    content: "Actively written";
-    margin-bottom: 0.3rem;
     font-size: 0.7rem;
     background-color: var(--accent-color);
-    padding: 0.2rem 0.4rem;
+    padding: 0.3rem;
-    border-radius: 0.2rem;
+    border-radius: 0.5rem;
     font-weight: 500;
+    margin: auto 0 auto auto;
     color: var(--foreground-color);
   }
 }
@@ -729,7 +727,7 @@ sm-copy {
     color: var(--accent-color);
     sm-spinner {
       --height: 0.8rem;
-      --width: .8rem;
+      --width: 0.8rem;
     }
   }
 }
@@ -837,22 +835,20 @@ sm-copy {
   position: relative;
   padding: 1rem;
   margin: 1rem 0;
-  border-radius: .2rem;
+  border-radius: 0.2rem;
   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;
   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);
-   font-size: .8rem;
+    font-size: 0.8rem;
-   margin-left: auto
+    margin-left: auto;
   }
 }
 
-
 #version_history_panel {
   border-radius: 0.5rem;
   width: min(24rem, 100%);
@@ -1053,7 +1049,7 @@ sm-copy {
     display: none;
   }
   #landing h1 {
-    -webkit-text-stroke-width: .1rem;
+    -webkit-text-stroke-width: 0.1rem;
   }
   #main_header {
     padding: 1rem 1.5rem;

index.html

@@ -10,8 +10,8 @@
     <link rel="stylesheet" href="css/main.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <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">
     <script src="purify.min.js" 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)
                         }
                 }
-            } 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)
                     .then((res) => {
                         notify('Updated heading', 'success')
@@ -1693,20 +1694,27 @@
             if (floGlobals.isSubAdmin) {
                 const category = getRef('published_article_category').value
                 const tags = getRef('article_tags').value
-                console.log(category, tags)
-                return
                 getConfirmation('Request publishing?', {
                     message: 'Send this article as publishing candidate on RanchiMall TImes',
                     confirmText: 'Request'
                 })
                     .then(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({
                                 articleID: pagesData.params.articleID,
                                 title: floGlobals.appObjects.cc.articleList[floGlobals.currentArticle.id].title,
-                                content: getCleanExportContent(),
+                                content,
+                                readTime,
                                 category,
                                 tags,
+                                contributors: [...allContributors]
+
                             }, 'publishing_requests', {
                                 application: 'Test_RM_Times',
                                 receiverID: 'FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf'
@@ -2563,7 +2571,6 @@
         }
     </script>
     <script id="onLoadStartUp">
-        floGlobals.isSubAdmin = false
         let maxCardsPerSection
 
         function onLoadStartUp() {
@@ -12417,13 +12424,6 @@
                 padding-top: 1.5rem
             }
 
-            img {
-                -o-object-fit: cover;
-                object-fit: cover;
-                width: 100%;
-                height: 40vh
-            }
-
             time,
             #reading_time {
                 font-size: .8rem