Commits

Juan Carlos Picado Herrera committed 2c08c38

style improvements
tweetpoll bugfixes
new helper for tweet poll
cancel button on tweet poll

  • Participants
  • Parent commits b8a1772

Comments (0)

Files changed (29)

File enme-war/src/main/webapp/WEB-INF/jsp/includes/web/css.jsp

 <%@ include file="/WEB-INF/jsp/includes/taglibs.jsp"%>
+<!-- dojo css to override easily -->
+<link rel="stylesheet"  href="<c:url value="/resources/js/dijit/themes/claro/claro.css"/>" />
 <c:if test="${development}">
-    <link rel="stylesheet"  href="<c:url value="/resources/css-compile/development.css" />" />    	
+    <link rel="stylesheet"  href="<c:url value="/resources/css-compile/development.css" />" />
 </c:if>
 <link rel="stylesheet"  href="<c:url value="/resources/css/resources.css" />" />
 <c:if test="${!development}">
 	<link rel="stylesheet"  href="<c:url value="/resources/static/web.css" />" />
 </c:if>
-<link rel="stylesheet"  href="<c:url value="/resources/js/dijit/themes/claro/claro.css"/>" />
 <link rel="stylesheet"  href="<c:url value="/resources/js/dojox/form/resources/Rating.css"/>" />
 <link rel="stylesheet"  href="<c:url value="/resources/js/dojo/resources/dojo.css" />" />
-<link rel="stylesheet"  href="<c:url value="/resources/js/dojox/widget/Toaster/Toaster.css" />" />
+<link rel="stylesheet"  href="<c:url value="/resources/js/dojox/widget/Toaster/Toaster.css" />" />

File enme-war/src/main/webapp/WEB-INF/layouts/standard/page.jsp

      <div id="modal-box"></div>
      <div id="loading"></div>
   </c:if>
+  <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
 </body>
+
 </html>

File enme-war/src/main/webapp/WEB-INF/views/tweetpoll/web/new.jsp

-<div class="defaultMarginWrapper" id="defaultMarginWrapper">
-  <div id="tweetPollWrapper">
-    <div data-dojo-type="me/web/widget/tweetpoll/TweetPoll"></div>
-  </div>
+<div id="tweetPollWrapper">
+	<div data-dojo-type="me/web/widget/tweetpoll/TweetPoll"></div>
 </div>
+

File enme-war/src/main/webapp/resource/css-compile/dojo-fixes.css

 /** avoid shadows and other effects inside widgets text box **/
 #enme-content .dijitInputField > input{
 	box-shadow: none !important;
-}
+}
+
+#enme-content .dijitButtonText {
+  font-weight: normal;
+}
+
+/** display the background black with diji dialogs **/
+
+.enme-web-context .dijitDialogUnderlay {
+  background: none repeat scroll 0 0 #444444 !important;
+}
+
+.enme-web-context  .dijitBackgroundIframe {
+  background-color: #000000 !important;
+}
+
+/** DND style **/
+
+.enme-web-context  .dojoDndItem {
+    border-color: transparent;
+    -webkit-transition-duration: 0.25s;
+    -moz-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+    -webkit-transition-property: background-color, border-color;
+    -moz-transition-property: background-color, border-color;
+    transition-property: background-color, border-color;
+}
+
+.enme-web-context  .dojoDndItemOver {
+  background-image: none !important;
+
+}
+
+.enme-web-context .dojoDndItemAnchor,
+.enme-web-context .dojoDndItemSelected {
+   background-color: none !important;
+   background-image: none !important;
+}
+

File enme-war/src/main/webapp/resource/css-compile/layout.css

 }
 
 
-
 /* Smartphones (portrait and landscape)  */
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 
 
     .mobile .mobile-main {
         min-height: 300px;
+        background-color: white;
     }
 
     .mobile-main-vote {
 }
 
 /* Desktops and laptops  */
