[Refdb-users] interface mockup

SourceForge Headquarters 1320 Columbia Street Suite 310 San Diego, CA 92101 +1 (858) 422-6466

In chatting with Matt, he indicated he'd like a short display, with  
pop-ups for viewing and entering notes.  I've put together a simple  
mockup, a screenshot of which is enclosed.  What do people think?

Note: I've only included authors and title, though ideally the full  
citation would be there, along with hot-linked keywords (as in Rob's  
example).  Also, I don't quite like the rendering right now for the  
view and export button area.

Anyway, here's the code:

<html>
	<head>
		<meta http-equiv="content-type"  
content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive">
		<title>Untitled Page</title>
		<style type="text/css">
			body {
				background-color: #bdcead;
				font-family: Georgia, serif;
				font-size: 11px;
				line-height: 1.4;
				padding: 10px;
			}

			p {
				text-align: justify;
				margin-left: 40px;
			}

			.biblio {
				margin-left: 50px;
				margin-top: 30px;
				border: 1px solid gray;
				background-color: white;
			}

			.record {
				margin-right: 40px;
				padding: 10px;
			}

			.citation {

			}

			.heading {
				font-weight: bold;
			}

			.title {
				font-weight: bold;
				font-size: 12px;
			}

			.citekey {
				color: #a69e7d;
				margin-left: 20px;
			}

			.note {
				background-color: #bacdce;
				font-size: 9px;
				padding-left: 10px;
				padding-right: 10px;
				border: 1px solid gray;
				font-weight: bold;
				margin-right: 10px;
			}

			a {
				color: #add105;
				text-decoration: none;
			}

			a.hover {
				color: #bde2da;
			}

			input.mark {
				float: left;
				margin-left: -30px;
			}
			input.search {
				margin-left: 40px;
				padding: 10px;
				background-color: transparent;
				font-size: 10px;
				font-weight: bold;
			}
			input.view{
				margin-left: 40px;
				margin-top: 10px;
				font-size: 9px;
			}
			input.search-button{
				margin-left: 20px;
				font-size: 9px;
				width: 70px;
			}
			#header {
				border-bottom: 1px solid gray;
				padding: 10px;
				background: #cecece
			}
			#top {
				margin-top: 20px;
				margin-left: 400px
			}
			select.choose {
				font-size: 9px;
				margin-left: 10px;
				margin-top: 10px;
			}
		</style>
	</head>

	<body bgcolor="#ffffff">
		<div id="top">
		<input class="search" type="text" /><input type="button"  
class="search-button" value="search"/>
		</div>
		<div class="biblio">
		<div id="header">
		    	<input type="button" class="view" value="view marked"/>
		    	<input type="button" class="view" value="export marked"/>
		    	<select name="export" class="choose">
		  <option value="bibtex">bibtex</option>
		  <option value="mods">mods</option>
		  <option value="ris">ris</option>
		  <option value="risx">risx</option>
		</select>
		</div>
		<div class="record">
     <p class="citation">
     	<input type="checkbox" class="mark" value="N1"/>
     <span class="title">Inhibition of deactivation of NO sensitive  
guanylyl cyclase accounts for the sensitizing effect of  
YC-1</span><span class="citekey"> [Russwurm2002]</span></span></p>
     <p class="keywords"><span class="heading">By: </span><a  
href="index.php?format=risx&amp;field=AU&amp;searchText=Russwurm">M  
Russwurm</a>; <a  
href="index.php?format=risx&amp;field=AU&amp;searchText=Mergia">E  
Mergia</a>; <a  
href="index.php?format=risx&amp;field=AU&amp; 
searchText=Mullershausen">F Mullershausen</a>; <a  
href="index.php?format=risx&amp;field=AU&amp;searchText=Koesling">D  
Koesling</a></p>
     <p><span class="note">add note</span><span class="note">view  
notes</span></p>
   </div>
   	<div class="record">
     <p class="citation"><input type="checkbox" class="mark"  
value="N1"/><span class="title">Inhibition of deactivation of NO  
sensitive guanylyl cyclase accounts for the sensitizing effect of  
YC-1</span><span class="citekey"> [Russwurm2002]</span></p>
     <p class="keywords"><span class="heading">By: </span><a  
href="index.php?format=risx&amp;field=AU&amp;searchText=Russwurm">M  
Russwurm</a>; <a  
href="index.php?format=risx&amp;field=AU&amp;searchText=Mergia">E  
Mergia</a>; <a  
href="index.php?format=risx&amp;field=AU&amp; 
searchText=Mullershausen">F Mullershausen</a>; <a  
href="index.php?format=risx&amp;field=AU&amp;searchText=Koesling">D  
Koesling</a></p>
     <p><span class="note">add note</span><span class="note">view  
notes</span></p>
   </div>
   </div>

	</body>

</html>

Bruce