updated web library with new style and features

added remote reading from iOS

YACReaderLibrary/server/controllers/covercontroller.cpp

@@ -44,14 +44,28 @@ void CoverController::service(HttpRequest& request, HttpResponse& response)
 	QImage img(libraries.getPath(libraryName)+"/.yacreaderlibrary/covers/"+fileName);
 	if (!img.isNull()) {
 
-		int width = 80;
-		if(session.getDisplayType()=="retina")
+        int width = 80, height = 120;
+        if(session.getDisplayType()=="@2x")
+        {
 			width = 160;
+            height = 240;
+        }
+
+        if(float(img.width())/img.height() < 0.66666)
             img = img.scaledToWidth(width,Qt::SmoothTransformation);
+        else
+            img = img.scaledToHeight(height,Qt::SmoothTransformation);
+
+        QImage destImg(width,height,QImage::Format_RGB32);
+        destImg.fill(Qt::black);
+        QPainter p(&destImg);
+
+        p.drawImage((width-img.width())/2,(height-img.height())/2,img);
+
 		QByteArray ba;
 		QBuffer buffer(&ba);
 		buffer.open(QIODevice::WriteOnly);
-		img.save(&buffer, "JPG");
+        destImg.save(&buffer, "JPG");
 		response.write(ba,true);
 	}
 	//DONE else, hay que devolver un 404

YACReaderLibrary/server/controllers/foldercontroller.cpp

@@ -1,4 +1,6 @@
 #include "foldercontroller.h"
+#include "controllers/errorcontroller.h"
+
 #include "db_helper.h"  //get libraries
 #include "comic_db.h"
 
@@ -36,7 +38,16 @@ void FolderController::service(HttpRequest& request, HttpResponse& response)
 	int libraryId = pathElements.at(2).toInt();
 	QString libraryName = DBHelper::getLibraryName(libraryId);
 	qulonglong parentId = pathElements.at(4).toULongLong();
+
+    parentId = qMax<qulonglong>(1,parentId);
+
 	QString folderName = DBHelper::getFolderName(libraryName,parentId);
+    if(folderName.isEmpty())
+    {
+        ErrorController(300).service(request,response);
+        return;
+    }
+
 	if(parentId!=1)
 		t.setVariable("folder.name",folderName);
 	else
@@ -70,7 +81,21 @@ void FolderController::service(HttpRequest& request, HttpResponse& response)
 	
 	int upPage = 0;
 
-	
+    if(parentId == 1)
+        session.clearFoldersPath();
+    else
+    {
+        if(fromUp)
+            session.popFolder();
+        else
+            if(session.getFoldersPath().contains(parentId))
+        {
+            while(session.topFolder()!=parentId)
+                session.popFolder();
+        }
+        else
+            session.pushFolder(parentId);
+    }
 
 	if(backId == 1 && parentId == 1)
 	{
@@ -116,7 +141,7 @@ void FolderController::service(HttpRequest& request, HttpResponse& response)
 
 	//t.loop("element",folderContent.length());
 
-	int elementsPerPage = 18;
+    int elementsPerPage = 24;
 
 	int numFolders = folderContent.length();
 	//int numComics = folderComics.length();
@@ -135,9 +160,16 @@ void FolderController::service(HttpRequest& request, HttpResponse& response)
 	int indexCurrentPage = page*elementsPerPage;
 	int numFoldersAtCurrentPage = qMax(0,qMin(numFolders - indexCurrentPage, elementsPerPage));
 
-	//response.writeText(QString("indexCurrentPage : %1 <br/>").arg(indexCurrentPage));
-	//response.writeText(QString("numFoldersAtCurrentPage : %1 <br/>").arg(numFoldersAtCurrentPage));
-	//response.writeText(QString("foldersLength : %1 <br/>").arg(folderContent.length()));
+    //PATH
+    QStack<int> foldersPath = session.getFoldersPath();
+    t.setVariable(QString("library.name"),libraryName);
+    t.setVariable(QString("library.url"),QString("/library/%1/folder/1").arg(libraryId));
+    t.loop("path",foldersPath.length());
+    for(int i = 0; i < foldersPath.length(); i++){
+
+        t.setVariable(QString("path%1.url").arg(i),QString("/library/%1/folder/%2").arg(libraryId).arg(foldersPath[i]));
+        t.setVariable(QString("path%1.name").arg(i),DBHelper::getFolderName(libraryName,foldersPath[i]));
+    }
 
 	t.loop("element",numFoldersAtCurrentPage);
 	int i = 0;
@@ -148,7 +180,6 @@ void FolderController::service(HttpRequest& request, HttpResponse& response)
 		if(item->isDir())
 		{
 			t.setVariable(QString("element%1.class").arg(i),"folder");
-			t.setVariable(QString("element%1.image.width").arg(i),"89px");
 			t.setVariable(QString("element%1.image.url").arg(i),"/images/f.png");
 
 			t.setVariable(QString("element%1.browse").arg(i),QString("<a class =\"browseButton\" href=\"%1\">browse</a>").arg(QString("/library/%1/folder/%2").arg(libraryId).arg(item->id)));
@@ -157,13 +188,17 @@ void FolderController::service(HttpRequest& request, HttpResponse& response)
 			//t.setVariable(QString("element%1.downloadurl").arg(i),"/library/"+libraryName+"/folder/"+QString("%1/info").arg(folderContent.at(i + (page*elementsPerPage))->id));
 			
 			t.setVariable(QString("element%1.download").arg(i),QString("<a onclick=\"this.innerHTML='importing';this.className='importedButton';\" class =\"importButton\" href=\"%1\">import</a>").arg("/library/"+QString::number(libraryId)+"/folder/"+QString("%1/info").arg(folderContent.at(i + (page*elementsPerPage))->id)));
+            t.setVariable(QString("element%1.read").arg(i),"");
+
+            t.setVariable(QString("element%1.size").arg(i),"");
+            t.setVariable(QString("element%1.pages").arg(i),"");
+            t.setVariable(QString("element%1.status").arg(i),"");
         }
 		else
 		{
 			t.setVariable(QString("element%1.class").arg(i),"cover");
 			const ComicDB * comic = (ComicDB *)item;
 			t.setVariable(QString("element%1.browse").arg(i),"");
-			t.setVariable(QString("element%1.image.width").arg(i),"80px");
 			//t.setVariable(QString("element%1.downloadurl").arg(i),"/library/"+libraryName+"/comic/"+QString("%1").arg(comic->id));
 			if(!session.isComicOnDevice(comic->info.hash) && !session.isComicDownloaded(comic->info.hash))
 				t.setVariable(QString("element%1.download").arg(i),QString("<a onclick=\"this.innerHTML='importing';this.className='importedButton';\" class =\"importButton\" href=\"%1\">import</a>").arg("/library/"+QString::number(libraryId)+"/comic/"+QString("%1").arg(comic->id)));
@@ -174,56 +209,28 @@ void FolderController::service(HttpRequest& request, HttpResponse& response)
 			
 			//t.setVariable(QString("element%1.image.url").arg(i),"/images/f.png");
 
+            t.setVariable(QString("element%1.read").arg(i),QString("<a class =\"readButton\" href=\"%1\">read</a>").arg("/library/"+QString::number(libraryId)+"/comic/"+QString("%1").arg(comic->id)+"/remote"));
+
 			t.setVariable(QString("element%1.image.url").arg(i),QString("/library/%1/cover/%2.jpg").arg(libraryId).arg(comic->info.hash));
+
+            t.setVariable(QString("element%1.size").arg(i),"<span class=\"comicSize\">" + QString::number(comic->info.hash.right(comic->info.hash.length()-40).toInt()/1024.0/1024.0,'f',2)+"Mb</span>");
+            if(comic->info.hasBeenOpened)
+                t.setVariable(QString("element%1.pages").arg(i),QString("<span class=\"numPages\">%1/%2 pages</span>").arg(comic->info.currentPage).arg(comic->info.numPages.toInt()));
+            else
+                t.setVariable(QString("element%1.pages").arg(i),QString("<span class=\"numPages\">%1</span>").arg(comic->info.numPages.toInt()));
+
+            if(comic->info.read)
+                t.setVariable(QString("element%1.status").arg(i), QString("<div class=\"mark\"><img src=\"/images/readMark.png\" style = \"width: 15px\"/> </div>"));
+            else if(comic->info.hasBeenOpened)
+                t.setVariable(QString("element%1.status").arg(i), QString("<div class=\"mark\"><img src=\"/images/readingMark.png\" style = \"width: 15px\"/> </div>"));
+            else
+                t.setVariable(QString("element%1.status").arg(i),"");
+
+
 		}
 		i++;
 	}
 
