Bible Taxonomy – User Interface Look

The Bible’s BIG. 32341 elements in the XML file, to be exact.

The WordPress custom metabox spaces are pretty small. I started out wanting to put this in the side panel on the Admin screen. How do I fit that many elements into a 300px width and not have the page go miles and miles deep?

Javascript was the easy solution — but not so-easy was figuring out what UI tools I could use within the JS. I started with tables, bot those became clunky and inconsisted very quickly. Plus, they broke horribly. I wanted it so that if the user shrunk their window < 800px wide then they'd still be able to have the tool degrade gracefully (and maybe even still work). Tables were shooting off the edges and messing up the spacing. Fluid web design != tables; and in this case, it didn't even = div tags. I did it with unordered lists (ul) and list-items (li) carefully controlled by the CSS.

Here’s the CSS to get the elements consisten widths, heights, and to get them to reset and space beautifully (and wrap so they didn’t look like a puzzle):

#scripture_holder {
	margin: 10px;
}

#bible_hierarchy
{ 
	width: 300px;
	margin: 10px;
	display: block;
	font-family: 'Lucida Grande', Verdana, Arial, 'Bitstream Vera Sans', sans-serif;
	font-size: 12px;
	line-height: 16px;
	
}

#bible_hierarchy a {
	color: #000;
	text-decoration: none;
}

#bible_hierarchy ul
{
	padding: 0;
	margin: 0;
	
}
#bible_hierarchy ul li 
{ 
	padding: 0; 
	margin: 0; 
	border: 1px solid #FFF; 
	text-align: center;
	display: inline-block;
	word-spacing: normal;
	
}
#bible_hierarchy ul a 
{ 
	padding: 5px; 
	display: block; 
}

#bible_hierarchy li.book {
	background: #c8c8c8;
	width: 45px;
}

#bible_hierarchy li.chapter {
	background: #dfdfdf;
	width: 35px;
}

#bible_hierarchy li.clickedbook {
	background: #dfdfdf;
	width: 280px;
}

#bible_hierarchy li.clickedbook ul { /* for space between name of book and chapter <ul> */
	margin-top: 5px;
}

#bible_hierarchy li.clickedchapter {
	background: #FFF;
	width: 257px;
}

#bible_hierarchy li.verse {
	background: #FFF;
	border: #EEE 1px solid;
	width: 25px;
}

#bible_hierarchy li.verse_selected {
	background: #333;
	width: 25px;
}

#bible_hierarchy li.verse_selected a {
	color: #FFF;
}



#verserange {
	width: 190px;
	margin-left: 5px;
}

#btnGoToScripture {
	margin-left: 5px;
}

#bible-selected-verses {
	min-width: 200px;
	max-width: 350px;
	margin: 10px;
}

#bible-selected-verses .verse_range {
	width: 150px;
}