Merge pull request #43 from Skylsmoi/335/rewrite_welcome_page

rewrite welcome page (fixed histo)

src/server/kiwix-serve.cpp

@@ -879,25 +879,29 @@ int main(int argc, char **argv) {
   }
 
   /* Compute the Welcome HTML */
-  string welcomeBooksHtml;
+  string welcomeBooksHtml = ""
+"<div class='book__list'>";
   for (itr = booksIds.begin(); itr != booksIds.end(); ++itr) {
     libraryManager.getBookById(*itr, currentBook);
 
     if (!currentBook.path.empty() && readers.find(currentBook.getHumanReadableIdFromPath()) != readers.end()) {
-      welcomeBooksHtml += "<h3><a href=\"#\">" + currentBook.title + "</a></h3>\n \
-                           <table style=\"overflow-x: hidden; overflow-y: hidden; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;\"><tr>\n \
-                             <td style=\"background-repeat: no-repeat; background-image: url(data:" + currentBook.faviconMimeType+ ";base64," + currentBook.favicon + ")\"><div style=\"width: 50px\"></div></td>\n \
-                             <td style=\"width: 100%;\">" + currentBook.description +
-	                       "<br/><table style=\"font-size: small; color: grey; width: 100%;\">" +
-	"<tr><td style=\"width: 50%\">Size: " + kiwix::beautifyFileSize(atoi(currentBook.size.c_str())) + " (" + kiwix::beautifyInteger(atoi(currentBook.articleCount.c_str())) + " articles, " + kiwix::beautifyInteger(atoi(currentBook.mediaCount.c_str())) + " medias)\n \
-                                  </td><td>Date: " + currentBook.date + "</td><td style=\"vertical-align: bottom; width: 20%\" rowspan=\"3\"><form action=\"/" + currentBook.getHumanReadableIdFromPath() + "/\" method=\"GET\"><input style=\"align: right; right: 0px; float:right; width: 100%; height: 60px; font-weight: bold;\" type=\"submit\" value=\"Load\" /></form></td></tr>\n \
-                                  <tr><td>Author: " + currentBook.creator + "</td><td>Language: " + currentBook.language + "</td></tr>\n \
-                                  <tr><td>Publisher: " + (currentBook.publisher.empty() ? "unknown" :  currentBook.publisher ) + "</td><td></td></tr>\n \
-                                </table>\n \
-                             </td></tr>\n \
-                            </table>\n\n";
+        welcomeBooksHtml += ""
+"<a href='/" + currentBook.getHumanReadableIdFromPath() + "/'>"
+    "<div class='book'>"
+        "<div class='book__background' style='background-image: url(data:" + currentBook.faviconMimeType+ ";base64," + currentBook.favicon + ");'>"
+            "<div class='book__title' title='" + currentBook.title + "'>" + currentBook.title + "</div>"
+            "<div class='book__description' title='" + currentBook.description + "'>" + currentBook.description + "</div>"
+            "<div class='book__info'>"
+                "" + kiwix::beautifyInteger(atoi(currentBook.articleCount.c_str())) + " articles, " + kiwix::beautifyInteger(atoi(currentBook.mediaCount.c_str())) + " medias"
+            "</div>"
+        "</div>"
+    "</div>"
+"</a>";
     }
   }
+  welcomeBooksHtml += ""
+"</div>";
+
   welcomeHTML = replaceRegex(RESOURCE::home_html_tmpl, welcomeBooksHtml, "__BOOKS__");
 
 #ifndef _WIN32

static/server/home.html.tmpl

@@ -7,6 +7,25 @@
   <script type="text/javascript" src="/skin/jquery-ui/jquery-ui.min.js"></script>
   <link type="text/css" href="/skin/jquery-ui/jquery-ui.min.css" rel="Stylesheet" />
   <link type="text/css" href="/skin/jquery-ui/jquery-ui.theme.min.css" rel="Stylesheet" />
+  <style>
+	.book__list { text-align: center; }
+	.book {
+		display: inline-block; vertical-align: bottom; margin: 8px; padding: 12px 15px; width: 300px;
+		border: 1px solid #ccc; border-radius: 15px;
+		text-align: left; color: #000; font-family: sans-serif; font-size: 13px;
+	}
+	.book:hover { background-color: #eee; box-shadow: 2px 2px 5px 0px #ccc}
+	.book__background { background-repeat: no-repeat; background-size: auto; background-position: top right; }
+	.book__title {
+		padding: 0 55px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+		font-size: 18px; color: #0645ad;
+	}
+	.book__description {
+		padding: 5px 55px 5px 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+		font-size: 15px;
+	}
+	.book__info { line-height: 18px; color: #777; font-weight: bold; font-size: 13px; }
+  </style>
 <script>
 $(function() {
 $( "#accordion" ).accordion();
@@ -15,7 +34,7 @@ $( "#accordion" ).accordion();
 </head>
 <body class="kiwix">
 
-<div id="accordion" class="kiwix">
+<div class="kiwix">
   __BOOKS__
 </div>
 </body>