Merge pull request #69 from AAU-P5-Moodle/31-homework-student-feature…

…-pretify-the-preparation-feed 31 homework student feature pretify the preparation feed
AAU-P5-Moodle · Nov 28, 2024 · 7357e6e · 7357e6e
2 parents 306ea75 + 85cfaab
commit 7357e6e
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 26 deletions.
diff --git a/server/moodle/blocks/homework/styles.css b/server/moodle/blocks/homework/styles.css
@@ -1,34 +1,96 @@
-.outer-box{
+.outer-box {
+    position: relative;
     display: flex;
-    overflow-x: hidden;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    column-gap: 10px;
+    overflow: hidden;
+    border: none;
+    padding: 10px 0;
+    width: 100%;
+}
+
+.outer-box .expectedtime {
+    font-size: 18px;
+}
+
+.infobox {
+    position: relative;
+    border-radius: 5px;
+    padding: 10px;
+    border: 1px solid #000;
     white-space: nowrap;
+}
+
+.infobox:last-of-type {
+    margin-right: 0;
+}
+
+.infobox p:not(.eta) {
+    padding: 5px 2px;
     border: 1px solid #000;
-    padding: 10px;
-    width: 80%;
-    margin: auto;
+    margin-bottom: 10px;
+    white-space: break-spaces;
+}
+
+.infobox .infoboxfiles {
+    display: flex;
+    align-items: flex-start;
+    border: solid 1px #000;
+    margin-bottom: 10px;
+    padding: 5px 2px;
+    overflow: hidden;
+}
+
+.infobox .infoboxfiles .link a {
+    display: block;
+    width: 190px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
-.infobox{
-    flex: 0 0 200px;
-    margin-right: 10px;
-    background-color: #f1f1f1;
-    padding: 20px;
-    border: 1px solid #ccc;
+
+.infobox .infoboxfiles p.eta {
+    font-size: 0.625rem;
+    margin: 0;
 }
+
+.infobox .infoboxfiles img {
+    max-width: 20px;
+}
+
 .nav-btn {
-    background-color: #000;
-    color: #fff;
-    border: none;
+    border-radius: 5px;
+    background-color: #D9D9D9;
+    border: 1px solid #000;
     padding: 10px 20px;
-    cursor: pointer;
-    font-size: 18px;
 }
 
-.btncontainer{
+#prevbtn, #nextbtn {
+    padding: 1px 20px;
+}
+
+.btncontainer {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     padding: 10px;
 }
+
+.inline-container {
+    display: flex;
+    gap: min(20px);
+    justify-content: space-between;
+    align-items: center; /* Vertically aligns items */
+}
+
+.inline-container .name {
+    font-size: 18px;
+}
+
+.inline-container .duedate {
+    font-size: 18px;
+}
 /* CSS for the time taking modal */
 #info-homework-modal .homeworkmaterialcontainer{
     display: flex;

diff --git a/server/moodle/blocks/homework/templates/data.mustache b/server/moodle/blocks/homework/templates/data.mustache
@@ -19,10 +19,10 @@
 
 <div class="container">
 
-    <div class="btn-container">
-        <button class="nav-btn" id="todaybtn">today</button>
-        <button class="nav-btn" id="prevbtn"><-</button>
-        <button class="nav-btn" id="nextbtn">-></button>
+    <div class="btn-container float-end">
+        <button class="nav-btn" id="todaybtn">Today</button>
+        <button class="nav-btn" id="prevbtn"><</button>
+        <button class="nav-btn" id="nextbtn">></button>
         <label for="sort">Sort By:</label>
         <select name="sort" id="sort">
             <option value="all">All</option>
@@ -42,20 +42,26 @@
         {{#data}}
             <div class="infobox">
                 <h2>{{courseTitle}}</h2>
-                <h2>{{name}}</h2>
-                <h3>{{duedate}}</h3>
-                <h4>Expected time: {{expectedTime}} minutes</h4>
+                <div class="inline-container">
+                    <h2 class="name">{{name}}</h2>
+                    <h3 class="duedate">{{duedate}}</h3>
+                </div>
+                <h4 class="expectedtime">Expected time: {{expectedTime}} minutes</h4>
                 <p>{{intro}}</p>
-                <button class="timebutton" data-homework-id={{id}} id="{{id}}"">Time</button>
                 {{#files}}
+                    <div class="infoboxfiles">
                     <img src="{{iconurl}}" alt="File icon">
+                        <div class="link">
                     <a href="{{fileurl}}" download="{{filename}}">{{filename}}</a>
 
                     <!-- Conditionally show a time estimate if it exists -->
                         {{#timeestimate}}
-                            <p>Estimated time in minutes: {{timeestimate}}</p>
+                            <p class="eta">Estimated time in minutes: {{timeestimate}}</p>
                         {{/timeestimate}}
+                        </div>
+                    </div>
                 {{/files}}
+                <button class="timebutton" data-homework-id={{id}} id="{{id}}">Time</button>
             </div>
         {{/data}}
     </div>