diff options
| author | Klaus von der Heyde <39677540+asc-soc@users.noreply.github.com> | 2019-07-15 01:40:50 +0200 |
|---|---|---|
| committer | Christian Dywan <christian@twotoasts.de> | 2019-07-15 01:40:50 +0200 |
| commit | f636c8ae806aeabac55558749053b010e73627b6 (patch) | |
| tree | 0dfdf7dec215455553c6fd100c2c920bcfb5fbc3 | |
| parent | 6ba5a1c091a7cdbd10f45fe87bb94f77ced155bf (diff) | |
| download | midori-git-f636c8ae806aeabac55558749053b010e73627b6.tar.gz | |
Layout changes for Speed Dial (#345)
* Use a background image for speed dials
This allows easier positioning without stretching.
Also move the box-shadow to the shortcut container to make sure
the hover effect applies to the whole area consistently.
Fixes: #206
* Changed CSS property to "white-space: nowrap;" to avoid multi-line shortcut titles.
* Added CSS margin to shortcut title, to avoid collision with round corner.
* Repositioned shortcut title to the bottom of each box.
| -rw-r--r-- | core/CMakeLists.txt | 1 | ||||
| -rw-r--r-- | core/app.vala | 5 | ||||
| -rw-r--r-- | data/about.css | 29 |
3 files changed, 16 insertions, 19 deletions
diff --git a/core/CMakeLists.txt b/core/CMakeLists.txt index 0fb9d09f..c4982de9 100644 --- a/core/CMakeLists.txt +++ b/core/CMakeLists.txt @@ -47,6 +47,7 @@ add_custom_command(OUTPUT resources.c --target ${CMAKE_CURRENT_BINARY_DIR}/resources.c ${CMAKE_SOURCE_DIR}/gresource.xml DEPENDS ${CMAKE_SOURCE_DIR}/gresource.xml + DEPENDS ${CMAKE_SOURCE_DIR}/data/about.css DEPENDS ${CMAKE_SOURCE_DIR}/data/gtk3.css DEPENDS ${CMAKE_SOURCE_DIR}/data/web-extension-api.js DEPENDS ${UI_FILES} diff --git a/core/app.vala b/core/app.vala index 76f79518..fdec1c7d 100644 --- a/core/app.vala +++ b/core/app.vala @@ -187,12 +187,11 @@ namespace Midori { foreach (var shortcut in shortcuts) { index++; content += """ - <div class="shortcut"> + <div class="shortcut" style="background-image: url('%s')"> <a href="%s" accesskey="%u"> - <img src="%s" /> <span class="title">%s</span> </a> - </div>""".printf (shortcut.uri, index, "favicon:///" + shortcut.uri, shortcut.title); + </div>""".printf ("favicon:///" + shortcut.uri, shortcut.uri, index, shortcut.title); } string stylesheet = (string)resources_lookup_data ("/data/about.css", ResourceLookupFlags.NONE).get_data (); diff --git a/data/about.css b/data/about.css index cc2144ee..98e5c468 100644 --- a/data/about.css +++ b/data/about.css @@ -80,13 +80,18 @@ button { } .shortcut { + position: relative; width: 27%; - max-width: 32%; height: 30%; margin: 1%; - display: inline-table; + background-repeat: no-repeat; + background-position: center; + display: inline-block; box-sizing: border-box; overflow: hidden; + border-radius: 12px; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), + 0 1px 2px rgba(0,0,0,0.24); } .shortcut a { @@ -96,29 +101,21 @@ button { text-decoration: none; } -.shortcut a img { - width: 50%; - height: 50%; - margin: auto; - margin-bottom: .5em; - display: block; - border-radius: 12px; - box-shadow: 0 1px 3px rgba(0,0,0,0.12), - 0 1px 2px rgba(0,0,0,0.24); -} - -.shortcut a:hover img { +.shortcut:hover { box-shadow: 0 3px 5px rgba(0,0,0,0.24), 0 3px 4px rgba(0,0,0,0.48); } .shortcut a .title { + position: absolute; + bottom: 4px; + margin: 4px; width: 90%; color: #222222; text-align: center; text-overflow: ellipsis; - word-wrap: nowrap; - max-height: 2em; + white-space: nowrap; + height: 2em; line-height: 1em; overflow: hidden; display: block; |