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

Compare commits

base: RanchiMall:8dc366d6d130782b2acd753a3cf1e29c21b95c53
Branches Tags
RanchiMall:main
..
compare: RanchiMall:e8ecd3204e8515c16ae44452906599ea76d6774d
Branches Tags
RanchiMall:main

No commits in common. "8dc366d6d130782b2acd753a3cf1e29c21b95c53" and "e8ecd3204e8515c16ae44452906599ea76d6774d" have entirely different histories.
8dc366d6d1 ... e8ecd3204e

7 changed files with 297 additions and 1274 deletions
Show Stats Expand all files Collapse all files

204
css/main.css
View File

@ -92,15 +92,15 @@ a:focus-visible {
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
h2 {
font-size: 1.3rem;
}
h3 {
font-size: 1.2rem;
font-size: 1.1rem;
}
h4 {
@ -286,7 +286,7 @@ sm-option {
sm-chips {
--gap: 0.3rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.7rem;
border-radius: 0.5rem;
padding: 0.3rem;
}
@ -439,10 +439,6 @@ ol {
margin-left: auto;
}
.justify-items-center {
justify-items: center;
}
.align-self-center {
align-self: center;
}
@ -483,7 +479,7 @@ ol {
font-size: 0.9rem;
color: rgba(var(--text-color), 0.8);
font-weight: 500;
margin-bottom: 0.3rem;
margin-bottom: 0.2rem;
}
.button--primary .ripple,
@ -506,9 +502,6 @@ ol {
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.empty-state {
@ -736,7 +729,7 @@ ol {
#app_body {
display: grid;
grid-template-columns: 1rem [main-margin-start] minmax(0, 1fr) [main-margin-end] 1rem;
grid-template-columns: 1rem [main-margin-start] 1fr [main-margin-end] 1rem;
height: 100%;
}
#app_body > * {
@ -749,13 +742,7 @@ ol {
position: sticky;
top: 0;
z-index: 10;
background-color: rgba(var(--background-color), 0.7);
-webkit-backdrop-filter: blur(1rem);
backdrop-filter: blur(1rem);
}
#main_header:has(button) {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
background-color: rgba(var(--background-color), 1);
}
#main_header #main_logo {
height: 2.5rem;
@ -777,10 +764,10 @@ ol {
grid-template-rows: auto 1fr;
height: 100%;
}
#landing #relative_tasks {
#landing section {
height: 100%;
}
#landing #relative_tasks > div:first-of-type {
#landing section > div:first-of-type {
display: grid;
place-content: center;
align-self: center;
@ -792,100 +779,6 @@ ol {
font-size: 2rem;
}
#category_selection {
text-align: center;
width: min(56rem, 100%);
margin-inline: auto;
grid-template-rows: auto 1fr auto;
padding: 1.5rem 0;
gap: 1.5rem;
}
#category_selection h1 {
line-height: 0.9;
margin-bottom: 1rem;
}
#category_selection p {
max-width: 100%;
margin-bottom: 1rem;
}
#category_selection ul {
display: grid;
align-self: flex-start;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
#category_selection ul li {
display: flex;
-webkit-animation: popin 0.3s ease-out var(--delay) forwards;
animation: popin 0.3s ease-out var(--delay) forwards;
opacity: 0;
transform: scale(0.9);
}
#category_selection ul li:has(:checked) label {
box-shadow: 0 0 0 0.1rem var(--accent-color);
background-color: transparent;
}
#category_selection ul li:has(:checked) label:hover {
box-shadow: 0 0 0 0.2rem var(--accent-color);
background-color: transparent;
}
#category_selection ul li label {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-align: center;
background-color: rgba(var(--text-color), 0.06);
padding: 1rem;
border-radius: 40%;
cursor: pointer;
font-weight: 500;
transition: background-color 0.3s, box-shadow 0.3s;
aspect-ratio: 1/1;
}
#category_selection ul li label:hover {
background-color: rgba(var(--text-color), 0.03);
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.3);
}
#category_selection ul li input {
display: none;
}
@-webkit-keyframes popin {
to {
opacity: 1;
transform: none;
}
}
@keyframes popin {
to {
opacity: 1;
transform: none;
}
}
#category_selection button {
justify-self: center;
padding: 1rem 3rem;
border-radius: 5rem;
gap: 0.5rem;
}
#category_selection button span {
transform: translateX(1rem);
transition: transform 0.3s;
}
#category_selection button .icon {
opacity: 0;
transform: translateX(-0.5rem);
transition: opacity 0.3s, transform 0.3s;
}
#category_selection button:hover span {
transform: translateX(0);
}
#category_selection button:hover .icon {
opacity: 1;
transform: translateX(0);
}
.task-card {
display: grid;
grid-template-columns: 1fr auto;
@ -932,26 +825,11 @@ ol {
grid-area: task-actions;
}
.update-card {
border-radius: 0.5rem;
padding: max(1rem, 1.5vw);
background-color: rgba(var(--text-color), 0.06);
}
.update-card__sender, .update-card__time {
font-size: 0.8rem;
font-weight: 500;
color: rgba(var(--text-color), 0.8);
}
.update-card__message {
margin-top: 0.5rem;
white-space: pre-line;
}
#profile__header h1,
#profile__header h4 {
line-height: 0.7;
#profile {
text-align: center;
}
#profile sm-form {
margin: auto;
width: min(32rem, 100%);
}
@ -963,47 +841,20 @@ ol {
--background: rgba(var(--text-color), 0.06) ;
}
#user_popup_button {
background-color: rgba(var(--text-color), 0.06);
border-radius: 2rem;
font-size: 0.8rem;
padding: 0.6rem 0.8rem;
color: currentColor;
}
#user_popup_button .icon {
fill: currentColor;
}
@media screen and (max-width: 40rem) {
#landing #relative_tasks {
align-content: flex-start;
}
#landing #relative_tasks > div:first-of-type {
#landing section > div:first-of-type {
padding: 3rem 0;
}
#category_selection ul {
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
#emblem {
display: none;
}
.task-card {
grid-template-areas: "task-title task-time" "task-description task-description" "task-requisites task-requisites" "task-actions task-actions";
}
#profile__header {
padding: 1rem 0;
margin-top: 10vh;
}
#user_popup_button {
grid-area: 1/2/2/3;
}
.hide-on-small {
display: none;
}
}
@media screen and (min-width: 40rem) {
h1 {
font-size: 4rem;
font-size: 3rem;
}
h2 {
font-size: 2rem;
@ -1028,23 +879,23 @@ ol {
padding: 1rem 1.5rem 0 1.5rem;
}
#app_body {
grid-template-columns: 4vw [main-margin-start] 4vw [inner-margin-start] minmax(0, 1fr) [inner-margin-end] 4vw [main-margin-end] 4vw;
grid-template-columns: 4vw [main-margin-start] 4vw [inner-margin-start] 1fr [inner-margin-end] 4vw [main-margin-end] 4vw;
}
#main_header {
padding: 2rem 0;
}
#landing #relative_tasks {
#landing section {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 8vw;
}
#landing #relative_tasks > div:first-of-type {
#landing section > div:first-of-type {
align-self: flex-start;
position: -webkit-sticky;
position: sticky;
top: 40vh;
}
#landing #relative_tasks > div:first-of-type::after {
#landing section > div:first-of-type::after {
content: "";
position: absolute;
height: 12rem;
@ -1054,7 +905,7 @@ ol {
align-self: center;
margin-top: 5rem;
}
#landing #relative_tasks > div:first-of-type #emblem {
#landing section > div:first-of-type #emblem {
position: absolute;
align-self: center;
right: -1.45rem;
@ -1064,24 +915,15 @@ ol {
stroke-width: 0.1rem;
margin-top: 5rem;
}
#landing #relative_tasks > div:last-of-type {
#landing section > div:last-of-type {
margin-top: 3rem;
}
#home > section,
#task > section {
#home > section {
padding: 0 8vw;
}
#task_popup {
--width: 36rem;
}
#send_update_popup {
--width: 36rem;
}
#profile section {
gap: 4rem;
justify-content: center;
align-items: center;
}
}
@media (any-hover: hover) {
html {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

222
css/main.scss
View File

@ -94,15 +94,15 @@ a {
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
h2 {
font-size: 1.3rem;
}
h3 {
font-size: 1.2rem;
font-size: 1.1rem;
}
h4 {
@ -298,7 +298,7 @@ sm-option {
sm-chips {
--gap: 0.3rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.7rem;
border-radius: 0.5rem;
padding: 0.3rem;
}
@ -449,10 +449,6 @@ ol {
margin-left: auto;
}
.justify-items-center {
justify-items: center;
}
.align-self-center {
align-self: center;
}
@ -493,7 +489,7 @@ ol {
font-size: 0.9rem;
color: rgba(var(--text-color), 0.8);
font-weight: 500;
margin-bottom: 0.3rem;
margin-bottom: 0.2rem;
}
.button--primary,
@ -522,7 +518,6 @@ ol {
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.empty-state {
@ -764,7 +759,7 @@ ol {
#app_body {
display: grid;
grid-template-columns: 1rem [main-margin-start] minmax(0, 1fr) [main-margin-end] 1rem;
grid-template-columns: 1rem [main-margin-start] 1fr [main-margin-end] 1rem;
height: 100%;
&>* {
@ -777,13 +772,7 @@ ol {
position: sticky;
top: 0;
z-index: 10;
background-color: rgba(var(--background-color), 0.7);
backdrop-filter: blur(1rem);
&:has(button) {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
}
background-color: rgba(var(--background-color), 1);
#main_logo {
height: 2.5rem;
@ -808,7 +797,8 @@ ol {
grid-template-rows: auto 1fr;
height: 100%;
#relative_tasks {
section {
height: 100%;
&>div:first-of-type {
@ -831,110 +821,6 @@ ol {
}
}
#category_selection {
text-align: center;
width: min(56rem, 100%);
margin-inline: auto;
grid-template-rows: auto 1fr auto;
padding: 1.5rem 0;
gap: 1.5rem;
h1 {
line-height: 0.9;
margin-bottom: 1rem;
}
p {
max-width: 100%;
margin-bottom: 1rem;
}
ul {
display: grid;
align-self: flex-start;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
li {
display: flex;
animation: popin 0.3s ease-out var(--delay) forwards;
opacity: 0;
transform: scale(0.9);
&:has(:checked) label {
box-shadow: 0 0 0 0.1rem var(--accent-color);
background-color: transparent;
&:hover {
box-shadow: 0 0 0 0.2rem var(--accent-color);
background-color: transparent;
}
}
label {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-align: center;
background-color: rgba(var(--text-color), 0.06);
padding: 1rem;
border-radius: 40%;
cursor: pointer;
font-weight: 500;
transition: background-color 0.3s, box-shadow 0.3s;
aspect-ratio: 1/1;
&:hover {
background-color: rgba(var(--text-color), 0.03);
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.3);
}
}
input {
display: none;
}
}
}
@keyframes popin {
to {
opacity: 1;
transform: none;
}
}
button {
justify-self: center;
padding: 1rem 3rem;
border-radius: 5rem;
gap: 0.5rem;
span {
transform: translateX(1rem);
transition: transform 0.3s;
}
.icon {
opacity: 0;
transform: translateX(-0.5rem);
transition: opacity 0.3s, transform 0.3s;
}
&:hover {
span {
transform: translateX(0);
}
.icon {
opacity: 1;
transform: translateX(0);
}
}
}
}
.task-card {
display: grid;
grid-template-columns: 1fr auto;
@ -992,35 +878,11 @@ ol {
}
}
.update-card {
border-radius: 0.5rem;
padding: max(1rem, 1.5vw);
background-color: rgba(var(--text-color), 0.06);
&__sender,
&__time {
font-size: 0.8rem;
font-weight: 500;
color: rgba(var(--text-color), 0.8);
}
&__message {
margin-top: 0.5rem;
white-space: pre-line;
}
}
#profile {
&__header {
h1,
h4 {
line-height: 0.7;
}
}
text-align: center;
sm-form {
margin: auto;
width: min(32rem, 100%);
}
}
@ -1036,35 +898,15 @@ ol {
}
}
#user_popup_button {
background-color: rgba(var(--text-color), 0.06);
border-radius: 2rem;
font-size: 0.8rem;
padding: 0.6rem 0.8rem;
color: currentColor;
.icon {
fill: currentColor;
}
}
@media screen and (max-width: 40rem) {
#landing {
#relative_tasks {
align-content: flex-start;
section {
&>div:first-of-type {
padding: 3rem 0;
}
}
}
#category_selection {
ul {
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
}
#emblem {
display: none;
}
@ -1072,26 +914,11 @@ ol {
.task-card {
grid-template-areas: "task-title task-time" "task-description task-description" "task-requisites task-requisites" "task-actions task-actions";
}
#profile {
&__header {
padding: 1rem 0;
margin-top: 10vh;
}
}
#user_popup_button {
grid-area: 1/2/2/3;
}
.hide-on-small {
display: none;
}
}
@media screen and (min-width: 40rem) {
h1 {
font-size: 4rem;
font-size: 3rem;
}
h2 {
@ -1124,7 +951,7 @@ ol {
}
#app_body {
grid-template-columns: 4vw [main-margin-start] 4vw [inner-margin-start] minmax(0, 1fr) [inner-margin-end] 4vw [main-margin-end] 4vw;
grid-template-columns: 4vw [main-margin-start] 4vw [inner-margin-start] 1fr [inner-margin-end] 4vw [main-margin-end] 4vw;
}
#main_header {
@ -1133,7 +960,7 @@ ol {
#landing {
#relative_tasks {
section {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 8vw;
@ -1172,8 +999,7 @@ ol {
}
}
#home,
#task {
#home {
&>section {
padding: 0 8vw;
@ -1183,18 +1009,6 @@ ol {
#task_popup {
--width: 36rem;
}
#send_update_popup {
--width: 36rem;
}
#profile {
section {
gap: 4rem;
justify-content: center;
align-items: center;
}
}
}
@media (any-hover: hover) {

71
index.html
View File

File diff suppressed because one or more lines are too long

755
scripts/app.js
View File

File diff suppressed because one or more lines are too long

311
scripts/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
scripts/components.min.js vendored
View File

File diff suppressed because one or more lines are too long