From 04cfbee7844a4dd5732f2f0dd9f53f2439a435d3 Mon Sep 17 00:00:00 2001 From: Philippe Barbosa Date: Wed, 23 Mar 2016 19:42:51 +0100 Subject: [PATCH] Button and message styles update --- app/festival/static/css/index.css | 158 ++++++++++++++++-- app/festival/static/js/index.js | 14 ++ .../static/scss/components/_messages.scss | 68 +++++++- app/festival/static/scss/modules/icons.scss | 11 +- .../accounts/includes/user_panel.html | 6 +- app/templates/base.html | 14 +- 6 files changed, 248 insertions(+), 23 deletions(-) diff --git a/app/festival/static/css/index.css b/app/festival/static/css/index.css index 3ef969e2..ba844e94 100755 --- a/app/festival/static/css/index.css +++ b/app/festival/static/css/index.css @@ -2012,37 +2012,162 @@ th { margin: 0 0.1em; padding: 0.3em 1em; color: #fff; - background: #d2ba88; + background: #fff; font-size: 90%; margin: .5rem auto; - border-radius: 0px; + border-radius: 3px; + box-shadow: 0 0 20px #555; + position: fixed; + top: 1rem; + right: 1rem; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + color: #c4a563; +} + +/* line 30, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_messages.scss */ +.message__remove { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; + -webkit-animation-duration: 0.8s; + animation-duration: 0.8s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes fadeIn { + from, 11.1%, to { + -webkit-transform: none; + transform: none; + } + 22.2% { + -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); + transform: skewX(-12.5deg) skewY(-12.5deg); + } + 33.3% { + -webkit-transform: skewX(6.25deg) skewY(6.25deg); + transform: skewX(6.25deg) skewY(6.25deg); + } + 44.4% { + -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); + transform: skewX(-3.125deg) skewY(-3.125deg); + } + 55.5% { + -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); + transform: skewX(1.5625deg) skewY(1.5625deg); + } + 66.6% { + -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + 77.7% { + -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); + transform: skewX(0.39062deg) skewY(0.39062deg); + } + 88.8% { + -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); + transform: skewX(-0.19531deg) skewY(-0.19531deg); + } +} + +@keyframes fadeIn { + from, 11.1%, to { + -webkit-transform: none; + transform: none; + } + 22.2% { + -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); + transform: skewX(-12.5deg) skewY(-12.5deg); + } + 33.3% { + -webkit-transform: skewX(6.25deg) skewY(6.25deg); + transform: skewX(6.25deg) skewY(6.25deg); + } + 44.4% { + -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); + transform: skewX(-3.125deg) skewY(-3.125deg); + } + 55.5% { + -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); + transform: skewX(1.5625deg) skewY(1.5625deg); + } + 66.6% { + -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + 77.7% { + -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); + transform: skewX(0.39062deg) skewY(0.39062deg); + } + 88.8% { + -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); + transform: skewX(-0.19531deg) skewY(-0.19531deg); + } +} + +@-webkit-keyframes slideOutRight { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } + to { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + opacity: 0; + } +} + +@keyframes slideOutRight { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } + to { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + opacity: 0; + } +} + +/* line 83, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_messages.scss */ +.slideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; } /** * Colors */ -/* line 26, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_messages.scss */ +/* line 90, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_messages.scss */ .message-success { background: #d1f5e0; border: 1px solid #2ecc71; color: #1b7943; } -/* line 32, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_messages.scss */ +/* line 96, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_messages.scss */ .message-error { background: #fdf3f2; border: 1px solid #e74c3c; color: #a82315; } -/* line 38, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_messages.scss */ +/* line 102, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_messages.scss */ .message-warning { background: #fdedd4; border: 1px solid #f39c12; color: #976008; } -/* line 44, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_messages.scss */ +/* line 108, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_messages.scss */ .message-info { background: #e1f0fa; border: 1px solid #3498db; @@ -2052,7 +2177,7 @@ th { /** * Fit message width to parent */ -/* line 54, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_messages.scss */ +/* line 118, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/components/_messages.scss */ .message-block { width: 100%; } @@ -3079,17 +3204,30 @@ th { margin: 0 auto; } -/* line 74, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */ +/* line 28, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */ +.btn .icon:before, .artist__event__cta .icon:before { + font-size: 1.3rem; + margin-right: .5rem; + color: white; + vertical-align: middle; +} + +/* line 83, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */ .icon__bookmark:before { content: ""; } -/* line 183, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */ +/* line 179, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */ +.icon__sign-out:before { + content: ""; +} + +/* line 192, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */ .icon__twitter:before { content: ""; } -/* line 184, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */ +/* line 193, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/icons.scss */ .icon__facebook-f:before, .icon__facebook:before { content: ""; diff --git a/app/festival/static/js/index.js b/app/festival/static/js/index.js index cedfae72..183d5af3 100644 --- a/app/festival/static/js/index.js +++ b/app/festival/static/js/index.js @@ -118,4 +118,18 @@ $(function() { accessToken: 'Disable implicit OAuth' }); feed.run(); + + /** + * Close message + */ + + var zeMessage = $('#js-messageContainer'); + + $('.js-messageClose').on('click', function(event) { + zeMessage.addClass('message__remove'); + + setTimeout(function () { + zeMessage.remove(); + }, 4000); + }); }); \ No newline at end of file diff --git a/app/festival/static/scss/components/_messages.scss b/app/festival/static/scss/components/_messages.scss index ea289165..3d48bd93 100755 --- a/app/festival/static/scss/components/_messages.scss +++ b/app/festival/static/scss/components/_messages.scss @@ -13,12 +13,76 @@ margin: 0 0.1em; padding: 0.3em 1em; color: $white; - background: $main_color; + background: $white; font-size: 90%; margin: .5rem auto; - border-radius: $base_border_radius; + border-radius: 3px; + box-shadow: 0 0 20px $gray_darker; + position: fixed; + top: 1rem; + right: 1rem; + animation-name: fadeIn; + animation-duration: 1s; + animation-fill-mode: both; + color: $base_link_color; } +.message__remove { + animation-name: slideOutRight; + animation-duration: 0.8s; + animation-fill-mode: both; +} + +@keyframes fadeIn { + from, 11.1%, to { + transform: none; + } + + 22.2% { + transform: skewX(-12.5deg) skewY(-12.5deg); + } + + 33.3% { + transform: skewX(6.25deg) skewY(6.25deg); + } + + 44.4% { + transform: skewX(-3.125deg) skewY(-3.125deg); + } + + 55.5% { + transform: skewX(1.5625deg) skewY(1.5625deg); + } + + 66.6% { + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + + 77.7% { + transform: skewX(0.390625deg) skewY(0.390625deg); + } + + 88.8% { + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + } +} + +@keyframes slideOutRight { + from { + transform: translate3d(0, 0, 0); + opacity: 1; + } + + to { + visibility: hidden; + transform: translate3d(100%, 0, 0); + opacity: 0; + } +} + +.slideOutRight { + animation-name: slideOutRight; +} /** * Colors diff --git a/app/festival/static/scss/modules/icons.scss b/app/festival/static/scss/modules/icons.scss index f6653d3b..4b2c6ebd 100755 --- a/app/festival/static/scss/modules/icons.scss +++ b/app/festival/static/scss/modules/icons.scss @@ -24,6 +24,15 @@ } } +.btn .icon { + &:before { + font-size: 1.3rem; + margin-right: .5rem; + color: white; + vertical-align: middle; + } +} + // .icon__glass:before { content: $fa-var-glass; } // .icon__music:before { content: $fa-var-music; } // .icon__search:before { content: $fa-var-search; } @@ -167,7 +176,7 @@ // .icon__thumbs-o-down:before { content: $fa-var-thumbs-o-down; } // .icon__star-half:before { content: $fa-var-star-half; } // .icon__heart-o:before { content: $fa-var-heart-o; } -// .icon__sign-out:before { content: $fa-var-sign-out; } +.icon__sign-out:before { content: $fa-var-sign-out; } // .icon__linkedin-square:before { content: $fa-var-linkedin-square; } // .icon__thumb-tack:before { content: $fa-var-thumb-tack; } // .icon__external-link:before { content: $fa-var-external-link; } diff --git a/app/templates/accounts/includes/user_panel.html b/app/templates/accounts/includes/user_panel.html index 21a4daea..f06e4f4b 100644 --- a/app/templates/accounts/includes/user_panel.html +++ b/app/templates/accounts/includes/user_panel.html @@ -14,8 +14,10 @@ {{ request.user|username_or:"email" }}

{% endif %} - - {% trans "Log out" %} + + + {% trans "Log out" %} + {% else %}
diff --git a/app/templates/base.html b/app/templates/base.html index 01b28618..4b9d10bc 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -110,14 +110,12 @@
{% nevercache %} {% if messages %} -
- {% for message in messages %} -
- - {{ message }} -
- {% endfor %} -
+ {% for message in messages %} +
+ + {{ message }} +
+ {% endfor %} {% endif %} {% endnevercache %} -- 2.39.5