Commits

Anonymous committed 34704c6

modal game badges

Comments (0)

Files changed (4)

app/protected/modules/gamification/views/ModalGameNotificationContainerView.php

                 'options' => array(
                     'autoOpen' => true,
                     'modal'    => $modal,
-                    'height'   => 400,
-                    'width'    => 500,
+                    'height'   => 350,
+                    'width'    => 350,
+                    'position' => 'center',
                     'open'     => 'js:function(event, ui) {$(this).parent().children(".ui-dialog-titlebar").hide();}',
                 ),
                 'htmlOptions' => array('class' => 'ModalGameNotification')
             ));
             $adapter = new GameNotificationToModalContentAdapter($notification);
-            echo CHtml::tag('div', array(), $adapter->getIconCssName());
-            echo CHtml::tag('div', array(), $adapter->getMessageContent());
-            echo '<br/>';
+			echo '<div class="game-badge ' . $adapter->getIconCssName() . '"><div class="gloss"></div>' .
+                                '<strong class="badge-icon"></strong><span class="badge-message">'.$adapter->getMessageContent().'</span></div>';
+            echo '<br />';
             echo CHtml::link(Yii::t('Default', 'Continue'), '#',
-                             array('onClick' => '$("#ModalGameNotification' . $index . '").dialog("close");'));
+                             array('class' => 'close-ModalGameNotification', 'onClick' => '$("#ModalGameNotification' . $index . '").dialog("close");'));
             $cClipWidget->endWidget('zii.widgets.jui.CJuiDialog');
             $cClipWidget->endClip();
             return $cClipWidget->getController()->clips['ModalGameNotificationView'];

app/themes/default/css/newui.css

   background-image: -o-linear-gradient(top, #f6f6f6, #ededed);
   background-image: linear-gradient(top, #f6f6f6, #ededed);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ededed', GradientType=0);
+  -webkit-box-shadow: inset 0 1px 0 0 #ffffff;
+  -moz-box-shadow: inset 0 1px 0 0 #ffffff;
+  -o-box-shadow: inset 0 1px 0 0 #ffffff;
+  -ms-box-shadow: inset 0 1px 0 0 #ffffff;
   box-shadow: inset 0 1px 0 0 #ffffff;
   color: #262877;
 }
   background-image: -o-linear-gradient(top, #f6f6f6, #ededed);
   background-image: linear-gradient(top, #f6f6f6, #ededed);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ededed', GradientType=0);
+  -webkit-box-shadow: inset 0 1px 0 0 #ffffff;
+  -moz-box-shadow: inset 0 1px 0 0 #ffffff;
+  -o-box-shadow: inset 0 1px 0 0 #ffffff;
+  -ms-box-shadow: inset 0 1px 0 0 #ffffff;
   box-shadow: inset 0 1px 0 0 #ffffff;
 }
 .cell-element-icon {
 #layout-container .ui-widget-header .ui-state-default {
   font-weight: normal;
   border: 1px solid #ccc;
-  box-shadow: inset 0 0 0 2px #ffffff, 0 0 9px 5px rgba(153, 153, 153, 0.12);
+  -webkit-box-shadow: inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12);
+  -moz-box-shadow: inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12);
+  -o-box-shadow: inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12);
+  -ms-box-shadow: inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12);
+  box-shadow: inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12);
   background-color: #f5f5f5;
   background-repeat: no-repeat;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(80%, #f5f5f5), to(#f5f5f5));
 #UserBadgesForPortletView > div {
   padding: 15px 15px 0 15px;
 }
