Skip to content

Commit

Permalink
552 update project team meetings page (#586)
Browse files Browse the repository at this point in the history 
* added a new p tag containing the sub-header info and fixed the meetings-message p-tag text

* placed h1 and p in header on project-meetings page

* project-page-header and the covid-notifcation-banner have their own divs

* partial styling for project meeting banner and text

* style changes made to project meeting banner, covid notification banner, made it so calendar started page was linking to something and took away margin-top of 29px

* added project meetings banner to assets/images directory

* fixed formatting issues on lines 54 and 55 that caused project times to not show

* added image for banner, attached banner image as background-image for banner in projects meetings page, added a media query for the paragraph text for desktop screensize

* adjusted styling for >1400px desktop and mobile per Sunday meeting descision
  • Loading branch information
Hannah L authored Jun 24, 2020
1 parent 98dcc4f commit be743cf
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 70 deletions.
86 changes: 74 additions & 12 deletions _sass/components/project-meetings.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,66 @@
.project-meetings-banner {
background: no-repeat url('/assets/images/project-meetings-page/project-meetings-banner-image.png'), $color-white;
background-position: center bottom 40px;
background-size: auto 45%;
height: 500px;
margin-top: 20px;
display: flex;
flex-direction: column;
position: relative;

@media (max-width: $screen-mobile) {
height: 80vh;
background-size: auto 30%;
}

.project-meetings-header-text-container {
padding: 70px 0 0 0px;
display: flex;
flex-direction:column;
align-items: center;

h1 {
color: #000000;
font-weight: normal;
text-align: center;
}
p {
width: 80%;
margin:auto;

@media (min-width: $screen-desktop) {
width: 65%;
}

@media (min-width: 1300px) {
width: 40%;
}

@media (max-width: $screen-mobile) {
font-size: .9rem;
}
}

}

}

.covid-notification-banner {
background-color: #f2c94d;
width: 100%;
display: flex;
justify-content: center;
align-content: center;

p {
text-align: center;
font-weight: bold;
margin: 0;
padding: 15px 0;
}
}

.calendar-started-page {
margin-top: 29px;
background: #030d2d;
min-height: 100vh;
display: flex;
Expand All @@ -10,9 +71,9 @@

.calendar-page-card {
background: #fff;
border: 0 solid rgba(51,51,51,0.06);
border: 0 solid rgba(51, 51, 51, 0.06);
border-radius: 16px;
box-shadow: 0 0 8px 0 rgba(51,51,51,0.2);
box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2);
overflow: hidden;
max-width: 896px;
width: 100%;
Expand All @@ -29,15 +90,16 @@

.schedule-list {
list-style: none;

li:before {
content: "\2022";
color: #fa114f;
font-weight: bold;
font-size: 28px;
display: inline-block;
width: 0.60em;
margin-left: -0.6em;
vertical-align: middle;
content: "\2022";
color: #fa114f;
font-weight: bold;
font-size: 28px;
display: inline-block;
width: 0.60em;
margin-left: -0.6em;
vertical-align: middle;
}
}

Expand All @@ -57,7 +119,7 @@
// NEW MOBILE FRIENDLY RULES
@media #{$bp-below-mobile} {
margin-top: 60px;
}
}
}

