From: Philippe Barbosa <contact@philippebarbosa.com>
Date: Wed, 23 Mar 2016 18:42:51 +0000 (+0100)
Subject: Button and message styles update
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=04cfbee7844a4dd5732f2f0dd9f53f2439a435d3;p=mezzo.git

Button and message styles update
---

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 @@
             <a href="{% url "profile_update" %}">{{ request.user|username_or:"email" }}</a>
         </p>
         {% endif %}
-        <a href="{% url "logout" %}?next={{ request.path }}" class="btn btn-small btn-info">
-            <span class="glyphicon glyphicon-log-out"></span> {% trans "Log out" %}</a>
+        <a href="{% url "logout" %}?next={{ request.path }}" class="btn btn-full">
+            <span class="icon icon__sign-out"></span>
+            {% trans "Log out" %}
+        </a>
     </div>
 {% else %}
     <div class="user__panel">
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 @@
         <div class="container">
             {% nevercache %}
             {% if messages %}
-            <div class="messages">
-            {% for message in messages %}
-            <div class="alert alert-dismissable alert-{{ message.tags }}" data-alert="alert">
-                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-                {{ message }}
-            </div>
-            {% endfor %}
-            </div>
+                {% for message in messages %}
+                <div class="message" id="js-messageContainer">
+                    <button type="button" class="btn btn-small js-messageClose">X</button>
+                    {{ message }}
+                </div>
+                {% endfor %}
             {% endif %}
             {% endnevercache %}