summaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/react/components/channel_info_modal.jsx15
-rw-r--r--web/react/components/mention.jsx4
-rw-r--r--web/react/components/user_profile.jsx10
-rw-r--r--web/sass-files/sass/partials/_mentions.scss25
-rw-r--r--web/sass-files/sass/partials/_modal.scss35
-rw-r--r--web/sass-files/sass/partials/_responsive.scss12
6 files changed, 63 insertions, 38 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/react/components/mention.jsx b/web/react/components/mention.jsx
index ba758688b..86a423138 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -8,8 +8,8 @@ module.exports = React.createClass({
render: function() {
return (
<div className="mentions-name" onClick={this.handleClick}>
- <img className="pull-left mention-img" src={"/api/v1/users/" + this.props.id + "/image"}/>
- <span>@{this.props.username}</span><span style={{'color':'grey', 'marginLeft':'10px'}}>{this.props.name}</span>
+ <img className="mention-img" src={"/api/v1/users/" + this.props.id + "/image"}/>
+ <span>@{this.props.username}</span><span className="mention-fullname">{this.props.name}</span>
</div>
);
}
diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx
index 8ffad737d..648960471 100644
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -10,8 +10,7 @@ function getStateFromStores(userId) {
if (profile == null) {
return { profile: { id: "0", username: "..."} };
- }
- else {
+ } else {
return { profile: profile };
}
}
@@ -54,12 +53,11 @@ module.exports = React.createClass({
var name = this.props.overwriteName ? this.props.overwriteName : this.state.profile.username;
- var data_content = ""
- data_content += "<img style='margin: 10px' src='/api/v1/users/" + this.state.profile.id + "/image' height='128' width='128' />"
+ var data_content = "<img style='margin: 10px' src='/api/v1/users/" + this.state.profile.id + "/image' height='128' width='128' />";
if (!config.ShowEmail) {
- data_content += "<div><span style='white-space:nowrap;'>Email not shared</span></div>";
+ data_content += "<div class='text-nowrap'>Email not shared</div>";
} else {
- data_content += "<div><a href='mailto:'" + this.state.profile.email + "'' style='white-space:nowrap;text-transform:lowercase;'>" + this.state.profile.email + "</a></div>";
+ data_content += "<div><a href='mailto:" + this.state.profile.email + "' class='text-nowrap text-lowercase'>" + this.state.profile.email + "</a></div>";
}
return (
diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss
index 11cd4e9e4..cb6ff16c5 100644
--- a/web/sass-files/sass/partials/_mentions.scss
+++ b/web/sass-files/sass/partials/_mentions.scss
@@ -3,21 +3,19 @@
background: $primary-color;
position: relative;
z-index: 10;
- padding-bottom: 1px;
+ padding-bottom: 2px;
@include border-radius(3px);
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
}
.mentions--top {
position: absolute;
- z-index:99999;
+ z-index: 1040;
.mentions-box {
position:absolute;
background-color:#fff;
- border:1px solid #ddd;
- overflow:scroll;
+ border: $border-gray;
+ overflow-x: hidden;
+ overflow-y: scroll;
bottom:0;
}
}
@@ -29,10 +27,10 @@
height:37px;
padding:2px;
z-index:101;
-}
-
-.mentions-name:hover {
- background-color:#e8eaed;
+ cursor: pointer;
+ &:hover {
+ background-color:#e8eaed;
+ }
}
.mentions-text {
@@ -46,6 +44,11 @@
border-radius: 10%;
}
+.mention-fullname {
+ color: grey;
+ padding-left: 10px;
+}
+
.mention-highlight {
background-color:#fff2bb;
}
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 43dbdc077..4427cb7dd 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,21 @@
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 {
+ line-height: 10px;
+ }
}
.btn {
margin-right: 10px;
@@ -129,15 +147,16 @@
width:100%;
margin: 0 auto;
.image-wrapper {
- padding: 4px;
background: #FFF;
position: relative;
max-width: 80%;
- min-height: 280px;
min-width: 280px;
- @include border-radius(4px);
+ @include border-radius(3px);
display: table;
margin: 0 auto;
+ &:hover {
+ @include border-radius(3px 3px 0 0);
+ }
&:hover .modal-close {
@include opacity(1);
}
@@ -217,10 +236,11 @@
}
.modal-button-bar {
position:absolute;
- bottom:0px;
+ bottom:-40px;
left:0px;
right:0px;
- background-color:rgba(0, 0, 0, 0.8);
+ background-color: #222;
+ @include border-radius(0 0 3px 3px);
@include opacity(0);
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
@@ -228,7 +248,6 @@
transition: opacity 0.6s;
line-height: 40px;
padding: 0 10px;
- margin: 4px;
&.footer--show {
@include opacity(1);
}
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index bed2f6324..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;
}
@@ -538,7 +535,6 @@
.modal {
.modal-image {
.image-wrapper {
- padding-bottom: 40px;
.modal-close {
@include opacity(1);
}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-21 01:15:21 +0000