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

Compare commits

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

10 Commits
e8ecd3204e ... 8dc366d6d1

Author SHA1 Message Date
sairaj mote
8dc366d6d1 adding ability for sub admin to view updates 2024-02-26 02:00:26 +05:30
sairaj mote
3ac59987f2 Adding option for intern to send updates 2024-02-25 05:26:41 +05:30
sairaj mote
7861243e81 moving tasks to independent app objects 2024-02-20 02:23:50 +05:30
sairaj mote
fb029fea3d minor UI tweaks 2024-02-16 04:05:59 +05:30
sairaj mote
2730f493ce Adding interested category selection page 2024-02-16 03:55:34 +05:30
sairaj mote
ab50b66e7d adding application and open task view for applicants 2024-02-09 00:42:10 +05:30
sairaj mote
f08bafc079 Bug fixes 2024-02-08 04:03:27 +05:30
sairaj mote
75684cd4ef Fixing tasks not loading on landing page when not logged in 2024-02-08 03:18:00 +05:30
sairaj mote
94bdf28db8 Adding profile data saving and updating 2024-02-08 02:59:01 +05:30
sairaj mote
c1c55b32c9 handling applied task state 2024-02-06 04:19:36 +05:30
7 changed files with 1279 additions and 302 deletions
Show Stats Expand all files Collapse all files

200
css/main.css
View File

@ -92,15 +92,15 @@ a:focus-visible {
}
h1 {
font-size: 1.5rem;
font-size: 2.5rem;
}
h2 {
font-size: 1.3rem;
font-size: 1.5rem;
}
h3 {
font-size: 1.1rem;
font-size: 1.2rem;
}
h4 {
@ -286,7 +286,7 @@ sm-option {
sm-chips {
--gap: 0.3rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.5rem;
border-radius: 0.7rem;
padding: 0.3rem;
}
@ -439,6 +439,10 @@ ol {
margin-left: auto;
}
.justify-items-center {
justify-items: center;
}
.align-self-center {
align-self: center;
}
@ -479,7 +483,7 @@ ol {
font-size: 0.9rem;
color: rgba(var(--text-color), 0.8);
font-weight: 500;
margin-bottom: 0.2rem;
margin-bottom: 0.3rem;
}
.button--primary .ripple,
@ -502,6 +506,9 @@ ol {
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.empty-state {
@ -729,7 +736,7 @@ ol {
#app_body {
display: grid;
grid-template-columns: 1rem [main-margin-start] 1fr [main-margin-end] 1rem;
grid-template-columns: 1rem [main-margin-start] minmax(0, 1fr) [main-margin-end] 1rem;
height: 100%;
}
#app_body > * {
@ -742,7 +749,13 @@ ol {
position: sticky;
top: 0;
z-index: 10;
background-color: rgba(var(--background-color), 1);
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;
}
#main_header #main_logo {
height: 2.5rem;
@ -764,10 +777,10 @@ ol {
grid-template-rows: auto 1fr;
height: 100%;
}
#landing section {
#landing #relative_tasks {
height: 100%;
}
#landing section > div:first-of-type {
#landing #relative_tasks > div:first-of-type {
display: grid;
place-content: center;
align-self: center;
@ -779,6 +792,100 @@ 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;
@ -825,11 +932,26 @@ ol {
grid-area: task-actions;
}
#profile {
text-align: center;
.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 sm-form {
margin: auto;
width: min(32rem, 100%);
}
@ -841,20 +963,47 @@ 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 section > div:first-of-type {
#landing #relative_tasks {
align-content: flex-start;
}
#landing #relative_tasks > 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: 3rem;
font-size: 4rem;
}
h2 {
font-size: 2rem;
@ -879,23 +1028,23 @@ ol {
padding: 1rem 1.5rem 0 1.5rem;
}
#app_body {
grid-template-columns: 4vw [main-margin-start] 4vw [inner-margin-start] 1fr [inner-margin-end] 4vw [main-margin-end] 4vw;
grid-template-columns: 4vw [main-margin-start] 4vw [inner-margin-start] minmax(0, 1fr) [inner-margin-end] 4vw [main-margin-end] 4vw;
}
#main_header {
padding: 2rem 0;
}
#landing section {
#landing #relative_tasks {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 8vw;
}
#landing section > div:first-of-type {
#landing #relative_tasks > div:first-of-type {
align-self: flex-start;
position: -webkit-sticky;
position: sticky;
top: 40vh;
}
#landing section > div:first-of-type::after {
#landing #relative_tasks > div:first-of-type::after {
content: "";
position: absolute;
height: 12rem;
@ -905,7 +1054,7 @@ ol {
align-self: center;
margin-top: 5rem;
}
#landing section > div:first-of-type #emblem {
#landing #relative_tasks > div:first-of-type #emblem {
position: absolute;
align-self: center;
right: -1.45rem;
@ -915,15 +1064,24 @@ ol {
stroke-width: 0.1rem;
margin-top: 5rem;
}
#landing section > div:last-of-type {
#landing #relative_tasks > div:last-of-type {
margin-top: 3rem;
}
#home > section {
#home > section,
#task > 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

