paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-01 12:33:40 +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

67
static/styles/user_status.scss
View File

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

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

@@ -152,10 +152,19 @@
</div>
<div class="user_status_overlay overlay new-style" data-overlay="user_status_overlay" aria-hidden="true">
<div class="overlay-content modal-bg">
<div class="user_status_change_title">Set a status message</div>
<div>
<input type="text" class="user_status" maxlength="60"/>
<button class="sea-green rounded button set_user_status">
<div class="user-status-header">
<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" />
</div>
<div class="modal-footer">
<button class="button exit small rounded">Cancel</button>
<button class="sea-green small rounded button set_user_status">
Save
</button>
</div>