paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-07 07:23:22 +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

53
static/styles/user_status.scss
View File

@@ -1,24 +1,49 @@
.user_status_overlay .overlay-content { .user_status_overlay {
width: 320px; .overlay-content {
width: 480px;
margin: 0 auto; margin: 0 auto;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-top: 10px;
position: relative; position: relative;
top: calc((30vh - 50px) / 2); top: calc((30vh - 50px) / 2);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
} }
.user_status_overlay .user_status_change_title { input.user_status {
font-size: 130%; width: 420px;
font-weight: 600; };
padding: 5px;
.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_overlay input.user_status { .user-status-header h1 {
width: 170px; 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;
}
}

15
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>
<div class="exit">
<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" /> <input type="text" class="user_status" maxlength="60" />
<button class="sea-green rounded button set_user_status"> </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>