fix(basecamp): Improve Basecamp 3 integrations

- Add support for Card Tables Functionality
- Auto pick project
- Improve position of buttons

Closes #2253

src/content/basecamp.js

@@ -67,23 +67,39 @@ togglbutton.render(
 );
 
 // Basecamp 3
-togglbutton.render('.todos li.todo:not(.toggl)', { observe: true }, function (
+togglbutton.render('article.todolist .todos li.todo:not(.toggl)', { observe: true }, function (
   elem
 ) {
   const parent = $('.checkbox__content', elem);
   const description = parent.childNodes[1].textContent.trim();
-  let project = $('#a-breadcrumb-menu-button');
-  project = project ? project.textContent : '';
+  const project = document.querySelector('meta[name="current-page-subtitle"]').getAttribute('content');
 
   const metadata = $('.metadata', parent);
 
   const link = togglbutton.createTimerLink({
     buttonType: metadata ? null : 'minimal',
-    className: 'basecamp3',
+    className: 'basecamp3-todos',
     description: description,
     projectName: project
   });
 
   const container = metadata || parent;
   container.appendChild(link);
 });
+
+// Basecamp 3 - Card table
+togglbutton.render('header.todo__header:not(.toggl)', { observe: true }, function (
+  elem
+) {
+  const container = elem.querySelector('h1');
+  const description = elem.querySelector('h1 > a').textContent.trim();
+  const project = document.querySelector('meta[name="current-page-subtitle"]').getAttribute('content');
+
+  const link = togglbutton.createTimerLink({
+    buttonType: 'minimal',
+    description: description,
+    projectName: project
+  });
+
+  container.appendChild(link);
+});

src/styles/style.css

@@ -219,32 +219,31 @@ SingleTaskPaneToolbar .toggl-button.asana-board, /* new ui v1 */
 }
 
 /********* BASECAMP 3 *********/
-.todo .toggl-button.basecamp3 {
+.todo .toggl-button.basecamp3-todos{
   transition: opacity 150ms ease;
   display: inline;
-  position: absolute;
   opacity: 0;
-  margin-top: 2px;
-  margin-left: 150px;
+  margin-left: 125px;
   white-space: nowrap;
+  vertical-align: middle;
 }
 
-.todo:not(.selected):hover .toggl-button.basecamp3,
-.todo:not(.selected) .toggl-button.basecamp3.active,
-.todo:not(.selected) .metadata .toggl-button.basecamp3 {
+.todo:not(.selected):hover .toggl-button.basecamp3-todos,
+.todo:not(.selected) .toggl-button.basecamp3-todos.active,
+.todo:not(.selected) .metadata .toggl-button.basecamp3-todos{
   opacity: 1;
 }
-.todo:not(.selected).completed .toggl-button.basecamp3 {
+.todo:not(.selected).completed .toggl-button.basecamp3-todos{
   margin-left: 6px;
   transform: scale(0.8) translateY(-3px);
 }
-.todo:not(.selected) .metadata .toggl-button.basecamp3 {
+.todo:not(.selected) .metadata .toggl-button.basecamp3-todos{
   margin-left: 6px;
   transform: scale(0.9) translateY(-2px);
 }
 
 
-.card-grid .toggl-button.basecamp3 {
+.card-grid .toggl-button.basecamp3-todos {
   opacity: 0 !important;
 }