Por Escrito

26 Oct 2016

Adding a Responsive Bootstrap Navbar with Hover Dropdown Menus

Currently, I’m working with a client who has given me a lot of creative liberty for UI and UX design. Every once in awhile though, feature requests are made without the knowledge of best practices and standard capabilities within certain libraries.  One such request, a simple navbar I completed yesterday. 

A simple responsive Bootstrap navbar which turned into 5 and a half hours of reading, struggling, thinking I knew better than hundreds of others who have probably faced these problems dozens of times, and ultimately acceptance and settling on a pretty simple but effective approach.  So we started off with the regular Bootstrap nav, with dropdown menus.  Each dropdown menu had sub-items that would take you to an anchor on another page, all grouped by page.  (Ie. Page 1 Anchor 1, Anchor 2, Anchor 3; Page 2 Anchor 1, Anchor 2, Anchor 3; etc., etc.  Easy enough, right?  But, the dropdown menus needed to open on hover.  Okay, I think that should be easy too, and with mobile Bootstrap just replaces hover with touch anyway, and will open the dropdowns when touched

Works great. 

Then I realized the purpose for opening the dropdowns by hover was because the requirement was for the top level menu items to be clickable, and take you to Page 1 or Page 2…  Here’s where I started to see it wasn’t going to be as easy as I thought, and the beginning of my four ...

30 Aug 2016

Building a Simple Search in Django

This is a brief tutorial on how to implement a simple text search on your Django site, for something like a blog, as I've implemented here at kobrien.me.  

Step 1

The first piece we will write is the form itself, where users will enter their search term.  As seen in the HTML below, it is relatively simple.  We just have to tell it where to submit with the action attribute.  We will define this url in the following steps, although take note of the /blog/search portion after the {{ request.get_host }} tag.  In my case, I've set up my search as a part of my blog app.  Other than that, we just tell our button to submit the form by its id name when clicked, and it's all set.  

<form id="searchform" action="{{ request.get_host }}/blog/search/" method="get">
    <input type="text" name="q" type="text"/>
    <button type="button" onclick="searchform.submit()">Search</button>

Step 2

I will mention again, I've included the search within my blog app.  To use this example, you want to be working in the same app as the models you're trying to search, and the views that will display the results.  Add the following line to your app's urls.py file under the urlpatterns list in your app:

url(r'^search/', views.search, name="search")

Step 3

Now that the request is being directed to the correct view, let's create the view.  We will create a search function to retrieve ...