minor UI improvements
This commit is contained in:
sairaj mote
parent
9d0252f0b2
commit
9b2a9cab5f
40
css/main.css
40
css/main.css
@ -23,6 +23,21 @@ body {
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
--yellow: rgb(220, 165, 0);
|
||||
--dark-red: #d40e1e;
|
||||
--red: #f50000;
|
||||
--kinda-pink: #e40273;
|
||||
--purple: #462191;
|
||||
--shady-blue: #324de6;
|
||||
--nice-blue: #3d5afe;
|
||||
--maybe-cyan: #00b0ff;
|
||||
--teal: #00bcd4;
|
||||
--mint-green: #16c79a;
|
||||
--yellowish-green: #66bb6a;
|
||||
--greenish-yellow: #8bc34a;
|
||||
--dark-teal: #11698e;
|
||||
--tangerine: #ff6f00;
|
||||
--orange: #ff9100;
|
||||
--redish-orange: #ff3d00;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
overflow-y: hidden;
|
||||
@ -37,6 +52,21 @@ body[data-theme=dark] {
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: rgb(255, 213, 5);
|
||||
--dark-red: #ff5e7e;
|
||||
--red: #ff6098;
|
||||
--kinda-pink: #c44ae6;
|
||||
--purple: #9565f7;
|
||||
--shady-blue: #8295fb;
|
||||
--nice-blue: #6d83ff;
|
||||
--maybe-cyan: #66cfff;
|
||||
--teal: #6aeeff;
|
||||
--mint-green: #4dffd2;
|
||||
--yellowish-green: #9effa2;
|
||||
--greenish-yellow: #c7fc8b;
|
||||
--dark-teal: #51cbff;
|
||||
--tangerine: #ffac6d;
|
||||
--orange: #ffbe68;
|
||||
--redish-orange: #ff8560;
|
||||
}
|
||||
body[data-theme=dark] ::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
@ -1010,11 +1040,11 @@ ul {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
color: var(--color);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--accent-color);
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
.intern-card__score-wrapper {
|
||||
@ -1139,6 +1169,7 @@ ul {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
font-size: 1.3rem;
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
#intern_info__name {
|
||||
@ -1627,6 +1658,9 @@ input[type=date]:focus {
|
||||
margin-right: 0.8rem;
|
||||
grid-row: span 3;
|
||||
}
|
||||
.watchlist_project_card .project-icon .icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
.watchlist_project_card .project__title {
|
||||
margin-bottom: 0.8rem;
|
||||
font-weight: 500;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -23,6 +23,22 @@ body {
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
--yellow: rgb(220, 165, 0);
|
||||
// Accent colors
|
||||
--dark-red: #d40e1e;
|
||||
--red: #f50000;
|
||||
--kinda-pink: #e40273;
|
||||
--purple: #462191;
|
||||
--shady-blue: #324de6;
|
||||
--nice-blue: #3d5afe;
|
||||
--maybe-cyan: #00b0ff;
|
||||
--teal: #00bcd4;
|
||||
--mint-green: #16c79a;
|
||||
--yellowish-green: #66bb6a;
|
||||
--greenish-yellow: #8bc34a;
|
||||
--dark-teal: #11698e;
|
||||
--tangerine: #ff6f00;
|
||||
--orange: #ff9100;
|
||||
--redish-orange: #ff3d00;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
overflow-y: hidden;
|
||||
@ -37,6 +53,22 @@ body[data-theme="dark"] {
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: rgb(255, 213, 5);
|
||||
// Accent colors
|
||||
--dark-red: #ff5e7e;
|
||||
--red: #ff6098;
|
||||
--kinda-pink: #c44ae6;
|
||||
--purple: #9565f7;
|
||||
--shady-blue: #8295fb;
|
||||
--nice-blue: #6d83ff;
|
||||
--maybe-cyan: #66cfff;
|
||||
--teal: #6aeeff;
|
||||
--mint-green: #4dffd2;
|
||||
--yellowish-green: #9effa2;
|
||||
--greenish-yellow: #c7fc8b;
|
||||
--dark-teal: #51cbff;
|
||||
--tangerine: #ffac6d;
|
||||
--orange: #ffbe68;
|
||||
--redish-orange: #ff8560;
|
||||
::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
}
|
||||
@ -1027,11 +1059,11 @@ ul {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
color: var(--color);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--accent-color);
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
.intern-card__score-wrapper {
|
||||
@ -1156,6 +1188,7 @@ ul {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
font-size: 1.3rem;
|
||||
color: var(--color);
|
||||
}
|
||||
#intern_info__name {
|
||||
font-size: 1.5rem;
|
||||
@ -1625,6 +1658,9 @@ input[type="date"] {
|
||||
border-radius: 2rem;
|
||||
margin-right: 0.8rem;
|
||||
grid-row: span 3;
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
.project__title {
|
||||
margin-bottom: 0.8rem;
|
||||
|
||||
76
index.html
76
index.html
@ -898,20 +898,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template id="intern_card_template">
|
||||
<li class="intern-card grid align-center interact">
|
||||
<div class="intern-card__initials"></div>
|
||||
<div class="intern-card__name capitalize"></div>
|
||||
<div class="intern-card__score-wrapper flex align-center">
|
||||
<h4 class="intern-card__score"></h4>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z" />
|
||||
</svg>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
/*jshint esversion: 8 */
|
||||
/**
|
||||
@ -1120,35 +1106,6 @@
|
||||
circle.remove();
|
||||
};
|
||||
}
|
||||
function randomHsl(saturation = 80, lightness = 80) {
|
||||
let hue = Math.random() * 360;
|
||||
let color = {
|
||||
primary: `hsla( ${hue}, ${saturation}%, ${lightness}%, 1)`,
|
||||
light: `hsla( ${hue}, ${saturation}%, 90%, 0.6)`,
|
||||
};
|
||||
return color;
|
||||
}
|
||||
|
||||
const selectedColors = [
|
||||
"#FF1744",
|
||||
"#F50057",
|
||||
"#8E24AA",
|
||||
"#5E35B1",
|
||||
"#3F51B5",
|
||||
"#3D5AFE",
|
||||
"#00B0FF",
|
||||
"#00BCD4",
|
||||
"#16c79a",
|
||||
"#66BB6A",
|
||||
"#8BC34A",
|
||||
"#11698e",
|
||||
"#FF6F00",
|
||||
"#FF9100",
|
||||
"#FF3D00",
|
||||
];
|
||||
function randomColor() {
|
||||
return selectedColors[Math.floor(Math.random() * selectedColors.length)];
|
||||
}
|
||||
|
||||
function getFormattedTime(timestamp, format) {
|
||||
try {
|
||||
@ -1680,16 +1637,12 @@
|
||||
internCard(internName, internFloID, internPoints) {
|
||||
const initials = internName.split(' ').map(v => v.charAt(0)).join('');
|
||||
return html`
|
||||
<li class="intern-card grid align-center interact" data-intern-flo-id=${internFloID} title="Intern Information">
|
||||
<div class="intern-card__initials" style=${`background-color: ${getInternColor(internFloID)}`}>${initials}</div>
|
||||
<li class="intern-card grid align-center interact" .dataset=${{ internFloId: internFloID }} title="Intern Information">
|
||||
<div class="intern-card__initials" style=${`--color: var(${getInternColor(internFloID)})`}>${initials}</div>
|
||||
<div class="intern-card__name capitalize">${internName}</div>
|
||||
<div class="intern-card__score-wrapper flex align-center">
|
||||
<h4 class="intern-card__score">${internPoints}</h4>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z" />
|
||||
</svg>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z" /> <path d="M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z" /> </svg>
|
||||
</div>
|
||||
</li>`;
|
||||
},
|
||||
@ -1949,7 +1902,26 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const selectedColors = [
|
||||
'--dark-red',
|
||||
'--red',
|
||||
'--kinda-pink',
|
||||
'--purple',
|
||||
'--shady-blue',
|
||||
'--nice-blue',
|
||||
'--maybe-cyan',
|
||||
'--teal',
|
||||
'--mint-green',
|
||||
'--greenish-yellow',
|
||||
'--yellowish-green',
|
||||
'--dark-teal',
|
||||
'--orange',
|
||||
'--tangerine',
|
||||
'--redish-orange',
|
||||
]
|
||||
function randomColor() {
|
||||
return selectedColors[Math.floor(Math.random() * selectedColors.length)];
|
||||
}
|
||||
const renderedIntensColor = {}
|
||||
function getInternColor(floId) {
|
||||
if (!renderedIntensColor[floId]) {
|
||||
@ -2024,7 +1996,7 @@
|
||||
function showInternInfo(internFloId) {
|
||||
const internName = RIBC.getInternList()[internFloId]
|
||||
getRef('intern_info__initials').textContent = internName.split(' ').map(v => v.charAt(0)).join('');
|
||||
getRef('intern_info__initials').style.backgroundColor = getInternColor(internFloId)
|
||||
getRef('intern_info__initials').style.setProperty('--color', `var(${getInternColor(internFloId)})`)
|
||||
getRef('intern_info__name').textContent = internName;
|
||||
getRef('intern_info__flo_id').value = currentIntern = internFloId;
|
||||
getRef('intern_info__score').textContent = RIBC.getInternRating(internFloId); // points earned by intern
|
||||
|
||||
Loading…
Reference in New Issue
Block a user