Skip to content

Commit

Permalink
Merge pull request #5 from cse110-sp24-group31/add-project-view
Browse files Browse the repository at this point in the history 
Add project view
  • Loading branch information
@bwhenn
bwhenn authored May 12, 2024
2 parents 9ef2876 + 82f4277 commit 3d64f5c
Show file tree
Hide file tree
Showing 5 changed files with 344 additions and 38 deletions.
170 changes: 170 additions & 0 deletions css/homepage.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
/* COLOR THEMES */
:root {
--background-color: #ffdaca;
--content-color: #588b8b;
--accomp-color: #FFA343;
--bar-color: #c8553d;
--card-color: #ffffffeb;
--cal-color: #65c9c9be;
}


/* ENTIRE PAGE SELECTORS */
body, html {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
font-family: Arial, sans-serif; /* temporary */
background-color: var(--background-color);
min-height: 500px;
}



/* NAV AND BOTTOM TAB SELECTORS */
.main-nav, .bottom-tab {
background-color: var(--bar-color);
padding: 20px 0;
width: 100%;
}


/* MAIN SECTION SELECTORS */
.card {
cursor: pointer;
display: flex;
height: 300px;
width: 200px;
border-radius: 8px;
background-color: var(--card-color);
transition: box-shadow 0.3s;
}

.card:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.main {
display: flex;
width: 100%;
height: calc(100% - 80px);
}

.project-cards, .sidebar-sec {
border-radius: 8px; /* Rounded corners */
}

.project-cards {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 25px;
padding: 30px;
background-color: var(--content-color);
flex-grow: 1;
margin: 30px 15px 30px 30px;
}

.sidebar {
width: 380px; /* Fixed width for the sidebar */
display: flex;
height: calc(100% - 60px);
flex-direction: column;
margin: 30px 30px 30px 15px;
}


.calendar {
margin-bottom: 15px;
background-color: var(--cal-color); /* Light grey for visibility */
height: 283px;
flex-direction: column;
}

.cal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}

.monthYear {
text-align: center;
font-weight: 600;
width: 150px;
}

.cal-header button {
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: #fff;
cursor: pointer;
width: 30px;
height: 30px;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.days {
display: grid;
grid-template-columns: repeat(7,1fr);
}


.day {
text-align: center;
padding: 5px;
font-weight: 600;
}

.dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}

.date {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 4px;
margin: auto;
cursor: pointer;
font-weight: 400;
border-radius: 50%;
width: 30px;
height: 30px;
transition: 0.2s;
}

.date:hover, .date:active {
background: #ff5869;
color: #fff;
}

.date.inactive {
color: #d2d2d2;
}

.date.inactive:hover {
color: #fff;
}

.accomplishments {
background-color: var(--accomp-color); /* Slightly different grey for distinction */
margin-top: 15px;
flex-grow: 1;
}


/* MEDIA QUERY FOR MOBILE DEVICES */
@media (max-width: 837px) {
.main {
flex-direction: column;
}
}
46 changes: 46 additions & 0 deletions css/projectView.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
.modal {
display: none;
position: fixed;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);; /* Black with opacity for blur effect */
backdrop-filter: blur(8px);
}

.modal-content {
background-color: #fff; /* White background */
margin: 10% auto; /* 10% from the top and centered horizontally */
padding: 20px;
border: 1px solid #888;
width: 50%; /* Smaller width to keep it well-sized */
border-radius: 10px; /* Rounded edges */
box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Soft shadow for 3D effect */
position: relative; /* Needed for absolute positioning of close button */
height: 65%;
}

.close {
color: #aaa;
position: absolute;
right: 10px;
top: 5px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
}

/* Ensure the modal content is scrollable if the content exceeds the viewport */
.modal-content {
overflow: auto;
max-height: 80%; /* Limit the height to ensure it stays within the viewport */
}
79 changes: 41 additions & 38 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,14 @@
<title>Developer Jounal</title>
<!-- FONTS -->

<!-- Main Stylesheet -->
<link rel="stylesheet" href="./assets/styles/styles.css">
<link rel="stylesheet" href="./assets/styles/project-card.css">