.meetings-message {
Expand Down
Binary file added assets/images/project-meetings-page/project-meetings-banner-image.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
149 changes: 91 additions & 58 deletions project-meetings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,22 @@
layout: default
title: Project Meetings
---
<div class='content-section getting-started-page'>
<h1 class='team-meetings-title'>Project Team Meetings</h1>
<!-- <div class='content-section'> -->
<div class='project-meetings-banner'>
<div class='project-meetings-header-text-container'>
<h1 class='team-meetings-title'>Project Team Meetings</h1>
<p>Please review the listing of project team meeting times to find a project that fits your schedule.
You are welcome to attend a project team meeting after you have completed <a href='https://www.hackforla.org/getting-started'>Onboarding</a>.
Details about a team's meeting can be obtained in each team's slack channel.
</p>
<!--<img src="./assets/images/project-meetings-page/project-meetings-banner-image.png" alt="project meetings banner image">-->
</div>
</div>
<div class='covid-notification-banner'>
<p class='meetings-message'>All meetings are currently online due to COVID19.</p>
</div>
<div class='content-section calendar-started-page'>
<div class='calendar-page-card'>
<p class='meetings-message'>All meetings are currently online due to COVID19.<br>Details about a team’s meeting can be obtained in each team’s slack channel.</p>
<div id="Monday">
<h3 class='day-header'>Monday</h3>
<ul id="Monday-List" class="schedule-list"></ul>
Expand Down Expand Up @@ -35,6 +47,7 @@ <h3 class='day-header'>Sunday</h3>
<ul id="Sunday-List" class="schedule-list"></ul>
</div>
</div>
<!-- </div> -->
</div>

<script>
Expand All @@ -54,36 +67,38 @@ <h3 class='day-header'>Sunday</h3>
const sundayList = document.querySelector("#Sunday-List");

// GET request
let calendarFetch = fetch(API_URL, {method: 'GET'});
let calendarFetch = fetch(API_URL, {
method: 'GET'
});

// Function schedules data that is passed in
function schedule(scheduleData) {
let daysReceived = [];
let days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
let daysMatched = [];

// Loops through data and assigns information to variables in a readable format
for (let i = 0; i <= scheduleData.length - 1; i++) {
let startTime = timeFormat(new Date(scheduleData[i].startTime));
let endTime = timeFormat(new Date(scheduleData[i].endTime));
let webURL = scheduleData[i].project.hflaWebsiteUrl;
let projectName = scheduleData[i].project.name;
let description = scheduleData[i].description;
let day = new Date(scheduleData[i].date).toString().substring(0,3);
let day = new Date(scheduleData[i].date).toString().substring(0, 3);
let scheduleClass;

// Fills up array of days received to later check if any days are missing
daysReceived.push(day);

// Checks if days received matches days of the week
for (let j = 0; j <= daysReceived.length - 1; j ++) {
for (let k = 0; k <= days.length - 1; k++) {
for (let j = 0; j <= daysReceived.length - 1; j++) {
for (let k = 0; k <= days.length - 1; k++) {
if (daysReceived[j] == days[k]) {
daysMatched.push(days[k]);
}
}
}

// Function that adds data to proper header
function scheduleDay() {
let dayList;
Expand All @@ -93,17 +108,27 @@ <h3 class='day-header'>Sunday</h3>
} else {
scheduleClass = "updated";
}
if ((day === "Mon")) {dayList = mondayList;}
else if ((day === "Tue")) {dayList = tuesdayList;}
else if ((day === "Wed")) {dayList = wednesdayList;}
else if ((day === "Thu")) {dayList = thursdayList;}
else if ((day === "Fri")) {dayList = fridayList;}
else if ((day === "Sat")) {dayList = saturdayList;}
else if ((day === "Sun")) {dayList = sundayList;}

dayList.insertAdjacentHTML("beforeend", `<li class="${scheduleClass}">${startTime} - ${endTime} <a href="${webURL}">${projectName}</a> ${description}</li>`);
if ((day === "Mon")) {
dayList = mondayList;
} else if ((day === "Tue")) {
dayList = tuesdayList;
} else if ((day === "Wed")) {
dayList = wednesdayList;
} else if ((day === "Thu")) {
dayList = thursdayList;
} else if ((day === "Fri")) {
dayList = fridayList;
} else if ((day === "Sat")) {
dayList = saturdayList;
} else if ((day === "Sun")) {
dayList = sundayList;
}

dayList.insertAdjacentHTML("beforeend",
`<li class="${scheduleClass}">${startTime} - ${endTime} <a href="${webURL}">${projectName}</a> ${description}</li>`
);
}

scheduleDay(day);
}

Expand All @@ -117,40 +142,50 @@ <h3 class='day-header'>Sunday</h3>
if (emptyDays) {
// Function passes in array of days that outputs an li element w/ "There are no meeting scheduled" to days without meetings scheduled
function scheduleEmpty(emptyDays) {
for (let a = 0; a <= emptyDays.length -1; a++) {
let emptyDayList;
let day = emptyDays[a].toString();
// Assigns different class to data depending if it utilized local JSON file or the VRMS fetch data
if (scheduleData == localData) {
scheduleClass = "localData";
} else {
scheduleClass = "updated";
for (let a = 0; a <= emptyDays.length - 1; a++) {
let emptyDayList;
let day = emptyDays[a].toString();
// Assigns different class to data depending if it utilized local JSON file or the VRMS fetch data
if (scheduleData == localData) {
scheduleClass = "localData";
} else {
scheduleClass = "updated";
}
if ((day === "Mon")) {
emptyDayList = mondayList;
} else if ((day === "Tue")) {
emptyDayList = tuesdayList;
} else if ((day === "Wed")) {
emptyDayList = wednesdayList;
} else if ((day === "Thu")) {
emptyDayList = thursdayList;
} else if ((day === "Fri")) {
emptyDayList = fridayList;
} else if ((day === "Sat")) {
emptyDayList = saturdayList;
} else if ((day === "Sun")) {
emptyDayList = sundayList;
}

emptyDayList.insertAdjacentHTML("beforeend",
`<li class="${scheduleClass}">There are no meetings scheduled.</li>`);
}
if ((day === "Mon")) {emptyDayList = mondayList;}
else if ((day === "Tue")) {emptyDayList = tuesdayList;}
else if ((day === "Wed")) {emptyDayList = wednesdayList;}
else if ((day === "Thu")) {emptyDayList = thursdayList;}
else if ((day === "Fri")) {emptyDayList = fridayList;}
else if ((day === "Sat")) {emptyDayList = saturdayList;}
else if ((day === "Sun")) {emptyDayList = sundayList;}

emptyDayList.insertAdjacentHTML("beforeend", `<li class="${scheduleClass}">There are no meetings scheduled.</li>`);
}
}
// Executes empty schedule
scheduleEmpty(emptyDays)
// Executes empty schedule
scheduleEmpty(emptyDays)
}
}

// Function removes duplicates in an array
function removeDuplicates(array) {
return array.filter((a, b) => array.indexOf(a) === b)
};
return array.filter((a, b) => array.indexOf(a) === b)
};

// Function checks for differences between two arrays
function arr_diff (a1, a2) {
function arr_diff(a1, a2) {

let a = [], diff = [];
let a = [],
diff = [];

for (let i = 0; i < a1.length; i++) {
a[a1[i]] = true;
Expand Down Expand Up @@ -212,15 +247,15 @@ <h3 class='day-header'>Sunday</h3>
calendarFetch
.then(response => response.json())
.then((data) => {
// Checks for differences between localData and VRMS data
if (arr_diff(data, localData)) {
clearSchedule();
schedule(data);
}
})
.catch(err => {
console.log(err);
})
// Checks for differences between localData and VRMS data
if (arr_diff(data, localData)) {
clearSchedule();
schedule(data);
}
})
.catch(err => {
console.log(err);
})

// Formats time to be readable
function timeFormat(time) {
Expand All @@ -233,16 +268,14 @@ <h3 class='day-header'>Sunday</h3>

if (hours < 12) {
return `${hours}:${minutes} am`;
}
else if (hours > 12){
} else if (hours > 12) {
hours = hours - 12;
return `${hours}:${minutes} pm`;
}
else if (hours = 12){
} else if (hours = 12) {
return `${hours}:${minutes} pm`;
} else {
return `${hours}:${minutes} am`;
}

}
</script>
</script>

0 comments on commit be743cf

Please sign in to comment.