Changed Calendar Layout

This commit is contained in:
James Dinh 2022-06-16 16:39:15 -07:00
parent 1f45038dd7
commit d6253e687e
2 changed files with 113 additions and 98 deletions

View File

@ -1238,18 +1238,23 @@ section {
max-width: 1100px;
}
#cal-parent {
display: flex;
flex-direction: row;
}
#cal-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
margin: auto;
width: 40%;
min-width: 400px !important;
height: auto;
justify-content: center;
padding: 10px 0 0;
}
.cal-card {
width: 33.3%;
width: 100%;
border-radius: 7px;
border: 1px solid white;
}
@ -1339,12 +1344,12 @@ section {
.event-entry {
display: flex;
flex: row nowrap;
height: 38px;
height: 30px;
margin-bottom: 7px;
}
.time-column {
width: 25%;
width: 35%;
height: 100%;
text-align: right;
}
@ -1360,15 +1365,21 @@ section {
color: gray;
}
#map-title {
.map-title {
font-size: 25px;
margin-bottom: 10px;
}
#map-div {
width: 60%;
height: auto;
}
#map-container {
border-radius: 10px;
padding: 3px;
height: 500px;
width: 100%;
height: 91.5%;
border: 1px solid white;
position: relative;
}

View File

@ -54,7 +54,7 @@
<label for="check" class="checkbtn">
<img src="img/bars.png" loading="lazy" height="17" width="25" alt="Bars"/>
</label>
<a onclick="check('01')" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
<a onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
<ul>
<li><a onclick="uncheck('check')" href="#event">Event</a></li>
<li><a onclick="uncheck('check')" href="#rules">Rules</a></li>
@ -237,7 +237,7 @@
<div id="checklist">
<input id="01" onclick="save()" type="checkbox" name="r" value="1">
<label for="01">
<p class="title">1. Sign up w/ this <a onclick="check('01')" class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7" title="Signup Form">form</a></p>
<p class="title">1. Sign up w/ this <a onclick="check('01'); save()" class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7" title="Signup Form">form</a></p>
</label>
<label for="01">
<p class="step-desc">- These questions are used to gauge your experience and skills so we can pair you with others</p>
@ -250,7 +250,7 @@
<div id="checklist">
<input id="02" onclick="save()" type="checkbox" name="r" value="2">
<label for="02">
<p class="title">2. Join the <a onclick="check('02')" class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></p>
<p class="title">2. Join the <a onclick="check('02'); save()" class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></p>
</label>
<label for="02">
<p class="step-desc">- Please change your nickname to your First and Last name</p>
@ -316,110 +316,114 @@
</article>
</div>
<article id="map-article">
<h2 id="map-title">Calendar</h2>
<div id="cal-container">
<div class="cal-card">
<div class="cal-entry">
<div class="cal-date" id="fri">
<span class="day-of-week">FRI</span>
<span class="cal-subtitle">8/12</span>
</div>
<div class="vertical-line"></div>
<div class="cal-desc">
<h3 class="cal-title">Community Room</h3>
<div class="event-list">
<div class="event-entry">
<div class="time-column">
<span class="event-time">4-5pm</span>
</div>
<div class="event-column">
<span class="event-title">Opening Ceremony</span>
<div id="cal-parent">
<article id="cal-container">
<h2 class="map-title">Calendar</h2>
<div class="cal-card">
<div class="cal-entry">
<div class="cal-date" id="fri">
<span class="day-of-week">FRI</span>
<span class="cal-subtitle">8/12</span>
</div>
<div class="vertical-line"></div>
<div class="cal-desc">
<h3 class="cal-title">Community Room</h3>
<div class="event-list">
<div class="event-entry">
<div class="time-column">
<span class="event-time">4-5pm</span>
</div>
<div class="event-column">
<span class="event-title">Opening Ceremony</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cal-card">
<div class="cal-entry">
<div class="cal-date" id="sat">
<span class="day-of-week">SAT</span>
<span class="cal-subtitle">8/13</span>
</div>
<div class="vertical-line"></div>
<div class="cal-desc">
<h3 class="cal-title">Study Room</h3>
<div class="event-list">
<div class="event-entry">
<div class="time-column">
<span class="event-time">10am-5:30pm</span>
<div class="cal-card">
<div class="cal-entry">
<div class="cal-date" id="sat">
<span class="day-of-week">SAT</span>
<span class="cal-subtitle">8/13</span>
</div>
<div class="vertical-line"></div>
<div class="cal-desc">
<h3 class="cal-title">Study Room</h3>
<div class="event-list">
<div class="event-entry">
<div class="time-column">
<span class="event-time">10am-5:30pm</span>
</div>
<div class="event-column">
<span class="event-title">In-Person Hacking Session</span>
</div>
</div>
<div class="event-column">
<span class="event-title">In-Person Hacking Session</span>
<div class="event-entry">
<div class="time-column">
<span class="event-time">11am-12pm</span>
</div>
<div class="event-column">
<span class="event-title">Web Dev Workshop</span>
</div>
</div>
</div>
<div class="event-entry">
<div class="time-column">
<span class="event-time">11am-12pm</span>
</div>
<div class="event-column">
<span class="event-title">Web Dev Workshop</span>
</div>
</div>
<div class="event-entry">
<div class="time-column">
<span class="event-time">2-3pm</span>
</div>
<div class="event-column">
<span class="event-title">Python Workshop</span>
<div class="event-entry">
<div class="time-column">
<span class="event-time">2-3pm</span>
</div>
<div class="event-column">
<span class="event-title">Python Workshop</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cal-card">
<div class="cal-entry">
<div class="cal-date" id="sun">
<span class="day-of-week">SUN</span>
<span class="cal-subtitle">8/14</span>
</div>
<div class="vertical-line"></div>
<div class="cal-desc">
<h3 class="cal-title">Community Room</h3>
<div class="event-list">
<div class="event-entry">
<div class="time-column">
<span class="event-time">1-2pm</span>
<div class="cal-card">
<div class="cal-entry">
<div class="cal-date" id="sun">
<span class="day-of-week">SUN</span>
<span class="cal-subtitle">8/14</span>
</div>
<div class="vertical-line"></div>
<div class="cal-desc">
<h3 class="cal-title">Community Room</h3>
<div class="event-list">
<div class="event-entry">
<div class="time-column">
<span class="event-time">1-2pm</span>
</div>
<div class="event-column">
<span class="event-title">In-Person Hacking Session</span>
</div>
</div>
<div class="event-column">
<span class="event-title">In-Person Hacking Session</span>
<div class="event-entry">
<div class="time-column">
<span class="event-time">2:30-3:30pm</span>
</div>
<div class="event-column">
<span class="event-title">Project Presentations</span>
</div>
</div>
</div>
<div class="event-entry">
<div class="time-column">
<span class="event-time">2:30-3:30pm</span>
</div>
<div class="event-column">
<span class="event-title">Project Presentations</span>
</div>
</div>
<div class="event-entry">
<div class="time-column">
<span class="event-time">4-4:30pm</span>
</div>
<div class="event-column">
<span class="event-title">Awards Ceremony</span>
<div class="event-entry">
<div class="time-column">
<span class="event-time">4-4:30pm</span>
</div>
<div class="event-column">
<span class="event-title">Awards Ceremony</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="map-container">
<div id="map"></div>
<!-- <div id="community-room"><img id="com-room-img" src="img/GL_Community_Room.jpg"></div> -->
</article>
<article id="map-div">
<h2 class="map-title">Map</h2>
<div id="map-container">
<div id="map"></div>
</div>
</article>
</div>
</article>
</section>
@ -607,7 +611,7 @@
<div class="team-description">
<h4 class="person-name">Jonathan Tessman</h4>
<h5 class="person-subtitle">Finance Manager</h5>
<h5 class="person-contact"><span class="discord-text">Discord</span>: Alsace<span class="discord-tag">#5031</span><br><a class="link" target="_blank" href="mailto:" title="Email">[Email]</a></h5>
<h5 class="person-contact"><span class="discord-text">Discord</span>: Alsace<span class="discord-tag">#5031</span></h5>
</div>
</div>
</article>
@ -666,7 +670,7 @@
<!--Footer-->
<footer>
<ul>
<li><a class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></li>
<li><a class="link" onclick="check('02'); save()" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></li>
<li><a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">Contact Us</a></li>
<li><a class="link" target="_blank" href="https://forms.gle/jhVFg4hN42k7EMZs7" title="Volunteer Signup Form">Volunteer Signup</a></li>
</ul>