Employee Portal

[tim.young]

I guess I’ll be the first to share. The app I built is for my family business. We use it to keep track of events, manage events, and schedule employees. The screen shots show the bulk of the app, although there are many other pages that we use frequently.

[Bevcom]

Awesome work Tim!

Great idea with the showcasing.

I’m only just starting, but I’ll post some work I have been doing with purchase order requisitions.

How did you do these menu buttons? HTML block?

[tim.young]

Thanks @Bevcom and welcome.

Those buttons are done with an html component and custom CSS. Code is pasted below.

HTML

<div class="portalLinks">
<div class="buttonBlock" style="text-align: center;"><a href="https://www.your_page_link.com"> <button
            class="portalButton"> <img class="buttonIcon"
                src="https://image.flaticon.com/icons/svg/2145/2145406.svg" alt="" width="35" height="35" /><span
                class="buttonHeading">My Schedule</span><br /><span class="buttonSubheading"> View your upcoming
                shows</span></button> </a></div>
<div class="buttonBlock" style="text-align: center;"><a href="https://www.your_page_link.com"> <button
            class="portalButton"> <img class="buttonIcon"
                src="https://image.flaticon.com/icons/svg/2145/2145418.svg" alt="" width="35" height="35" /><span
                class="buttonHeading">Show History</span><br /><span class="buttonSubheading"> View your previous
                shows</span></button> </a></div>
<div class="buttonBlock" style="text-align: center;"><a href="https://www.your_page_link.com"> <button
            class="portalButton"> <img class="buttonIcon"
                src="https://image.flaticon.com/icons/svg/2361/2361749.svg" alt="" width="35" height="35" /><span
                class="buttonHeading">Profile</span><br /><span class="buttonSubheading"> View your employee
                profile</span></button> </a></div>
<div class="buttonBlock" style="text-align: center;"><a href="https://www.your_page_link.com"> <button
            class="portalButton"> <img class="buttonIcon"
                src="https://image.flaticon.com/icons/svg/2362/2362344.svg" alt="" width="35" height="35" /><span
                class="buttonHeading">Contact</span><br /><span class="buttonSubheading"> Send us a
                message</span></button> </a></div>

CSS

.portalLinks{
   text-align:center;
}

.buttonBlock{
    display: inline-block;
}

.portalButton {
    background-color: #fff;
    color: black;
    height: 100px;
    width: 225px;
    border: solid 2px #eef1f5;
    border-radius: 8px;
    font-size: 16px;
    margin: 10px;
    padding: 20px 0 20px 0;
    -webkit-box-shadow: 0px 0px 10px 1px #eef1f5;
    -moz-box-shadow: 0px 0px 10px 1px #eef1f5;
    box-shadow: 0px 0px 10px 1px #eef1f5;
}

.buttonIcon{
    position:relative; 
    bottom: 3px;
    right: 5px;
}

.buttonHeading{
    color:#656565;
}


.buttonSubheading{
    color: #888888;
    font-size: 12px;
}

.portalButton:hover{
    background-color: #eef1f5;
}

[moe]

Looks Awesome. I think its possible one of our upcoming themes is slightly based on your design. I didn’t realize how much our borders and background look like yours. Needless to say, you have one of the nicest Tadabase apps I’ve seen.

[AlKap]

Super clean Tim!! Thanks for the inspiration!

[Bevcom]

Thanks mate

Im learning HTML CSS and JScript at the moment, so it was good to break down the code and understand it whilst changing / tweaking.

[mdykstra]

@tim.young Is “Recent Payroll” a table or a List? Can you share the CSS to format it that way?
Super cool.

[frinksterj]

How did you do your red delete buttons on the table with just the trash icon?

[Roger]

@frinksterj

• Add a delete link to the table
• Under ‘General’ Remove the title
• Under ‘Format’ set the style to Button and Color = Danger