-@media only screen and (min-width : 1224px) {
-
-       body {
+    body {
         height: 100%;
         word-wrap: break-word;
         margin: 0;
        height: 40px;
        position: relative;
        box-shadow : 2px 3px 4px #121212;
-       z-index: 9000;
+       z-index: 500;
     }
 
     .header {
     }
 
     div.web-header div.web-header-wrapper {
-      width: 1024px;
+      width: auto;
     }
 
     div.web-header span {
         text-align: right;
         white-space: nowrap;
     }
-}
 
 /* Large screens  */
 @media only screen and (min-width : 1824px) {

File enme-war/src/main/webapp/resource/css-compile/shared-components/suggest.css

   position: absolute;
   top: 30px;
   width: 100%;
+  padding: 1px;
 }
 
 /** Suggest. **/
 
 .suggest .wrapper-suggest .suggestBox {
-    position: absolute;
-    border: 1px solid #000;
-    background-color: #FFF;
+  background-color: #FFFFFF;
+  border: 1px solid #CCC;
+  border-top-color: #D9D9D9;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  cursor: default;
+  position: absolute;
 }
 
-.suggest .wrapper-suggest .suggestBox  .suggesItem{
-    padding: 5px;
-    font-size: 12px;
-    font-weight: bold;
-    cursor: pointer;
+.suggest .wrapper-suggest .suggestBox .suggesItem {
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: bold;
+}
 
+.suggest .wrapper-suggest .suggestBox .suggesItem > span {
+  display: inline-block;
+  font-size: 120%;
+  font-weight: normal;
+  padding: 2px;
 }
 
 .suggest .wrapper-suggest .suggestBox .suggesItem:hover{

File enme-war/src/main/webapp/resource/css-compile/web/components/hashtag-tweetpoll.css

-/** Hash Tags **/
-div.hashTagWrapper {
+
+.hashTagWrapper {
+}
+
+.hashTagWrapper .suggest{
+
+}
+
+.hashTagWrapper .suggest .wrapper-suggest {
+  float: left;
+  margin-right: 15px;
+  width: 500px;
+}
+
+hashTagWrapper .suggest .wrapper-suggest .littleInputClass {
+    width: 100%;
 }
 
 .wrapperHashTagItems {
-    overflow: auto;
     padding: 10px 0 5px;
 }
 

File enme-war/src/main/webapp/resource/css-compile/web/components/menu-logged.css

   border-radius: 0px 0px 5px 5px;
 }
 
+@media only screen and (max-width : 980px) {
+
+  .menuWrapper {
+     border-radius: 0px;
+     -webkit-border-radius: 0px;
+     -moz-border-radius: 0px;width: 100%;
+     padding: 5px;
+  }
+
+  .menuWrapper div.rightSide {
+      float: right;
+      text-align: left;
+      width: 25%;
+  }
+
+  .menuWrapper div.leftSide {
+    float: left;
+    height: 33px;
+  }
+
+  .menuWrapper .item a {
+    float: left;
+    text-decoration: none;
+    color: white;
+    font-weight: normal;
+    font-size: 14px;
+  }
+
+}
+
 .menuWrapper > .clearfix {
     width: 100%;
     display: block;
 
 .menuWrapper div.rightSide div {
     float: left;
-    margin-right: -1px;
     position: relative;
 }
 

File enme-war/src/main/webapp/resource/css-compile/web/components/menu-profile.css

     padding-right: 4px;
     text-align: center;
     vertical-align: middle;
-    width: auto;
 }

File enme-war/src/main/webapp/resource/css-compile/web/components/suggestion.css

 
 .web-search-wrapper .suggest {
     position: relative;
+    width: auto;
 }
 
 .web-search-wrapper .suggestBox {

File enme-war/src/main/webapp/resource/css-compile/web/components/tweetpoll-admon.css

 /** TweetPoll **/
 #web-tweetpoll-wrapper {
   border: 1px solid #BCBCBC;
-  border-radius: 3px 3px 3px 3px;  
+  border-radius: 3px 3px 3px 3px;
   margin-top: 2em;
   background-color: #F0F0F0;
 }
   font-size: 100%;
   padding: 10px;
   text-align: right;
+  background-color: #F0F0F0;
 }
 
 #web-tweetpoll-wrapper div.web-tweetpoll-menu  a {

File enme-war/src/main/webapp/resource/css-compile/web/components/tweetpoll-create.css

 /** Create tweetpoll. **/
-.web-tweetpoll-wrapper {
 
+.web-create-tweetpoll {
+border: 1px solid #DAD8D8 !important;
+background-color: #F0F0F0;
+margin-top: 10px;
 }
 
-div.spaceBlock {
-    margin-bottom: 20px !important;
-}
-
-.web-tweetpoll-wrapper div.spaceBlockTop {
-    margin-top: 20px !important;
-}
+div.spaceBlock {}
 
 div.web-tweetpoll-section {
-    background-color: #F6F6F6;
+    background-color: white;
     border: 1px solid #E5E5E5;
     margin: 0 auto;
     width: auto;
     z-index: 5;
-    -webkit-border-radius: 10px 10px 10px 10px;
-    -moz-border-radius: 10px 10px 10px 10px;
-    border-radius: 10px 10px 10px 10px;
 }
 
 div.web-tweetpoll-section .left-button{
 
 div.web-tweetpoll-section div.web-tweetpoll-section-title {
     /** #737373 D7D7D7 #8EA5B7  */
-    color: #FFFFFF;
-    font-size: 110%;
+    color: white;
+    font-size: 15px;
     padding: 10px;
-    border-radius : 10px 10px 0 0;
-    -webkit-border-radius : 10px 10px 0 0;
-    -moz-border-radius : 10px 10px 0 0;
-    background-color: #555555 !important;
+    color: #9F9F9F;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border-bottom: 1px solid #888;
+    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
+    /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff),
+        color-stop(100%, #e5e5e5) ); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
+    /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
+    /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
+    /* IE10+ */
+    background: linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* W3C */
+    filter: progid : DXImageTransform.Microsoft.gradient (   startColorstr = '#ffffff', endColorstr = '#e5e5e5', GradientType = 0 ); /* IE6-9 */
 }
 
 .web-tweetpoll-section .space {
-    padding: 10px;
+    padding: 20px;
 }
 
 div.web-tweetpoll-section .info {
     text-align: right;
 }
 
+div.tweetPollPublishButton .cancel-button {
+    font-size: 14px;
+    color: #222;
+    font-weight: bold;
+    cursor: pointer;
+}
+
 .tweetPollPublishButton {
     margin: auto 78px;
     padding: 10px;
     min-width: 90%;
 }
 
+.web-tweetpoll-wrapper .web-answer-form-wrapper .littleInputClass {
+  width: 85%;
+}
+
 .web-tweetpoll-wrapper .littleInputClass {
-    padding: 3px;
-    border: 1px solid #BCBCBC;
-    color: #808080;
-    font-size: 100%;
-    font-weight: bold;
-    width: 100%;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
+  border-radius: 2px 2px 2px 2px;
+  font-size: 100%;
+  padding: 3px 0 3px 3px;
+  width: 100%;
+  margin-right: 10px;
 }
 
 .web-tweetpoll-wrapper div.tweetPollOptions div.boxRight {
     margin-top: 10px;
 }
 
-.web-tweetpoll-wrapper div.tweetPollOptions div.question {
-
-}
-
 .web-tweetpoll-wrapper div.tweetPollOptions div.question .questionTextBox
     {
     float: left;
   max-width: 90%;
 }
 
+.answerAddForm  .web-answer-form-wrapper {
+  overflow:  auto;
+}
+
+.answerAddForm  .web-answer-form-wrapper > div {
+    float : left;
+}
+
 .answerAddForm div.labelQuestion .answer-loader {
   padding-left: 5px;
   position: absolute;
 
 .addAnswers .listAnswerWrapper {
     margin: 0;
-    max-width: 700px;
+    width: auto;
 }
 
 .addAnswers .answerItem {
-    background-color : #E4E4E4;
-    border : 1px solid #BFBFBF;
+    background-color : #E9E9E9;
+    border: 1px solid #C5C1C1;
     -moz-border-radius: 4px 4px 4px 4px;
     border-radius: 4px 4px 4px 4px;
     color: #FFFFFF;
     cursor: pointer;
     margin-top: 3px;
-    max-width: 86%;
+    max-width: 85%;
     min-height: 25px;
     overflow: auto;
-    padding: 0px;
+    padding: 3px;
     vertical-align: top;
 }
 
 .addAnswers .answerItem .title {
-    color: #FFFFFF;
+    color: #5A5A5A;
     float: left;
-    font-size: 100%;
     font-weight: bold;
-    overflow: auto;
-    padding: 0;
+    font-size: 12px;
 }
 
 .addAnswers .answerItem .title .answerItemTitle {
     color: white !important;
 }
 
-.addAnswers .answerItem .shortUrlEnter  a {
-    color: white;
-}
-
-.addAnswers .answerItem div.title .answerItemShortUrl a:link {
-    text-decoration: none;
-}
-
+.addAnswers .answerItem div.title .answerItemShortUrl a:link,
+.addAnswers .answerItem div.title .answerItemShortUrl a:visited,
 .addAnswers .answerItem div.title .answerItemShortUrl a:hover {
     text-decoration: none;
+    color: #222;
 }
 
 .addAnswers .answerItem div.options {
     min-width: 100px;
     padding: 4px;
 }
+
+/** TweetPoll HELP **/
+
+.tp-help {
+    padding: 10px;
+    position: relative;
+}
+
+.tp-help .help-option {
+    position: absolute;
+    right: 20px;
+    top: 5px;
+    font-size: 14px;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.tp-help .help-title {
+    clear: both;
+}
+
+.tp-help h1 {
+    font-weight: bold;
+    font-size: 20px;
+    color: #222;
+    margin-left: 20px;
+    line-height: 32px;
+}
+
+.tp-help .help {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAACXBIWXMAAFxGAABcRgEUlENBAAAACXRFWHRDb21tZW50AACJKo0GAAAEPElEQVR4nJVXz0tcdxBXERL0qJIU8xd4UDwEIgQScmiTQm4LJUVyWi9LBIN7SDzk5lFLm4JCD9JNaSjppdIEpE00ubY5hPyENnEjSEIQUXQPzarT+ayf2Z39vu/b3Tz4uO+978xn5s13Zr5jm4i0AdlsNo/fykPvtzKjkMoLXZnkg+C3zVSqEtTvtQU8PMIqoPc1cU8qTqLY5vx4I84IBE2jx2gevxe580rks++rDB11bgHb/4k3MVJHqRjk/ZRitfodTuhrxVn/zhZ2Yc8Jjioy5uR174Oz32kC6/pixwJqQVUc1bUyBHKmdeUPkb/fVQVmK6Fk5Obx8qvfaiboywr+dNGHsvNhQt/P+a8YVjwNw5yIgwuSEE8VS4pNPm+ZxQSBLpQUN+jOgOIgCM0i5dpJNuxdFCr2e6Wfn4u83a7/eEWJOguKCdxcUkzHNgPo++4w9id/rHufN8P4c0ZRiBFc/l3k5UaSVHG+SsCbbcVQSDL1sG7nDWPU2Vf0+SBmGJxuEp1Q/KC4qxh3cr8oDlK3kUJIhD23ncCyL9+GBCQ5i37BGkkoRgmQJEwWYfIsMZnMi6lUAheD0RSPOtA5UJyxih2mcjsDuBhEHlk5QNkbyNqQoFrBsWRymKH8I+sEFvEFKpdM+JSm1pMPIn8WEyT9Pv1xU8b36cIRL4hrZU1kT3d892MdwQ4J1tE0fSHlY24/XEtmIwmmUUeeYCZUxrWvHowUogQ5nB6e4HxIgEK6tpL0igQFFGKlsaGHx3agVBb58k6CYD4MYh8qiwRj4SfklqLWh1DBPg+K1kXRUVNyoOyyUqw3+lQ9QKnaM0qYpYySPkGZbipn0oppNVY0ONZcUQ03LGeULmvf9wL0homm5dygN/Qy5ZcjjSY0tEzZ1B7SkgOs8FVHjhDg0BpsoDNIGd+DVsOwNQthhhsq7L/dfp29etz1a9vocdtsx9VNDiFnJtUBdtMihecCo0jNckp6RlMWOoEzc+QuZt3xbos9bOU4qoac4bFPMJqGMefEEG3AVo93wLJ2xBmfjxF+oZX2cV+iV/5BqhPzzokR2loWtpIzfFFwxi/EiDBm3Hstcr94+GsD691/a06c/inViQvOiQJtVprhJB9yzoHZZqG9+KvI4j8i70s14y82Dp1M0Zl1DuRoc9KGKzxMOweih4sH5lm7vvmrpVzIOwemafOSJeAej7gOOoDjcacZ6fGbIsdutmQcXEdovIO29ipHKl9epUcLLgqYVUtppMgBu249a2gcHP3u6xdo62rYB2w0x8jR6RxJHNWGz7Uizt1uaHzG8XeSu+6wibXfEoUwQLU7RzD2Y+AKR3+PA8oMOM52cgm5G59mUmvHu1TCODiadf+rNQP3eZS6Qq5EG051wBF1cWts4DVsZmv/QdkAvBnIbFG3q5GNlr4ocApHM0Z3jO35bG2Ex7uWjmCP/wEgsCR0RVPw/gAAAABJRU5ErkJggg==);
+    background-repeat: no-repeat;
+    width: 40px;
+    height: 50px;
+    margin-left: 20px;
+    float: left;
+    opacity: 0.6;
+}
+.tp-help h2 {
+    font-weight: normal;
+    font-size: 18px;
+    color: #555;
+    margin: 20px 0;
+    text-shadow: 2px -1px 5px white;
+}
+
+.tp-help ul {
+    margin-left: 80px;
+    clear: both;
+}
+
+.tp-help ul > li {
+  list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTM5jWRgMAAAAVdEVYdENyZWF0aW9uIFRpbWUAMi8xNy8wOCCcqlgAAAQRdEVYdFhNTDpjb20uYWRvYmUueG1wADw/eHBhY2tldCBiZWdpbj0iICAgIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+Cjx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDQuMS1jMDM0IDQ2LjI3Mjk3NiwgU2F0IEphbiAyNyAyMDA3IDIyOjExOjQxICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4YXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eGFwOkNyZWF0b3JUb29sPkFkb2JlIEZpcmV3b3JrcyBDUzM8L3hhcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhhcDpDcmVhdGVEYXRlPjIwMDgtMDItMTdUMDI6MzY6NDVaPC94YXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhhcDpNb2RpZnlEYXRlPjIwMDgtMDMtMjRUMTk6MDA6NDJaPC94YXA6TW9kaWZ5RGF0ZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDUdUmQAAACdSURBVDiN1ZMxCgMhEEW/IV7NysYT6NGcMyS9hbV3EQSbEU0RNtVqdllSRBCE4X/enxnFGANXzu2S+mcGRPQgoiGEwHbPEmhjDLz3Xxu0jHDE5D4rMPMbRevNZDfHlCDnjFIKaq1QSoGIdkmmBK019N7Re8dqV6YGUsrPO4QAa+25CMwMZkaMEc656RyXTUwpLcUrgucRMQCI//9ML8fmSdbjt8/RAAAAAElFTkSuQmCC);
+}

File enme-war/src/main/webapp/resource/css-compile/web/components/tweetpoll-publish.css

 }
 
 div.tweetPollPublishDialog div.info {
-    background-color: #F7F5C9;
-    border : 1px solid #E0E443;
-    padding: 10px;
-    font-weight: bold;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 20px;
+  margin: 10px;
+  padding: 10px;
 }
 
 div.tweetPollPublishDialog div.items {
     float: left;
     margin-right: 5px;
     padding: 3px;
-    width: 30px;
+    width: 20px;
 }
 
 div.tweetPollPublishDialog div.items div.item div.detail {
 div.tweetPollPublishDialog div.items div.item div.detail .success-message
     {
     padding: 3px;
-    background-color: #B1ECB1;
     max-width: 50%;
     padding: 4px;
-    color: #358852;
+    color: #26A526;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
 }
 
 div.tweetPollPublishDialog div.items div.item div.detail .success-url {
-    padding: 3px;
-    padding: 4px;
-    color: #358852;
-    font-weight: bold;
+  color: #444444;
+  font-weight: normal;
+  line-height: 25px;
+  padding: 4px;
+  text-decoration: underline;
 }
 
 div.tweetPollPublishDialog div.items div.item div.detail .success-url a:hover

File enme-war/src/main/webapp/resource/css-compile/web/public.css

     background-color: #F9E5E5;
 }
 
+
+/** main public line **/
+
+@media only screen and (max-width : 980px) {
+    #web-main-public-line .web-item-wrapper {
+        width: 100% !important;
+    }
+
+    #web-main-public-line .web-left-wrapper {
+        width: 100% !important;
+    }
+}
+
 #web-main-public-line {
     margin: 0 auto;
     position: relative;

File enme-war/src/main/webapp/resource/js/me/core/enme.js

 
       /*
        * Store a item into session storage
+       * @method storeItem
        * @param key
        * @param value
+       * @param local
        */
-      storeItem : function (key, value) {
+      storeItem : function (key, value, local) {
+          local = local || false;
           if (typeof Modernizr != 'undefined' && Modernizr.sessionstorage) {
               sessionStorage.setItem(key, json.toJson(value));
           } else {
 
       /*
        * Remove a item from session storage
+       * @method removeItem
        * @param key the key item
+       * @param local define if the source is local
        */
-      removeItem : function (key) {
+      removeItem : function (key, local) {
+          local = local || false;
           if (typeof Modernizr != 'undefined' && Modernizr.sessionstorage) {
               sessionStorage.removeItem(key);
           } else {
           }
       },
 
-      /*
+      /**
+       * @method restoreItem
        * @param key
-       * @param value
+       * @param local
        */
-      restoreItem : function (key) {
+      restoreItem : function (key, local) {
+          local = local || false;
           if (typeof Modernizr != 'undefined' && Modernizr.sessionstorage) {
               return sessionStorage.getItem(key);
           } else {

File enme-war/src/main/webapp/resource/js/me/core/main_widgets/EnmeMainLayoutWidget.js

+/*
+ * Copyright 2013 encuestame
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+/***
+ *  @author juanpicado19D0Tgm@ilDOTcom
+ *  @version 1.146
+ *  @module Services
+ *  @namespace Widget
+ *  @class EnmeMainLayoutWidget
+ *  @requires WidgetServices
+ */
+
 define([ "dojo/parser",
          "dojo/_base/declare",
      "me/core/URLServices",
 
   return declare([_WIDGET], {
 
-        /*
-         *
-         */
+      /**
+       *
+       * @property defaultNoResults
+       */
        defaultNoResults : "Nothing find with ",
 
-       /*
+       /**
         * default context path.
+        * @property contextDefaultPath
         */
        contextDefaultPath : _ENME.config('contextPath'),
 
-       /*
-        * add item on drop down menu.
-        */
+      /**
+       * add item on drop down menu.
+       * @property append
+       */
        append : function(node, place) {
          dojo.place(node, place);
        },
 
        /**
-        *
+        * Range Actions
+        * @property range_actions
         */
        range_actions : [ {
          period : "All",
          })
        }]
   });
-});
-
-//dojo.provide("encuestame.org.main.EnmeMainLayoutWidget");
-//
-//dojo.require("dojo.cache");
-//dojo.require("encuestame.org.main.WidgetServices");
-//dojo.require("dijit._Templated");
-//dojo.require("dijit._Widget");
-//
-//dojo.declare("encuestame.org.main.EnmeMainLayoutWidget", [ dijit._Widget,
-//		dijit._Templated, encuestame.org.main.WidgetServices ], {
-//
-//	/*
-//	 * enable widgets on html template.
-//	 */
-//	widgetsInTemplate : true,
-//
-//	/*
-//	 * default placeholder.
-//	 */
-//	placeholder : "Type something...",
-//
-//	/*
-//	 *
-//	 */
-//	channel : "encuestame/time/range/search/",
-//
-//	/*
-//	 *
-//	 */
-//	defaultNoResults : "Nothing find with ",
-//
-//	/*
-//	 * default context path.
-//	 */
-//	contextDefaultPath : ENME.config('contextPath'),
-//
-//	/*
-//	 * add item on drop down menu.
-//	 */
-//	append : function(node, place) {
-//		dojo.place(node, place);
-//	},
-//
-//	/**
-//	 *
-//	 */
-//	range_actions : [ {
-//		period : "All",
-//		value  : "all",
-//		action : dojo.hitch(this, function(channel) {
-//			dojo.publish(channel, [ "all" ]);
-//		})
-//	}, {
-//		period : "Last Year",
-//		value  :  "365",
-//		action : dojo.hitch(this, function(channel) {
-//			dojo.publish(channel, [ "365" ]);
-//		})
-//	}, {
-//		period : "Last Month",
-//		value  : "30",
-//		action : dojo.hitch(this, function(channel) {
-//			dojo.publish(channel, [ "30" ]);
-//		})
-//	}, {
-//		period : "Last Week",
-//		value  : "7",
-//		action : dojo.hitch(this, function(channel) {
-//			dojo.publish(channel, [ "7" ]);
-//		})
-//	}, {
-//		period : "Last Day",
-//		value  : "24",
-//		action : dojo.hitch(this, function(channel) {
-//			dojo.publish(channel, [ "24" ]);
-//		})
-//	}]
-//});
+});

File enme-war/src/main/webapp/resource/js/me/core/main_widgets/WidgetServices.js

+/*
+ * Copyright 2013 encuestame
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+/***
+ *  @author juanpicado19D0Tgm@il.com
+ *  @version 1.146
+ *  @module Services
+ *  @namespace Widget
+ *  @class WidgetServices
+ */
 define([ "dojo/_base/declare",
      "me/core/URLServices",
      "me/web/widget/dialog/ModalBox",
 
   return declare(null, {
 
-      /*
-       *
+      /**
+       * Return the url service
+       * @method getURLService
        */
       getURLService : function() {
         return _URL;
 
       /**
        * Create a modal box.
+       * @method _createModalBox
+       * @private
        */
       _createModalBox : function(type, handler) {
+        //FUTURE: replace by Dojo Dialog
         var modal = dojo.byId("modal-box");
         if (modal != null) {
           var modalBox = new ModalBox(dojo.byId("modal-box"), type, dojo.hitch(handler));
 
       /**
        * Display the loading process.
+       * @method loading_show
        */
       loading_show : function (message) {
         var loading = registry.byId("loading");
 
       /**
        * Hide the loading process.
+       * @method loading_hide
        */
       loading_hide : function () {
         var loading = registry.byId("loading");
 
       /**
        * Publish a message on the context
+       * @method publishMessage
        * @param message the message
        * @param type error, warning, info, success
        */
 
       /**
        * Display a success message.
+       * @method successMesage
        */
       successMesage : function(message, description) {
           //console.info("Successfull message");
 
       /**
        * Display a warning message.
+       * @method successMesage
        */
       warningMesage : function(message, description) {
         _ENME.warning(message, description);
 
       /**
        * Display a warning message.
+       * @method errorMessage
        */
       errorMessage : function(message, description) {
         _ENME.success(message, description);
       },
 
      /**
-      * Display a fatal message
+      * Display a fatal message.
+       * @method fatalMesage
       */
      fatalMesage : function(message) {
        _ENME.fatal(message, description);
 
       /**
        * Display a default loader.
+       * @method loadingDefaultMessage
        */
       loadingDefaultMessage : function() {
        var loading = {
        * Succesfull === {"error":{},"success":{"r":0}}
        * or
        * Failed === {"error":{},"success":{"r":-1}}
+       * @method getDefaultResponse
+       * @param data
        */
       getDefaultResponse : function(data) {
         if ("success" in data) {
         }
       },
 
-      /*
-       *
+      /**
+       * Display a error message
+       * @method errorMessage
        */
       errorMesage : function(error) {
           var modal = this._createModalBox("alert", null);
            }
       },
 
-       /**
-        *
-        * @param e
-        */
+      /**
+       * Stop the event
+       * @method stopEvent
+       */
        stopEvent : function (e) {
          _ENME.stopEvent(e);
        }

File enme-war/src/main/webapp/resource/js/me/main.js

                       domConstruct) {
        var _dom = dom.byId('loading');
        if (_dom) {
-           var _loading_widget = new Loading();
+           var _loading_widget = new Loading({id : 'loading'});
            domConstruct.place(_loading_widget.domNode, _dom);
        }
       // app.dialog = new Dialog().placeAt(document.body);

File enme-war/src/main/webapp/resource/js/me/web/widget/suggestion/Suggest.js

+/*
+ * Copyright 2013 encuestame
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+/***
+ *  @author juanpicado19D0Tgmail.com
+ *  @version 1.146
+ *  @module Suggest
+ *  @namespace Widget
+ *  @class Suggest
+ */
 define([ "dojo/parser",
          "dojo/ready",
          "dojo/_base/lang",
          return data;
      }
   });
-  return declare([ _WidgetBase, _TemplatedMixin, main_widget, queryReadStore ], {
 
-    templateString: template,
+  return declare([ _WidgetBase, _TemplatedMixin, main_widget, queryReadStore ], {
 
-//		postCreate: function() {
-//			console.log("SUGGESTION postCreate");
-//            this.domNode.innerHTML = template;
-//            parser.parse(this.domNode);
-//        }
+        /**
+         * @property templateString
+         */
+        templateString: template,
 
-    store: null,
+        /**
+         * @property store
+         */
+        store: null,
 
+        /**
+         * @property label
+         */
         label : ENME.getMessage("button_add"),
 
+        /**
+         * @property url
+         */
         url : 'encuestame.service.list.hashtags',
 
+        /**
+         * @property textBoxWidget
+         */
         textBoxWidget : null,
 
+        /**
+         * @property buttonWidget
+         */
         buttonWidget : null,
 
+        /**
+         * @property hideLabel
+         */
         hideLabel : false,
 
+        /**
+         * @property selectedItem
+         */
         selectedItem : null,
 
+        /**
+         * @property addButton
+         */
         addButton : true,
 
+        /**
+         * @property ignoreCase
+         */
         ignoreCase: true,
 
+        /**
+         * @property modeMultiSearch
+         */
         modeMultiSearch : false,
 
+        /**
+         * @property multiStores
+         */
         multiStores : [],
 
+        /**
+         * @property modeQuery
+         */
         modeQuery : "get",
 
+        /**
+         * @property limit
+         */
         limit : 10,
 
+        /**
+         * @property label
+         */
         label : "Label",
 
+        /**
+         * @property query
+         */
         query :  {hashTagName : "*"},
 
+        /**
+         * @property sortFields
+         */
         sortFields : [{attribute: 'hashTagName', descending: true}],
 
         /*

File enme-war/src/main/webapp/resource/js/me/web/widget/tweetpoll/TweetPoll.js

          "dojo",
          "dojo/_base/declare",
          "dojo/dom-geometry",
+         "dojo/_base/array",
+         "dojo/dom-construct",
          "dijit/_WidgetBase",
          "dijit/_TemplatedMixin",
          "dijit/_WidgetsInTemplateMixin",
          "dijit/form/CheckBox",
          "dijit/form/NumberSpinner",
          "me/web/widget/tweetpoll/Answers",
+         "me/web/widget/ui/HelpContext",
          "me/core/enme",
          "dojo/_base/lang",
          "dojo/topic",
                 dojo,
                 declare,
                 domGeom,
+                array,
+                domConstruct,
                 _WidgetBase,
                 _TemplatedMixin,
                 _WidgetsInTemplateMixin,
                 CheckBox,
                 NumberSpinner,
                 Answers,
+                HelpContext,
                 _ENME,
                 _lang,
                 topic,
             // template string.
             templateString : template,
 
+            /**
+             * @private
+             * @param _started manage the
+             */
+            _started : false,
+
             /***
              * @param hashTagWidget hashtag widgets
              */
             tweetPollPublishWidget : null,
 
             /**
+             * Help Widget.
+             * @param helpWidget
+             */
+            helpWidget: null,
+
+            /**
+             * Return the help status.
+             */
+            getHelpStatus : function () {
+                return _ENME.getBoolean(_ENME.restoreItem("tp-help", true) || true);
+            },
+
+            /**
              * post create.
              */
             postCreate: function() {
+                var _help_status = this.getHelpStatus();
+                this.helpWidget = new HelpContext({
+                        status : _help_status,
+                        list_messages : [
+                            "First you need write your <strong>question</strong> ",
+                            "Add at least 2 answers",
+                            "Add hashtag, like in Twitter, useful to navigate on it and found your tweetpoll",
+                            "Select all Social Networks to Publish your beautiful creation ",
+                        ]
+                });
+                if (this._help) {
+                    dojo.empty(this._help);
+                    domConstruct.place( this.helpWidget.domNode, this._help);
+                }
+
+                this.cancelButton = this._cancelButton;
+                this.cancelButton.onClick = dojo.hitch(this, function(){
+                    this._redirectList();
+                });
                 this.questionWidget = registry.byId("question");
                 this.answerWidget = registry.byId("answers");
                 this.hashTagWidget = registry.byId("hashtags");
                    //hash(ioQuery.objectToQuery(tweetPoll));
                    _ENME.storeItem('cr.tp', tweetPoll);
                  }
-                 this.tweetPoll.started = true;
+                 this._started = true;
+                 this.initializeInterface();
+             },
+
+
+
+             /**
+              * Initialize the interface after user create the question
+              * @method initializeInterface
+              */
+             initializeInterface : function () {
+                    var _steps = dojo.query('div [data-step]');
+                    array.forEach(_steps, function(entry, i){
+                        dojo.removeClass(entry, "hidden");
+                        var fadeArgs = {
+                            node: entry
+                        };
+                        dojo.fadeIn(fadeArgs).play();
+                    });
+
+                    dojo.empty(this._pre_cancel);
+
+                    // hide the help if iexist
+                   if (this.helpWidget.status) {
+                       this.helpWidget.hide();
+                      _ENME.storeItem("tp-help", false, true);
+                    }
+
              },
 
             /***
                     this.autosave = false;
                     this.tweetPollPublishWidget.process(socialArray);
                 });
+
                 /***
                  * On publish error.
                  *  - Close dialog
                 });
                 encuestame.service.xhrPostParam(
                     this.getURLService().service('encuestame.service.list.publishTweetPoll'), params, load, error);
-            }
+            },
 
+            /**
+             * Redirect to list page.
+             * @method _redirectList
+             */
+            _redirectList : function(){
+                document.location.href = _ENME.config('contextPath') + "/user/tweetpoll/list";
+            },
+
+            /**
+             * Cancel the tweetpoll.
+             * @method _cancelTweetPoll
+             */
+            _cancelTweetPoll : function (e) {
+                     dojo.stopEvent(e);
+                     this._redirectList();
+            }
     });
 });
 ;

File enme-war/src/main/webapp/resource/js/me/web/widget/tweetpoll/TweetPollPublishInfo.js

+/*
+ * Copyright 2013 encuestame
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+/***
+ *  @author juanpicado19D0Tgmail.com
+ *  @version 1.146
+ *  @module TweetPoll
+ *  @namespace Widgets
+ *  @class TweetPollPublishInfo
+ */
 define([
          "dojo/_base/declare",
          "dijit/_WidgetBase",

File enme-war/src/main/webapp/resource/js/me/web/widget/tweetpoll/TweetPollPublishItemSUCCESStatus.js

           */
           i18nMessage : {
             commons_success : _ENME.getMessage("commons_success", "SUCCESS"),
-            pubication_success_status : _ENME.getMessage("pubication_success_status", "pubication_success_status")
+            pubication_success_status : _ENME.getMessage("pubication_success_status", "Your tweet has been sent"),
+            link_to_publication : _ENME.getMessage("link_to_publication", "Link to your Publication")
           },
 
              /**

File enme-war/src/main/webapp/resource/js/me/web/widget/tweetpoll/templates/answer.html

 <article class="addAnswers">
     <div class="answerAddForm">
         <div class="labelQuestion">
-            <input id="answerAddText" type="text" data-dojo-attach-point="_suggest"
-               data-dojo-type="dijit/form/TextBox"
-               maxLength="50"
-               trim="true" class="littleInputClass">
-             </input>
-             <button id="answerAddButton" type="button" data-dojo-attach-point="_addButton">
-                  ${i18nMessage.add_button} ${label}
-             </button>
+            <div class="web-answer-form-wrapper">
+                <input id="answerAddText" type="text" data-dojo-attach-point="_suggest"
+                   data-dojo-type="dijit/form/TextBox"
+                   maxLength="50"
+                   trim="true" class="littleInputClass">
+                 </input>
+                 <button id="answerAddButton" type="button" data-dojo-attach-point="_addButton">
+                      ${i18nMessage.add_button} ${label}
+                 </button>
+             </div>
              <span data-dojo-attach-point="_loader" class="answer-loader">
              </span>
             <article class="listAnswerWrapper" data-dojo-attach-point="_listAnswers">

File enme-war/src/main/webapp/resource/js/me/web/widget/tweetpoll/templates/hashtag.html

 <div class="hashTagWrapper">
     <div>
-        <div id="hashTagSuggest_${id}" data-dojo-attach-point="_suggest"></div>
+        <div id="hashTagSuggest_${id}" data-dojo-attach-point="_suggest">
+        </div>
     </div>
     <div class="wrapperHashTagItems">
         <div data-dojo-attach-point="_items"></div>

File enme-war/src/main/webapp/resource/js/me/web/widget/tweetpoll/templates/tweetPollPublishItemSUCCESSStatus.html

 <div class="success-wrapper">
     <span class="success-message">
-        ${i18nMessage.commons_success}
+        ${i18nMessage.pubication_success_status}
     </span>
     <span class="success-url">
        <a href="${metadata.tweet_url}"
        	  target="_blank">
-            ${i18nMessage.pubication_success_status}
+            ${i18nMessage.link_to_publication}
        </a>
    </span>
 </div>

File enme-war/src/main/webapp/resource/js/me/web/widget/tweetpoll/templates/tweetpoll.html

 <div class="web-tweetpoll-wrapper spaceBlock">
 
-  <div id="previewWrapperFixed" class="tweetPollPreviewRelative"
-    style="opacity: 0">
-    <div data-dojo-attach-point="_previewFixed"></div>
-  </div>
+  <div class="web-create-tweetpoll">
 
-  <div class="web-tweetpoll-preview-top web-tweetpoll-section spaceBlock spaceBlockTop">
-       <div data-dojo-attach-point="_preview"></div>
-  </div>
 
-  <!--
-      First part of the form, add question
-   -->
+      <div class="tp-help" data-dojo-attach-point="_help">
 
-  <div class="web-tweetpoll-section spaceBlock spaceBlockTop"
-    data-dojo-attach-point="_tweetQuestion" data-step="1">
-    <div class="web-tweetpoll-section-title default-background-dark-color">1.
-      ${i18nMessage.question}</div>
-    <div class="tweetThis space">
-      <div id="question" data-dojo-type="dijit/form/TextBox"
-        class="questionTextBox inputClass littleInputClass" maxSize="140" maxLength="140"
-        selectOnClick="true"></div>
-    </div>
-  </div>
+      </div>
+      <div>
 
-  <div class="web-tweetpoll-section spaceBlock" data-step="2">
-    <div class="web-tweetpoll-section-title default-background-dark-color">2.
-      ${i18nMessage.answer}</div>
-    <div class="space">
-      <div id="answers" data-dojo-type="me/web/widget/tweetpoll/Answers"
-        class="answers"></div>
-    </div>
-  </div>
+      <div id="previewWrapperFixed" class="tweetPollPreviewRelative"
+        style="opacity: 0">
+        <div data-dojo-attach-point="_previewFixed"></div>
+      </div>
 
-  <div class="web-tweetpoll-section spaceBlock" data-step="3">
-    <div class="web-tweetpoll-section-title default-background-dark-color">3.
-      ${i18nMessage.hashtag}</div>
-    <div class="space">
-      <div id="hashtags" data-dojo-type="me/web/widget/tweetpoll/HashTags"
-        class="hashtags"></div>
-    </div>
-  </div>
+      <div class="web-tweetpoll-preview-top web-tweetpoll-section spaceBlock spaceBlockTop">
+           <div data-dojo-attach-point="_preview"></div>
+      </div>
 
-  <div class="tweetPollPublish web-tweetpoll-section spaceBlock" data-step="4">
-    <div class="web-tweetpoll-section-title default-background-dark-color">4.
-      ${i18nMessage.options}</div>
-    <div class="space">
-      <div style="overflow: auto;">
-        <div class="item">
-          <h4>${i18nMessage.squeduled}</h4>
-          <div class="section">
-            <input id="schedule" name="schedule"
-              data-dojo-type="dijit/form/CheckBox">
-                 <label for="schedule"> ${i18nMessage.squeduled_tp} </label>
-          </div>
-          <div class="section defaultDisplayHide"
-            data-dojo-attach-point="_scheduledTime">
-            <input type="text" name="scheduledTime" id="scheduledTime"
-              value="T15:00:00" data-dojo-type="dijit/form/TimeTextBox" />
-          </div>
-          <div class="section defaultDisplayHide"
-            data-dojo-attach-point="_scheduledDate">
-            <input id="scheduledDate" type="text" name="shortYear"
-              data-dojo-type="dijit/form/DateTextBox" required="true" />
-          </div>
+      <!--
+          First part of the form, add question
+       -->
+
+      <div class="web-tweetpoll-section spaceBlock spaceBlockTop"
+        data-dojo-attach-point="_tweetQuestion" data-step="1">
+        <div class="web-tweetpoll-section-title ">
+          ${i18nMessage.question}</div>
+        <div class="tweetThis space">
+          <div id="question" data-dojo-type="dijit/form/TextBox"
+            class="questionTextBox inputClass littleInputClass" maxSize="140" maxLength="140"
+            selectOnClick="true"></div>
         </div>
-        <div class="item item-padding">
-          <h4>${i18nMessage.chart_features}</h4>
-          <div class="section">
-            <input id="liveResults" name="liveResults"
-                   data-dojo-type="dijit/form/CheckBox">
-                   <label for="liveResults"> ${i18nMessage.allow_live_results} </label>
-          </div>
+      </div>
+
+      <div class="web-tweetpoll-section spaceBlock hidden"   data-step="2" style="opacity:0;">
+        <div class="web-tweetpoll-section-title ">
+          ${i18nMessage.answer}</div>
+        <div class="space">
+          <div id="answers" data-dojo-type="me/web/widget/tweetpoll/Answers"
+            class="answers"></div>
         </div>
-        <div class="item item-padding">
-          <h4>${i18nMessage.anti_spam}</h4>
-          <div class="section">
-            <input id="captcha" name="captcha"
-               data-dojo-type="dijit/form/CheckBox">
-               <label for="captcha"> ${i18nMessage.captcha} </label>
-          </div>
-          <div class="section">
-            <input id="limitVotes" name="limitVotes"
-              data-dojo-type="dijit/form/CheckBox">
-              <label for="limitVotes"> ${i18nMessage.limit_votes} </label>
-          </div>
-          <div class="section defaultDisplayHide"
-            data-dojo-attach-point="_limitNumbers">
-            <div data-dojo-type="dijit/form/NumberSpinner"
-              intermediateChanges="true" id="limitNumbers"
-              constraints="{min:0,max:4000}"
-              value="${tweetPoll.maxLimitVotes}"></div>
-          </div>
-          <div class="section">
-            <input id="ip" name="ip" data-dojo-type="dijit/form/CheckBox">
-            <label for="ip"> ${i18nMessage.repeated_votes} </label>
-          </div>
-          <div class="section defaultDisplayHide"
-            data-dojo-attach-point="_repeatedNumbers">
-            <div data-dojo-type="dijit/form/NumberSpinner"
-              intermediateChanges="true" id="repeatedNumbers"
-              constraints="{min:2,max:10}"
-              value="${tweetPoll.maxRepeatedVotes}"></div>
-          </div>
+      </div>
+
+      <div class="web-tweetpoll-section spaceBlock hidden" data-step="3">
+        <div class="web-tweetpoll-section-title ">
+          ${i18nMessage.hashtag}</div>
+        <div class="space">
+          <div id="hashtags" data-dojo-type="me/web/widget/tweetpoll/HashTags"
+            class="hashtags"></div>
         </div>
-        <div class="item item-padding">
-          <h4>${i18nMessage.tp_options_report}</h4>
-          <div class="section">
-            <input id="resume" name="resume"
-              data-dojo-type="dijit/form/CheckBox"> <label for="resume">
-              ${i18nMessage.resume_live_results} </label>
-          </div>
-          <div class="section">
-            <input id="dashboard" name="dashboard"
-              data-dojo-type="dijit/form/CheckBox"> <label
-              for="dashboard"> ${i18nMessage.follow_dashboard} </label>
+      </div>
+
+      <div class="tweetPollPublish web-tweetpoll-section spaceBlock hidden" data-step="4">
+        <div class="web-tweetpoll-section-title ">
+          ${i18nMessage.options}</div>
+        <div class="space">
+          <div style="overflow: auto;">
+            <div class="item">
+              <h4>${i18nMessage.squeduled}</h4>
+              <div class="section">
+                <input id="schedule" name="schedule"
+                  data-dojo-type="dijit/form/CheckBox">
+                     <label for="schedule"> ${i18nMessage.squeduled_tp} </label>
+              </div>
+              <div class="section defaultDisplayHide"
+                data-dojo-attach-point="_scheduledTime">
+                <input type="text" name="scheduledTime" id="scheduledTime"
+                  value="T15:00:00" data-dojo-type="dijit/form/TimeTextBox" />
+              </div>
+              <div class="section defaultDisplayHide"
+                data-dojo-attach-point="_scheduledDate">
+                <input id="scheduledDate" type="text" name="shortYear"
+                  data-dojo-type="dijit/form/DateTextBox" required="true" />
+              </div>
+            </div>
+            <div class="item item-padding">
+              <h4>${i18nMessage.chart_features}</h4>
+              <div class="section">
+                <input id="liveResults" name="liveResults"
+                       data-dojo-type="dijit/form/CheckBox">
+                       <label for="liveResults"> ${i18nMessage.allow_live_results} </label>
+              </div>
+            </div>
+            <div class="item item-padding">
+              <h4>${i18nMessage.anti_spam}</h4>
+              <div class="section">
+                <input id="captcha" name="captcha"
+                   data-dojo-type="dijit/form/CheckBox">
+                   <label for="captcha"> ${i18nMessage.captcha} </label>
+              </div>
+              <div class="section">
+                <input id="limitVotes" name="limitVotes"
+                  data-dojo-type="dijit/form/CheckBox">
+                  <label for="limitVotes"> ${i18nMessage.limit_votes} </label>
+              </div>
+              <div class="section defaultDisplayHide"
+                data-dojo-attach-point="_limitNumbers">
+                <div data-dojo-type="dijit/form/NumberSpinner"
+                  intermediateChanges="true" id="limitNumbers"
+                  constraints="{min:0,max:4000}"
+                  value="${tweetPoll.maxLimitVotes}"></div>
+              </div>
+              <div class="section">
+                <input id="ip" name="ip" data-dojo-type="dijit/form/CheckBox">
+                <label for="ip"> ${i18nMessage.repeated_votes} </label>
+              </div>
+              <div class="section defaultDisplayHide"
+                data-dojo-attach-point="_repeatedNumbers">
+                <div data-dojo-type="dijit/form/NumberSpinner"
+                  intermediateChanges="true" id="repeatedNumbers"
+                  constraints="{min:2,max:10}"
+                  value="${tweetPoll.maxRepeatedVotes}"></div>
+              </div>
+            </div>
+            <div class="item item-padding">
+              <h4>${i18nMessage.tp_options_report}</h4>
+              <div class="section">
+                <input id="resume" name="resume"
+                  data-dojo-type="dijit/form/CheckBox"> <label for="resume">
+                  ${i18nMessage.resume_live_results} </label>
+              </div>
+              <div class="section">
+                <input id="dashboard" name="dashboard"
+                  data-dojo-type="dijit/form/CheckBox"> <label
+                  for="dashboard"> ${i18nMessage.follow_dashboard} </label>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </div>
 
-  <div class="web-tweetpoll-section spaceBlock" data-step="5">
-    <div class="web-tweetpoll-section-title default-background-dark-color">
-      5. ${i18nMessage.tp_select_publish}</div>
-    <div class="space">
-      <div id="social"
-        data-dojo-type="me/web/widget/social/SocialAccountPicker"
-        checkRequiredSocialAccounts="true" enableEasyAddAccount="true"></div>
-    </div>
-  </div>
+      <div class="web-tweetpoll-section spaceBlock hidden" data-step="5">
+        <div class="web-tweetpoll-section-title ">
+          5. ${i18nMessage.tp_select_publish}</div>
+        <div class="space">
+          <div id="social"
+            data-dojo-type="me/web/widget/social/SocialAccountPicker"
+            checkRequiredSocialAccounts="true" enableEasyAddAccount="true"></div>
+        </div>
+      </div>
+
+      <div class="tweetPollPublishButton hidden" style="text-align: right;" data-step="final">
+          <button data-dojo-attach-point="_publish"
+            data-dojo-type="dijit/form/Button" type="button"
+            name="submitButtonTwo" value="Submit">
+            ${i18nMessage.button_publish}
+          </button>
+            - or -
+          <span  data-dojo-attach-point="_cancelLink" class="cancel-link" data-dojo-attach-event="onclick:_cancelTweetPoll">
+              Cancel
+          </span>
+      </div>
+
+       <div class="tweetPollPublishButton cancel-button" style="text-align: right;" data-dojo-attach-point="_pre_cancel">
+          <button data-dojo-type="dijit/form/Button" data-dojo-attach-event="onclick:_cancelTweetPoll"  data-dojo-attach-point="_cancelButton" >
+             Cancel
+          </button>
+      </div>
 
-  <div class="tweetPollPublishButton" style="text-align: right;" data-step="final">
-    <button data-dojo-attach-point="_publish"
-      data-dojo-type="dijit/form/Button" type="button"
-      name="submitButtonTwo" value="Submit">
-      ${i18nMessage.button_publish}</button>
   </div>
 </div>