paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 06:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

user status: Change user status modal style to standard modal style.

Browse Source 
Tweaked by tabbott to use SCSS nesting.

Fixes part of #11629.
This commit is contained in:
Abhinav Singh
2019-04-15 23:27:47 +05:30
committed by Tim Abbott
parent b5333b0a49
commit 01b95d38be
2 changed files with 59 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
static/styles/user_status.scss
View File

@@ -1,24 +1,49 @@
.user_status_overlay .overlay-content { .user_status_overlay {
width: 320px; .overlay-content {
margin: 0 auto; width: 480px;
padding-left: 30px; margin: 0 auto;
padding-right: 30px; position: relative;
padding-bottom: 30px; top: calc((30vh - 50px) / 2);
padding-top: 10px; border-radius: 4px;
position: relative; overflow: hidden;
top: calc((30vh - 50px) / 2); background-color: hsl(0, 0%, 100%);
border-radius: 4px; }
overflow: hidden;
background-color: hsl(0, 0%, 100%); input.user_status {
width: 420px;
};
.user-status-header {
padding: {
top: 4px;
bottom: 4px;
}
height: 5%;
width: 100%;
text-align: center;
border-bottom: 1px solid hsl(0, 0%, 87%);
}
.user-status-header h1 {
margin: 0;
font-size: 1.5em;
}
.user-status-header .exit {
font-weight: 400;
position: absolute;
top: 10px;
right: 10px;
color: hsl(0, 0%, 67%);
cursor: pointer;
}
.user-status-header .exit-sign {
position: relative;
top: 3px;
margin-left: 3px;
font-size: 1.5rem;
font-weight: 600;
cursor: pointer;
}
} }
.user_status_overlay .user_status_change_title {
font-size: 130%;
font-weight: 600;
padding: 5px;
}
.user_status_overlay input.user_status {
width: 170px;
};

17
templates/zerver/app/index.html
View File

@@ -152,10 +152,19 @@
</div> </div>
<div class="user_status_overlay overlay new-style" data-overlay="user_status_overlay" aria-hidden="true"> <div class="user_status_overlay overlay new-style" data-overlay="user_status_overlay" aria-hidden="true">
<div class="overlay-content modal-bg"> <div class="overlay-content modal-bg">
<div class="user_status_change_title">Set a status message</div> <div class="user-status-header">
<div> <h1>Set a status</h1>
<input type="text" class="user_status" maxlength="60"/> <div class="exit">
<button class="sea-green rounded button set_user_status"> <span class="exit-sign">&times;</span>
</div>
</div>
<div class="modal-body">
<label for="user_status">Status message</label>
<input type="text" class="user_status" maxlength="60" />
</div>
<div class="modal-footer">
<button class="button exit small rounded">Cancel</button>
<button class="sea-green small rounded button set_user_status">
Save Save
</button> </button>
</div> </div>