first commit

modules/gamification/views/css/bubble-popup.css

@@ -0,0 +1,86 @@
+/*
+
+	jQuery Bubble Popup v.3.0
+	http://www.maxvergelli.com/jquery-bubble-popup/
+	
+	Copyright (c) 2012 Max Vergelli
+	
+	Permission is hereby granted, free of charge, to any person obtaining a copy
+	of this software and associated documentation files (the "Software"), to deal
+	in the Software without restriction, including without limitation the rights
+	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+	copies of the Software, and to permit persons to whom the Software is
+	furnished to do so, subject to the following conditions:
+	
+	The above copyright notice and this permission notice shall be included in
+	all copies or substantial portions of the Software.
+	
+	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+	THE SOFTWARE.
+
+*/
+
+	/* Layout Settings */
+	.jquerybubblepopup{width:auto;height:auto;margin:0px;padding:0px;position:absolute;border:0px;z-index:100;text-align:center;background-color:transparent;}
+	.jquerybubblepopup-ie{filter:progid:DXImageTransform.Microsoft.Shadow(color="#666666", Direction=135, Strength=3);} /* the plugin adds this class only if browser is IE; if IE9, it's added to main <DIV> else to <TABLE> */
+	.jquerybubblepopup table{width:auto;height:auto;margin:0px;padding:0px;display:table;border-collapse:collapse;border-spacing:0px;border:0px;empty-cells:show;background-color:transparent;}
+	.jquerybubblepopup tbody{display:table-row-group;vertical-align:middle;border:0px;background-color:transparent;}
+	.jquerybubblepopup td{margin:0px;padding:0px;background-color:transparent;}
+	.jquerybubblepopup-top-left,    .jquerybubblepopup-top-right,
+	.jquerybubblepopup-bottom-left, .jquerybubblepopup-bottom-right{width:21px;height:21px;overflow:hidden;background-repeat:no-repeat;}
+	.jquerybubblepopup-top-middle,  .jquerybubblepopup-bottom-middle{overflow:hidden;background-repeat:repeat-x;}
+	.jquerybubblepopup-middle-left, .jquerybubblepopup-middle-right{overflow:hidden;background-repeat:repeat-y;}
+	.jquerybubblepopup-tail{border:0px;margin:0px;padding:0px;display:inline;}
+
+/*  
+	Themes:
+
+	The plugin adds the class of the theme (for example ".jquerybubblepopup-azure") 
+	to the main <DIV> container, then you can edit the style of any element inside the 
+	Bubble Popup markup for each theme.
+	
+	The following code defines fonts and backgrounds of the "innerHtml" for each theme:
+*/
+	.jquerybubblepopup-azure  .jquerybubblepopup-innerHtml,
+	.jquerybubblepopup-black  .jquerybubblepopup-innerHtml,
+	.jquerybubblepopup-blue   .jquerybubblepopup-innerHtml,
+	.jquerybubblepopup-green  .jquerybubblepopup-innerHtml,
+	.jquerybubblepopup-grey   .jquerybubblepopup-innerHtml,
+	.jquerybubblepopup-orange .jquerybubblepopup-innerHtml,
+	.jquerybubblepopup-violet .jquerybubblepopup-innerHtml, 
+	.jquerybubblepopup-yellow .jquerybubblepopup-innerHtml
+	{
+		font-family:'Trebuchet MS',Arial;
+		font-size:11px;
+		font-weight:normal;
+		color:#000000;
+		background-color:#FFFFFF;
+	}
+	.jquerybubblepopup-all-azure  .jquerybubblepopup-innerHtml,
+	.jquerybubblepopup-all-black  .jquerybubblepopup-innerHtml, 
+	.jquerybubblepopup-all-blue   .jquerybubblepopup-innerHtml,
+	.jquerybubblepopup-all-green  .jquerybubblepopup-innerHtml, 
+	.jquerybubblepopup-all-grey   .jquerybubblepopup-innerHtml, 
+	.jquerybubblepopup-all-orange .jquerybubblepopup-innerHtml,
+	.jquerybubblepopup-all-violet .jquerybubblepopup-innerHtml, 
+	.jquerybubblepopup-all-yellow .jquerybubblepopup-innerHtml
+	{
+		font-family:'Trebuchet MS',Arial;
+		font-size:11px;
+		font-weight:normal;
+		color:#FFFFFF;
+	}
+	.jquerybubblepopup-all-azure  .jquerybubblepopup-innerHtml{background-color:#0099FF;}
+	.jquerybubblepopup-all-black  .jquerybubblepopup-innerHtml{background-color:#000000;} 
+	.jquerybubblepopup-all-blue   .jquerybubblepopup-innerHtml{background-color:#0066CC;}
+	.jquerybubblepopup-all-green  .jquerybubblepopup-innerHtml{background-color:#66FF00;} 
+	.jquerybubblepopup-all-grey   .jquerybubblepopup-innerHtml{background-color:#666666;}
+	.jquerybubblepopup-all-orange .jquerybubblepopup-innerHtml{background-color:#FF9933;}
+	.jquerybubblepopup-all-violet .jquerybubblepopup-innerHtml{background-color:#FF33FF;} 
+	.jquerybubblepopup-all-yellow .jquerybubblepopup-innerHtml{background-color:#FFCC00;}
+

modules/gamification/views/css/gamification-1.6.css

@@ -0,0 +1,14 @@
+.material-icons {
+  display: none;
+}
+
+#gamification_notif .icon-chevron-right {
+  display: inline;
+  font-size: 12px !important;
+}
+
+.bootstrap #header_infos .gamification_notif #gamification_notif_number_wrapper {
+  right: 0;
+  line-height: 1rem;
+  border: none;
+}

modules/gamification/views/css/gamification.css

@@ -0,0 +1,575 @@
+#gamification_notif.open {background: none}
+#gamification_notif.open a.dropdown-toggle{background: none !important}
+
+#gamification_notif.open .material-icons {
+  color: #6c868e;
+  font-size: 24px
+}
+
+#gamification_notif_number_wrapper {
+  display: inline-block;
+  position: absolute;
+  top: 4px;
+  top: -.3rem;
+  right: .2rem;
+  color: #fff;
+  background: #25b9d7;
+  font-size: 10px;
+  font-size: .625rem;
+  line-height: 12px;
+  line-height: .75rem;
+  padding: 0 3px;
+  padding: 0 .1875rem;
+  border-radius: 1rem;
+  border: 2px solid #fff;
+  border: .125rem solid #fff;
+}
+
+#gamification_notif .dropdown-menu {
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  min-width: 22rem;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid #bbcdd2;
+  top: 15px !important;
+  transform: translate3d(-324px, 20px, 0px) !important;
+}
+#gamification_notif .dropdown-menu:before, #gamification_notif .dropdown-menu:after{
+  bottom: 100%;
+  right: 5px;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.gamification-component #gamification_notif .dropdown-menu:before,
+.gamification-component #gamification_notif .dropdown-menu:after{
+  right: 9px;
+}
+
+#gamification_notif .dropdown-menu:after{
+  border-color: transparent;
+  border-bottom-color: white;
+  border-width: 7px;
+  margin-left: 1px;
+}
+
+#gamification_notif .dropdown-menu:before{
+  border-color: transparent;
+  border-bottom-color: #bbcdd2;
+  border-width: 8px;
+  margin-right: -1px;
+}
+
+#gamification_notif_wrapper.notifs_panel .progress {
+  margin: 0 20px;
+  border-radius: 11px;
+  height: 8px;
+  background: #f0fbff;
+}
+#gamification_notif_wrapper.notifs_panel .progress .progress-bar.progress-bar-info{background: #25b9d7}
+
+#gamification_notif_wrapper.notifs_panel .nav-tabs {border-bottom: 1px solid #fff}
+#gamification_notif_wrapper.notifs_panel .nav-item {
+  margin-left: 0;
+  width: 50%;
+  padding: 0 8px;
+  text-align: center;
+  margin-bottom: -1px;
+}
+#gamification_notif_wrapper.notifs_panel .nav-item.active a {
+  border-top: 0;
+  border-bottom: 3px solid #25b9d7;
+  color: #25b9d7;
+}
+#gamification_notif_wrapper.notifs_panel .nav-item:hover a {color: #25b9d7;}
+#gamification_notif_wrapper.notifs_panel .nav-item .nav-link {
+  color: #6c868e;
+  font-weight: 400;
+  padding: .9375rem .9375rem .625rem;
+  font-family: Open Sans,sans-serif;
+  font-size: 0.9rem;
+  text-transform: none;
+  border: 0;
+}
+#gamification_notif_wrapper.notifs_panel .tab-content {
+  border-top: .125rem solid #eee;
+  padding: 0;
+  margin-top: -.0625rem;
+  background: #f2f4f5;
+}
+
+#gamification_notif_wrapper.notifs_panel .tab-content .tab-pane{
+  height: 16.5rem;
+  overflow-y: auto;
+}
+
+#gamification_notif_wrapper .panel-footer{
+  margin: 0 !important;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+}
+#gamification_notif_wrapper .panel-footer a{
+  font-size: 13px;
+  color: #25b9d7;
+  font-weight: 600;
+}
+#gamification_notif_wrapper .panel-footer a i{
+  color: #25b9d7 !important;
+  font-size: 20px;
+}
+
+#gamification_notif #gamification_notif_wrapper{
+  width: 100%;
+}
+
+#gamification_notif #gamification_notif_wrapper .notifs_panel_header{
+  font-size: 14px;
+  padding: 20px 20px 10px 20px;
+}
+
+#gamification_notif_wrapper .notifs_panel_header p{font-weight: bold;}
+#gamification_notif_wrapper .notifs_panel_header p span.notifs-level{color: #25b9d7; float: right;}
+
+.gamification_badges_title {
+  margin-top: 10px
+}
+
+.gamification_badges_img {
+  text-align: center;
+  margin-top: 0;
+}
+
+.gamification_badges_name {
+  text-align: center;
+  font-weight: bold;
+  margin-top: 3px;
+}
+
+ul#gamification_badges_list {
+  list-style-type: none;
+  min-height: 300px;
+  width: 310px;
+  margin: auto;
+  overflow: hidden;
+  padding-top: 10px;
+}
+
+ul#gamification_badges_list li {
+  display: block;
+  min-height: 140px;
+  padding: 5px;
+  width: 132px;
+  margin: 10px 10px 10px 15px;
+  position: relative;
+}
+
+ul#gamification_badges_list li span {
+  display: block;
+  text-align: center;
+}
+
+ul#gamification_badges_list li.unlocked {
+  background: #fff;
+  margin-right: 7px;
+}
+
+ul#gamification_badges_list li.unlocked span {
+  color: #a88417;
+  font-size: 11px;
+  font-weight: bold;
+  text-shadow: 1px 1px 1px #fff;
+  text-transform: uppercase
+}
+
+ul#gamification_badges_list li.locked {
+  background: url(../img/bg_locked_badge.png) repeat;
+  border: 1px solid #acaeb5;
+  margin-right: 5px;
+}
+
+ul#gamification_badges_list li.locked span {
+  color: #343943;
+  font-size: 11px;
+  font-weight: bold;
+  text-shadow: 1px 1px 1px #fff;
+  text-transform: uppercase
+}
+
+ul#gamification_badges_list li.locked .gamification_badges_name {
+  color: #acaeb5
+}
+
+#gamification_progressbar {
+  height: 20px;
+  margin-top: 5px;
+  position: relative;
+  width: 100%;
+}
+
+#gamification_progressbar {
+  height: 19px;
+  position: relative;
+  -moz-border-radius: 15px;
+  -o-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+}
+
+#gamification_progressbar .gamification_progress-label {
+  top: 2px;
+  font-size: 14px
+}
+
+#gamification_progressbar .ui-progressbar-value {
+  -moz-border-radius: 15px;
+  -o-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+  border: 1px solid #8aa96d
+}
+
+#gamification_progressbar_tab {
+  -moz-border-radius: 15px;
+  -o-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+  border: none;
+  background: #ECECEC;
+  height: 23px;
+  position: relative;
+  width: 69%;
+}
+
+#completion_gamification .gamification_progress-label,
+#completion_gamification .gamification_progress-label_percent {
+  color: #251B5B
+}
+
+#completion_gamification .gamification_progress-label_percent {
+  font-size: 30px;
+  font-weight: 600;
+  margin-left: 20px;
+}
+
+#gamification_progressbar_tab .ui-progressbar-value {
+  -moz-border-radius: 15px;
+  -o-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+  border: 1px solid #8aa96d;
+  position: absolute;
+  top: 0;
+}
+
+#gamification_progressbar_tab .ui-widget-header {
+  background: linear-gradient(270deg, #3E2CA1 0%, #252B67 100%);
+  background: -moz-linear-gradient(270deg, #3E2CA1 0%, #252B67 100%);
+  background: -ms-linear-gradient(270deg, #3E2CA1 0%, #252B67 100%);
+  background: -o-linear-gradient(270deg, #3E2CA1 0%, #252B67 100%);
+  height: 17px;
+  margin: 3px;
+  border: none;
+}
+
+/******* intro gamification *******/
+
+#intro_gamification {
+  border-bottom: 1px solid #ccced7;
+  display: flex;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 10px;
+}
+
+@media screen and (max-width: 768px) {
+  #intro_gamification {
+    flex-direction: column
+  }
+}
+
+#intro_gamification h2,
+#completion_gamification h2 {
+  margin-top: 10px;
+  color: #343943;
+  font-family: Open Sans,sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 27px;
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 768px){
+  #completion_gamification h2 {
+    margin-bottom: 20px
+  }
+}
+
+#intro_gamification p,
+#intro_gamification li,
+#intro_gamification a {
+  font-size: 14px;
+  line-height: 19px;
+}
+
+#intro_gamification li:before {
+  font-weight: bold;
+}
+
+
+#intro_gamification h2 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  color: #252B67;
+}
+
+#completion_gamification h2 {
+  margin-right: 10px;
+}
+
+#intro_gamification .left_intro {
+  max-width: 350px;
+}
+
+#intro_gamification .central_intro {
+  padding-right: 102px;
+  width: 60%;
+  padding-left: 30px;
+}
+
+@media screen and (max-width: 768px){
+  #intro_gamification .central_intro {
+    width: auto;
+    margin: 30px;
+  }
+}
+
+@media screen and (max-width: 1441px) {
+  #intro_gamification .central_intro {
+    padding-right: 50px;
+  }
+}
+
+#intro_gamification .central_intro .central_intro_list{
+  padding-left: 0;
+  list-style-type: none;
+  counter-reset: counting;
+}
+
+#intro_gamification .central_intro .central_intro_list li:before {
+  counter-increment: counting 1;
+  content: counter(counting) " - ";
+}
+
+#intro_gamification .central_intro p {
+  text-align: justify;
+  width: 100%;
+  margin-bottom: 20px
+}
+
+#intro_gamification .right_intro {
+  padding-left: 20px;
+  max-width: 350px;
+  background-color: #F7F6FD;
+  border-radius: 4px;
+  padding: 56px 47px 34px;
+  position: relative;
+  min-height: 200px;
+}
+
+@media screen and (min-width: 1441px){
+  #intro_gamification .right_intro {
+    margin-top: 30px;
+  }
+}
+
+#intro_gamification .right_intro img{
+  display: block;
+  margin: 0 auto;
+  position: absolute;
+  top: -24px;
+  left: 0;
+  right: 0;
+}
+
+#intro_gamification .right_intro h3.right_intro_title {
+  color: #251B5B;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 auto 26px;
+  text-transform: inherit;
+  border: none;
+  line-height: inherit;
+  height: auto;
+  max-width: 224px;
+}
+
+#intro_gamification .right_intro .right_intro_btn-contact {
+  display: block;
+  margin: 0 auto;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  max-width: 227px;
+  border-radius: 2px;
+  background-color: #252B67;
+  padding: 10px;
+  position: relative;
+}
+
+#intro_gamification .right_intro .right_intro_btn-contact:before{
+  position: absolute;
+  content:'';
+  width: 33px;
+  height: 33px;
+  background: url(../img/sparks.png) no-repeat;
+  top: -20px;
+  right: -27px;
+}
+
+#completion_gamification {
+  display: flex;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+  margin-bottom: -11px;
+  padding: 0 10px;
+}
+
+@media screen and (max-width: 768px){
+  #completion_gamification {
+    flex-direction: column
+  }
+}
+
+.gamification_progress-label,
+.gamification_progress-label_tab {
+  text-align: center;
+  display: block;
+  top: 3px;
+  font-weight: bold;
+  text-shadow: 1px 1px 0 #fff;
+  position: relative;
+  z-index: 1;
+  color: #68737f;
+  font-size: 17px;
+}
+
+#completion_gamification .gamification_progress-label {
+  white-space: nowrap;
+  margin-left: 10px;
+}
+
+ul.badge_list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+li.badge_square {
+  display: block;
+  float: left;
+  height: 135px;
+  width: 100px;
+  background-color: transparent;
+  border: none;
+  padding: 5px 10px 5px 10px;
+  border-radius: 3px;
+  margin-right: 10px;
+}
+
+li.not_validated {
+  color: #ccc;
+}
+
+.badges_filters div {
+  float: left;
+  margin-bottom: 30px
+}
+
+.badges_filters select {
+  margin-right: 30px;
+}
+
+.icon-trophy-svg {
+  display: none;
+}
+
+/* PrestaShop 1.7 - new theme adaptation */
+.gamification-component {
+  height: 100%;
+}
+
+.gamification-component,
+.gamification-component > ul,
+.gamification-component > ul > li {
+  display: flex !important;
+  align-items: stretch;
+}
+
+.gamification-component > ul > li > a {
+  display: flex;
+  align-items: center;
+}
+
+.gamification-component .icon-trophy-svg {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
+
+.gamification-component #gamification_notif .gamification_notif::after {
+  display: none;
+}
+
+.gamification-component > ul {
+  padding: 0;
+  margin: 0;
+}
+
+.gamification-component #gamification_notif_value,
+#gamification_notif #gamification_notif_value {
+  color: #fff !important;
+  font-size: 0.625rem !important;
+}
+
+/* Fix on legacy page */
+
+.bootstrap #header_infos #gamification_notif {
+  margin-left: .3125rem;
+}
+.bootstrap #header_infos .gamification_notif {
+  display: flex;
+  height: 2.5rem;
+  min-width: 2.5rem;
+  line-height: 2.5rem;
+  align-items: center;
+}
+
+.bootstrap #header_infos .gamification_notif #gamification_notif_number_wrapper{
+  top: 0.25rem;
+  right: 0.9rem;
+}
+
+.bootstrap #header_infos #gamification_notif .dropdown-menu{
+  top: 22px !important;
+  transform: translate3d(-328px, 20px, 0px) !important;
+}
+
+/* Hide for ps 1.7+ */
+#gamification_notif .icon-chevron-right {
+  display: none;
+}