-	//int comicsOffset;// = qMax(0,((page - (numFolderPages - 1)) * 10) - (numFolders%10));
-
-	//int comicPage = numFolderPages!=0?page-(numFolderPages - 1):page;
-
-	//if(comicPage > 0)
-	//{
-	//	comicsOffset = elementsPerPage - (numFolders%elementsPerPage);
-	//	comicsOffset += (comicPage-1) *elementsPerPage;
-	//}
-	//else
-	//	comicsOffset = 0;
-
-	//
-
-	//int globalComicsOffset = elementsPerPage - (numFolders%elementsPerPage);
-	//int numComicsAtCurrentPage = 0;
-
-	//if(comicPage == 0) //primera p<>gina de los c<>mics
-	//		numComicsAtCurrentPage = qMin(globalComicsOffset,numComics);
-	//	else if (page == (numPages-1)) //<2F>ltima p<>gina de los c<>mics
-	//		numComicsAtCurrentPage = elementsPerPage-globalComicsOffset + (numComics%elementsPerPage);
-	//	else
-	//		numComicsAtCurrentPage = elementsPerPage - numFoldersAtCurrentPage;
-
-	//if(numComics == 0)
-	//	numComicsAtCurrentPage = 0;
-	////response.writeText(QString("numComicsAtCurrentPage : %1 <br/>").arg(numComicsAtCurrentPage));
-	////response.writeText(QString("comicsOffset : %1 <br/>").arg(comicsOffset));
-
-	//t.loop("elementcomic",numComicsAtCurrentPage);
-	////
-	//int j = 0;
-
-	//while(j<numComicsAtCurrentPage)
-	//{
-	//	const ComicDB * comic = (ComicDB *)folderComics.at(j+comicsOffset);
-	//	//if(comic->info.title == 0 || comic->info.title->isEmpty())
-	//		t.setVariable(QString("elementcomic%1.name").arg(j),comic->name);
-	//	//else
-	//	//	t.setVariable(QString("elementcomic%1.name").arg(i),*comic->info.title);
-	//	t.setVariable(QString("elementcomic%1.url").arg(j),"/library/"+QUrl::toPercentEncoding(libraryName)+"/comic/"+QString("%1").arg(comic->id));
-	//	t.setVariable(QString("elementcomic%1.coverulr").arg(j),"/library/"+QUrl::toPercentEncoding(libraryName)+"/cover/"+QString("%1").arg(comic->info.hash + ".jpg"));
-	//	j++;
-	//}
-
 	if(numPages > 1)
 	{
 		t.setCondition("pageIndex",true);
@@ -267,7 +274,6 @@ void FolderController::service(HttpRequest& request, HttpResponse& response)
 				i++;
 				count += indexCount.value(*itr);
 				indexPage = count/elementsPerPage;
-
 			}
 		}
 		else
@@ -295,12 +301,14 @@ void FolderController::service(HttpRequest& request, HttpResponse& response)
 		t.setVariable("page.previous",QString("/library/%1/folder/%2?page=%3").arg(libraryId).arg(parentId).arg((page==0)?page:page-1));
 		t.setVariable("page.next",QString("/library/%1/folder/%2?page=%3").arg(libraryId).arg(parentId).arg((page==numPages-1)?page:page+1));
 		t.setVariable("page.last",QString("/library/%1/folder/%2?page=%3").arg(libraryId).arg(parentId).arg(numPages-1));
-
+        t.setCondition("index", true);
 	}
 	else
 	{
+
 		t.loop("page",0);
 		t.loop("index",0);
+        t.setCondition("index", false);
 		t.setCondition("pageIndex",false);
 		t.setCondition("alphaIndex",false);
 	}

YACReaderLibrary/server/controllers/librariescontroller.cpp

@@ -11,8 +11,27 @@ LibrariesController::LibrariesController() {}
 void LibrariesController::service(HttpRequest& request, HttpResponse& response)
 {
     HttpSession session=Static::sessionStore->getSession(request,response);
+    if(session.contains("ySession")) //session is already alive check if it is needed to update comics
+    {
+        QString postData = QString::fromUtf8(request.getBody());
+        if(postData.length()>0) {
+            QList<QString> data = postData.split("\n");
+            if(data.length() > 2) {
+                //ONLY COMICS ARE UPDATED, DEVICE CHARACTERISTICS ARE INMUTABLE
+                QList<QString> comics = data.at(2).split(":").at(1).split("\t");
+                foreach(QString hash,comics) {
+                    session.setComicOnDevice(hash);
+                }
+            }
+        }
+    }
+    else
+    {
         session.set("ySession","ok");
+
         session.clearNavigationPath();
+        session.clearFoldersPath();
+
         response.setHeader("Content-Type", "text/html; charset=ISO-8859-1");
         response.setHeader("Connection","close");
 
@@ -31,10 +50,12 @@ void LibrariesController::service(HttpRequest& request, HttpResponse& response)
                 session.setComicOnDevice(hash);
             }
         }
-	else //valores por defecto, con propositos de depuraci<63>n
+        else //values by default, only for debug purposes.
         {
-		session.setDeviceType("ipad");
-		session.setDisplayType("retina");
+            session.setDeviceType("iphone");
+            session.setDisplayType("@2x");
+        }
+
     }
 
 	Template t=Static::templateLoader->getTemplate("libraries_"+session.getDeviceType(),request.getHeader("Accept-Language"));
@@ -54,6 +75,6 @@ void LibrariesController::service(HttpRequest& request, HttpResponse& response)
 		i++;
 	}
 
+    response.setStatus(200,"OK");
 	response.write(t.toLatin1(),true);
-	
 }

YACReaderLibrary/server/lib/bfHttpServer/httprequest.cpp

@@ -12,8 +12,8 @@ HttpRequest::HttpRequest(QSettings* settings) {
     status=waitForRequest;
     currentSize=0;
     expectedBodySize=0;
-    maxSize=settings->value("maxRequestSize","16000000").toInt();
-    maxMultiPartSize=settings->value("maxMultiPartSize","1000000").toInt();
+    maxSize=settings->value("maxRequestSize","32000000").toInt();
+    maxMultiPartSize=settings->value("maxMultiPartSize","32000000").toInt();
 }
 
 void HttpRequest::readRequest(QTcpSocket& socket) {

YACReaderLibrary/server/lib/bfHttpServer/httpsession.cpp

@@ -307,3 +307,36 @@ int HttpSession::topPage()
 		return dataPtr->yacreaderSessionData.navigationPath.top();
 	return 0;
 }
+
+void HttpSession::clearFoldersPath()
+{
+    if(dataPtr)
+        dataPtr->yacreaderSessionData.foldersPath.clear();
+}
+
+int HttpSession::popFolder()
+{
+    if(dataPtr && !(dataPtr->yacreaderSessionData.foldersPath.isEmpty()))
+        return dataPtr->yacreaderSessionData.foldersPath.pop();
+    return 0;
+}
+
+void HttpSession::pushFolder(int page)
+{
+    if(dataPtr)
+        dataPtr->yacreaderSessionData.foldersPath.push(page);
+}
+
+int HttpSession::topFolder()
+{
+    if(dataPtr)
+        return dataPtr->yacreaderSessionData.foldersPath.top();
+    return 0;
+}
+
+QStack<int> HttpSession::getFoldersPath()
+{
+    if(dataPtr)
+        return dataPtr->yacreaderSessionData.foldersPath;
+    return QStack<int>();
+}

