added css to schedule

zjf19002 · Oct 18, 2023 · 860c226 · 860c226
1 parent 3d1eb0d
commit 860c226
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 14 deletions.
diff --git a/class_registration_app/src/components/DashBoard.vue b/class_registration_app/src/components/DashBoard.vue
@@ -14,7 +14,6 @@
             <RouterLink to="./courses">
             <button class="uconn-button">Course Search</button>
             </RouterLink>
-
             <button class="uconn-button">Current Classes</button>
         </div>
     </div>

diff --git a/class_registration_app/src/components/ScheduleView.vue b/class_registration_app/src/components/ScheduleView.vue
@@ -2,16 +2,115 @@
 </script>
 
 <template>
-    <div id="head">Uconn</div>
-    <div id=week>
-        <div id = time-column>Time</div>
-        <div class="day">M</div>
-        <div class="day">T</div>
-        <div class="day">W</div>
-        <div class="day">Th</div>
-        <div class="day">F</div>
-    </div>
-    <div id="cur">
-
-    </div>
-</template>
+    <section>
+    <div class="month">
+        <ul>
+          <li class="prev">&#10094;</li>
+          <li class="next">&#10095;</li>
+          <li>October<br><span style="font-size:18px">2023</span></li>
+        </ul>
+      </div>
+
+      <ul class="weekdays">
+        <li>Mo</li>
+        <li>Tu</li>
+        <li>We</li>
+        <li>Th</li>
+        <li>Fr</li>
+        <li>Sa</li>
+        <li>Su</li>
+      </ul>
+
+      <ul class="days">
+        <li><span class="active">1</span></li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+      </ul>
+
+    </section>
+</template>
+
+<style scoped>
+section{
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+}
+
+/* Month header */
+.month {
+    padding: 10px 25px;
+    width: 100%;
+    background: navy;
+    text-align: center;
+  }
+  
+  /* Month list */
+  .month ul {
+    margin: 0;
+    padding: 0;
+  }
+  
+  .month ul li {
+    color: white;
+    font-size: 20px;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+  }
+  
+  /* Previous button inside month header */
+  .month .prev {
+    float: left;
+    padding-top: 10px;
+  }
+  
+  /* Next button */
+  .month .next {
+    float: right;
+    padding-top: 10px;
+  }
+  
+  /* Weekdays (Mon-Sun) */
+  .weekdays {
+    margin: 0;
+    padding: 10px 0;
+    background-color:#ddd;
+  }
+  
+  .weekdays li {
+    display: inline-block;
+    width: 13.6%;
+    color: #666;
+    text-align: center;
+  }
+  
+  /* Days (1-31) */
+  .days {
+    padding: 10px 0;
+    background: #eee;
+    margin: 0;
+  }
+  
+  .days li {
+    list-style-type: none;
+    display: inline-block;
+    width: 13.6%;
+    text-align: center;
+    margin-bottom: 5px;
+    font-size:12px;
+    color: #777;
+  }
+  
+  /* Highlight the "current" day */
+  .days li .active {
+    padding: 5px;
+    background: #1abc9c;
+    color: white !important
+  }
+</style>