218
css/main.scss
View File

@ -94,15 +94,15 @@ a {
}
h1 {
font-size: 1.5rem;
font-size: 2.5rem;
}
h2 {
font-size: 1.3rem;
font-size: 1.5rem;
}
h3 {
font-size: 1.1rem;
font-size: 1.2rem;
}
h4 {
@ -298,7 +298,7 @@ sm-option {
sm-chips {
--gap: 0.3rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.5rem;
border-radius: 0.7rem;
padding: 0.3rem;
}
@ -449,6 +449,10 @@ ol {
margin-left: auto;
}
.justify-items-center {
justify-items: center;
}
.align-self-center {
align-self: center;
}
@ -489,7 +493,7 @@ ol {
font-size: 0.9rem;
color: rgba(var(--text-color), 0.8);
font-weight: 500;
margin-bottom: 0.2rem;
margin-bottom: 0.3rem;
}
.button--primary,
@ -518,6 +522,7 @@ ol {
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.empty-state {
@ -759,7 +764,7 @@ ol {
#app_body {
display: grid;
grid-template-columns: 1rem [main-margin-start] 1fr [main-margin-end] 1rem;
grid-template-columns: 1rem [main-margin-start] minmax(0, 1fr) [main-margin-end] 1rem;
height: 100%;
&>* {
@ -772,7 +777,13 @@ ol {
position: sticky;
top: 0;
z-index: 10;
background-color: rgba(var(--background-color), 1);
background-color: rgba(var(--background-color), 0.7);
backdrop-filter: blur(1rem);
&:has(button) {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
}
#main_logo {
height: 2.5rem;
@ -797,8 +808,7 @@ ol {
grid-template-rows: auto 1fr;
height: 100%;
section {
#relative_tasks {
height: 100%;
&>div:first-of-type {
@ -821,6 +831,110 @@ 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;
@ -878,11 +992,35 @@ 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 {
text-align: center;
&__header {
h1,
h4 {
line-height: 0.7;
}
}
sm-form {
margin: auto;
width: min(32rem, 100%);
}
}
@ -898,15 +1036,35 @@ 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 {
section {
#relative_tasks {
align-content: flex-start;
&>div:first-of-type {
padding: 3rem 0;
}
}
}
#category_selection {
ul {
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
}
#emblem {
display: none;
}
@ -914,11 +1072,26 @@ 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: 3rem;
font-size: 4rem;
}
h2 {
@ -951,7 +1124,7 @@ ol {
}
#app_body {
grid-template-columns: 4vw [main-margin-start] 4vw [inner-margin-start] 1fr [inner-margin-end] 4vw [main-margin-end] 4vw;
grid-template-columns: 4vw [main-margin-start] 4vw [inner-margin-start] minmax(0, 1fr) [inner-margin-end] 4vw [main-margin-end] 4vw;
}
#main_header {
@ -960,7 +1133,7 @@ ol {
#landing {
section {
#relative_tasks {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 8vw;
@ -999,7 +1172,8 @@ ol {
}
}
#home {
#home,
#task {
&>section {
padding: 0 8vw;
@ -1009,6 +1183,18 @@ 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

773
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