Skip to content

Improvement/use web components #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Slam256 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Improvement/use web components #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
df87b8e
- use web components, and change the heading of the page.
Aug 7, 2024
3c93387
- add defer to script files.
Aug 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
""
]
}
</script>
</script>
<!-- Schema Markup data ends -->

<!-- Link to external CSS -->
Expand All @@ -64,7 +64,8 @@

<body>
<div class="header">
<h1>Kidnappings & Missing Persons in Uganda</h1>
<h1>Uganda Public Assembly Incident Wall</h1>
<h2>Monitoring Detensions and Releases of Participants of March To Parliament 2024</h2>
</div>

<div class="content">
Expand All @@ -77,7 +78,6 @@ <h1>Kidnappings & Missing Persons in Uganda</h1>
<button data-category="Released">Released</button>
<button data-category="Missing">Missing</button>
<button data-category="Fallen">Fallen</button>

</div>
<input type="text" class="search-input" id="searchInput" placeholder="Search Person's Name...">
</div>
Expand All @@ -88,6 +88,7 @@ <h1>Kidnappings & Missing Persons in Uganda</h1>
</div>

<script type="text/javascript" src="src/js/scripts.js"></script>
<script defer src="./src/components/PersonCard.js"></script>
<div w3-include-html="src/partials/footer.html"></div>
<script src="./src/js/include.js"></script>
<script src="./src/js/time.js"></script>
Expand Down
154 changes: 154 additions & 0 deletions src/components/PersonCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
const personTemplate = document.createElement('template');
personTemplate.innerHTML = `
<style>
:host {
display: block;
font-family: Arial, sans-serif;
}
.card {
height: 93%;
background-color: var(--card-bg);
border-radius: 15px;
padding: 1.25rem;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card:hover {
background-color: var(--card-hover-bg);
}

.card-img {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto 1rem;
object-fit: cover;
border: 2px solid var(--white);
}

.card__name {
font-size: 1.2rem;
margin-bottom: 0.6rem;
font-weight: 700;
}

.card-status {
font-size: 0.8rem;
margin-bottom: 1rem;
color: var(--white);
background-color: var(--purple);
display: inline-block;
border-radius: 12px;
padding: 0.3rem 1rem;
}

.card-status.remanded { background-color: var(--yellow); color: var(--black); }
.card-status.fallen { background-color: var(--red); }
.card-status.missing { background-color: var(--blue); }
.card-status.released { background-color: var(--green); }

.share-button {
background-color: var(--blue);
border: none;
color: var(--white);
padding: 0.7rem;
cursor: pointer;
border-radius: 20px;
width: 100%;
font-size: 0.9rem;
transition: background-color 0.3s ease;
margin-top: auto;
}

.share-button:hover {
background-color: #0056b3;
}

.card__twitter {
font-size: 0.9rem;
margin-bottom: 1rem;
word-break: break-all;
}

</style>
<div class="card">
<div class="card-inner">
<img class="card-img">
<h2 class="card__name"></h2>
<p class="card-status"></p>
<p class="card__office">Taken by <slot name="security-organ"></slot></p>
<p class="card__time">Time: <slot name="time-taken"></slot></p>
<p class="locations">Last seen: <slot name="last-known-location"></slot></p>
<p class="card__gender">Gender: <slot name="gender"></slot></p>
<p class="card__twitter">X: <a target="_blank"></a></p>
<p class="card__currently">Current Location: <slot name="holding-location"></slot></p>
</div>
<button class="share-button twitter">Share on X</button>
</div>
`;

class PersonCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.append(personTemplate.content.cloneNode(true));
}

connectedCallback() {
this.render();
}

static get observedAttributes() {
return ['name', 'status', 'security-organ', 'time-taken', 'last-known-location', 'gender', 'twitter-handle', 'holding-location', 'photo-url', 'id'];
}

attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
this.render();
}
}

render() {
// Set non-slot content
this.shadowRoot.querySelector('.card-img').src = this.getAttribute('photo-url') || '';
this.shadowRoot.querySelector('.card-img').alt = this.getAttribute('name') || '';
this.shadowRoot.querySelector('.card__name').textContent = this.getAttribute('name') || '';

const status = this.getAttribute('status') || '';
const statusElement = this.shadowRoot.querySelector('.card-status');
statusElement.textContent = status;
statusElement.className = `card-status ${status.toLowerCase()}`;

const twitterHandle = this.getAttribute('twitter-handle') || '--';
const twitterLink = this.shadowRoot.querySelector('.card__twitter a');
twitterLink.href = `https://x.com/${twitterHandle}`;
twitterLink.textContent = twitterHandle;

this.shadowRoot.querySelector('.share-button').addEventListener('click', this.shareCard.bind(this));
}

