update styling

kevinpapst · Jul 26, 2019 · c0e6483 · c0e6483
1 parent 41d3eec
commit c0e6483
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 60 deletions.
diff --git a/src/css/popup.scss b/src/css/popup.scss
@@ -1,57 +1,92 @@
 @import "~bootstrap/scss/bootstrap";
+$boarder-color: rgba(0, 0, 0, 0.125);
+$border-radius: 0.25em;
+$border-style: 1px solid $boarder-color;
 
 .container {
   width: 30em;
   padding-bottom: 1em;
 }
 
 /* Time Entries block */
-#time-entries {
-  max-height: 15em;
-  overflow-y: auto;
+#time-entries-row {
+  .col {
+    padding: 0;
+  }
 
-  .list-group-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  #time-entries {
+    max-height: 15em;
+    overflow-y: auto;
+
+    .list-group-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
 
-    &.list-group-item-primary {
-      background-color: #deeeff;
+      &.list-group-item-primary {
+        background-color: #deeeff;
+      }
     }
   }
-}
 
-#time-entries button {
-  float: right;
-}
+  #time-entries button {
+    float: right;
+  }
 
-.ongoing-badge {
-  float: right;
-}
+  .ongoing-badge {
+    float: right;
+  }
 
-.day-group {
-  margin-bottom: 0.5em;
+  .day-group {
+    margin-bottom: 0.5em;
+  }
 }
 
 /* Timer block */
-.project-button-block {
-  text-align: center;
-  padding: 0.5em;
-}
+#project-timer-row {
+  overflow-y: auto;
 
-.activity-selection {
-  width: 95%;
-  margin-bottom: 1em;
-}
+  .project-button-block {
+    text-align: center;
+  }
 
-.button-group {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-}
+  .activity-selection {
+    width: 95%;
+    margin-bottom: 1em;
+  }
+
+  .button-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+
+    .project-button-block {
+      border-radius: 0;
+      border: unset;
+      border-top: $border-style;
+      border-bottom: $border-style;
+    }
+
+    .project-button-block:first-of-type {
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+      border-left: $border-style;
+    }
+
+    .project-button-block:last-of-type {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+      border-right: $border-style;
+    }
 
-button {
-  cursor: pointer;
+    .card-header {
+      padding: 0.2em;
+    }
+  }
+
+  button {
+    cursor: pointer;
+  }
 }
 
 /* Message block */

diff --git a/src/js/popup/render_helper.js b/src/js/popup/render_helper.js
@@ -75,32 +75,23 @@ const renderProjectTimerButtons = projects => {
 
     projectButtonsHTML += 
     ` 
-      <div class="project-button-block">
-        <p class="title">${project.name}</p>
-        <select class="activity-selection" id="project-${project.id}-activity-selection">
-          ${
-            projectActivities &&
-            projectActivities.map( (activity) => `
-              <option value="${activity.id}">${activity.name}</option>
-            `)
-          }
-        </select>
-        <button type="button" class="btn btn-outline-success btn-sm project-start-button" name="${project.id}">Start</button>
+      <div class="project-button-block card">
+        <div class="title card-header">${project.name}</div>
+        <div class="card-body">
+          <select class="activity-selection" id="project-${project.id}-activity-selection">
+            ${
+              projectActivities &&
+              projectActivities.map( (activity) => `
+                <option value="${activity.id}">${activity.name}</option>
+              `)
+            }
+          </select>
+          <button type="button" class="btn btn-outline-success btn-sm project-start-button" name="${project.id}">Start</button>
+        </div>
       </div>
     `
   });
 
-  projectButtonsHTML = 
-  `
-  <div class="card">
-    <div class="card-body">
-      <div class="button-group">
-        ${projectButtonsHTML}
-      </div>
-    </div>
-  </div>
-  `
-
   $('#project-buttons').html(projectButtonsHTML);
   $('.project-start-button').click(projectStartButtonOnClick);
   finishLoading();

diff --git a/src/popup.html b/src/popup.html
@@ -7,13 +7,11 @@
 <body>
   <div class="container">
 
-    <div class="row">
-      <div class="col">
-        <div id="project-buttons"></div>
-      </div>
+    <div class="row" id="project-timer-row">
+      <div id="project-buttons" class="button-group"></div>
     </div>
 
-    <div class="row">
+    <div class="row" id="time-entries-row">
       <div class="col">
         <div id="time-entries"></div>
       </div>