From 3277a69399d8002c2f79ad1819900a311461c2b2 Mon Sep 17 00:00:00 2001 From: Josef Citrine Date: Mon, 6 Jun 2016 12:19:43 +0100 Subject: [PATCH] Notifications on mobile and improved small mobile support --- public/images/ponyfm-logo-white-nodisc.svg | 473 +++++++++++++++++++ resources/assets/styles/content.less | 2 +- resources/assets/styles/mobile.less | 57 ++- resources/views/shared/_app_layout.blade.php | 2 +- 4 files changed, 530 insertions(+), 4 deletions(-) create mode 100644 public/images/ponyfm-logo-white-nodisc.svg diff --git a/public/images/ponyfm-logo-white-nodisc.svg b/public/images/ponyfm-logo-white-nodisc.svg new file mode 100644 index 00000000..b9126cee --- /dev/null +++ b/public/images/ponyfm-logo-white-nodisc.svg @@ -0,0 +1,473 @@ + + + +image/svg+xmlbackgroundLayer 1 \ No newline at end of file diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less index b444ec4b..c6504738 100644 --- a/resources/assets/styles/content.less +++ b/resources/assets/styles/content.less @@ -577,7 +577,7 @@ html { z-index: 1000; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); - transition: transform 0.3s ease; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(0px) translateZ(0px); &.active { diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less index d10dbbb4..5d2085f7 100644 --- a/resources/assets/styles/mobile.less +++ b/resources/assets/styles/mobile.less @@ -1,3 +1,7 @@ +.small-logo { + display: none; +} + @media only screen and (max-width: 768px) { html, body { overflow: hidden !important; @@ -27,6 +31,8 @@ top: 0; right: 0; z-index: 1002; + margin-right: 10px; + margin-top: 10px; } .mobile-header { @@ -253,10 +259,57 @@ } .notification-pullout { - display: none; + left: 0; + width: 100%; + height: ~"calc(100% - 128px)"; + transform: translateY(-105%) translateZ(0); + + &.active { + transform: translateY(0) translateZ(0); + } + + .notif-container { + padding: 10px; + } } .notification-menu { - display: none; + position: fixed; + top: 0; + right: 54px; + margin-top: 13px; + + a, a:active, a:hover, a:focus { + color: #fff; + } } } + +// Super small phones like the iPhone 5 +@media only screen and (max-width: 370px) { + .default-logo { + display: none; + } + + .small-logo { + display: block; + } + + .burger-wrapper { + top: 23px; + left: 15px; + } + + .notification-menu { + top: 0; + right: 54px; + margin-top: 13px; + } + + .mobile-header .logo { + margin-left: 55px; + height: 52px; + width: 122px; + padding-top: 18px; + } +} \ No newline at end of file diff --git a/resources/views/shared/_app_layout.blade.php b/resources/views/shared/_app_layout.blade.php index 40a1cbee..7345d331 100644 --- a/resources/views/shared/_app_layout.blade.php +++ b/resources/views/shared/_app_layout.blade.php @@ -50,7 +50,7 @@
- +
@if (Auth::check())