Add redesign for Homework 4c.

scss/style.scss

@@ -22,7 +22,7 @@ body {
 
 .split-elem {
     flex-grow: 1;
-    flex-shrink: 0;
+    flex-shrink: 1;
     flex-basis: 40%;
     margin: 0.25rem;
 }
@@ -36,15 +36,20 @@ body {
     margin-top: 1rem;
     box-shadow: 0px 0px 5px rgba(grey, 0.1);
     box-sizing: border-box;
+    width: 100%;
 }
 
 .class-table {
     border-collapse: collapse;
+    table-layout: fixed;
 
     th, td {
         padding: 0.5rem;
         padding-left: 1rem;
         padding-right: 1rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     th {
@@ -54,17 +59,9 @@ body {
     tr {
         transition: background-color 0.2s;
 
-        &:nth-child(2n+3) {
-            background-color: $off-color;
-        }
-
         &.hoverable:hover {
             background-color: lighten(yellow, 30%);
         }
-
-        &.selected {
-            border: 1px dashed black;
-        }
     }
 }
 
@@ -87,24 +84,17 @@ body {
     vertical-align: middle;
 }
 
-.color-green {
-    background-color: lighten(#5bc275, 30%);
-    border-color: #5bc275;
-    color: darken(#5bc275, 30%);
-}
-
-.color-red {
-    background-color: lighten(#c25b75, 30%);
-    border-color: #c25b75;
-    color: darken(#c25b75, 30%);
-}
-
 .week-grid {
     display: grid;
     width: 100%;
     height: 70vh;
     grid-template-columns: auto repeat(5, 1fr);
-    grid-template-rows: auto repeat(10, 1fr);
+    grid-template-rows: auto repeat(12, 1fr);
+
+    .selected {
+        border-style: dashed;
+        border-width: 2px;
+    }
 }
 
 .course-block {
@@ -114,11 +104,6 @@ body {
     padding: 0.25rem;
     box-sizing: border-box;
 
-    &.selected {
-        border-style: dashed;
-        border-width: 2px;
-    }
-
     p {
         margin-top: 0.1rem;
         margin-bottom: 0.1rem;
@@ -146,3 +131,80 @@ body {
 .time-column {
     padding-right: 1rem;
 }
+
+.bubble {
+    padding: 0.2rem;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    border: 0.1rem solid;
+    border-radius: 0.5rem;
+    margin-right: 0.5rem;
+    background-color: lighten(#86b2ff, 10%);
+    border-color: #86b2ff;
+    white-space: nowrap;
+}
+
+.course {
+    padding: 1rem;
+    display: flex;
+
+    &.selected {
+        border-style: dashed;
+        border-width: 2px;
+    }
+
+    &:nth-child(2n) {
+        background-color: $off-color;
+    }
+
+    &.selected {
+        border: 1px dashed black;
+    }
+
+    p {
+        margin: 0;
+    }
+}
+
+.course-content {
+    flex-grow: 1;
+}
+
+.course-add-remove {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.course-title {
+    font-weight: bold;
+    font-size: 1.1rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 40vw;
+}
+
+p.course-info {
+    margin-top: 0.5rem;
+    display: flex;
+}
+
+.feather {
+    height: 1.3rem;
+    stroke-width: 0.15rem;
+    margin-right: 0.1rem;
+    vertical-align: middle;
+}
+
+.color-green {
+    background-color: lighten(#5bc275, 30%);
+    border-color: #5bc275;
+    color: darken(#5bc275, 30%);
+}
+
+.color-red {
+    background-color: lighten(#c25b75, 30%);
+    border-color: #c25b75;
+    color: darken(#c25b75, 30%);
+}