feature update
-- added search functionality for articles and search suggestions
This commit is contained in:
sairaj mote
parent
8a772ccfed
commit
b442f04cd7
@ -301,7 +301,6 @@ border: none;
|
||||
--width: 100%;
|
||||
--icon-gap: 0.5rem;
|
||||
--border-radius: 0.3rem;
|
||||
--padding: 0.7rem 1rem;
|
||||
--background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.hide{
|
||||
@ -335,7 +334,7 @@ border: none;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap: var(--icon-gap);
|
||||
padding: var(--padding);
|
||||
padding: var(--padding, 0.6rem 0.8rem);
|
||||
border-radius: var(--border-radius);
|
||||
-webkit-transition: opacity 0.3s;
|
||||
-o-transition: opacity 0.3s;
|
||||
@ -1535,8 +1534,8 @@ themeToggle.innerHTML = `
|
||||
.theme-toggle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
359
css/main.css
359
css/main.css
@ -1,8 +1,7 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
@ -22,7 +21,7 @@ body {
|
||||
}
|
||||
body,
|
||||
body * {
|
||||
--accent-color: rgb(0, 156, 78);
|
||||
--accent-color: #256eff;
|
||||
--text-color: 36, 36, 36;
|
||||
--background-color: 248, 248, 248;
|
||||
--foreground-color: rgb(255, 255, 255);
|
||||
@ -34,7 +33,7 @@ body * {
|
||||
|
||||
body[data-theme=dark],
|
||||
body[data-theme=dark] * {
|
||||
--accent-color: rgb(14, 230, 122);
|
||||
--accent-color: #86afff;
|
||||
--text-color: 230, 230, 230;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--background-color: 10, 10, 10;
|
||||
@ -60,12 +59,14 @@ strong:not(:last-of-type) {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
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;
|
||||
|
||||
a:not([class]) {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
a:not([class]):focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
|
||||
button,
|
||||
@ -75,8 +76,6 @@ 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;
|
||||
@ -84,9 +83,7 @@ button,
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -97,9 +94,7 @@ 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;
|
||||
justify-content: center;
|
||||
}
|
||||
.button--primary {
|
||||
background-color: var(--accent-color);
|
||||
@ -209,8 +204,6 @@ ul {
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -247,15 +240,11 @@ ul {
|
||||
}
|
||||
|
||||
.align-start {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
@ -263,15 +252,11 @@ ul {
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: start;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-right {
|
||||
@ -279,8 +264,7 @@ ul {
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.justify-self-center {
|
||||
@ -296,16 +280,11 @@ ul {
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
@ -317,8 +296,7 @@ ul {
|
||||
width: 8rem;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
transform: scale(0);
|
||||
background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -348,8 +326,7 @@ ul {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.button__icon {
|
||||
@ -377,10 +354,7 @@ ul {
|
||||
|
||||
#confirmation_popup,
|
||||
#prompt_popup {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
#confirmation_popup h4,
|
||||
#prompt_popup h4 {
|
||||
@ -411,9 +385,7 @@ ul {
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0 1.5rem 0 0.8rem;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
@ -423,19 +395,17 @@ ul {
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: inherit;
|
||||
display: grid;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0 0.5rem;
|
||||
margin-right: 1rem;
|
||||
gap: 0 0.2rem;
|
||||
justify-self: center;
|
||||
}
|
||||
.logo h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.logo .main-logo {
|
||||
height: 1.4rem;
|
||||
@ -445,24 +415,15 @@ ul {
|
||||
}
|
||||
|
||||
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;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
details[open] > summary {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
details[open] > summary .icon {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
details[open] > summary .down-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
sm-select,
|
||||
@ -481,12 +442,6 @@ strip-option {
|
||||
--active-option-color: var(--accent-color);
|
||||
}
|
||||
|
||||
sm-checkbox {
|
||||
--height: 1rem;
|
||||
--width: 1rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
sm-menu {
|
||||
--background: var(--foreground-color);
|
||||
}
|
||||
@ -529,14 +484,12 @@ sm-copy {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
#landing > section {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
#landing h1 {
|
||||
margin-top: -2ch;
|
||||
font-size: clamp(2rem,5vw,5rem);
|
||||
font-size: clamp(2rem, 5vw, 5rem);
|
||||
}
|
||||
#landing p {
|
||||
max-width: 100%;
|
||||
@ -545,9 +498,7 @@ sm-copy {
|
||||
#sign_in,
|
||||
#sign_up {
|
||||
grid-template-rows: auto 1fr;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
#sign_in section,
|
||||
#sign_up section {
|
||||
@ -582,25 +533,40 @@ sm-copy {
|
||||
place-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
#loading sm-spinner {
|
||||
|
||||
#loader_container {
|
||||
height: 3rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#main_header {
|
||||
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;
|
||||
background-color: var(--foreground-color);
|
||||
z-index: 2;
|
||||
#loader_container::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background: linear-gradient(rgba(var(--foreground-color), 1), transparent 20%, transparent 80%, rgba(var(--foreground-color), 1));
|
||||
}
|
||||
|
||||
#loader {
|
||||
height: 6rem;
|
||||
width: 6rem;
|
||||
-webkit-animation: scroll infinite 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
animation: scroll infinite 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
fill: rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
@-webkit-keyframes scroll {
|
||||
to {
|
||||
transform: translateY(-3rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
to {
|
||||
transform: translateY(-3rem);
|
||||
}
|
||||
}
|
||||
.label {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
@ -616,14 +582,137 @@ sm-copy {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
|
||||
#main_page {
|
||||
-ms-scroll-chaining: none;
|
||||
overscroll-behavior: contain;
|
||||
main {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
#main_header {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
grid-column: 1/-1;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
z-index: 2;
|
||||
border-bottom: thin solid rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
#expanding_search {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
width: calc(100% - 2rem);
|
||||
margin: 0 1rem;
|
||||
z-index: 1;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
-webkit-clip-path: circle(0 at 1.5rem);
|
||||
clip-path: circle(0 at 1.5rem);
|
||||
transition: -webkit-clip-path 0.1s;
|
||||
transition: clip-path 0.1s;
|
||||
transition: clip-path 0.1s, -webkit-clip-path 0.1s;
|
||||
}
|
||||
#expanding_search.expanded {
|
||||
transition: -webkit-clip-path 0.3s;
|
||||
transition: clip-path 0.3s;
|
||||
transition: clip-path 0.3s, -webkit-clip-path 0.3s;
|
||||
-webkit-clip-path: circle(200%);
|
||||
clip-path: circle(200%);
|
||||
}
|
||||
#expanding_search button {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
#search_suggestions {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
background-color: var(--foreground-color);
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.search-suggestion {
|
||||
font-size: 0.9rem;
|
||||
color: inherit;
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
#search_articles {
|
||||
--border-radius: 0.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
theme-toggle {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
#main_page {
|
||||
display: grid;
|
||||
padding: 1rem;
|
||||
padding-top: 0;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.category {
|
||||
padding: 0.5rem;
|
||||
color: inherit;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#latest_articles_list {
|
||||
margin: 1rem 0;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.article-card a {
|
||||
color: inherit;
|
||||
}
|
||||
.article-card .article-link {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.article-card__title {
|
||||
line-height: 1.4;
|
||||
}
|
||||
.article-card__category {
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
border-radius: 0.3rem;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-weight: 700;
|
||||
color: rgba(var(--text-color), 0.6) !important;
|
||||
justify-self: flex-start;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.article-card .flex {
|
||||
font-size: 0.8rem;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
#article {
|
||||
gap: 2rem 0;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
#dashboard {
|
||||
height: -webkit-max-content;
|
||||
height: -moz-max-content;
|
||||
@ -633,18 +722,15 @@ sm-copy {
|
||||
}
|
||||
|
||||
#publishing_requests {
|
||||
padding: 1.5rem 0;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
margin-top: 2rem;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.request-card {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
.request-card__title {
|
||||
@ -663,26 +749,39 @@ sm-copy {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#preview_popup h1 {
|
||||
#preview_popup h1,
|
||||
#article h1 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#preview_popup h3:not(:first-of-type) {
|
||||
#preview_popup h3:not(:first-of-type),
|
||||
#article h3:not(:first-of-type) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
#preview_popup h3 {
|
||||
#preview_popup h3,
|
||||
#article h3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#preview_popup h3:not(:first-of-type) {
|
||||
margin-top: 3rem;
|
||||
#preview_popup h3:not(:first-of-type),
|
||||
#article h3:not(:first-of-type) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
#preview_popup p {
|
||||
#preview_popup p,
|
||||
#article p {
|
||||
font-family: "noto serif", serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
#preview_popup p > * {
|
||||
#preview_popup p > *,
|
||||
#article p > * {
|
||||
font-family: inherit;
|
||||
}
|
||||
#preview_popup time,
|
||||
#preview_popup #reading_time,
|
||||
#article time,
|
||||
#article #reading_time {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40rem) {
|
||||
.hide-on-mobile {
|
||||
@ -742,6 +841,31 @@ sm-copy {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
#main_page {
|
||||
padding: 1rem 6vw;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr 22rem;
|
||||
}
|
||||
|
||||
#main_page__header {
|
||||
grid-area: 1/1/2/-1;
|
||||
}
|
||||
|
||||
#expanding_search {
|
||||
margin: 1rem 1.5rem;
|
||||
left: 0;
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
#preview_popup h1,
|
||||
#article h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#article {
|
||||
grid-template-columns: 1fr 60ch 1fr;
|
||||
}
|
||||
|
||||
#preview_popup {
|
||||
--width: 60ch;
|
||||
}
|
||||
@ -762,22 +886,17 @@ sm-copy {
|
||||
|
||||
.interact,
|
||||
button:not(.button--primary) {
|
||||
-webkit-transition: background-color 0.3s;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.interact:hover,
|
||||
button:not(.button--primary):hover {
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
-webkit-transition: -webkit-filter 0.3s;
|
||||
transition: -webkit-filter 0.3s;
|
||||
transition: filter 0.3s;
|
||||
transition: filter 0.3s, -webkit-filter 0.3s;
|
||||
}
|
||||
.button--primary:hover {
|
||||
-webkit-filter: brightness(120%);
|
||||
filter: brightness(120%);
|
||||
filter: brightness(120%);
|
||||
}
|
||||
}
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
294
css/main.scss
294
css/main.scss
@ -18,7 +18,7 @@ body {
|
||||
body {
|
||||
&,
|
||||
* {
|
||||
--accent-color: rgb(0, 156, 78);
|
||||
--accent-color: #256eff;
|
||||
--text-color: 36, 36, 36;
|
||||
--background-color: 248, 248, 248;
|
||||
--foreground-color: rgb(255, 255, 255);
|
||||
@ -35,7 +35,7 @@ body {
|
||||
body[data-theme="dark"] {
|
||||
&,
|
||||
* {
|
||||
--accent-color: rgb(14, 230, 122);
|
||||
--accent-color: #86afff;
|
||||
--text-color: 230, 230, 230;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--background-color: 10, 10, 10;
|
||||
@ -60,11 +60,12 @@ strong {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
a:not([class]) {
|
||||
color: var(--accent-color);
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
@ -97,7 +98,7 @@ button,
|
||||
color: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
.icon-only{
|
||||
.icon-only {
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
@ -282,16 +283,20 @@ ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ripple{
|
||||
.ripple {
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0,0,0,0) 50%);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(var(--text-color), 0.3) 0%,
|
||||
rgba(0, 0, 0, 0) 50%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
.interact{
|
||||
.interact {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
@ -377,17 +382,16 @@ ul {
|
||||
cursor: pointer;
|
||||
}
|
||||
.logo {
|
||||
color: inherit;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0 0.5rem;
|
||||
margin-right: 1rem;
|
||||
|
||||
gap: 0 0.2rem;
|
||||
justify-self: center;
|
||||
h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.main-logo {
|
||||
@ -400,36 +404,29 @@ ul {
|
||||
details {
|
||||
summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&[open] > summary {
|
||||
margin-bottom: 1rem;
|
||||
.icon {
|
||||
.down-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
sm-select,
|
||||
sm-option,
|
||||
strip-option{
|
||||
strip-option {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
strip-select{
|
||||
strip-select {
|
||||
--gap: 0;
|
||||
}
|
||||
strip-option{
|
||||
strip-option {
|
||||
font-weight: 500;
|
||||
--border-radius: 0.3rem;
|
||||
--active-option-color: var(--accent-color);
|
||||
}
|
||||
sm-checkbox {
|
||||
--height: 1rem;
|
||||
--width: 1rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
sm-menu {
|
||||
--background: var(--foreground-color);
|
||||
}
|
||||
@ -447,7 +444,7 @@ sm-copy {
|
||||
border-radius: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.page{
|
||||
.page {
|
||||
height: 100%;
|
||||
}
|
||||
.page-layout,
|
||||
@ -467,11 +464,11 @@ sm-copy {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
h1{
|
||||
h1 {
|
||||
margin-top: -2ch;
|
||||
font-size: clamp(2rem,5vw,5rem);
|
||||
font-size: clamp(2rem, 5vw, 5rem);
|
||||
}
|
||||
p{
|
||||
p {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -480,7 +477,7 @@ sm-copy {
|
||||
#sign_up {
|
||||
grid-template-rows: auto 1fr;
|
||||
align-items: center;
|
||||
section{
|
||||
section {
|
||||
margin-top: -6rem;
|
||||
justify-self: center;
|
||||
width: min(24rem, 100%);
|
||||
@ -510,22 +507,36 @@ sm-copy {
|
||||
#loading {
|
||||
place-content: center;
|
||||
text-align: center;
|
||||
sm-spinner {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#loader_container {
|
||||
height: 3rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1.5rem;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background: linear-gradient(
|
||||
rgba(var(--foreground-color), 1),
|
||||
transparent 20%,
|
||||
transparent 80%,
|
||||
rgba(var(--foreground-color), 1)
|
||||
);
|
||||
}
|
||||
}
|
||||
#loader {
|
||||
height: 6rem;
|
||||
width: 6rem;
|
||||
animation: scroll infinite 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
fill: rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
#main_header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
grid-column: 1/-1;
|
||||
background-color: var(--foreground-color);
|
||||
z-index: 2;
|
||||
@keyframes scroll {
|
||||
to {
|
||||
transform: translateY(-3rem);
|
||||
}
|
||||
}
|
||||
.label {
|
||||
font-size: 0.8rem;
|
||||
@ -540,38 +551,155 @@ sm-copy {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
|
||||
#main_page {
|
||||
overscroll-behavior: contain;
|
||||
main {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
#dashboard{
|
||||
|
||||
#main_header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
grid-column: 1/-1;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
z-index: 2;
|
||||
border-bottom: thin solid rgba(var(--text-color), 0.2);
|
||||
}
|
||||
#expanding_search {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
width: calc(100% - 2rem);
|
||||
margin: 0 1rem;
|
||||
z-index: 1;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
clip-path: circle(0 at 1.5rem);
|
||||
transition: clip-path 0.1s;
|
||||
&.expanded {
|
||||
transition: clip-path 0.3s;
|
||||
clip-path: circle(200%);
|
||||
}
|
||||
button {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
#search_suggestions {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
background-color: var(--foreground-color);
|
||||
padding: 0.3rem;
|
||||
width: 100%;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.search-suggestion {
|
||||
font-size: 0.9rem;
|
||||
color: inherit;
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
#search_articles {
|
||||
--border-radius: 0.5em;
|
||||
width: 100%;
|
||||
}
|
||||
theme-toggle {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
#main_page {
|
||||
display: grid;
|
||||
padding: 1rem;
|
||||
padding-top: 0;
|
||||
gap: 1.5rem;
|
||||
// & > * {
|
||||
// border: solid;
|
||||
// }
|
||||
}
|
||||
|
||||
#news_categories_list {
|
||||
}
|
||||
.category {
|
||||
padding: 0.5rem;
|
||||
color: inherit;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#latest_articles_list {
|
||||
margin: 1rem 0;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
.article-card {
|
||||
gap: 0.3rem;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
.article-link {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
&__title {
|
||||
line-height: 1.4;
|
||||
}
|
||||
&__category {
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
border-radius: 0.3rem;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-weight: 700;
|
||||
color: rgba(var(--text-color), 0.6) !important;
|
||||
justify-self: flex-start;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.flex {
|
||||
font-size: 0.8rem;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
#article {
|
||||
gap: 2rem 0;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
#dashboard {
|
||||
height: max-content;
|
||||
padding: 1.5rem 0;
|
||||
padding: 1.5rem 0;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
#publishing_requests{
|
||||
padding: 1.5rem 0;
|
||||
#publishing_requests {
|
||||
margin-top: 2rem;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.request-card{
|
||||
.request-card {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
align-items: flex-start;
|
||||
grid-template-columns: 1fr auto;
|
||||
&__title{
|
||||
&__title {
|
||||
grid-area: 2/1;
|
||||
}
|
||||
&__time{
|
||||
&__time {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.flex{
|
||||
.flex {
|
||||
grid-row: span 2;
|
||||
}
|
||||
.publish-button{
|
||||
.publish-button {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 0.8rem;
|
||||
@ -579,28 +707,34 @@ sm-copy {
|
||||
}
|
||||
}
|
||||
|
||||
#preview_popup{
|
||||
#preview_popup,
|
||||
#article {
|
||||
h1 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1rem
|
||||
}
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h3:not(:first-of-type) {
|
||||
margin-top: 2rem
|
||||
}
|
||||
h3:not(:first-of-type) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 1rem;
|
||||
&:not(:first-of-type) {
|
||||
margin-top: 3rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-family: "noto serif", serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
& > * {
|
||||
font-family: inherit;
|
||||
}
|
||||
}
|
||||
time,
|
||||
#reading_time {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40rem) {
|
||||
@ -648,12 +782,36 @@ h3:not(:first-of-type) {
|
||||
display: none;
|
||||
}
|
||||
#landing h1 {
|
||||
-webkit-text-stroke-width: .1rem;
|
||||
-webkit-text-stroke-width: 0.1rem;
|
||||
}
|
||||
#main_header {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
#preview_popup{
|
||||
#main_page {
|
||||
padding: 1rem 6vw;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr 22rem;
|
||||
}
|
||||
#main_page__header {
|
||||
grid-area: 1/1/2/-1;
|
||||
}
|
||||
#expanding_search {
|
||||
margin: 1rem 1.5rem;
|
||||
left: 0;
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
#preview_popup,
|
||||
#article {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
#article {
|
||||
grid-template-columns: 1fr 60ch 1fr;
|
||||
}
|
||||
|
||||
#preview_popup {
|
||||
--width: 60ch;
|
||||
}
|
||||
}
|
||||
@ -675,13 +833,13 @@ h3:not(:first-of-type) {
|
||||
button:not(.button--primary) {
|
||||
transition: background-color 0.3s;
|
||||
&:hover {
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
}
|
||||
.button--primary{
|
||||
.button--primary {
|
||||
transition: filter 0.3s;
|
||||
&:hover{
|
||||
&:hover {
|
||||
filter: brightness(120%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
364
index.html
364
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 href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
|
||||
<link
|
||||
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>
|
||||
@ -143,36 +143,130 @@
|
||||
</section>
|
||||
</article>
|
||||
<article id="loading" class="page page-layout">
|
||||
<sm-spinner></sm-spinner>
|
||||
<div id="loader_container">
|
||||
<svg id="loader" viewBox="0 0 112 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<rect x="33" width="39" height="8" rx="2" />
|
||||
<rect x="33" y="11" width="79" height="13" rx="2" />
|
||||
<rect x="33" y="29" width="79" height="20" rx="2" />
|
||||
<rect width="27" height="27" rx="2" />
|
||||
</g>
|
||||
<g>
|
||||
<rect x="33" y="69" width="39" height="8" rx="2" />
|
||||
<rect x="33" y="80" width="79" height="13" rx="2" />
|
||||
<rect x="33" y="98" width="79" height="20" rx="2" />
|
||||
<rect y="69" width="27" height="27" rx="2" />
|
||||
</g>
|
||||
<g>
|
||||
<rect x="33" y="138" width="39" height="8" rx="2" />
|
||||
<rect x="33" y="149" width="79" height="13" rx="2" />
|
||||
<rect x="33" y="167" width="79" height="20" rx="2" />
|
||||
<rect y="138" width="27" height="27" rx="2" />
|
||||
</g>
|
||||
<g>
|
||||
<rect x="33" y="207" width="39" height="8" rx="2" />
|
||||
<rect x="33" y="218" width="79" height="13" rx="2" />
|
||||
<rect x="33" y="236" width="79" height="20" rx="2" />
|
||||
<rect y="207" width="27" height="27" rx="2" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h4>Loading RM Times</h4>
|
||||
</article>
|
||||
<header id="main_header">
|
||||
<div class="logo">
|
||||
<svg class="main-logo" viewBox="0 0 27.25 32">
|
||||
<title>RanchiMall</title>
|
||||
<path
|
||||
d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
|
||||
</svg>
|
||||
<div class="grid">
|
||||
<h4>RM Times</h4>
|
||||
<main>
|
||||
<header id="main_header">
|
||||
<button id="search_button" class="icon-only" title="Search for articles" onclick="toggleSearch()">
|
||||
<svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="expanding_search">
|
||||
<div class="flex align-center">
|
||||
<button class="icon-only" onclick="toggleSearch()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<sm-input id="search_articles" placeholder="Search articles" type="search">
|
||||
<svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
|
||||
</svg>
|
||||
</sm-input>
|
||||
</div>
|
||||
<div id="search_suggestions" class="flex direction-column hide-completely"></div>
|
||||
</div>
|
||||
</div>
|
||||
<theme-toggle></theme-toggle>
|
||||
<button onclick="showPopup('user_popup')" aria-label="User profile">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<article id="dashboard" class="page page-layout hide-completely">
|
||||
<h2>Dashboard</h2>
|
||||
<div class="ripple"></div>
|
||||
<ul id="publishing_requests" class="grid gap-1-5 observe-empty-state"></ul>
|
||||
<p class="empty-state">No requests</p>
|
||||
</article>
|
||||
<a href="#/home" class="logo">
|
||||
<svg class="main-logo" viewBox="0 0 27.25 32">
|
||||
<title>RanchiMall</title>
|
||||
<path
|
||||
d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
|
||||
</svg>
|
||||
<h4>RM TIMES</h4>
|
||||
</a>
|
||||
<theme-toggle></theme-toggle>
|
||||
<button class="icon-only" onclick="showPopup('user_popup')" aria-label="User profile">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<article id="main_page" class="page hide-completely">
|
||||
<section id="main_page__header" class="flex align-center">
|
||||
<div id="news_categories_list" class="flex"></div>
|
||||
</section>
|
||||
<section>
|
||||
<h5>Featured</h5>
|
||||
<h3>A Wake Up Call for India - Analyzing the falling GDP</h3>
|
||||
</section>
|
||||
<section id="lastest_articles_section">
|
||||
<div class="flex align-center space-between">
|
||||
<h5>Latest</h5>
|
||||
<a href="">See all</a>
|
||||
</div>
|
||||
<ul id="latest_articles_list" class="grid"></ul>
|
||||
</section>
|
||||
</article>
|
||||
<article id="explore" class="page page-layout hide-completely">
|
||||
<h1>Explore</h1>
|
||||
<div id="query_results_list" class="grid"></div>
|
||||
</article>
|
||||
<article id="article" class="page page-layout hide-completely">
|
||||
<section class="hero-section">
|
||||
<div class="flex align-center">
|
||||
<time id="published_time"></time> • <span id="reading_time"></span>
|
||||
</div>
|
||||
<h1 id="article_title"></h1>
|
||||
</section>
|
||||
<section id="article_body" class="grid"></section>
|
||||
<section>
|
||||
<h4>Article by -</h4>
|
||||
<div id="article_contributors" class="flex"></div>
|
||||
<span>created with RanchiMall Content collaboration app</span>
|
||||
</section>
|
||||
</article>
|
||||
<article id="dashboard" class="page page-layout hide-completely">
|
||||
<div class="flex space-between align-center">
|
||||
<h2>Dashboard</h2>
|
||||
<strip-select>
|
||||
<strip-option value="requests" selected>Requests</strip-option>
|
||||
<strip-option value="analytics">Analytics</strip-option>
|
||||
</strip-select>
|
||||
</div>
|
||||
<ul id="publishing_requests" class="grid gap-1-5 observe-empty-state"></ul>
|
||||
<p class="empty-state">No requests</p>
|
||||
</article>
|
||||
</main>
|
||||
<sm-popup id="preview_popup">
|
||||
<header slot="header" class="popup__header">
|
||||
<div class="flex align-center">
|
||||
@ -208,11 +302,22 @@
|
||||
<div class="grid gap-0-5">
|
||||
<h5>My FLO ID</h5>
|
||||
<sm-copy id="user_flo_id"></sm-copy>
|
||||
<sm-button class="danger" onclick="signOut()">Sign out</sm-button>
|
||||
</div>
|
||||
<sm-button class="danger" onclick="signOut()">Sign out</sm-button>
|
||||
</section>
|
||||
</sm-popup>
|
||||
|
||||
<template id="article_card_template">
|
||||
<li class="article-card grid">
|
||||
<a href="" class="article-card__category"></a>
|
||||
<a href="" class="grid article-link">
|
||||
<h4 class="article-card__title"></h4>
|
||||
<div class="flex">
|
||||
<span class="article-card__read-time"></span> •
|
||||
<time class="article-card__published"></time>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
<template id="request_template">
|
||||
<li class="request-card">
|
||||
<h4 class="request-card__title"></h4>
|
||||
@ -231,6 +336,18 @@
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* @yaireo/relative-time - javascript function to transform timestamp or date to local relative-time
|
||||
*
|
||||
* @version v1.0.0
|
||||
* @homepage https://github.com/yairEO/relative-time
|
||||
*/
|
||||
|
||||
!function (e, t) { var o = o || {}; "function" == typeof o && o.amd ? o([], t) : "object" == typeof exports && "object" == typeof module ? module.exports = t() : "object" == typeof exports ? exports.RelativeTime = t() : e.RelativeTime = t() }(this, (function () { const e = { year: 31536e6, month: 2628e6, day: 864e5, hour: 36e5, minute: 6e4, second: 1e3 }, t = "en", o = { numeric: "auto" }; function n(e) { e = { locale: (e = e || {}).locale || t, options: { ...o, ...e.options } }, this.rtf = new Intl.RelativeTimeFormat(e.locale, e.options) } return n.prototype = { from(t, o) { const n = t - (o || new Date); for (let t in e) if (Math.abs(n) > e[t] || "second" == t) return this.rtf.format(Math.round(n / e[t]), t) } }, n }));
|
||||
</script>
|
||||
|
||||
<script id="ui_utils">
|
||||
// Global letiables
|
||||
const domRefs = {};
|
||||
@ -386,11 +503,7 @@
|
||||
const intTime = parseInt(time)
|
||||
if (String(intTime).length < 13)
|
||||
time *= 1000
|
||||
let timeFrag = new Date(intTime).toString().split(' '),
|
||||
day = timeFrag[0],
|
||||
month = timeFrag[1],
|
||||
date = timeFrag[2],
|
||||
year = timeFrag[3],
|
||||
let [day, month, date, year] = new Date(intTime).toString().split(' '),
|
||||
minutes = new Date(intTime).getMinutes(),
|
||||
hours = new Date(intTime).getHours(),
|
||||
currentTime = new Date().toString().split(' ')
|
||||
@ -406,25 +519,6 @@
|
||||
|
||||
finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`
|
||||
switch (format) {
|
||||
case 'relative':
|
||||
if (year == currentYear) {
|
||||
if (currentTime[1] === month) {
|
||||
const dateDiff = (parseInt(currentTime[2]) - parseInt(date))
|
||||
if (dateDiff === 0)
|
||||
return `${finalHours}`;
|
||||
else if (dateDiff === 1)
|
||||
return `Yesterday`;
|
||||
else if (dateDiff > 1 && dateDiff < 8)
|
||||
return currentTime[0];
|
||||
else
|
||||
return ` ${date} ${month}`;
|
||||
}
|
||||
else
|
||||
return ` ${date} ${month}`;
|
||||
}
|
||||
else
|
||||
return `${month} ${year}`;
|
||||
break;
|
||||
case 'date-only':
|
||||
return `${month} ${date}, ${year}`;
|
||||
break;
|
||||
@ -472,7 +566,7 @@
|
||||
},
|
||||
],
|
||||
{
|
||||
duration: 1000,
|
||||
duration: 600,
|
||||
fill: "forwards",
|
||||
easing: "ease-out",
|
||||
}
|
||||
@ -540,10 +634,24 @@
|
||||
case 'home':
|
||||
case 'main_page':
|
||||
targetPage = 'main_page'
|
||||
renderHomepage()
|
||||
break;
|
||||
case 'article':
|
||||
targetPage = 'article'
|
||||
renderArticle(params.articleID)
|
||||
break;
|
||||
case 'explore':
|
||||
targetPage = 'explore'
|
||||
renderArticle(params.articleID)
|
||||
break;
|
||||
case 'dashboard':
|
||||
targetPage = 'dashboard'
|
||||
renderPublishingRequests()
|
||||
await Promise.all([
|
||||
floCloudAPI.requestObjectData('publishedVc'),
|
||||
floCloudAPI.requestGeneralData('publishing_requests', {
|
||||
callback: (d, e) => renderPublishingRequests(d)
|
||||
})
|
||||
])
|
||||
break;
|
||||
}
|
||||
document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely'))
|
||||
@ -641,8 +749,21 @@
|
||||
return anime
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const relativeTime = new RelativeTime();
|
||||
const render = {
|
||||
articleCard(details) {
|
||||
const { uid: articleID, category, title, readTime, published } = details
|
||||
const clone = getRef('article_card_template').content.cloneNode(true).firstElementChild
|
||||
clone.querySelector('.article-card__category').textContent = category
|
||||
clone.querySelector('.article-card__category').href = `#/explore?type=category&query=${category}`
|
||||
clone.querySelector('.article-link').href = `#/article?articleID=${articleID}`
|
||||
clone.querySelector('.article-card__title').textContent = title
|
||||
clone.querySelector('.article-card__read-time').textContent = `${readTime} Min read`
|
||||
clone.querySelector('.article-card__published').textContent = relativeTime.from(published)
|
||||
return clone
|
||||
},
|
||||
requestCard(details) {
|
||||
const { message: { articleID, category, title }, time, vectorClock } = details
|
||||
if (floGlobals.appObjects.publishedVc[vectorClock]) return
|
||||
@ -656,27 +777,64 @@
|
||||
}
|
||||
|
||||
const getArticles = async () => {
|
||||
await Promise.all([floCloudAPI.requestObjectData('articles'), floCloudAPI.requestObjectData('publishedVc')])
|
||||
await floCloudAPI.requestObjectData('articles')
|
||||
}
|
||||
async function renderPublishingRequests() {
|
||||
floCloudAPI.requestGeneralData('publishing_requests')
|
||||
const genData = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`]
|
||||
|
||||
function getArrayOfObj(obj) {
|
||||
const arr = []
|
||||
for (const key in obj) {
|
||||
arr.push({
|
||||
uid: key,
|
||||
...obj[key]
|
||||
})
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
function renderHomepage() {
|
||||
const sortedArticles = getArrayOfObj(floGlobals.appObjects.articles).sort((a, b) => b.published - a.published)
|
||||
const frag = document.createDocumentFragment()
|
||||
for (const key in genData) {
|
||||
const card = render.requestCard(genData[key])
|
||||
sortedArticles.slice(0, 5).forEach(articleDetail => frag.append(render.articleCard(articleDetail)))
|
||||
getRef('latest_articles_list').innerHTML = ''
|
||||
getRef('latest_articles_list').append(frag)
|
||||
|
||||
const categories = ['Art', 'Politics', 'Science', 'Tech']
|
||||
categories.forEach(category => frag.append(createElement('a', {
|
||||
textContent: category,
|
||||
attributes: { href: `#/explore?type=category&query=${category.toLowerCase()}` },
|
||||
className: 'category interact'
|
||||
})))
|
||||
getRef('news_categories_list').innerHTML = ''
|
||||
getRef('news_categories_list').append(frag)
|
||||
|
||||
}
|
||||
async function renderArticle(articleID) {
|
||||
await floCloudAPI.requestObjectData(articleID)
|
||||
const articleBody = floGlobals.appObjects[articleID]
|
||||
const { title, published, readTime } = floGlobals.appObjects.articles[articleID]
|
||||
getRef('article_title').textContent = title
|
||||
getRef('published_time').textContent = getFormattedTime(published, 'date-only')
|
||||
getRef('reading_time').textContent = `${readTime} Min read`
|
||||
getRef('article_body').innerHTML = articleBody
|
||||
}
|
||||
|
||||
async function renderPublishingRequests() {
|
||||
const requests = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`]
|
||||
const frag = document.createDocumentFragment()
|
||||
for (const key in requests) {
|
||||
const card = render.requestCard(requests[key])
|
||||
if (card)
|
||||
frag.prepend(card)
|
||||
}
|
||||
getRef('publishing_requests').innerHTML = ''
|
||||
getRef('publishing_requests').append(frag)
|
||||
}
|
||||
|
||||
getRef('publishing_requests').addEventListener('click', publishArticle)
|
||||
|
||||
function publishArticle(e) {
|
||||
function handleRequestClick(e) {
|
||||
if (e.target.closest('.publish-button')) {
|
||||
const button = e.target.closest('.publish-button');
|
||||
const vc = button.closest('.request-card').dataset.vc;
|
||||
const { message: { articleID, category, content, title }, vectorClock } = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`][vc];
|
||||
const { message: { articleID, category, content, title, tags, readTime }, vectorClock } = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`][vc];
|
||||
const isPublished = floGlobals.appObjects['articles'].hasOwnProperty(articleID)
|
||||
getConfirmation(`${isPublished ? 'Update' : 'Publish'} article?`).then(res => {
|
||||
if (res) {
|
||||
@ -685,18 +843,19 @@
|
||||
if (isPublished) {
|
||||
floGlobals.appObjects['articles'][articleID]['updated'] = Date.now();
|
||||
} else {
|
||||
floGlobals.appObjects['articles'][articleID] = {
|
||||
category,
|
||||
title,
|
||||
published: Date.now()
|
||||
}
|
||||
floGlobals.appObjects.articles[articleID] = {}
|
||||
floGlobals.appObjects['articles'][articleID]['published'] = Date.now();
|
||||
}
|
||||
floGlobals.appObjects['articles'][articleID].category = category
|
||||
floGlobals.appObjects['articles'][articleID].title = title
|
||||
floGlobals.appObjects['articles'][articleID].tags = tags
|
||||
floGlobals.appObjects['articles'][articleID].readTime = readTime
|
||||
Promise.all([
|
||||
floCloudAPI.updateObjectData('articles'),
|
||||
floCloudAPI.updateObjectData('publishedVc'),
|
||||
floCloudAPI.resetObjectData(articleID)
|
||||
]).then(() => {
|
||||
notify(`${isPublished ? 'Published' : 'Updated'} article`, 'success')
|
||||
notify(`${isPublished ? 'Updated' : 'Published'} article`, 'success')
|
||||
button.closest('.request-card').remove()
|
||||
})
|
||||
}
|
||||
@ -714,6 +873,54 @@
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSearch() {
|
||||
if (!getRef('expanding_search').classList.contains('expanded')) {
|
||||
getRef('search_articles').focusIn()
|
||||
}
|
||||
getRef('expanding_search').classList.toggle('expanded')
|
||||
}
|
||||
getRef('search_articles').addEventListener('input', debounce((e) => {
|
||||
const searchKey = e.target.value.trim()
|
||||
if (searchKey !== '') {
|
||||
const options = {
|
||||
keys: ['title', 'tags', 'category'],
|
||||
threshold: 0.3
|
||||
}
|
||||
const fuse = new Fuse(getArrayOfObj(floGlobals.appObjects.articles), options)
|
||||
const searchResult = fuse.search(searchKey).map(v => v.item)
|
||||
getRef('search_suggestions').innerHTML = ''
|
||||
if (searchResult.length) {
|
||||
const frag = document.createDocumentFragment()
|
||||
searchResult.slice(0, 5).forEach((result) => {
|
||||
const { uid, title } = result
|
||||
console.log(result)
|
||||
frag.append(createElement('a', {
|
||||
textContent: title,
|
||||
attributes: { href: `#/article?articleID=${uid}` },
|
||||
className: 'search-suggestion interact'
|
||||
}))
|
||||
})
|
||||
getRef('search_suggestions').append(frag)
|
||||
if (searchResult.length > 5) {
|
||||
getRef('search_suggestions').append(createElement('a', {
|
||||
textContent: 'See all results',
|
||||
attributes: { href: `#/explore?type=search&query=${searchKey}}` },
|
||||
className: 'search-suggestion interact'
|
||||
}))
|
||||
}
|
||||
} else {
|
||||
getRef('search_suggestions').append(createElement('div', {
|
||||
innerHTML: `No articles related to <strong>${searchKey}</strong>`
|
||||
}))
|
||||
}
|
||||
getRef('search_suggestions').classList.remove('hide-completely')
|
||||
} else {
|
||||
getRef('search_suggestions').classList.add('hide-completely')
|
||||
}
|
||||
}, 100))
|
||||
|
||||
|
||||
|
||||
function getSignedIn() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) {
|
||||
@ -742,11 +949,9 @@
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
<script id="onLoadStartUp">
|
||||
floGlobals.isSubAdmin = false
|
||||
let maxCardsPerSection
|
||||
|
||||
function onLoadStartUp() {
|
||||
|
||||
//floDapps.addStartUpFunction('Sample', Promised Function)
|
||||
@ -757,11 +962,16 @@
|
||||
getRef('user_flo_id').value = myFloID
|
||||
floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
|
||||
if (floGlobals.isSubAdmin) {
|
||||
getRef('publishing_requests').addEventListener('click', handleRequestClick)
|
||||
document.querySelectorAll('.admin-option').forEach(elem => elem.classList.remove('hide-completely'))
|
||||
} else {
|
||||
getRef('publishing_requests').removeEventListener('click', handleRequestClick)
|
||||
document.querySelectorAll('.admin-option').forEach(elem => elem.classList.add('hide-completely'))
|
||||
}
|
||||
showPage(floGlobals.isSubAdmin ? 'dashboard' : window.location.hash, { firstLoad: true })
|
||||
if (location.hash.includes('sign_in') || location.hash.includes('sign_up'))
|
||||
location.hash = floGlobals.isSubAdmin ? '#/dashboard' : '#/home'
|
||||
showPage(window.location.hash, { firstLoad: true })
|
||||
console.log(result)
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user