YACReaderLibrary/server/lib/bfHttpServer/httpsession.h

@@ -119,6 +119,12 @@ public:
 	void pushPage(int page);
 	int topPage();
 
+    void clearFoldersPath();
+    int popFolder();
+    void pushFolder(int page);
+    int topFolder();
+    QStack<int> getFoldersPath();
+
 private:
 
 	struct YACReaderSessionData {
@@ -132,6 +138,7 @@ private:
 		qulonglong comicId;
 
 		QStack<int> navigationPath;
+        QStack<int> foldersPath;
 
 		Comic * comic;
 	};

YACReaderLibrary/server/lib/bfHttpServer/httpsessionstore.cpp

@@ -14,7 +14,7 @@ HttpSessionStore::HttpSessionStore(QSettings* settings, QObject* parent)
     connect(&cleanupTimer,SIGNAL(timeout()),this,SLOT(timerEvent()));
     cleanupTimer.start(60000);
     cookieName=settings->value("cookieName","sessionid").toByteArray();
-    expirationTime=settings->value("expirationTime",18000000).toInt();
+    expirationTime=settings->value("expirationTime",86400000).toInt();
     qDebug("HttpSessionStore: Sessions expire after %i milliseconds",expirationTime);
 }
 

YACReaderLibrary/server/lib/bfHttpServer/staticfilecontroller.cpp

@@ -56,6 +56,10 @@ void StaticFileController::service(HttpRequest& request, HttpResponse& response)
 	stringPath.remove(fileName);
 	HttpSession session=Static::sessionStore->getSession(request,response,false);
 	QString device = session.getDeviceType();
+    QString display = session.getDisplayType();
+    if(fileName.endsWith(".png"))
+        fileName = getDeviceAwareFileName(fileName, device, display, request.getHeader("Accept-Language"), stringPath);
+    else
         fileName = getDeviceAwareFileName(fileName, device, request.getHeader("Accept-Language"), stringPath);
 	QString newPath = stringPath.append(fileName);
 	path = newPath.toLocal8Bit();
@@ -209,3 +213,22 @@ QString StaticFileController::getDeviceAwareFileName(QString fileName, QString d
 	else
         return getLocalizedFileName(fileName,locales,path); //no hay archivo espec<65>fico para el dispositivo, pero puede haberlo para estas locales
 }
+
+QString StaticFileController::getDeviceAwareFileName(QString fileName, QString device, QString display, QString locales, QString path) const
+{
+    QFileInfo fi(fileName);
+    QString baseName = fi.baseName();
+    QString extension = fi.completeSuffix();
+
+    QString completeFileName = completeFileName = baseName+display+"."+extension;
+    if(QFile(docroot+"/"+path+completeFileName).exists())
+        return completeFileName;
+    else
+    {
+        completeFileName = baseName+"_"+device+display+"."+extension;
+        if((QFile(docroot+"/"+path+completeFileName).exists()))
+            return completeFileName;
+    }
+
+    return fileName;
+}

YACReaderLibrary/server/lib/bfHttpServer/staticfilecontroller.h

@@ -84,6 +84,7 @@ private:
 
 	QString getLocalizedFileName(QString fileName, QString locales, QString path) const;
 	QString getDeviceAwareFileName(QString fileName, QString device, QString locales, QString path) const;
+    QString getDeviceAwareFileName(QString fileName, QString device, QString display, QString locales, QString path) const;
 
 	bool exists(QString localizedName, QString path) const;
 };

release/server/docroot/css/styles_ipad.css

@@ -1,60 +1,229 @@
 body{
-	background-color: #363636;
+	background-color: #F5F5F5;
 	font-family: Arial, Helvetica, sans-serif;
 }
 
-#content{
-	width: 712px;
-	background: url("../images/topbox.jpg") no-repeat scroll 0 0 #FFF;
-	margin: 17px auto 0;
-	padding: 22px 0 22px 22px;	
-
-}
-
+/* libraries */
 #contentLibraries{
-	width: 256px;
-	background: url("../images/topboxLibraries.jpg") no-repeat scroll 0 0 #FFF;
-	margin: 16px auto 0;
-	padding: 16px;	
+	width: 300px;
+	border: 1px solid #C6C6C6;
+	background-color: white;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 9px;	
 }
 
-.sombraLibraries{
-	background: url("../images/bottomboxLibraries.jpg") no-repeat scroll bottom center #FFF;
-	width: 288px;
-	height: 14px;
-	margin: 0 auto;
+#contentLibraries .library-icon
+{
+	float: left;
+	background-color: white;
+	height: 18px;
+	padding: 11px 19px 10px 19px;
+		display:block;
 }
 
-.index{
-	width: 718px;
-	background: url("../images/topbox.jpg") no-repeat scroll 0 0 #FFF;
-	margin: 7px auto 0;
-	padding: 16px 0px 0px 16px;	
+#contentLibraries li
+{
+	border-bottom: 1px solid #e2e2e2;
+	position: relative;
+	list-style: none;
 }
 
+#contentLibraries li:last-child
+{
+	border: none;
+}
+
+#contentLibraries .library-link
+{
+	width: 211px;
+	height: 28px;
+	border: none;
+	padding: 11px 0 0 0px;
+	background-color: white;
+	display: block;
+	float:left;
+	font-family: Arial;
+	font-size: 16px; 
+	text-decoration: none;
+	color: #525252 ;
+}
+
+ #contentLibraries a
+{
+	position: absolute;
+	height: 39px;
+	width: 100%;
+	z-index: 10;
+	display: block;
+	top 0;
+	text-decoration: none;
+}
+
+#contentLibraries .library-indicator
+{
+	float: left;
+	background-color: white;
+	height: 8px;
+	padding: 16px 16px 15px 16px;
+		display:block;
+}
+
+
+#content h1
+{
+	color: #292929;
+	text-align: center;
+	font-size: 21px;
+}
+
+#contentLibraries h1{
+	color: #292929;
+	text-align: center;
+	border-bottom: 1px solid #C6C6C6;
+	font-size: 21px;
+	padding: 15px 0 16px 0;
+}
+
+#folder-header
+{
+	position: fixed;
+	width: 100%;
+	height: 88px;
+	background-color: rgba(255,255,255,0.9);
+	border-bottom: 1px solid #C6C6C6;
+	z-index: 999;
+}
+
+#folder-subheader1
+{
+	width: 100%;
+	height: 40px;
+	margin-top: 18px;
+
+}
+
+#folder-subheader2
+{
+	width: 100%;
+	padding-left: 16px;
+}
+
+#topIndex
+{
+	position: absolute;
+	left: 16px;
+	top: 19px;
+}
+
+#topIndex a
+{
+	float: left;
+}
+
+.indicator {
+	margin: 0 9px;
+}
+
+.path {
+	text-decoration: none;
+	color: #5C5C5C;
+	font-family: Arial, Helvetica;
+	font-size: 15px;
+
+}
+
+#header-combos
+{
+	position: absolute;
+	right: 15px;
+	top: 15px;
+	color: #a3a3a3;
+	width: 160px;
+}
+
+#topIndex .next{
+	width: 25px;
+	height: 19px;
+	border: none;
+	margin: 0 21px 4px 0;
+	padding: 5px 0 0 0;
+	display: block;
+	background: url("/images/next.png") no-repeat scroll 0 0 transparent;
+	background-size: 25px 19px;
+	padding: 0;
+	text-indent: -99999px;
+}
+
+#topIndex .previous{
+	width: 25px;
+	height: 19px;
+	border: none;
+	margin: 0 14px 4px 0;
+	padding: 5px 0 0 0;
+	display: block;
+	background: url("/images/prev.png") no-repeat scroll 0 0 transparent;
+	background-size: 25px 19px;
+	padding: 0;
+	text-indent: -99999px;
+}
+
+#topIndex .up{
+	width: 15px;
+	height: 19px;
+	border: none;
+	background: url("/images/up.png") no-repeat scroll 0 0 transparent;
+	background-size: 15px 19px;
+	color: #FFF;
+	display: block;
+	text-indent: -99999px;	
+}
+
+#itemContainer li
+{
+float: left;
+width: 242px;
+height: 120px;
+border: 1px solid #E2E2E2;
+margin: 9px 9px 0px 0;
+background-color: white;
+overflow: hidden;
+position: relative;
+}
+
+.folderContent
+{
+	padding-top: 90px;
+	padding-left: 9px;
+}
+/* hasta aquí */
+
 .folder
 {
 float: left;
+
 }
 
 .cover
 {
 float: left;
+overflow: hidden;
 }
 
