Skip to content
Browse files

moved chatter pushdown to two columns and added new post under each o…

…f them
  • Loading branch information...
1 parent c7233c8 commit d9fb4bd05ea7fa297885fbf114999ab1af32b123 @blaflamme blaflamme committed May 11, 2012
View
45 karl/ux2/microtemplates/chatter.mustache
@@ -1,39 +1,38 @@
<div id="chatter-panel">
<div class="pushdownContent clearfix">
- <div id="on-your-mind" class="panel">
- <h3>On your mind</h3>
- <form class="form-stacked" action="{{chatter_url}}/add_chatter.html" method="POST">
- <div class="control-group clearfix">
- <div class="controls">
- <textarea id="chatter-panel-text" name="text"></textarea>
- <p class="help-block tips">Tips: Use @username, #tag, and #this for this page</p>
- </div>
- <div class="actions">
- <div class="btn-group">
- <button id="speak" type="submit" class="btn btn-small">Speak</button>
- </div>
- </div>
- </div>
- </form>
- <div class="houstonWeHaveAProblem notification info">
- <strong>Something went wrong.</strong>
- <p>We could not update the messages for you. But don't you
- worry, we'll try again as soon as possible.</p>
- </div>
- <a id="goto-chatter" class="btn btn-small btn-primary goto" href="{{chatter_url}}" title="Go to Chatter">Go to Chatter</a>
- </div>
{{#streams}}
<div id="{{class}}" class="panel">
<div class="panel-header">
<h3>{{title}}<span class="updating">Updating&hellip;</span></h3>
<div class="post-options">
- <a href="{{has_more_news_url}}" class="new-post" title="New Post">
+ <a href="#" class="add-new-post" title="New Post">
New Post
</a>
<a href="{{has_more_news_url}}" class="view-all-posts" title="View All Posts">
View All Posts
</a>
</div>
+ <div class="new-post">
+ <form class="form-stacked" action="{{chatter_url}}/add_chatter.html" method="POST">
+
+ <div class="control-group clearfix">
+ <div class="controls">
+ <textarea id="{{class}}-panel-text" name="text" class="new-post-text"></textarea>
+ <p class="help-block tips">Tips: Use @username, #tag, and #this for this page</p>
+ </div>
+ <div class="actions">
+ <div class="btn-group">
+ <button id="speak" type="submit" class="btn btn-small">Speak</button>
+ </div>
+ </div>
+ </div>
+ </form>
+ <div class="houstonWeHaveAProblem notification info">
+ <strong>Something went wrong.</strong>
+ <p>We could not update the messages for you. But don't you
+ worry, we'll try again as soon as possible.</p>
+ </div>
+ </div>
</div>
{{#items}}
<div class="panel-item clearfix {{#new}}newMessage{{/new}}">
View
44 karl/views/static/ux2/css/elements/chatter.less
@@ -11,26 +11,6 @@
font-size: 0.8em;
display: block;
}
- #on-your-mind {
- form {
- margin-bottom: 5px;
- }
- #chatter-panel-text {
- width: 95%;
- height: 285px;
- font-size: 0.8em;
- }
- .help-block {
- width: 95%;
- color: #555555;
- }
- .actions {
- margin-top: 15px;
- #speak {
- width: 100%;
- }
- }
- }
}
#chatter-wrapper.active, #chatter-wrapper.active a {
background: @pushDownBg url('../img/vertical_stripes.png') top left repeat !important;
@@ -100,7 +80,6 @@
}
}
}
-
#chatter-user-info img {
float:left;
margin-right:10px;
@@ -118,16 +97,33 @@
top: .6em;
right: .73em;
font-size: 0.7em;
- //padding-top: 0.7em;
font-weight: normal;
vertical-align: text-bottom;
- &:hover {
+ a:hover {
text-decoration: underline;
}
- .new-post {
+ .add-new-post {
margin-right: 5px;
}
}
+ .new-post {
+ display: none;
+ form {
+ margin-bottom: 5px;
+ }
+ .new-post-text {
+ width: 100%;
+ height: 100px;
+ font-size: 0.8em;
+ }
+ .help-block {
+ width: 100%;
+ color: #555555;
+ }
+ .actions {
+ margin-top: 15px;
+ }
+ }
}
.panel-item-header {
position: absolute;
View
14 karl/views/static/ux2/css/elements/pushdowns.less
@@ -148,20 +148,20 @@
}
.panel {
position: relative;
- .col(4.5);
+ .col(6);
#sections {
.messageCounter {
float: right;
margin: 0.6em 1em 0.5em 0.5em;
}
}
}
-.panel:first-of-type {
- .col(2.5);
-}
-.panel:last-of-type {
- .col(5);
-}
+// .panel:first-of-type {
+// .col(2.5);
+// }
+// .panel:last-of-type {
+// .col(5);
+// }
.updating {
opacity: 0;
display: inline-block;
View
16 karl/views/static/ux2/css/main.css
@@ -588,9 +588,7 @@ body>footer{border-top:2px solid #bcb3a8;background-color:#8f806f;color:#fff;tex
.pushDownNavigation a:hover{color:#fff;}
.pushDownNavigation .selected a{color:#fff;font-weight:bold;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.4);}
.pushDownNavigation .messageCounter{font-size:.9em;font-weight:normal;margin-left:0.5em;}
-.panel{position:relative;display:inline;float:left;width:35.41666666666667%;margin-left:1.0416666666666665%;margin-right:1.0416666666666665%;}.panel #sections .messageCounter{float:right;margin:0.6em 1em 0.5em 0.5em;}
-.panel:first-of-type{display:inline;float:left;width:18.75%;margin-left:1.0416666666666665%;margin-right:1.0416666666666665%;}
-.panel:last-of-type{display:inline;float:left;width:39.58333333333333%;margin-left:1.0416666666666665%;margin-right:1.0416666666666665%;}
+.panel{position:relative;display:inline;float:left;width:47.91666666666667%;margin-left:1.0416666666666665%;margin-right:1.0416666666666665%;}.panel #sections .messageCounter{float:right;margin:0.6em 1em 0.5em 0.5em;}
.updating{opacity:0;display:inline-block;font-weight:normal;width:16px;height:16px;margin-left:.5em;text-indent:-999em;overflow:hidden;vertical-align:middle;background:transparent url('../img/loader.gif') 50% 50% no-repeat;}
.houstonWeHaveAProblem{display:none;font-size:0.75em;font-family:Verdana,sans-serif;}
.anonymous-layout{background:#eadecc;height:100%;position:relative;}.anonymous-layout .contentWrapper{padding:1.33em 10%;}.anonymous-layout .contentWrapper section.main{padding:0;height:100%;}
@@ -633,10 +631,6 @@ body>footer{border-top:2px solid #bcb3a8;background-color:#8f806f;color:#fff;tex
#chatter-panel .thereIsMore{text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);}
#chatter-panel .help-block{color:#ccc;font-size:.75em;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
#chatter-panel .timeago{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:0.8em;display:block;}
-#chatter-panel #on-your-mind form{margin-bottom:5px;}
-#chatter-panel #on-your-mind #chatter-panel-text{width:95%;height:285px;font-size:0.8em;}
-#chatter-panel #on-your-mind .help-block{width:95%;color:#555555;}
-#chatter-panel #on-your-mind .actions{margin-top:15px;}#chatter-panel #on-your-mind .actions #speak{width:100%;}
#chatter-wrapper.active,#chatter-wrapper.active a{background:#aaaaaa url('../img/vertical_stripes.png') top left repeat !important;position:relative;z-index:1;margin:0;}
#chatter-wrapper.active{bottom:-0.9em;}
#chatter-wrapper.active a{bottom:1.05em;color:#fff !important;text-shadow:none !important;}#chatter-wrapper.active a:after{display:none !important;}
@@ -648,8 +642,12 @@ body>footer{border-top:2px solid #bcb3a8;background-color:#8f806f;color:#fff;tex
#chatter-user-info .user-stats ul>li:last-child{margin-right:0;}
#chatter-user-info img{float:left;margin-right:10px;}
.chatter-options-panel{font-size:0.9em;clear:both;margin-top:16px;opacity:0;}
-.panel-header{position:relative;}.panel-header .post-options{position:absolute;top:.6em;right:.73em;font-size:0.7em;font-weight:normal;vertical-align:text-bottom;}.panel-header .post-options:hover{text-decoration:underline;}
-.panel-header .post-options .new-post{margin-right:5px;}
+.panel-header{position:relative;}.panel-header .post-options{position:absolute;top:.6em;right:.73em;font-size:0.7em;font-weight:normal;vertical-align:text-bottom;}.panel-header .post-options a:hover{text-decoration:underline;}
+.panel-header .post-options .add-new-post{margin-right:5px;}
+.panel-header .new-post{display:none;}.panel-header .new-post form{margin-bottom:5px;}
+.panel-header .new-post .new-post-text{width:100%;height:100px;font-size:0.8em;}
+.panel-header .new-post .help-block{width:100%;color:#555555;}
+.panel-header .new-post .actions{margin-top:15px;}
.panel-item-header{position:absolute;top:.5em;right:.73em;}
.panel-item-content{margin-left:48px;padding-left:.73em;min-height:48px;}.panel-item-content a{color:#3d8fb3;}
.panel-item-content p{margin-bottom:0;}
View
4 karl/views/static/ux2/karl-ux2.js
@@ -176,6 +176,10 @@
});
}
+ $(".panel-header .post-options .add-new-post").live('click', function() {
+ var target = $(this).closest(".panel-header").find(".new-post");
+ target.toggle();
+ })
$(".panel-item-footer .view-options .view-more").live('click', function() {
var message = $(this).closest(".panel-item").find(".panel-item-content > .messagewrapper");
message.addClass('messagewrapper-view-all');

0 comments on commit d9fb4bd

Please sign in to comment.
Something went wrong with that request. Please try again.