Employee Portal

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.

5 Likes

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?

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;
}
2 Likes

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. :laughing: Needless to say, you have one of the nicest Tadabase apps I’ve seen.

1 Like

Super clean Tim!! Thanks for the inspiration!

Thanks mate :slight_smile:

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