-.cover img
+.mark
 {
- -webkit-box-shadow: 0px 0px 5px #333;
+	position: absolute;
+	top: 0px;
+	margin-left: 55px;
 }
 
-
 .info
 {
 padding: 8px 0px 0px 0px;
 float: left;
 position: relative;
 height: 115px;
-width: 135px;
+width: 158px;
 
 }
 
@@ -63,184 +232,133 @@ width: 135px;
 	position:absolute;
 	bottom:0px;
 	left:0px;
+	border-top: 1px solid #e2e2e2;
+	padding-top: 3px;
+	height: 25px;
+	width: 162px;
+	font-family: Arial;
+	color: #6e6e6e;
+	font-size: 10px;
 }
 
-#itemContainer li
+.elementInfo
+{
+	position:absolute;
+	bottom:24px;
+	padding-top: 3px;
+	height: 25px;
+	width: 162px;
+	font-family: Arial;
+	color: #adadad;
+	font-size: 10px;
+}
+
+.numPages
 {
 	float: left;
-width: 225px;
-height: 120px;
-margin: 20px 12px 20px 0;
+	padding-left:8px;
 }
 
+.comicSize
+{
+	float: right;
+	padding-right: 9px;
+}
+
+
 
 #itemContainer a
 {
 	text-decoration: none;
-	font-family: Arial;
-	color: #FFF;
-	font-size: 13px;
+
 	
 }
 
 .browseButton
 {
-	width: 57px;
-	height: 22px;
-	background: url("../images/bt_browse.jpg") no-repeat scroll 0 0 transparent;
+	width: 60px;
+	background: url("/images/browse.png") no-repeat scroll 0 0 transparent;
+	background-position: 16px 5px;
+	background-size: 7px 7px;
 	border: none;
-	text-align:center;
+	text-align:right;
 	display: block;
-	float: left;
-	padding: 4px 0 0 0;
-	margin: 0 0 0 4px;
+	float: right;
+	padding: 4px 10px 0 0;
+	color: #6e6e6e;
 }
 
 .importButton
 {
-	width: 57px;
-	height: 18px;
-	background: url("../images/bt_import.jpg") no-repeat scroll 0 0 transparent;
+	width: 60px;
+	background: url("/images/download.png") no-repeat scroll 0 0 transparent;
+	background-position: 3px 5px;
+	background-size: 7px 8px;
 	border: none;
-	text-align:center;
+	text-align:left;
 	display: block;
 	float: left;
 	margin: 0 0 0 4px;
-	padding: 4px 0 0 0;
+	padding: 4px 0 0 16px;
+	color: #6e6e6e;
+}
+
+.readButton
+{
+	width: 60px;
+	background: url("/images/read.png") no-repeat scroll 0 0 transparent;
+	background-position: 24px 5px;
+	background-size: 7px 9px;
+	border: none;
+	text-align:right;
+	display: block;
+	float: right;
+	padding: 4px 10px 0 0;
+	color: #6e6e6e;
 }
 
 .importedButton
 {
-	width: 67px;
-	height: 18px;
-	background: url("../images/bt_import.jpg") no-repeat scroll 0 -22px transparent;
+	width: 60px;
+	background: url("/images/imported.png") no-repeat scroll 0 0 transparent;
+	background-position: 2px 6px;
+	background-size: 8px 6px;
 	border: none;
-	text-align:center;
+	text-align:left;
 	display: block;
 	float: left;
 	margin: 0 0 0 4px;
-	padding: 4px 0 0 0;
-	text-decoration: none;
-	font-family: Arial;
-	color: #FFF;
-	font-size: 13px;
+	padding: 4px 0 0 16px;
+	color: #6e6e6e;
 }
 
-#librariesList a
-{
-	width: 256px;
-	height: 32px;
-	background: url("../images/bt_library_iphone.jpg") no-repeat scroll 0 0 transparent;
-	border: none;
-	display: block;
-	padding: 9px 0 0 40px;
-	text-decoration: none;
-	font-family: Arial;
-	color: #FFF;
-	font-size: 13px;
+
+#indexes{
+	border-top: 1px solid #C6C6C6;
+	background-color: white;
+	padding: 0px;
+	margin: 9px 0 0 0;
 }
 
-#topIndex
-{
-	width: 100%;
-	float: right;
-	margin: 0 24px 15px 0;
-}
-
-#topIndex a
-{
-	float: right;
-}
-
-#topIndex .next{
-	width: 29px;
-	height: 29px;
-	border: none;
-	margin: 0 8px 4px 0;
-	padding: 5px 0 0 0;
-	display: block;
-	background: url("../images/bt_next.jpg") no-repeat scroll 0 0 transparent;
-	padding: 0;
-	text-indent: -9999px;
-}
-
-#topIndex .previous{
-	width: 29px;
-	height: 29px;
-	border: none;
-	margin: 0 8px 4px 0;
-	padding: 5px 0 0 0;
-	display: block;
-	background: url("../images/bt_previous.jpg") no-repeat scroll 0 0 transparent;
-	padding: 0;
-	text-indent: -9999px;
-}
-
-#topIndex .up{
-	width: 92px;
-	height: 29px;
-	border: none;
-	margin: 0 8px 4px 0;
-	padding: 5px 0 0 0;
-	background: url("../images/bt_libraries.jpg") no-repeat scroll 0 0 transparent;
-	color: #FFF;
-	font-size: 17px;
-	display: block;
-	text-decoration: none;
-	font-family: Arial;
-	font-weight: bold;
-	text-align:center;
-}
-
-#topIndex .libraries{
-	width: 92px;
-	height: 29px;
-	border: none;
-	margin: 0 8px 4px 0;
-	padding: 6px 0 0 0;
-	background: url("../images/bt_libraries.jpg") no-repeat scroll 0 0 transparent;
-	color: #FFF;
-	font-size: 17px;
-	display: block;
-	text-decoration: none;
-	font-family: Arial;
-	font-weight: bold;
-	text-align:center;
-}
-
-#libraryList li
-{
-
-}
-
-#libraryList a
-{
-	width: 256px;
-	height: 32px;
-	background: url("../images/bt_library.jpg") no-repeat scroll 0 0 transparent;
-	border: none;
-	padding: 8px 0 0 40px;
-	color: #FFF;
-	font-size: 14px;
-	display: block;
-	text-decoration: none;
-	font-family: Arial;
+.index{
+	background-color: white;
+	margin: 9px 0 9px 0;
 }
 
 
 #alphaIndex a, #pageIndex a{
 	width: 29px;
-	height: 29px;
-	background: url("../images/bt_index.jpg") no-repeat scroll 0 0 transparent;
+	height: 24px;
 	border: none;
-	margin: 0 8px 4px 0;
-	padding: 5px 0 0 0;
-	color: #FFF;
+	margin: 0 0 9px 9px;
+	padding: 5px 0 0 0px;
+	color: #5C5C5C;
 	font-size: 20px;
+	text-align: center;
 	display: block;
 	text-decoration: none;
 	font-family: Arial;
-	font-weight: bold;
+	border: 1px solid #E2E2E2;
 	text-align:center;
 }
 
@@ -249,36 +367,12 @@ margin: 20px 12px 20px 0;
 }
 
 #pageIndex .current{
-	background: url("../images/bt_current.jpg") no-repeat scroll 0 0 transparent;
-	color: #EBEBEB;
+	color: white;
+	background-color: #A2A2A2;
+	border: 1px solid #A2A2A2;
+
 }
 