modules/gamification/views/css/isotope.css

@@ -0,0 +1,64 @@
+/* Start: Recommended Isotope styles */
+
+/**** Isotope Filtering ****/
+
+.isotope-item {
+  z-index: 2;
+}
+
+.isotope-hidden.isotope-item {
+  pointer-events: none;
+  z-index: 1;
+}
+
+/**** Isotope CSS3 transitions ****/
+
+.isotope,
+.isotope .isotope-item {
+  -webkit-transition-duration: 0.8s;
+     -moz-transition-duration: 0.8s;
+      -ms-transition-duration: 0.8s;
+       -o-transition-duration: 0.8s;
+          transition-duration: 0.8s;
+}
+
+.isotope {
+  -webkit-transition-property: height, width;
+     -moz-transition-property: height, width;
+      -ms-transition-property: height, width;
+       -o-transition-property: height, width;
+          transition-property: height, width;
+}
+
+.isotope .isotope-item {
+  -webkit-transition-property: -webkit-transform, opacity;
+     -moz-transition-property:    -moz-transform, opacity;
+      -ms-transition-property:     -ms-transform, opacity;
+       -o-transition-property:      -o-transform, opacity;
+          transition-property:         transform, opacity;
+}
+
+/**** disabling Isotope CSS3 transitions ****/
+
+.isotope.no-transition,
+.isotope.no-transition .isotope-item,
+.isotope .isotope-item.no-transition {
+  -webkit-transition-duration: 0s;
+     -moz-transition-duration: 0s;
+      -ms-transition-duration: 0s;
+       -o-transition-duration: 0s;
+          transition-duration: 0s;
+}
+
+/* End: Recommended Isotope styles */
+
+
+
+/* disable CSS transitions for containers with infinite scrolling*/
+.isotope.infinite-scrolling {
+  -webkit-transition: none;
+     -moz-transition: none;
+      -ms-transition: none;
+       -o-transition: none;
+          transition: none;
+}