Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

user status: Clean up code for user status options. 

- Changed the <p>s to <button>s and modified the css accordingly.
- Changed the css to use scss nesting.
- Changed the line-height from 1.0em to 1.1em, because on Safari the "g" was not fully displayed.
This commit is contained in:
Alexandra Ciobica 2019-04-25 14:01:50 +02:00 committed by Tim Abbott
parent 28109e0f9e
commit 61758735f3
2 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
static/styles/user_status.scss
View File

@ -48,14 +48,17 @@
} }
.user-status-options { .user-status-options {
padding: 20px; padding: 0 20px 3px;
padding-top: 0;
padding-bottom: 3px;
line-height: 1.0em;
}
.user-status-options p:hover { button.user-status-value:hover {
cursor: pointer; color: hsl(200, 100%, 40%);
color: hsl(200, 100%, 40%); }
.user-status-value {
width: 100%;
text-align: left;
margin-bottom: 10px;
line-height: 1.1em;
}
} }
} }

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

@ -163,11 +163,11 @@
<input type="text" class="user_status" maxlength="60" /> <input type="text" class="user_status" maxlength="60" />
</div> </div>
<div class="user-status-options"> <div class="user-status-options">
<p class="user-status-value" data-user-status-value="In a meeting">In a meeting</p> <button type="button" class="button no-style user-status-value" data-user-status-value="In a meeting">In a meeting</button>
<p class="user-status-value" data-user-status-value="Commuting">Commuting</p> <button type="button" class="button no-style user-status-value" data-user-status-value="Commuting">Commuting</button>
<p class="user-status-value" data-user-status-value="Out sick">Out sick</p> <button type="button" class="button no-style user-status-value" data-user-status-value="Out sick">Out sick</button>
<p class="user-status-value" data-user-status-value="Vacationing">Vacationing</p> <button type="button" class="button no-style user-status-value" data-user-status-value="Vacationing">Vacationing</button>
<p class="user-status-value" data-user-status-value="Working remotely">Working remotely</p> <button type="button" class="button no-style user-status-value" data-user-status-value="Working remotely">Working remotely</button>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="button exit small rounded">Cancel</button> <button class="button exit small rounded">Cancel</button>