-#alphaIndex .next, #pageIndex .next {
-	background: url("../images/bt_next.jpg") no-repeat scroll 0 0 transparent;
-	padding: 0;
-	text-indent: -9999px;
-}
-#alphaIndex .previous, #pageIndex .previous{
-	background: url("../images/bt_previous.jpg") no-repeat scroll 0 0 transparent;
-	padding: 0;
-	text-indent: -9999px;
-}
-#alphaIndex .first, #pageIndex .first{
-	background: url("../images/bt_first.jpg") no-repeat scroll 0 0 transparent;
-	padding: 0;
-	text-indent: -9999px;
-}
-#alphaIndex .last, #pageIndex .last{
-	background: url("../images/bt_last.jpg") no-repeat scroll 0 0 transparent;
-	padding: 0;
-	text-indent: -9999px;
-}
-	#content h1, #contentLibraries h1{
-		color: #696969;
-		font-weight: bold;
-		font-size: 21px;
-		margin: 0 0 5px 0;
-	}
 	#content h2, #contentLibraries h2{
 		color: #000;
 		font-weight: bold;
@@ -289,13 +383,13 @@ margin: 20px 12px 20px 0;
 	.inputs_login{
 		width: 256px;
 		height: 64px;
-		background: url("../images/fnd_inputs.jpg") no-repeat scroll 0 0 #FFF;
+		background: url("/images/fnd_inputs.jpg") no-repeat scroll 0 0 #FFF;
 		margin: 0 0 18px 0;
 	}
 		.username{
 			width: 200px;
 			height: 24px;
-			background: url("../images/fnd_input_username.jpg") no-repeat scroll 0 0 #2b2b2b;
+			background: url("/images/fnd_input_username.jpg") no-repeat scroll 0 0 #2b2b2b;
 			border: none;
 			padding: 0 0 0 44px;
 			margin: 5px 0 6px 8px;
@@ -305,7 +399,7 @@ margin: 20px 12px 20px 0;
 		.pass{
 			width: 200px;
 			height: 24px;
-			background: url("../images/fnd_input_pass.jpg") no-repeat scroll 0 0 #2b2b2b;
+			background: url("/images/fnd_input_pass.jpg") no-repeat scroll 0 0 #2b2b2b;
 			border: none;
 			padding: 0 0 0 44px;
 			margin: 0 0 0 8px;
@@ -315,7 +409,7 @@ margin: 20px 12px 20px 0;
 		.button_sign{
 			width: 86px;
 			height: 30px;
-			background: url("../images/bt_login.jpg") no-repeat scroll 0 0 transparent;
+			background: url("/images/bt_login.jpg") no-repeat scroll 0 0 transparent;
 			border: none;
 			margin: 0;
 			padding: 0;
@@ -331,12 +425,7 @@ margin: 20px 12px 20px 0;
 			margin: 0 0 0 8px;
 			line-height: 120%;
 		}
-.sombra{
-	background: url("../images/bottombox.jpg") no-repeat scroll bottom center #FFF;
-	width: 734px;
-	height: 13px;
-	margin: 0 auto;
-}
+
 .clear{
 	height: 2px;
 	clear: both;
@@ -344,11 +433,33 @@ margin: 20px 12px 20px 0;
 
 .title{
 	font-family: Arial;
-	font-weight: bold;
 	font-size: 12px;
 	margin: 0 0 0 6px;
-	color: #333;
+	color: #555555                                                                     ;
 	overflow: hidden;
 	word-wrap: break-word;
 	height: 80px;
+		text-decoration: none;
+}
+
+#indexalpha, #indexnumber{
+
+    -webkit-appearance: none;
+    background-color: rgba(255,255,255,0);
+    border-radius: 0px;
+    border: none;
+    color: #a3a3a3;
+    font-size: 16px;
+    font-family: Arial, Helvetica;
+    height: 30px;
+    margin: 0 0 0 10px;
+    padding:0;
+   	float: right;
+}
+
+.comboIndicator {
+	float: right;
+	padding: 14px 0 0 0;
+	margin: 0 0 0 4px;
+	width: 5px;
 }

release/server/docroot/css/styles_iphone.css

@@ -1,138 +1,119 @@
 body{
-	background-color: #363636;
+	background-color: #F5F5F5;
 	font-family: Arial, Helvetica, sans-serif;
 }
 
-#content{
-	width: 256px;
-	background: url("../images/topbox.jpg") no-repeat scroll 0 0 #FFF;
-	margin: 16px auto 0;
-	padding: 16px;	
+/* libraries */
+#contentLibraries{
+	width: 300px;
+	border: 1px solid #C6C6C6;
+	background-color: white;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 9px;	
 }
 
-.folder
+#contentLibraries .library-icon
 {
 	float: left;
+	background-color: white;
+	height: 18px;
+	padding: 11px 19px 10px 19px;
+		display:block;
 }
 
-.cover
+#contentLibraries li
 {
-float: left;
-}
-
-.cover img
-{
- -webkit-box-shadow: 0px 0px 5px #333;
-}
-
-.index{
-	width: 272px;
-	background: url("../images/topbox.jpg") no-repeat scroll 0 0 #FFF;
-	margin: 7px auto 0;
-	padding: 16px 0px 0px 16px;	
-}
-
-.info
-{
-padding: 8px 0px 0px 0px;
-float: left;
+	border-bottom: 1px solid #e2e2e2;
 	position: relative;
-height: 110px;
-width: 160px;
+	list-style: none;
 }
 
-.buttons
+#contentLibraries li:last-child
+{
+	border: none;
+}
+
+#contentLibraries .library-link
+{
+	width: 211px;
+	height: 28px;
+	border: none;
+	padding: 11px 0 0 0px;
+	background-color: white;
+	display: block;
+	float:left;
+	font-family: Arial;
+	font-size: 16px; 
+	text-decoration: none;
+	color: #525252 ;
+}
+
+ #contentLibraries a
 {
 	position: absolute;
-bottom:0px;
-left:0px;
-}
-
-#itemContainer li
-{
-float: left;
-width: 250px;
-height: 120px;
-margin: 20px 0 15px 0;
-}
-
-#itemContainer a
-{
+	height: 39px;
+	width: 100%;
+	z-index: 10;
+	display: block;
+	top 0;
 	text-decoration: none;
-	font-family: Arial;
-	color: #FFF;
-	font-size: 13px;
-	
 }
 
-.browseButton
+#contentLibraries .library-indicator
 {
-	width: 67px;
-	height: 24px;
-	background: url("../images/bt_browse.jpg") no-repeat scroll 0 0 transparent;
-	border: none;
-	text-align:center;
-	display: block;
 	float: left;
-	padding: 5px 0 0 0;
-	margin: 0 0 0 8px;
+	background-color: white;
+	height: 8px;
+	padding: 16px 16px 15px 16px;
+		display:block;
 }
 
-.importButton
+
+#content h1
 {
-	width: 67px;
-	height: 20px;
-	background: url("../images/bt_import.jpg") no-repeat scroll 0 0 transparent;
-	border: none;
+	color: #292929;
 	text-align: center;
-	display: block;
-	float: left;
-	margin: 0 0 0 8px;
-	padding: 4px 0 0 0;
+	font-size: 21px;
 }
 
-.importedButton
-{
-	width: 77px;
-	height: 20px;
-	background: url("../images/bt_import.jpg") no-repeat scroll 0 -24px transparent;
-	border: none;
+#contentLibraries h1{
+	color: #292929;
 	text-align: center;
-	display: block;
-	float: left;
-	margin: 0 0 0 4px;
-	padding: 4px 0 0 0;
-	text-decoration: none;
-	font-family: Arial;
-	color: #FFF;
-	font-size: 13px;
+	border-bottom: 1px solid #C6C6C6;
+	font-size: 21px;
+	padding: 15px 0 16px 0;
 }
 
-#librariesList li
+#folder-header
 {
+	position: fixed;
+	width: 100%;
+	height: 88px;
+	background-color: rgba(255,255,255,0.9);
+	border-bottom: 1px solid #C6C6C6;
+	z-index: 999;
+}
 
+#folder-subheader1
+{
+	width: 100%;
+	height: 40px;
+	margin-top: 18px;
 
 }
 
-#librariesList a
+#folder-subheader2
 {
-	width: 256px;
-	height: 32px;
-	background: url("../images/bt_library_iphone.jpg") no-repeat scroll 0 0 transparent;
-	border: none;
-	display: block;
-
-	padding: 9px 0 0 40px;
-	text-decoration: none;
-	font-family: Arial;
-	color: #FFF;
-	font-size: 13px;
+	width: 100%;
+	padding-left: 16px;
 }
 
 #topIndex
 {
-	width: 100%;
-	margin: 7px 0px 7px 0px;
+	position: absolute;
+	left: 16px;
+	top: 19px;
 }
 
 #topIndex a
@@ -140,95 +121,242 @@ margin: 20px 0 15px 0;
 	float: left;
 }
 
