Merge pull request #38 from eddex/feat/improve-popup

improve popup styling
eddex · Feb 5, 2020 · f0d825e · f0d825e
2 parents 94b3bb3 + faea7af
commit f0d825e
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 63 deletions.
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "HSLU simple MEP results",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "Show the results of your exams in a simple list instead of the crappy default layout.",
   "icons": {
     "48": "icons/icon-48.png",

diff --git a/src/popup/popup.html b/src/popup/popup.html
@@ -6,7 +6,11 @@
 
 <body>
   <div class="grid-container-form">
-    <div class="grid-item custom-select">Moduletype</div>
+    <div class="grid-item">Name:</div>
+    <div class="grid-item">
+      <input id="moduleAcronym" type="text" value="" placeholder="Hackathon, Event, ...">
+    </div>
+    <div class="grid-item">Modultyp:</div>
     <div class="grid-item">
       <select id="moduleType" name="study">
         <option value="Kernmodul">Kernmodul</option>
@@ -16,27 +20,23 @@
         <option value="Zusatzmodul">Zusatzmodul</option>
       </select>
     </div>
-    <div class="grid-item">Kuerzel</div>
+    <div class="grid-item">Jahr:</div>
     <div class="grid-item">
-      <input id="moduleAcronym" type="text" value=""><br>
+      <select id="moduleYear"></select>
     </div>
-    <div class="grid-item">Durchfuehrung:</div>
+    <div class="grid-item">Semester:</div>
     <div class="grid-item radio-container">
-      <label class="container">H
-        <input type="radio" value="H" checked="checked" name="moduleImplementation">
-        <label class="container">F
-          <input type="radio" value="F" checked="checked" name="moduleImplementation">
-    </div>
-    <div class="grid-item">Durchfuehrungsjahr</div>
-    <div class="grid-item">
-      <select id="moduleYear"></select><br>
+      <input class="radio-button" type="radio" value="H" checked="checked" name="moduleImplementation" />
+      <label class="radio-text">Herbst</label>
+      <input class="radio-button" type="radio" value="F" checked="checked" name="moduleImplementation" />
+      <label class="radio-text">Frühling</label>
     </div>
-    <div class="grid-item">Bewertung</div>
+    <div class="grid-item">Note:</div>
     <div class="grid-item">
       <input type="number" id="moduleMark" name="grade" step="0.5" value="5" min="0" max="6">
-      <p class="comment">0 - für keine Bewertung</pclass="comment">
+      <p class="comment">[ 0 ] für keine Bewertung</p>
     </div>
-    <div class="grid-item">Grad</div>
+    <div class="grid-item">Grad:</div>
     <div class="grid-item">
       <select id="moduleGrade">
         <option>A</option>
@@ -47,20 +47,20 @@
         <option>F</option>
         <option>-</option>
       </select>
-      <p class="comment">- für keinen Grad</p>
+      <p class="comment">[ - ] für keinen Grad</p>
     </div>
-    <div class="grid-item">Credits</div>
+    <div class="grid-item">Credits:</div>
     <div class="grid-item">
-      <input type="number" id="moduleCredits" name="credits" value="3" min="1" max="15"><br>
+      <input type="number" id="moduleCredits" name="credits" value="3" min="1" max="15" />
     </div>
   </div>
   <div class="grid-container-buttons">
-    <input class="button" id="submitModule" type="submit" value="Save Modul">
-    <input class="button" id="removeModule" type="submit" value="Remove Module">
+    <div class="button-left"><input class="button" id="submitModule" type="submit" value="Modul speichern"></div>
+    <div class="button-right"><input class="button" id="removeModule" type="submit" value="Modul entfernen"></div>
   </div>
 
   <div>
-    <select hidden="" id="moduleList" name="list_box_name[]" size="number_of_options" multiple="single"></select>
+    <select class="customModulesList" hidden="" id="customModulesList" name="list_box_name[]" size="number_of_options" multiple="single"></select>
   </div>
   <script src="../components/helpers.js"></script>
   <script src="popup.js"></script>

diff --git a/src/popup/popup.js b/src/popup/popup.js
@@ -5,7 +5,7 @@ async function populateModuleList() {
     const moduleList = await getModuleList();
 
     // reset ModuleList
-    const selectModuleList = document.getElementById("moduleList");
+    const selectModuleList = document.getElementById("customModulesList");
     const selectParentNode = selectModuleList.parentNode;
     let newModuleList = selectModuleList.cloneNode(false); // Make a shallow copy
     selectParentNode.replaceChild(newModuleList, selectModuleList);
@@ -29,7 +29,7 @@ async function populateModuleList() {
  */
 async function showCustomModuleInformation() {
     let moduleAcronym = "";
-    const selectModuleList = document.getElementById("moduleList");
+    const selectModuleList = document.getElementById("customModulesList");
 
     const selectedIndex = selectModuleList.selectedIndex
     if (selectedIndex > -1) {
@@ -100,10 +100,10 @@ async function getModuleList() {
  */
 async function setModuleList(moduleList) {
     if (Helpers.isFirefox()) {
-        await browser.storage.local.set({ moduleList: moduleList })
+        await browser.storage.local.set({ moduleList: moduleList });
     }
     else {
-        await chrome.storage.local.set({ moduleList: moduleList })
+        await chrome.storage.local.set({ moduleList: moduleList });
     }
 }
 
@@ -112,16 +112,16 @@ async function setModuleList(moduleList) {
  */
 async function removeCustomModule() {
     const moduleList = await getModuleList();
-    const selectModuleList = document.getElementById("moduleList");
+    const selectModuleList = document.getElementById("customModulesList");
 
-    const selectedIndex = selectModuleList.selectedIndex
+    const selectedIndex = selectModuleList.selectedIndex;
     if (selectedIndex > -1) {
         const selectedModule = selectModuleList.options[selectedIndex].value;
-        delete moduleList[selectedModule]
-        await setModuleList(moduleList)
+        delete moduleList[selectedModule];
+        await setModuleList(moduleList);
     }
     else {
-        console.warn("select a module")
+        console.warn("select a module");
     }
 }
 
@@ -137,7 +137,7 @@ async function addCustomModule() {
         moduleGrade = 'n/a';
     }
 
-    let modulYearList = document.getElementById("moduleYear")
+    let modulYearList = document.getElementById("moduleYear");
     let moduleYear = modulYearList.options[modulYearList.selectedIndex].value;
 
     const moduleSemesterRadios = document.getElementsByName('moduleImplementation');
@@ -164,7 +164,7 @@ async function addCustomModule() {
         year: moduleYear,
         semster: moduleSemester
     }
-    await setModuleList(moduleList)
+    await setModuleList(moduleList);
 }
 
 /**
@@ -177,7 +177,7 @@ async function start() {
     let localStorage = await getLocalStorage();
     if (!(localStorage.moduleList)) {
         const moduleList = {};
-        await setModuleList(moduleList)
+        await setModuleList(moduleList);
     }
 
     populateModuleList();
@@ -187,6 +187,6 @@ async function start() {
     browser.storage.onChanged.addListener(populateModuleList);
 }
 
-window.onload = function () {
+window.onload = () => {
     start();
 };
diff --git a/src/popup/popup_style.css b/src/popup/popup_style.css
@@ -1,53 +1,81 @@
+body {
+  background: white;
+  padding: 3px;
+  font-family: Helvetica,sans-serif;
+}
+
 .grid-container-form {
   display: grid;
   grid-template-columns: auto auto;
-  background-color: black;
-  padding: 1px;
+  background: #415e6c;
 }
 
 .grid-container-buttons {
   display: grid;
-  grid-template-columns: 50% 50%;
-  background-color: white;
-  padding: 1px;
+  grid-template-columns: auto auto;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 .grid-item {
-  background-color: white;
-  border: 1px solid rgba(0, 0, 0, 0.8);
-  padding: 5px;
-  font-size: 20px;
+  padding: 6px;
+  font-size: 16px;
   text-align: left;
-}
-
-.custom-select {
-  position: relative;
-  font-family: Arial;
+  color: white;
 }
 
 .comment {
   font-size: 12;
   margin: 0;
 }
 
+.radio-button {
+  width: auto;
+  margin: 0;
+  padding: 0;
+}
+
+.radio-text {
+  padding-right: 5px;
+}
+
 .button {
-	background: #415e6c;
-  border-radius: 5px;
-	border:none;
-  color:#ffffff;
-  font-size: 20px;
-  padding: 10px;
-	width:99%;
-	text-decoration:none;
-  text-align:center;
+	background: #a00057;
+  border-radius: 0;
+  border: 0;
+  color: white;
+  font-size: 16px;
+  padding: 5px;
   cursor: pointer;
 }
+
+.button-left {
+  padding-right: 2px;
+}
+
+.button-right {
+  padding-left: 2px;
+}
+
 .button:hover {
-  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
-	background-color:#1e62d0;
+  background: white;
+  color: #690036;
+}
+
+.customModulesList {
+  background: lightgray;
+}
+
+select, input {
+  width: 100%;
+  border: 0;
+}
+
+input {
+  padding-left: 5px;
 }
 
-button:active {
-	position:relative;
-  top:1px;
+option {
+  border-bottom: 1px dotted black;
+  padding: 2px;
 }
diff --git a/updates.json b/updates.json
@@ -26,6 +26,11 @@
                     "version": "2.0.11",
                     "update_link": "https://github.com/eddex/hslu-simple-mep-results/releases/download/2.0.11/hslu_simple_mep_results-2.0.11-firefox.xpi",
                     "update_hash": "sha256:0664DDB98B90B3979480642449CF4BFB0D92C63932AFBDAA94AEFF11ACE35E39"
+                },
+                {
+                    "version": "2.0.12",
+                    "update_link": "https://github.com/eddex/hslu-simple-mep-results/releases/download/2.0.12/hslu_simple_mep_results-2.0.12-firefox.xpi",
+                    "update_hash": "sha256:9A76B6DBD224F48A43568F1238BD01BE043C18D50448353356983AB21C46B948"
                 }
             ]
         }