+.game-badge,
 .badge {
   position: relative;
   display: inline-block;
   background-image: linear-gradient(#f5f5f5, #eeeeee 80%, #eeeeee);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);
 }
+.game-badge:first-child,
 .badge:first-child {
   margin-left: 0;
 }
+.game-badge:after,
 .badge:after {
   content: ' ';
   width: 100%;
   position: absolute;
   top: -1px;
   left: -1px;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  -ms-border-radius: 7px;
+  -o-border-radius: 7px;
   border-radius: 7px;
   border: solid 1px #CCC;
   -webkit-box-shadow: inset 0 0 1px rgba(155,155,155,.5), inset 0 1px 0 rgba(225,225,225,.5),  inset 0 -6px 0 rgba(155,155,155,.7), inset 0 -7px 0 rgba(255,255,255,.3);
   -ms-box-shadow: inset 0 0 1px rgba(155,155,155,.5), inset 0 1px 0 rgba(225,225,225,.5),  inset 0 -6px 0 rgba(155,155,155,.7), inset 0 -7px 0 rgba(255,255,255,.3);
   box-shadow: inset 0 0 1px rgba(155,155,155,.5), inset 0 1px 0 rgba(225,225,225,.5),  inset 0 -6px 0 rgba(155,155,155,.7), inset 0 -7px 0 rgba(255,255,255,.3);
 }
+.game-badge .badge-icon,
 .badge .badge-icon {
   font-weight: normal;
   font-size: 50px;
   position: relative;
   z-index: 2;
 }
+.game-badge .badge-icon:before,
 .badge .badge-icon:before {
   position: relative;
   top: -2px;
 }
+.game-badge .badge-grade,
 .badge .badge-grade {
   font-size: 11;
   position: absolute;
   border-radius: 50%;
   line-height: 18px;
   z-index: 10;
-  text-align: center;
-}
+}
+.game-badge .gloss,
 .badge .gloss {
   background-color: rgba(255, 255, 255, 0.1);
   background-repeat: repeat-x;
   border-bottom-right-radius: 120px 20px;
   border-bottom-left-radius: 100px 20px;
 }
+.game-badge {
+  margin: 20px auto 20px auto;
+  width: 200px;
+  height: 200px;
+  -webkit-border-radius: 28px;
+  -moz-border-radius: 28px;
+  -ms-border-radius: 28px;
+  -o-border-radius: 28px;
+  border-radius: 28px;
+  clear: both;
+}
+.game-badge:after {
+  -webkit-border-radius: 28px;
+  -moz-border-radius: 28px;
+  -ms-border-radius: 28px;
+  -o-border-radius: 28px;
+  border-radius: 28px;
+  -webkit-box-shadow: inset 0 0 1px rgba(155,155,155,.5), inset 0 1px 0 rgba(225,225,225,.5),  inset 0 -20px 0 rgba(155,155,155,.7), inset 0 -21px 0 rgba(255,255,255,.3);
+  -moz-box-shadow: inset 0 0 1px rgba(155,155,155,.5), inset 0 1px 0 rgba(225,225,225,.5),  inset 0 -20px 0 rgba(155,155,155,.7), inset 0 -21px 0 rgba(255,255,255,.3);
+  -o-box-shadow: inset 0 0 1px rgba(155,155,155,.5), inset 0 1px 0 rgba(225,225,225,.5),  inset 0 -20px 0 rgba(155,155,155,.7), inset 0 -21px 0 rgba(255,255,255,.3);
+  -ms-box-shadow: inset 0 0 1px rgba(155,155,155,.5), inset 0 1px 0 rgba(225,225,225,.5),  inset 0 -20px 0 rgba(155,155,155,.7), inset 0 -21px 0 rgba(255,255,255,.3);
+  box-shadow: inset 0 0 1px rgba(155,155,155,.5), inset 0 1px 0 rgba(225,225,225,.5),  inset 0 -20px 0 rgba(155,155,155,.7), inset 0 -21px 0 rgba(255,255,255,.3);
+}
+.game-badge .badge-icon {
+  font-size: 199px;
+  -webkit-border-radius: 27px;
+  -moz-border-radius: 27px;
+  -ms-border-radius: 27px;
+  -o-border-radius: 27px;
+  border-radius: 27px;
+}
+.game-badge .badge-icon:before {
+  position: relative;
+  top: -10px;
+}
+.game-badge .badge-message {
+  position: absolute;
+  bottom: 30px;
+  left: 0;
+  display: block;
+  text-align: center;
+  width: 100%;
+}
+.game-badge .badge-message h3 {
+  color: #7bb730 !important;
+}
 .CreateContact .badge-icon:before {
   content: "y";
 }
 .CreateTask .badge-icon:before {
   content: "4";
 }