+.indicator {
+	margin: 0 5px;
+}
+
+.path {
+	text-decoration: none;
+	color: #5C5C5C;
+	font-family: Arial, Helvetica;
+	font-size: 15px;
+
+}
+
+#header-combos
+{
+	position: absolute;
+	right: 10px;
+	top: 15px;
+	color: #a3a3a3;
+	width: 160px;
+}
+
 #topIndex .next{
-	width: 29px;
-	height: 29px;
+	width: 25px;
+	height: 19px;
 	border: none;
-	margin: 0 8px 4px 0;
+	margin: 0 21px 4px 0;
 	padding: 5px 0 0 0;
 	display: block;
-	background: url("../images/bt_next.jpg") no-repeat scroll 0 0 transparent;
+	background: url("/images/next.png") no-repeat scroll 0 0 transparent;
+	background-size: 25px 19px;
 	padding: 0;
-	text-indent: -9999px;
+	text-indent: -99999px;
 }
 
 #topIndex .previous{
-	width: 29px;
-	height: 29px;
+	width: 25px;
+	height: 19px;
 	border: none;
-	margin: 0 8px 4px 0;
+	margin: 0 14px 4px 0;
 	padding: 5px 0 0 0;
 	display: block;
-	background: url("../images/bt_previous.jpg") no-repeat scroll 0 0 transparent;
+	background: url("/images/prev.png") no-repeat scroll 0 0 transparent;
+	background-size: 25px 19px;
 	padding: 0;
-	text-indent: -9999px;
+	text-indent: -99999px;
 }
 
 #topIndex .up{
-	width: 58px;
-	height: 29px;
+	width: 15px;
+	height: 19px;
 	border: none;
-	margin: 0 8px 4px 0;
-	padding: 5px 0 0 0;
-	background: url("../images/bt_up.jpg") no-repeat scroll 0 0 transparent;
+	background: url("/images/up.png") no-repeat scroll 0 0 transparent;
+	background-size: 15px 19px;
 	color: #FFF;
-	font-size: 17px;
 	display: block;
-	text-decoration: none;
-	font-family: Arial;
-	font-weight: bold;
-	text-align:center;
+	text-indent: -99999px;	
 }
 
-#topIndex .libraries{
-	width: 92px;
-	height: 29px;
-	border: none;
-	margin: 0 8px 4px 0;
-	padding: 6px 0 0 0;
-	background: url("../images/bt_libraries.jpg") no-repeat scroll 0 0 transparent;
-	color: #FFF;
-	font-size: 17px;
-	display: block;
-	text-decoration: none;
-	font-family: Arial;
-	font-weight: bold;
-	text-align:center;
-}
-
-#libraryList li
+#itemContainer li
 {
+width: 300px;
+height: 120px;
+border: 1px solid #E2E2E2;
+margin: 9px auto 0px auto;
+background-color: white;
+overflow: hidden;
+position: relative;
+}
+
+.folderContent
+{
+	padding-top: 90px;
+}
+/* hasta aquí */
+
+.folder
+{
+float: left;
 
 }
 
-#libraryList a
+.cover
 {
-	width: 256px;
-	height: 32px;
-	background: url("../images/bt_library.jpg") no-repeat scroll 0 0 transparent;
-	border: none;
-	padding: 8px 0 0 40px;
-	color: #FFF;
-	font-size: 14px;
-	display: block;
-	text-decoration: none;
+float: left;
+overflow: hidden;
+}
+
+.mark
+{
+	position: absolute;
+	top: 0px;
+	margin-left: 55px;
+}
+
+.info
+{
+padding: 8px 0px 0px 0px;
+float: left;
+position: relative;
+height: 115px;
+width: 212px;
+
+}
+
+.buttons
+{
+	position:absolute;
+	bottom:0px;
+	left:0px;
+	border-top: 1px solid #e2e2e2;
+	padding-top: 3px;
+	height: 25px;
+	width: 220px;
 	font-family: Arial;
+	color: #6e6e6e;
+	font-size: 10px;
+}
+
+.elementInfo
+{
+	position:absolute;
+	bottom:24px;
+	padding-top: 3px;
+	height: 25px;
+	width: 220px;
+	font-family: Arial;
+	color: #adadad;
+	font-size: 10px;
+}
+
+.numPages
+{
+	float: left;
+	padding-left:8px;
+}
+
+.comicSize
+{
+	float: right;
+	padding-right: 9px;
+}
+
+
+
+#itemContainer a
+{
+	text-decoration: none;
+
+	
+}
+
+.browseButton
+{
+	width: 60px;
+	background: url("/images/browse.png") no-repeat scroll 0 0 transparent;
+	background-position: 16px 5px;
+	background-size: 7px 7px;
+	border: none;
+	text-align:right;
+	display: block;
+	float: right;
+	padding: 4px 10px 0 0;
+	color: #6e6e6e;
+}
+
+.importButton
+{
+	width: 60px;
+	background: url("/images/download.png") no-repeat scroll 0 0 transparent;
+	background-position: 3px 5px;
+	background-size: 7px 8px;
+	border: none;
+	text-align:left;
+	display: block;
+	float: left;
+	margin: 0 0 0 4px;
+	padding: 4px 0 0 16px;
+	color: #6e6e6e;
+}
+
+.readButton
+{
+	width: 60px;
+	background: url("/images/read.png") no-repeat scroll 0 0 transparent;
+	background-position: 24px 5px;
+	background-size: 7px 9px;
+	border: none;
+	text-align:right;
+	display: block;
+	float: right;
+	padding: 4px 10px 0 0;
+	color: #6e6e6e;
+}
+
+.importedButton
+{
+	width: 60px;
+	background: url("/images/imported.png") no-repeat scroll 0 0 transparent;
+	background-position: 2px 6px;
+	background-size: 8px 6px;
+	border: none;
+	text-align:left;
+	display: block;
+	float: left;
+	margin: 0 0 0 4px;
+	padding: 4px 0 0 16px;
+	color: #6e6e6e;
+}
+
+
+#indexes{
+	border-top: 1px solid #C6C6C6;
+	background-color: white;
+	padding: 0px;
+	margin: 9px 0 0 0;
+}
+
+.index{
+	background-color: white;
+	margin: 9px 0 9px 0;
 }
 
 
 #alphaIndex a, #pageIndex a{
 	width: 29px;
-	height: 29px;
-	background: url("../images/bt_index.jpg") no-repeat scroll 0 0 transparent;
+	height: 24px;
 	border: none;
-	margin: 0 8px 4px 0;
-	padding: 5px 0 0 0;
-	color: #FFF;
+	margin: 0 0 9px 9px;
+	padding: 5px 0 0 0px;
+	color: #5C5C5C;
 	font-size: 20px;
+	text-align: center;
 	display: block;
 	text-decoration: none;
 	font-family: Arial;
-	font-weight: bold;
+	border: 1px solid #E2E2E2;
 	text-align:center;
 }
 
@@ -237,37 +365,13 @@ margin: 20px 0 15px 0;
 }
 
 #pageIndex .current{
-	background: url("../images/bt_current.jpg") no-repeat scroll 0 0 transparent;
-	color: #EBEBEB;
+	color: white;
+	background-color: #A2A2A2;
+	border: 1px solid #A2A2A2;
+
 }
 
