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

hotspots: Style "How to reply" hotspot. 

Styles the "How to reply" hotstop that shows for new users to
match the rest of the hotspots.
This commit is contained in:
Max Nussenbaum 2018-05-24 12:40:47 -07:00 committed by Tim Abbott
parent 656804bdb7
commit eddcec5e86
2 changed files with 72 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
static/styles/hotspots.scss
View File

@ -112,29 +112,46 @@
border-bottom-right-radius: 4px;
}
.hotspot-img {
height: 83px;
}
.hotspot.overlay .hotspot-img {
position: absolute;
bottom: 10px;
left: 4px;
height: 83px;
}
.hotspot-inline .hotspot-img {
margin-left: 5px;
}
.hotspot-confirm {
max-width: 125px;
max-height: 70px;
border: none;
font-size: 1.15em;
font-weight: 600;
color: #fff;
background-color: #43ad90;
border-radius: 4px;
white-space: normal;
padding: 7px 20px;
outline: none;
}
.hotspot-confirm:hover {
background-color: #5cc0a5;
}
.hotspot.overlay .hotspot-confirm {
position: absolute;
bottom: 15px;
right: 15px;
max-width: 125px;
max-height: 70px;
}
border: none;
font-size: 1.15em;
font-weight: 600;
color: hsl(0, 0%, 100%);
background-color: hsl(164, 44%, 47%);
border-radius: 4px;
white-space: normal;
padding: 7px 20px;
.hotspot-inline .hotspot-confirm {
display: block;
}
/* arrows */
@ -226,26 +243,38 @@
z-index: 103;
}
/* hacked together intro_reply styles */
#bottom_whitespace .hotspot-message {
text-align: center;
margin-top: 30px;
span {
vertical-align: middle;
}
button {
padding: 3px 9px;
min-width: 0px;
margin-left: 7px;
margin-bottom: 0px;
border: none;
font-size: .97em;
font-weight: 600;
color: white;
background-color: hsl(164, 44%, 47%);
border-radius: 4px;
white-space: normal;
}
.hotspot-inline {
width: 350px;
max-width: 95%;
box-shadow: 0 5px 10px rgba(133, 136, 142, 0.1);
border: 1px solid #f2f2f2;
border-radius: 4px;
background: #f9f9f9;
margin: 0 auto;
position: relative;
}
.hotspot-inline-top {
height: 10px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: #43ad90;
}
.hotspot-inline-left {
display: inline-block;
width: 90px;
}
.hotspot-inline-right {
display: inline-block;
width: auto;
margin-left: 10px;
vertical-align: middle;
}
#hotspot_intro_reply_icon {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-75%)
}

12
static/templates/intro_reply_hotspot.handlebars
View File

@ -1,4 +1,10 @@
<div class="trailing_bookend bookend hotspot-message" id="hotspot_intro_reply_icon">
<span>{{t 'Click anywhere on a message to reply.' }}</span>
<button class="hotspot-button" type="button">{{t 'Got it' }}</button>
<div class="hotspot-inline trailing_bookend bookend hotspot-message" id="hotspot_intro_reply_icon">
<div class="hotspot-inline-top"></div>
<div class="hotspot-inline-left">
<img class="hotspot-img" alt="" src="/static/images/hotspots/whale.svg">
</div>
<div class="hotspot-inline-right">
<p>{{t 'Click anywhere on a message to reply.' }}</p>
<button class="hotspot-button hotspot-confirm" type="button">{{t 'Got it!' }}</button>
</div>
</div>