shareCard() {
const name = this.getAttribute('name');
const status = this.getAttribute('status');
const lastKnownLocation = this.getAttribute('last-known-location');

let text;
if (status.toLowerCase() === "released") {
text = `GOOD NEWS🖐!!!! ${name}, who was previously missing, has been released. They were last held at ${lastKnownLocation || 'Unknown'}. #March2Parliament`;
} else {
text = `NOTICE! This is a missing person: ${name}, status: ${status}, last seen at ${lastKnownLocation || 'Unknown'}. #March2Parliament`;
}

const url = `https://x.com/intent/tweet?text=${encodeURIComponent(text)}`;
window.open(url, "_blank");
}
}

customElements.define('person-card', PersonCard);
140 changes: 10 additions & 130 deletions src/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
--blue: #007bff;
--green: #28a745;
--lightergrey: #444;
--lightgrey: #333;
--lightgrey: #5e5d5d;
--white: #fff;
--black: #000000;
--yellow: #ffb224;
Expand Down Expand Up @@ -47,9 +47,9 @@ button:hover {
}

.header {
background-color: var(--lightgrey);
padding: 2rem;
text-align: center;
background-color: var(--lightgrey);
padding: .5rem;
text-align: center;
}

.header h1 {
Expand All @@ -59,8 +59,9 @@ button:hover {
}

.header h2 {
font-size: 1.3rem;
font-size: 1rem;
font-weight: 400;
font-style: italic;
}

.filters {
Expand All @@ -77,7 +78,7 @@ button:hover {

.content {
flex-grow: 1;
max-width: 1400px;
max-width: 1440px;
width: 95%;
margin: 2rem auto;
padding: 1rem 0;
Expand Down Expand Up @@ -151,86 +152,10 @@ button:hover {

.persons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
gap: 1rem;
justify-content: center;
}

.card {
background-color: var(--card-bg);
border-radius: 15px;
padding: 1.25rem;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.card:hover {
background-color: var(--card-hover-bg);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.card-img {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto 1rem;
object-fit: cover;
border: 2px solid var(--white);
}

.card__name {
font-size: 1.2rem;
margin-bottom: 0.6rem;
font-weight: 700;
}

.card-status {
font-size: 0.8rem;
margin-bottom: 1rem;
color: var(--white);
background-color: var(--purple);
display: inline-block;
border-radius: 12px;
padding: 0.3rem 1rem;
}

.card-status.remanded { background-color: var(--yellow); color: var(--black); }
.card-status.fallen { background-color: var(--red); }
.card-status.missing { background-color: var(--blue); }
.card-status.released { background-color: var(--green); }

.card__info {
margin-bottom: 1rem;
}

.card__office, .locations, .card__gender {
margin-bottom: 0.6rem;
font-size: 0.9rem;
}

.card__twitter {
font-size: 0.9rem;
margin-bottom: 1rem;
word-break: break-all;
}

.card__currently {
font-size: 0.9rem;
margin-bottom: 0.6rem;
margin-bottom: 1rem;
font-weight: 500;
}

.card__currently-status {
font-weight: normal;
display: block;
margin-top: 0.3rem;
}

.share-button {
background-color: var(--blue);
border: none;
Expand Down Expand Up @@ -314,66 +239,21 @@ button:hover {
opacity: 0.8;
}

@media screen and (max-width: 1400px) {
.persons {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
}

@media screen and (max-width: 1200px) {
.persons {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
}

@media screen and (max-width: 1080px) {

.search-sort {
display: flex;
flex-flow: column;
}
}
}

@media screen and (max-width: 768px) {

.persons {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.header h1 {
font-size: 2rem;
}
}

@media screen and (max-width: 480px) {
.persons {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.card {
padding: 1rem;
}

.card-img {
width: 80px;
height: 80px;
}

.card__name {
font-size: 1rem;
}

.card-status, .card__office, .locations, .card__gender, .card__twitter, .card__currently, .share-button {
font-size: 0.8rem;
}

.search-sort input,
.content__buttons button {
font-size: 0.9rem;
padding: 0.6rem 1rem;
}
}

/* spinner */
.loading {
display: flex;
Expand Down
Loading