-#alphaIndex .next, #pageIndex .next{
-	background: url("../images/bt_next.jpg") no-repeat scroll 0 0 transparent;
-	padding: 0;
-	text-indent: -9999px;
-}
-#alphaIndex .previous, #pageIndex .previous{
-	background: url("../images/bt_previous.jpg") no-repeat scroll 0 0 transparent;
-	padding: 0;
-	text-indent: -9999px;
-}
-#alphaIndex .first, #pageIndex .first{
-	background: url("../images/bt_first.jpg") no-repeat scroll 0 0 transparent;
-	padding: 0;
-	text-indent: -9999px;
-}
-#alphaIndex .last, #pageIndex .last{
-	background: url("../images/bt_last.jpg") no-repeat scroll 0 0 transparent;
-	padding: 0;
-	text-indent: -9999px;
-}
-	#content h1{
-		color: #696969;
-		font-weight: bold;
-		font-size: 21px;
-		margin: 0 0 5px 0;
-	}
-	#content h2{
+	#content h2, #contentLibraries h2{
 		color: #000;
 		font-weight: bold;
 		font-size: 12px;
@@ -277,13 +381,13 @@ margin: 20px 0 15px 0;
 	.inputs_login{
 		width: 256px;
 		height: 64px;
-		background: url("../images/fnd_inputs.jpg") no-repeat scroll 0 0 #FFF;
+		background: url("/images/fnd_inputs.jpg") no-repeat scroll 0 0 #FFF;
 		margin: 0 0 18px 0;
 	}
 		.username{
 			width: 200px;
 			height: 24px;
-			background: url("../images/fnd_input_username.jpg") no-repeat scroll 0 0 #2b2b2b;
+			background: url("/images/fnd_input_username.jpg") no-repeat scroll 0 0 #2b2b2b;
 			border: none;
 			padding: 0 0 0 44px;
 			margin: 5px 0 6px 8px;
@@ -293,7 +397,7 @@ margin: 20px 0 15px 0;
 		.pass{
 			width: 200px;
 			height: 24px;
-			background: url("../images/fnd_input_pass.jpg") no-repeat scroll 0 0 #2b2b2b;
+			background: url("/images/fnd_input_pass.jpg") no-repeat scroll 0 0 #2b2b2b;
 			border: none;
 			padding: 0 0 0 44px;
 			margin: 0 0 0 8px;
@@ -303,7 +407,7 @@ margin: 20px 0 15px 0;
 		.button_sign{
 			width: 86px;
 			height: 30px;
-			background: url("../images/bt_login.jpg") no-repeat scroll 0 0 transparent;
+			background: url("/images/bt_login.jpg") no-repeat scroll 0 0 transparent;
 			border: none;
 			margin: 0;
 			padding: 0;
@@ -319,12 +423,7 @@ margin: 20px 0 15px 0;
 			margin: 0 0 0 8px;
 			line-height: 120%;
 		}
-.sombra{
-	background: url("../images/bottombox.jpg") no-repeat scroll bottom center #FFF;
-	width: 288px;
-	height: 14px;
-	margin: 0 auto;
-}
+
 .clear{
 	height: 2px;
 	clear: both;
@@ -332,11 +431,33 @@ margin: 20px 0 15px 0;
 
 .title{
 	font-family: Arial;
-	font-weight: bold;
-	font-size: 14px;
+	font-size: 12px;
 	margin: 0 0 0 6px;
-	color: #333;
+	color: #555555                                                                     ;
 	overflow: hidden;
 	word-wrap: break-word;
-	height: 80px;
+	height: 65px;
+	text-decoration: none;
+}
+
+#indexalpha, #indexnumber{
+
+    -webkit-appearance: none;
+    background-color: rgba(255,255,255,0);
+    border-radius: 0px;
+    border: none;
+    color: #a3a3a3;
+    font-size: 16px;
+    font-family: Arial, Helvetica;
+    height: 30px;
+    margin: 0 0 0 10px;
+    padding:0;
+   	float: right;
+}
+
+.comboIndicator {
+	float: right;
+	padding: 14px 0 0 0;
+	margin: 0 0 0 4px;
+	width: 5px;
 }

release/server/templates/folder_ipad.tpl

@@ -7,23 +7,69 @@
 </head>
 <body>
 	<div id="content">
+		<div>
 
-		<h1>BROWSE AND IMPORT</h1>
-		<h2>{folder.name} {if pageIndex} - PAGE {page} OF {pages}{end pageIndex}</h2>
+			<div id="folder-header">
+				<div id="topIndex">  {if pageIndex} <a class="previous" href="{page.previous}">previous</a> <a class="next" href="{page.next}">next</a> {end pageIndex} <a class="up" href="{upurl}">up</a>  </div>
+
+
+				<div id="folder-subheader1">
+					<h1>{folder.name}</h1>
+				</div>
+
+				<div id ="folder-subheader2">
+					<a class="path" href="/">Libraries</a> <img class="indicator" src="/images/indicator.png" style="width: 5px"/> <a class="path" href="{library.url}">{library.name}</a> {loop path}  <img class="indicator" src="/images/indicator.png" style="width: 5px"/> <a class="path" href="{path.url}">{path.name}</a> {end path} 
+				</div>
+				<div id ="header-combos">
+					{if pageIndex}
+						<img class="comboIndicator" src="/images/combo.png"/>
+						<select name="indexnumber" id="indexnumber" onchange="navigateTo(this, 'window', false);">
+							<option value="" disabled selected>{page}/{pages}</option>
+							{loop page}
+							<option value="{page.url}">{page.number}</option>
+							{end page}
+						</select>
+					{end pageIndex}
+
+					{if alphaIndex}
+						<img class="comboIndicator" src="/images/combo.png"/>
+						<select name="indexalpha" id="indexalpha" onchange="navigateTo(this, 'window', false);">
+							<option value="" disabled selected>index</option>
+							{loop index}
+							<option value="{index.url}">{index.indexname}</option>
+							{end index}
+						</select>
+					{end alphaIndex}
+
+				</div>
+			</div>
 
-		<div id="topIndex"> {if pageIndex} <a class="next" href="{page.next}">next</a> <a class="previous" href="{page.previous}">previous</a> {end pageIndex} <a class="up" href="{upurl}">up</a>  <a class="libraries" href="/">Libraries</a>  </div>
 			<!--<a href="javascript:javascript:history.go(-1)">up</a>-->
 			<div class="folderContent">
 				<ul id="itemContainer">
 					{loop element}
-					<li><div class="{element.class}"><img style="width: {element.image.width}" src="{element.image.url}"/></div> <div class="info"> <div class="title"><p>{element.name}</p> </div><div class="buttons"> {element.download} {element.browse}  </div></div></li>
+					<li>
+						<div class="{element.class}">
+							<img style="width: 80px" src="{element.image.url}"/>
+						</div> 
+						<div class="info"> 
+							<div class="title"><p>{element.name}</p> 
+							</div>
+							<div class="elementInfo"> {element.pages} {element.size} 
+							</div>
+							<div class="buttons"> {element.download} {element.read} {element.browse}  
+							</div>
+						</div>
+						{element.status}
+					</li>
 					{end element}
 				</ul>
 				<div class="clear">&nbsp;</div>
 			</div>
 		</div>
-	<div class="sombra">&nbsp;</div>
 
+		{if index}
+		<div id="indexes">
 		{if alphaIndex}
 
 		<div class="index">
@@ -36,7 +82,6 @@
 			</ul>
 			<div class="clear">&nbsp;</div>
 		</div>
-	<div class="sombra">&nbsp;</div>
 
 		{end alphaIndex}
 
@@ -45,19 +90,25 @@
 
 		<div class="index">
 			<ul id="pageIndex">
-		<li> <a class="first" href="{page.first}">first</a> </li>
-		<li> <a class="previous" href="{page.previous}">previous</a> </li>
+<!--				<li> <a class="first" href="{page.first}">first</a> </li>
+				<li> <a class="previous" href="{page.previous}">previous</a> </li>-->
 
 				{loop page} <li>  <a class="{page.current}" href="{page.url}"> {page.number} </a> </li> {end page} 
 
-		<li> <a class="next" href="{page.next}">next</a> </li>
-		<li> <a class="last" href="{page.last}">last</a> </li>
+<!--				<li> <a class="next" href="{page.next}">next</a> </li>
+				<li> <a class="last" href="{page.last}">last</a> </li>-->
 			</ul>
 			<div class="clear">&nbsp;</div>
 		</div>
-	<div class="sombra">&nbsp;</div>
 		{end pageIndex}
+		</div>
+		{end index}
 
+		<script type="text/javascript">
+		function navigateTo(sel, target) {
+		    window[target].location.href = sel.options[sel.selectedIndex].value;
+		}
+		</script>
 
 	</body>
 	</html>

release/server/templates/folder_iphone.tpl

@@ -7,24 +7,70 @@
 </head>
 <body>
 	<div id="content">
+		<div>
 
-		<h1>BROWSE AND IMPORT</h1>
-		<h2>{folder.name} {if pageIndex} - PAGE {page} OF {pages} {end pageIndex}</h2>
+			<div id="folder-header">
+				<div id="topIndex">  {if pageIndex} <a class="previous" href="{page.previous}">previous</a> <a class="next" href="{page.next}">next</a> {end pageIndex} <a class="up" href="{upurl}">up</a>  </div>
+
+
+				<div id="folder-subheader1">
+				</div>
+
+				<div id ="folder-subheader2">
+					<a class="path" href="/">Libraries</a> <!--<img class="indicator" src="/images/indicator.png" style="width: 5px"/> <a class="path" href="{library.url}">{library.name}</a> -->{loop path}  <img class="indicator" src="/images/indicator.png" style="width: 5px"/> <a class="path" href="{path.url}">{path.name}</a> {end path} 
+				</div>
+				<div id ="header-combos">
+					{if pageIndex}
+						<img class="comboIndicator" src="/images/combo.png"/>
+						<select name="indexnumber" id="indexnumber" onchange="navigateTo(this, 'window', false);">
+							<option value="" disabled selected>{page}/{pages}</option>
+							{loop page}
+							<option value="{page.url}">{page.number}</option>
+							{end page}
+						</select>
+					{end pageIndex}
+
+					{if alphaIndex}
+						<img class="comboIndicator" src="/images/combo.png"/>
+						<select name="indexalpha" id="indexalpha" onchange="navigateTo(this, 'window', false);">
+							<option value="" disabled selected>index</option>
+							{loop index}
+							<option value="{index.url}">{index.indexname}</option>
+							{end index}
+						</select>
+					{end alphaIndex}
+
+				</div>
+			</div>
 
-		<div id="topIndex"> <a class="libraries" href="/">Libraries</a> <a class="up" href="{upurl}">up</a> {if pageIndex} <a class="previous" href="{page.previous}">previous</a><a class="next" href="{page.next}">next</a>  {end pageIndex}   </div>
 			<!--<a href="javascript:javascript:history.go(-1)">up</a>-->
 			<div class="folderContent">
 				<ul id="itemContainer">
 					{loop element}
-					<li><div class="{element.class}"><img style="width: {element.image.width}" src="{element.image.url}"/></div> <div class="info"> <div class="title" > <p>{element.name}</p> </div> <div class="buttons"> {element.download} {element.browse}  </div></div></li>
+					<li>
+						<div class="{element.class}">
+							<img style="width: 80px" src="{element.image.url}"/>
+						</div> 
+						<div class="info"> 
+							<div class="title"><p>{element.name}</p> 
+							</div>
+							<div class="elementInfo"> {element.pages} {element.size} 
+							</div>
+							<div class="buttons"> {element.download} {element.read} {element.browse}  
+							</div>
+						</div>
+						{element.status}
+					</li>
 					{end element}
 				</ul>
 				<div class="clear">&nbsp;</div>
 			</div>
 		</div>
-	<div class="sombra">&nbsp;</div>
 
+		{if index}
+		<div id="indexes">
 		{if alphaIndex}
+
 		<div class="index">
 			<ul id="alphaIndex">
 				{loop index} 
@@ -35,7 +81,6 @@
 			</ul>
 			<div class="clear">&nbsp;</div>
 		</div>
-	<div class="sombra">&nbsp;</div>
 
 		{end alphaIndex}
 
@@ -44,19 +89,25 @@
 
 		<div class="index">
 			<ul id="pageIndex">
-		<li> <a class="first" href="{page.first}">first</a> </li>
-		<li> <a class="previous" href="{page.previous}">previous</a> </li>
+<!--				<li> <a class="first" href="{page.first}">first</a> </li>
+				<li> <a class="previous" href="{page.previous}">previous</a> </li>-->
 
 				{loop page} <li>  <a class="{page.current}" href="{page.url}"> {page.number} </a> </li> {end page} 
 
-		<li> <a class="next" href="{page.next}">next</a> </li>
-		<li> <a class="last" href="{page.last}">last</a> </li>
+<!--				<li> <a class="next" href="{page.next}">next</a> </li>
+				<li> <a class="last" href="{page.last}">last</a> </li>-->
 			</ul>
 			<div class="clear">&nbsp;</div>
 		</div>
-	<div class="sombra">&nbsp;</div>
-	
 		{end pageIndex}
+		</div>
+		{end index}
+
+		<script type="text/javascript">
+		function navigateTo(sel, target) {
+		    window[target].location.href = sel.options[sel.selectedIndex].value;
+		}
+		</script>
 
 	</body>
 	</html>

release/server/templates/libraries_ipad.tpl

@@ -3,20 +3,24 @@
 <head>	
 	<link rel="stylesheet" href="/css/reset.css" type="text/css" />
 	<link rel="stylesheet" href="/css/styles.css" type="text/css" />
-	<title>Login</title>	
+	<title>Libraries</title>	
 </head>
 <body>
 	<div id="contentLibraries">
-		<h1>LIBRARIES</h1>
-		<h2>Select a comic library</h2>
+		<h1>Libraries</h1>
 		<p>
 			<ul id="librariesList"> 
 				{loop library}
-					<li><a href="/library/{library.name}/folder/1">{library.label}</a></li>
+					<li>
+					<div class="library-icon"> <img width="14px" height="18px" src="../images/library.png" /> </div>
+					<div class="library-link"> {library.label} </div>
+					<div class="library-indicator"> <img width="5px" height="9px" src="../images/indicator.png" /> </div>
+					<a href="/library/{library.name}/folder/1">&nbsp;</a>
+					<div class="clear">&nbsp;</div>
+					</li>
 				{end library}
 			</ul>
 		</p>
 	</div>
-	<div class="sombraLibraries">&nbsp;</div>
 	</body>
 </html>

release/server/templates/libraries_iphone.tpl

@@ -3,20 +3,24 @@
 <head>	
 	<link rel="stylesheet" href="/css/reset.css" type="text/css" />
 	<link rel="stylesheet" href="/css/styles.css" type="text/css" />
-	<title>Login</title>	
+	<title>Libraries</title>	
 </head>
 <body>
-	<div id="content">
-		<h1>LIBRARIES</h1>
-		<h2>Select a comic library</h2>
+	<div id="contentLibraries">
+		<h1>Libraries</h1>
 		<p>
 			<ul id="librariesList"> 
 				{loop library}
-					<li><a href="/library/{library.name}/folder/1">{library.label}</a></li>
+					<li>
+					<div class="library-icon"> <img width="14px" height="18px" src="../images/library.png" /> </div>
+					<div class="library-link"> {library.label} </div>
+					<div class="library-indicator"> <img width="5px" height="9px" src="../images/indicator.png" /> </div>
+					<a href="/library/{library.name}/folder/1">&nbsp;</a>
+					<div class="clear">&nbsp;</div>
+					</li>
 				{end library}
 			</ul>
 		</p>
 	</div>
-	<div class="sombra">&nbsp;</div>
 	</body>
 </html>