diff options
author | Asaad Mahmood <Unknowngi@live.com> | 2015-06-26 23:19:29 +0500 |
---|---|---|
committer | Asaad Mahmood <Unknowngi@live.com> | 2015-06-26 23:19:29 +0500 |
commit | febb6e3b656f0a5e48c928f26d071d2f1baf5b33 (patch) | |
tree | 653d359e3f4c550ad76d164294478f134a3d53bb /web | |
parent | f2401dd91f7e0ae005e1efddd1132d91bf4dad02 (diff) | |
download | chat-febb6e3b656f0a5e48c928f26d071d2f1baf5b33.tar.gz chat-febb6e3b656f0a5e48c928f26d071d2f1baf5b33.tar.bz2 chat-febb6e3b656f0a5e48c928f26d071d2f1baf5b33.zip |
mm-1256 - Improving view modal and close modal button
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/channel_info_modal.jsx | 15 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_modal.scss | 23 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 11 |
3 files changed, 37 insertions, 12 deletions
diff --git a/web/react/components/channel_info_modal.jsx b/web/react/components/channel_info_modal.jsx index 191297ce4..18addb52f 100644 --- a/web/react/components/channel_info_modal.jsx +++ b/web/react/components/channel_info_modal.jsx @@ -35,9 +35,18 @@ module.exports = React.createClass({ <h4 className="modal-title" id="myModalLabel">{channel.display_name}</h4> </div> <div className="modal-body"> - <p><strong>Channel Name: </strong>{channel.display_name}</p> - <p><strong>Channel Handle: </strong>{channel.name}</p> - <p><strong>Channel ID: </strong>{channel.id}</p> + <div className="row form-group"> + <div className="col-sm-3 info__label">Channel Name: </div> + <div className="col-sm-9">{channel.display_name}</div> + </div> + <div className="row form-group"> + <div className="col-sm-3 info__label">Channel Handle:</div> + <div className="col-sm-9">{channel.name}</div> + </div> + <div className="row"> + <div className="col-sm-3 info__label">Channel ID:</div> + <div className="col-sm-9">{channel.id}</div> + </div> </div> <div className="modal-footer"> <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 22013aa4f..9009dd768 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -1,9 +1,17 @@ +.modal-body { + padding: 20px 15px; +} .modal { &.image_modal { .modal-backdrop.in { @include opacity(0.7); } } + .info__label { + font-weight: bold; + text-align: right; + padding-right: 0; + } .remove__member { float: right; } @@ -29,7 +37,7 @@ border-radius: 0; background: $primary-color; color: #FFF; - padding: 15px 15px 11px; + padding: 15px 15px 11px; border: none; min-height: 56px; @include clearfix; @@ -41,11 +49,22 @@ margin: 0; } button.close { - margin-top: 0; + margin: -2px -2px 0 0; color: #fff; @include opacity(1); z-index: 5; + width: 30px; + height: 30px; + line-height: 30px; + @include single-transition(all, 0.25s, ease-in); position: relative; + &:hover { + background: rgba(0, 0, 0, 0.1); + } + span { + position: relative; + top: -1px; + } } .btn { margin-right: 10px; diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 3949fc064..509c764b3 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -231,17 +231,14 @@ } } .modal { + .info__label { + text-align: left; + padding-bottom: 5px; + } .modal-header { - padding-left: 20px; - padding-right: 20px; .modal-action { margin-top: 10px; } - button.close { - width: 35px; - height: 32px; - margin: -5px -10px 0; - } .modal-title { float: none; } |