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

View File

@ -54,7 +54,7 @@
<label for="check" class="checkbtn"> <label for="check" class="checkbtn">
<img src="img/bars.png" loading="lazy" height="17" width="25" alt="Bars"/> <img src="img/bars.png" loading="lazy" height="17" width="25" alt="Bars"/>
</label> </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> <ul>
<li><a onclick="uncheck('check')" href="#event">Event</a></li> <li><a onclick="uncheck('check')" href="#event">Event</a></li>
<li><a onclick="uncheck('check')" href="#rules">Rules</a></li> <li><a onclick="uncheck('check')" href="#rules">Rules</a></li>
@ -237,7 +237,7 @@
<div id="checklist"> <div id="checklist">
<input id="01" onclick="save()" type="checkbox" name="r" value="1"> <input id="01" onclick="save()" type="checkbox" name="r" value="1">
<label for="01"> <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>
<label for="01"> <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> <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"> <div id="checklist">
<input id="02" onclick="save()" type="checkbox" name="r" value="2"> <input id="02" onclick="save()" type="checkbox" name="r" value="2">
<label for="02"> <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>
<label for="02"> <label for="02">
<p class="step-desc">- Please change your nickname to your First and Last name</p> <p class="step-desc">- Please change your nickname to your First and Last name</p>
@ -316,110 +316,114 @@
</article> </article>
</div> </div>
<article id="map-article"> <article id="map-article">
<h2 id="map-title">Calendar</h2> <div id="cal-parent">
<div id="cal-container"> <article id="cal-container">
<div class="cal-card"> <h2 class="map-title">Calendar</h2>
<div class="cal-entry"> <div class="cal-card">
<div class="cal-date" id="fri"> <div class="cal-entry">
<span class="day-of-week">FRI</span> <div class="cal-date" id="fri">
<span class="cal-subtitle">8/12</span> <span class="day-of-week">FRI</span>
</div> <span class="cal-subtitle">8/12</span>
<div class="vertical-line"></div> </div>
<div class="cal-desc"> <div class="vertical-line"></div>
<h3 class="cal-title">Community Room</h3> <div class="cal-desc">
<div class="event-list"> <h3 class="cal-title">Community Room</h3>
<div class="event-entry"> <div class="event-list">
<div class="time-column"> <div class="event-entry">
<span class="event-time">4-5pm</span> <div class="time-column">
</div> <span class="event-time">4-5pm</span>
<div class="event-column"> </div>
<span class="event-title">Opening Ceremony</span> <div class="event-column">
<span class="event-title">Opening Ceremony</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="cal-card">
<div class="cal-card"> <div class="cal-entry">
<div class="cal-entry"> <div class="cal-date" id="sat">
<div class="cal-date" id="sat"> <span class="day-of-week">SAT</span>
<span class="day-of-week">SAT</span> <span class="cal-subtitle">8/13</span>
<span class="cal-subtitle">8/13</span> </div>
</div> <div class="vertical-line"></div>
<div class="vertical-line"></div> <div class="cal-desc">
<div class="cal-desc"> <h3 class="cal-title">Study Room</h3>
<h3 class="cal-title">Study Room</h3> <div class="event-list">
<div class="event-list"> <div class="event-entry">
<div class="event-entry"> <div class="time-column">
<div class="time-column"> <span class="event-time">10am-5:30pm</span>
<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>
<div class="event-column"> <div class="event-entry">
<span class="event-title">In-Person Hacking Session</span> <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> <div class="event-entry">
<div class="event-entry"> <div class="time-column">
<div class="time-column"> <span class="event-time">2-3pm</span>
<span class="event-time">11am-12pm</span> </div>
</div> <div class="event-column">
<div class="event-column"> <span class="event-title">Python Workshop</span>
<span class="event-title">Web Dev Workshop</span> </div>
</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> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="cal-card">
<div class="cal-card"> <div class="cal-entry">
<div class="cal-entry"> <div class="cal-date" id="sun">
<div class="cal-date" id="sun"> <span class="day-of-week">SUN</span>
<span class="day-of-week">SUN</span> <span class="cal-subtitle">8/14</span>
<span class="cal-subtitle">8/14</span> </div>
</div> <div class="vertical-line"></div>
<div class="vertical-line"></div> <div class="cal-desc">
<div class="cal-desc"> <h3 class="cal-title">Community Room</h3>
<h3 class="cal-title">Community Room</h3> <div class="event-list">
<div class="event-list"> <div class="event-entry">
<div class="event-entry"> <div class="time-column">
<div class="time-column"> <span class="event-time">1-2pm</span>
<span class="event-time">1-2pm</span> </div>
<div class="event-column">
<span class="event-title">In-Person Hacking Session</span>
</div>
</div> </div>
<div class="event-column"> <div class="event-entry">
<span class="event-title">In-Person Hacking Session</span> <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> <div class="event-entry">
<div class="event-entry"> <div class="time-column">
<div class="time-column"> <span class="event-time">4-4:30pm</span>
<span class="event-time">2:30-3:30pm</span> </div>
</div> <div class="event-column">
<div class="event-column"> <span class="event-title">Awards Ceremony</span>
<span class="event-title">Project Presentations</span> </div>
</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> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </article>
</div> <article id="map-div">
<div id="map-container"> <h2 class="map-title">Map</h2>
<div id="map"></div> <div id="map-container">
<!-- <div id="community-room"><img id="com-room-img" src="img/GL_Community_Room.jpg"></div> --> <div id="map"></div>
</div>
</article>
</div> </div>
</article> </article>
</section> </section>
@ -607,7 +611,7 @@
<div class="team-description"> <div class="team-description">
<h4 class="person-name">Jonathan Tessman</h4> <h4 class="person-name">Jonathan Tessman</h4>
<h5 class="person-subtitle">Finance Manager</h5> <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>
</div> </div>
</article> </article>
@ -666,7 +670,7 @@
<!--Footer--> <!--Footer-->
<footer> <footer>
<ul> <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="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> <li><a class="link" target="_blank" href="https://forms.gle/jhVFg4hN42k7EMZs7" title="Volunteer Signup Form">Volunteer Signup</a></li>
</ul> </ul>