Todoist/HubSpot Clone

Showcase
#1

Well, not so much a clone as it is influenced.

Right now I have some cool features built that I will continue to share here, such as:

  1. Move record through a “pipeline”
  2. Fetch website description when a website is added to a client record
  3. When “Onboard Client” is clicked, a contact is created in PandaDoc and a client is created in Freshbooks.
  4. Static side-bar Details Component
  5. Dynamic menu badges that will only show when a notification count is greater than 0 (thank you @chem)

screenshot-crm.dataflowstudios.com-2020.12.03-19_03_31
screenshot-crm.dataflowstudios.com-2020.12.03-19_03_311504×860 62 KB

screenshot-crm.dataflowstudios.com-2020.12.03-19_12_53
screenshot-crm.dataflowstudios.com-2020.12.03-19_12_531504×860 92.8 KB

and a small video to share of the app so far…

5 Likes
#2

Sidenav instructions here: Sidebar Navigation - FINAL INSTALLMENT

#3

@tim.young Outstanding preview showing what’s possible. It doesn’t even look like it’s Tadabase, so you have me rather curious. Well done!!

Lots of custom CSS?

#4

@tim.young - can you share how you went about the static detail sidebar?

#5

Sure @mdykstra

Couple things to mention first…

  • This doesn’t work well on mobile, the CSS includes a media query for that.
  • This whole thing works best with rows set to FLUID for both layouts and pages.

Step 1) On your details page, add a new row at the very top of the page. Inside the row and column, add an HTML component with the following HTML

<div id="detailsSidebar" class="detailsContainer"></div>

Step 2) Place your details component in it’s own row and column below the row you just created.

1
12498×1337 170 KB

Step 3) For best results, your details component should be a single column.

2
22498×1337 90.5 KB

Step 4) Get the element ID of your details component by right clicking and inspecting the details component

3

Step 5) On the page JS tab, add this code and update it with the ID you just got from the details component.

//Appends the details component to the HTMl component container
$(function() {
    $('#detailsSidebar').append($('#x_element_page_7_3'));
});

Step 6) Add this CSS to your page CSS tab

@media only screen and (min-width: 992px) {
    .detailsContainer {
        background: #FAFAFA;
        height: 100vh;
        /*Sets the width of the side bar*/
        width: 425px;
        position: fixed;
        top: 0;
        /* Change 'left' to 'right' to move the sidebar to the right side of the screen. If moved to right side, change all instances below of 'margin-left' to 'margin-right' */
        left: 0;
        z-index: 5;
        overflow-y: hide;
        border-right: 2px solid #ccc;
        padding: 10px 20px;
    }
    /* Shifts the whole app's page over the width of the sidebar */
    .t-pagecontainer {
        margin-left: 425px !important;
    }
    /* Shifts the breadcrumbs over the width of the sidebar */
    .t-breadcrumb {
        margin-left: 425px !important;
    }
    /* Shifts the menu over the width of the sidebar */
    .navbar-default {
        margin-left: 425px !important;
    }
}

That should do it! You can see the end result here → https://timyoung.tadabase.io/sidebar-details-1#!/sidebar-details/sample-data-table-details/5m9N0njzqk

#6

Sweet. Thank you @tim.young

1 Like