From 4877ec98e668b1741d7a2a4d3e4a177ec495db39 Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Tue, 19 Feb 2019 22:20:46 -0800 Subject: Vertical layout support --- app.css | 21 +++++++++++++++++---- app.js | 29 +++++++++++++++++++++++++++++ app.scss | 31 ++++++++++++++++++++++++++++--- index.html | 59 ++++++++++++++++++++++++++--------------------------------- 4 files changed, 100 insertions(+), 40 deletions(-) diff --git a/app.css b/app.css index 60d2762..846b54b 100644 --- a/app.css +++ b/app.css @@ -11,7 +11,7 @@ body { font-size: 2rem; } body h2 { font-size: 1.7rem; - margin-top: 3rem; + margin-top: 2rem; margin-bottom: 1rem; } body h2 .fas, body h2 .fab, body h2 .far { margin-right: 10px; } @@ -92,6 +92,8 @@ body { border: none; box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; } + body .card a { + outline: none; } body .card:hover { background-color: #FFFFFF; transform: translate(0, -3px); } @@ -102,17 +104,26 @@ body { body .card-content { height: 85px; padding: 1.3rem; } + body .layout-vertical .card { + border-radius: 0; } + body .layout-vertical .column div:first-of-type .card { + border-radius: 5px 5px 0 0; } + body .layout-vertical .column div:last-child .card { + border-radius: 0 0 5px 5px; } body .footer { position: fixed; left: 0; right: 0; bottom: 0; - padding: 1rem 0.5rem; + padding: 0.5rem; text-align: left; background-color: #fafafa; - border-top: 1px solid #F5F5F5; } + border-top: 1px solid #F5F5F5; + color: #676767; + font-size: 0.85rem; } body .search-bar { - position: relative; } + position: relative; + display: inline-block; } body .search-bar #search { border: none; background-color: #5f98f6; @@ -137,6 +148,8 @@ body { height: 20px; } body .search-bar:focus-within .search-label::before { color: #4a4a4a; } + body .icon-button { + display: inline-block; } body .offline-message { text-align: center; margin: 35px 0; } diff --git a/app.js b/app.js index 6e20ea3..dc8b6cc 100644 --- a/app.js +++ b/app.js @@ -4,6 +4,7 @@ const app = new Vue({ config: null, offline: false, filter: '', + vlayout: true }, created: function () { let that = this; @@ -46,6 +47,34 @@ const app = new Vue({ } }); +Vue.component('service', { + props: ['item'], + template: `
+
` +}); + if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('/worker.js'); diff --git a/app.scss b/app.scss index da6271d..ab9a394 100644 --- a/app.scss +++ b/app.scss @@ -18,7 +18,7 @@ body { h2 { font-size: 1.7rem; - margin-top: 3rem; + margin-top: 2rem; margin-bottom: 1rem; .fas, .fab, .far { @@ -147,7 +147,11 @@ body { border-radius: 5px; border: none; box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); - transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms + transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; + + a { + outline: none; + } } .card:hover { @@ -166,19 +170,36 @@ body { padding: 1.3rem; } + .layout-vertical { + .card { + border-radius: 0; + } + + .column div:first-of-type .card { + border-radius: 5px 5px 0 0; + } + + .column div:last-child .card { + border-radius: 0 0 5px 5px; + } + } + .footer { position: fixed; left: 0; right: 0; bottom: 0; - padding: 1rem 0.5rem; + padding: 0.5rem; text-align: left; background-color: #fafafa; border-top: 1px solid #F5F5F5; + color: #676767; + font-size: 0.85rem; } .search-bar { position: relative; + display: inline-block; #search { border: none; background-color: lighten( $secondary-color, 6% ); @@ -213,6 +234,10 @@ body { } } + .icon-button { + display: inline-block; + } + .offline-message { text-align: center; margin: 35px 0; diff --git a/index.html b/index.html index 3b83c8e..235afde 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,8 @@ Homer - + @@ -40,6 +40,8 @@
+