Looking good. Is it responsive now too using that code?
Mine is not, no. But I don’t have to write any css for the sidebar, I think. I can just use the column settings in the builder to set what devices it’s visible on. On mobile, I don’t mind using the native tadabase menu
Ok so lots of changes here…
Here’s what I’m having trouble with now.
-
Thumbnail wrapper on the {loggedInUser.Employee Photo} is restrictive. Discussed with Moe in another thread that access raw values (src) for logged in user fields will be added at some point.
-
@moe you might be able to clarify this - i class icons are not showing up. They won’t even save in the HTML component after closing it and reopening. Here’s my example code.
<li><i class="fa fa-home"></i><a href="#"> Home</a></li> -
@Chem this one is for your JS skills. The sidenav is collapsible until I add a field in the HTML. For example, loading my user photo in the sidenav with
<div class="user-photo">{loggedInUser.Employee Photo}</div>breaks the JS. I’m assuming it has something to do with the {} brackets.
3 Likes
No JS.
It’s not accurate in the screen shot because that’s before I changed it - just FYI. I created a count field to count the records assigned to the user in the notes table. Using that field in the HTML + CSS to create the “badge”
@tim.young the 'i" tag is not supported in the HTML editor, but I’ve whitelisted it so in our next update this will work and won’t get stripped out.
We’ll address the logged in user field raw values in the coming days as well.
@Chem I’ll let Chem dive into the JS issue here.
This design looks really solid. We’ll make this a setting in the menu in the coming weeks so you can bypass all of these tweaks.
We’re rolling out (today, hopefully) a few major updates in the data builder, plus a few other minor updates (like sort by several fields) etc.
After that we’ve got a few more updates in the page builder (drag and drop components, cleaner navigation etc.)
1 Like
The tag will now work and those icons should hopefully appear once you save the HTML again.
1 Like
Just clarify, you’ll be adding a sidebar option in the menu?
Correct. We’ll take your beautiful design and make it as an option when adding a menu.
There will be a 3rd menu option called “Vertical Slideout” and we’ll build all of these custom setting you did into the menu. Won’t be for a little while since we’re doing some more page builder optimization first.
3 Likes
Well jeez, I’m flattered!
3 Likes
@tim.young Hey Tim, do you know how the counter could be implemented with an existing tadabase layout - not an html menu.
@intelligroup Sure! First set up your field in whatever table you want, it’s going to be a count field - and it’s counting records in a connected table.
For me, the count field was created in the Users table, and it counted the number of Notes (from a connected Notes tabled) that the User was assigned to.
On a page, create a HTML component and below I’ll post the foundation of the design.
The HTML for the field is going to contain the count field. For the example here I’ll just use the number 6 and a link to the Notes page. Here’s the code.
<a href="https://yourapp.com/notes"> Notes <span class="num flag">6</span></a>
By giving the span 2 classes - num and flag, you can style the num (the returned value of your count field) separately from the “badge”. For example, if you wanted to create different color badges for different purposes.
Here’s the CSS, styling the link a bit too.
a {
color: #000;
font-weight: 100;
display: block;
text-decoration: none;
font-size: 18px;
}
.num {
line-height: 0;
border-radius: 3px;
font-size: 14px;
color: #fff;
padding: 0px 5px;
}
.flag {
background-color: #f35959;
}
Now you’ll just add whatever field you want in the element.
Here’s the result, you can play around with it - https://codepen.io/tyoung560/pen/yLOgdLp
1 Like
I really like your design and style!
Great GIF choice too! Best show ever made!
2 Likes
Hey @tim.young Did you figure this one out yet? It’s hard to know whats going on without looking at the setup. Feel free to @ me on support and I’ll be more than happy to take a look.
Hey Moe - is it possible to add the counter icons (like what tim did with his custom menu) to a Tadabase theme menu?
2 Likes
Or to a tab on a table.
We’re doing a large redesign of the builder and are in the process of planning of rebuilding our menu component from the ground up. We’ll certainly keep this in mind. Ideally we’d like to do everything Tim did as native features plus ability to reuse components. Its still in the planning stages at this time.
@mdykstra - for tab in table you mean to show total records that match the conditions of each tab? If that’s what you mean that likely won’t be possible since that runs after the fact. In the menu, I’m referring to maybe allowing App Variable values as a badge value.
1 Like