updated styles.css and data.mustache

Made dashboard work when showing attached files
AAU-P5-Moodle · Nov 27, 2024 · 85cfaab · 85cfaab
1 parent c11770e
commit 85cfaab
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 11 deletions.
diff --git a/server/moodle/blocks/homework/styles.css b/server/moodle/blocks/homework/styles.css
@@ -10,6 +10,10 @@
     width: 100%;
 }
 
+.outer-box .expectedtime {
+    font-size: 18px;
+}
+
 .infobox {
     position: relative;
     border-radius: 5px;
@@ -22,9 +26,37 @@
     margin-right: 0;
 }
 
-.infobox p {
+.infobox p:not(.eta) {
     padding: 5px 2px;
     border: 1px solid #000;
+    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 .infoboxfiles p.eta {
+    font-size: 0.625rem;
+    margin: 0;
+}
+
+.infobox .infoboxfiles img {
+    max-width: 20px;
 }
 
 .nav-btn {
@@ -47,8 +79,9 @@
 
 .inline-container {
     display: flex;
+    gap: min(20px);
+    justify-content: space-between;
     align-items: center; /* Vertically aligns items */
-    gap: 20px; /* Adds space between name and duedate */
 }
 
 .inline-container .name {

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>