style: improve ue detail infos appearance

pedagogy/static/pedagogy/css/pedagogy.scss

@@ -9,44 +9,18 @@ $pedagogy-light-blue: #caf0ff;
 $pedagogy-white-text: #f0f0f0;
 
 .pedagogy {
-  &.star-not-checked {
-    color: #f7f7f7;
+  .star-not-checked {
+    color: lightgray;
     margin-bottom: 0;
     margin-top: 0;
   }
 
-  &.star-checked {
+  .star-checked {
     color: $pedagogy-orange;
     margin-bottom: 0;
     margin-top: 0;
   }
 
-  &.grade-without-star {
-    display: none;
-  }
-
-  @media screen and (max-width: $large-devices) {
-    &.star-not-checked {
-      margin-left: 5px;
-      margin-right: 5px;
-    }
-
-    &.star-checked {
-      margin-left: 5px;
-      margin-right: 5px;
-    }
-  }
-
-  @media screen and (max-width: $small-devices) {
-    &.grade-without-star {
-      display: block;
-    }
-
-    &.grade-with-star {
-      display: none;
-    }
-  }
-
   #ue-list {
     font-size: 1.1em;
 
@@ -64,12 +38,10 @@ $pedagogy-white-text: #f0f0f0;
   }
 
   #search_form {
-
     .radio-guide fieldset {
       input[type="checkbox"] {
         display: none;
       }
-
       margin-top: 10px;
       margin-bottom: 0;
       color: white;
@@ -85,58 +57,65 @@ $pedagogy-white-text: #f0f0f0;
     }
   }
 
-  #ue_detail {
-    color: #062f38;
-
-    .ue-quick-info-container {
+  &#ue_detail {
+    .ue-infos {
+      display: flex;
+      gap: 2em;
+      flex-direction: row;
+      @media screen and (max-width: 700px) {
+        flex-direction: column;
+      }
+    }
+    .infos-column {
+      display: flex;
+      flex-direction: column;
+      gap: 1em;
+      min-width: 300px;
+    }
+    .info-container {
+      // Darken the background color just enough to make this part
+      // stand out a little, while not being too perceptible
+      background: darken($white-color, 1%);
       display: grid;
-      grid-template-columns: 20% 20% 20% 20% auto;
-      grid-template-rows: auto auto;
-      grid-template-areas:
-      "hours-cm hours-td hours-tp hours-te hours-the"
-      "department credit-type semester . .";
+      grid-template-columns: 1fr 1fr;
+      border-radius: 5px;
+      padding: .75rem 1rem ;
+      grid-gap: .5rem;
+      @include shadow;
+
+      .info-container-item {
+        display: grid;
+        grid-column: span 2;
+        grid-template-rows: subgrid;
+        grid-template-columns: subgrid;
+        grid-column-gap: 1rem;
+
+        div {
+          display: flex;
+          align-items: center;
+        }
+
+        :first-child {
+          justify-content: right;
+          text-align: right;
+        }
+      }
+
+      hr {
+        grid-column: span 2;
+        width: 50%;
+        margin: auto;
+      }
     }
 
-    .department {
-      grid-area: department;
-    }
-
-    .credit-type {
-      grid-area: credit-type;
-    }
-
-    .semester {
-      grid-area: semester;
-    }
-
-    .hours-cm {
-      grid-area: hours-cm;
-    }
-
-    .hours-td {
-      grid-area: hours-td;
-    }
-
-    .hours-tp {
-      grid-area: hours-tp;
-    }
-
-    .hours-te {
-      grid-area: hours-te;
-    }
-
-    .hours-the {
-      grid-area: hours-the;
-    }
-
-    .leave-comment-not-allowed {
+    #leave_comment_not_allowed {
       p {
         text-align: center;
         color: red;
       }
     }
 
-    .leave-comment {
+    #leave_comment {
       .leave-comment-grid-container {
         display: grid;
         grid-template-columns: 270px auto;
@@ -171,42 +150,6 @@ $pedagogy-white-text: #f0f0f0;
       }
     }
 
-    .ue-details-container {
-      display: grid;
-      grid-template-columns: 150px 130px auto;
-      grid-template-rows: 156px 1fr;
-      grid-template-areas:
-      "grade grade-stars ue-infos"
-      ". . ue-infos";
-
-      @media screen and (max-width: $large-devices) {
-        grid-template-columns: 50% 50%;
-        grid-template-rows: auto auto;
-        grid-template-areas:
-        "grade grade-stars"
-        "ue-infos ue-infos";
-      }
-    }
-
-    .grade {
-      grid-area: grade;
-      color: $pedagogy-white-text;
-      background-color: $pedagogy-blue;
-      padding-right: 10px;
-
-      >p {
-        text-align: right;
-        font-weight: bold;
-      }
-    }
-
-    .grade-stars {
-      grid-area: grade-stars;
-      color: $pedagogy-white-text;
-      background-color: $pedagogy-blue;
-      font-weight: bold;
-    }
-
     .ue-infos {
       grid-area: ue-infos;
       padding-left: 10px;