<!-- Web Components -->
<script src="./assets/components/project-card.js" type="module"></script>
<!-- SCRIPS -->
<script src="js/main.js"></script>

<!-- STYLESHEETS -->
<link rel="stylesheet" href="css/homepage.css">
<link rel="stylesheet" href="css/projectView.css">

<!-- Main Scripts -->
<script src="./assets/scripts/homepage.js" type="module"></script>
</head>

<body>
Expand All @@ -29,8 +28,40 @@
<!-- PROJECT CARDS SECTION -->
<div class="project-cards" id="project-cards-parent">

<!-- SIDEBAR -->
<div class="sidebar">
<!-- CALENDAR -->
<div class="sidebar-sec calendar">
<div class="cal-header">
<button id="cal-prev"></button>
<div class="monthYear" id="monthYear"></div>
<button id="cal-next"></button>
</div>

<div class="days">
<div class="day">Mon</div>
<div class="day">Tue</div>
<div class="day">Wed</div>
<div class="day">Thu</div>
<div class="day">Fri</div>
<div class="day">Sat</div>
<div class="day">Sun</div>
</div>
<div class="dates" id="dates"></div>
</div>

<!-- ACCOMPLISHMENTS -->
<div class="sidebar-sec accomplishments">

</div>
</div>
</div>


<div id="projectView" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Some context in the minipage</p>
</div>
</div>

Expand All @@ -45,38 +76,10 @@
<div class="bottom-tab">

</div>
<template>
<!-- Sample project card Item -->
<!-- <div class="project-card">
<p class="name">Warmup project</p>
<img class="project-image" src="assets/images/sample_project_card_image.png"
alt="Fjallraven - Foldstack No. 1 Backpack, Fits 15 Laptops">
<div class="desc">a project</div>
<div class="progress-bar">
<div class="progress-bar-fill">
12
</div>

</div>
<div class="actions">
<button onclick="{
const pbf = this.parentNode.parentNode.querySelector(
'.progress-bar > .progress-bar-fill'
);
var progress = Number(pbf.innerText);
if (progress >= 100) {
progress = 0;
} else {
progress= progress+Math.floor(Math.random()*10);
}
console.log(progress);
pbf.style.width = progress + '%';
pbf.innerText = progress;
}">progress + random</button>
<button onclick="alert('open click')">open</button>
<button onclick="alert('options click')">options</button>
</div> -->
</template>

<script src="js/calendar.js"></script>

</body>

</html>
52 changes: 52 additions & 0 deletions js/calendar.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
const monthYearElement = document.getElementById('monthYear');
const datesElement = document.getElementById('dates');
const prevBttn = document.getElementById('cal-prev');
const nextBttn = document.getElementById('cal-next');

let currentDate = new Date();

const updateCalendar = () => {
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth();

const firstDay = new Date(currentYear, currentMonth, 0);
const lastDay = new Date(currentYear, currentMonth + 1, 0);
const totalDays = lastDay.getDate();
const firstDayIndex = firstDay.getDay();
const lastDayIndex = lastDay.getDay();

const monthYearString = currentDate.toLocaleString('default', {month: 'long', year: 'numeric'});
monthYearElement.textContent = monthYearString;

let datesHTML = '';

for (let i = firstDayIndex; i > 0; i--) {
const prevDate = new Date(currentYear, currentMonth, 0 - i + 1);
datesHTML += `<div class="date inactive">${prevDate.getDate()}</div>`;
}

for (let i = 1; i <= totalDays; i++) {
const date = new Date(currentYear, currentMonth, i);
const activeClass = date.toDateString() === new Date().
toDateString() ? 'active' : '';
datesHTML += `<div class="date ${activeClass}">${i}</div>`;
}

for (let i = 1; i <= 7 - lastDayIndex; i++) {
const nextDate = new Date(currentYear, currentMonth + 1, i);
datesHTML += `<div class="date inactive">${nextDate.getDate()}</div>`;
}

datesElement.innerHTML = datesHTML;
}
prevBttn.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() - 1);
updateCalendar();
})

nextBttn.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() + 1);
updateCalendar();
})

updateCalendar();
Loading

0 comments on commit 3d64f5c

Please sign in to comment.