GNOME.org
 

[epiphany/gnome-3-22] Improve overview layout in small windows

commit c717349b8cd26bc8eaf6317eb8e28c3be4698ef6
Author: Michael Catanzaro <mcatanzaro gnome org>
Date:   Thu Sep 22 10:37:42 2016 -0500

    Improve overview layout in small windows
    
    It looks pretty bad currently if you resize Epiphany down to the point
    where five snapshots no longer fit in a row; then we wind up with four
    rows of snapshots, two with four snapshots and two with one snapshot.
    This sucks. Adrian found a great way to avoid this with CSS magic.

 embed/ephy-about-handler.c |   19 +++++++------------
 src/resources/about.css    |   23 +++--------------------
 2 files changed, 10 insertions(+), 32 deletions(-)
---
diff --git a/embed/ephy-about-handler.c b/embed/ephy-about-handler.c
index 1cf9d49..40124c9 100644
--- a/embed/ephy-about-handler.c
+++ b/embed/ephy-about-handler.c
@@ -450,6 +450,7 @@ history_service_query_urls_cb (EphyHistoryService     *history,
                           "<head>\n"
                           "  <title>%s</title>\n"
                           "  <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n"
+                          "  <meta name=\"viewport\" content=\"width=device-width\">"
                           "  <link href=\""EPHY_PAGE_TEMPLATE_ABOUT_CSS "\" rel=\"stylesheet\" 
type=\"text/css\">\n"
                           "  <script>\n"
                           "    document.onkeypress = function listenKeypress(event) {\n"
@@ -498,9 +499,7 @@ history_service_query_urls_cb (EphyHistoryService     *history,
   }
 
   g_string_append (data_str,
-                   "<div id=\"overview\">\n"
-                   "  <div id=\"overview-grid\">\n"
-                   "    <ul id=\"overview-item-list\">\n");
+                   "<div id=\"overview\">\n");
 
   for (l = urls; l; l = g_list_next (l)) {
     EphyHistoryURL *url = (EphyHistoryURL *)l->data;
@@ -522,21 +521,17 @@ history_service_query_urls_cb (EphyHistoryService     *history,
     }
 
     g_string_append_printf (data_str,
-                            "<li>"
-                            "  <a class=\"overview-item\" title=\"%s\" href=\"%s\">"
-                            "    <div class=\"overview-close-button\" 
onclick=\"removeFromOverview(this.parentNode, event)\" title=\"%s\">&#10006;</div>"
-                            "    <span class=\"overview-thumbnail\"%s></span>"
-                            "    <span class=\"overview-title\">%s</span>"
-                            "  </a>"
-                            "</li>",
+                            "<a class=\"overview-item\" title=\"%s\" href=\"%s\">"
+                            "  <div class=\"overview-close-button\" 
onclick=\"removeFromOverview(this.parentNode, event)\" title=\"%s\">&#10006;</div>"
+                            "  <span class=\"overview-thumbnail\"%s></span>"
+                            "  <span class=\"overview-title\">%s</span>"
+                            "</a>",
                             g_markup_escape_text (url->title, -1), url->url, _("Remove from overview"),
                             thumbnail_style ? thumbnail_style : "", url->title);
     g_free (thumbnail_style);
   }
 
   data_str = g_string_append (data_str,
-                              "      </ul>\n"
-                              "    </div>\n"
                               "  </div>\n"
                               "</body></html>\n");
 
diff --git a/src/resources/about.css b/src/resources/about.css
index 5146ab6..3c66d4c 100644
--- a/src/resources/about.css
+++ b/src/resources/about.css
@@ -209,30 +209,13 @@ html.epiphany-html {
     top: 0;
     right: 0;
     left: 0;
-}
-
-#overview-grid {
-    /* Width for 5 thumbnails and their paddings */
-    max-width: 1060px;
-    margin-left: auto;
-    margin-right:auto;
-    padding: 0;
-}
-
-#overview-item-list {
-    padding: 0;
-}
-
-#overview-grid li {
-    list-style-type: none;
-    display: inline-block;
-    vertical-align:top;
+    text-align: center;
 }
 
 .overview-item {
     width: 180px;
     height: 220px;
-    display: table-cell;
+    display: inline-block;
     vertical-align: top;
     overflow: hidden;
     padding: 15px;
@@ -240,7 +223,7 @@ html.epiphany-html {
     position: relative;
     transition: 0;
     top: 0;
-    float: left;
+    text-align: center;
 }
 
 .overview-title {
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]