+.game-level-change .badge-icon:before {
+  content: ";";
+}
+.game-new-badge .badge-icon:before {
+  content: ":";
+}
+.game-badge-grade-change .badge-icon:before {
+  content: "}";
+}
 /*Percentage Complete*/
 .hasPercentCounter {
   padding-right: 10px !important;
 .ModalGameNotification {
   padding: 20px;
   text-align: center;
+  -webkit-box-shadow: inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12);
+  -moz-box-shadow: inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12);
+  -o-box-shadow: inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12);
+  -ms-box-shadow: inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12);
+  box-shadow: inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12);
+  background-color: #f5f5f5;
+  background-repeat: no-repeat;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(80%, #f5f5f5), to(#f5f5f5));
+  background-image: -webkit-linear-gradient(#ffffff, #f5f5f5 80%, #f5f5f5);
+  background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5 80%, #f5f5f5);
+  background-image: -ms-linear-gradient(#ffffff, #f5f5f5 80%, #f5f5f5);
+  background-image: -o-linear-gradient(#ffffff, #f5f5f5 80%, #f5f5f5);
+  background-image: linear-gradient(#ffffff, #f5f5f5 80%, #f5f5f5);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
 }
 .ModalGameNotification a {
   cursor: pointer;

app/themes/default/less/designer.less

 
 .designerBlock(){
     border:1px solid #ccc;
-    box-shadow:inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12);
+    .b-shadow(~"inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12)");
     #gradient > .vertical-three-colors( #ffffff, #f5f5f5, 80%, #f5f5f5 );
 }
 
     height: 30px;
     border:1px solid #ccc;
     #gradient > .vertical(#f6f6f6, #ededed);
-    box-shadow:inset 0 1px 0 0 #ffffff;
+    .b-shadow(inset 0 1px 0 0 #ffffff);
     color:@themeColor;
     &.ui-state-disabled{
         color:#dcdcdc;
     color:@themeColor !important;
     border:1px solid #ccc;
     #gradient > .vertical(#f6f6f6, #ededed);
-    box-shadow:inset 0 1px 0 0 #ffffff;
+    .b-shadow(inset 0 1px 0 0 #ffffff);
 }
 
 .cell-element-icon {

app/themes/default/less/gamification.less

 	}
 }
 
+.game-badge,
 .badge{
 	position: relative;
 	display: inline-block;
 		position: absolute;
 		top: -1px;
 		left: -1px;
-		border-radius: 7px;
+		.radius(7px);
 		border: solid 1px #CCC;
 		.b-shadow( ~"inset 0 0 1px rgba(155,155,155,.5), inset 0 1px 0 rgba(225,225,225,.5),  inset 0 -6px 0 rgba(155,155,155,.7), inset 0 -7px 0 rgba(255,255,255,.3)");
 	}
 		.radius(50%);
 		line-height:18px;
 		z-index:10;
-		text-align:center;
 	}
 	.gloss {
 	    #gradient > .horizontal( rgba( 255, 255, 255, 0.3 ), rgba( 255, 255, 255, 0.1 ) );
 	}
 }
 
+.game-badge{
+	margin:20px auto 20px auto;
+	width:200px;
+	height:200px;
+	.radius( 28px );
+	clear:both;
+	&:after{
+		.radius(28px);
+		.b-shadow( ~"inset 0 0 1px rgba(155,155,155,.5), inset 0 1px 0 rgba(225,225,225,.5),  inset 0 -20px 0 rgba(155,155,155,.7), inset 0 -21px 0 rgba(255,255,255,.3)");
+	}
+	.badge-icon{
+	    font-size:199px;
+		.radius(27px);
+		&:before{
+			position:relative;
+			top:-10px;
+		}
+	}
+	.badge-message{
+		position:absolute;
+		bottom:30px;
+		left:0;
+		display:block;
+		text-align:center;
+		width:100%;
+		h3{
+			color:@themeColor2 !important;
+		}
+	}
+}
+
+
+
 .CreateContact{
 	.badge-icon:before{
 		content: "y";
 	}
 }
 
+.game-level-change{
+	.badge-icon:before{
+		content: ";";
+	}
+}
+
+.game-new-badge{
+	.badge-icon:before{
+		content: ":";
+	}
+}
+
+.game-badge-grade-change{
+	.badge-icon:before{
+		content: "}";
+	}
+}
+                
+                
+
+
 /*Percentage Complete*/
 .hasPercentCounter{
 	padding-right:10px !important;
 .ModalGameNotification{
 	padding:20px;
 	text-align:center;
+	.b-shadow(~"inset 0 0 0 2px #ffffff,  0 0 9px 5px rgba(153, 153, 153, 0.12)");
+    #gradient > .vertical-three-colors( #ffffff, #f5f5f5, 80%, #f5f5f5 );
 	a{
 		.zButton();
 		&:focus{