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; border-bottom-right-radius: 4px;
} }
.hotspot-img {
height: 83px;
}
.hotspot.overlay .hotspot-img { .hotspot.overlay .hotspot-img {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
left: 4px; 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 { .hotspot.overlay .hotspot-confirm {
position: absolute; position: absolute;
bottom: 15px; bottom: 15px;
right: 15px; right: 15px;
max-width: 125px; }
max-height: 70px;
border: none; .hotspot-inline .hotspot-confirm {
display: block;
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;
} }
/* arrows */ /* arrows */
@ -226,26 +243,38 @@
z-index: 103; z-index: 103;
} }
/* hacked together intro_reply styles */ .hotspot-inline {
#bottom_whitespace .hotspot-message { width: 350px;
text-align: center; max-width: 95%;
margin-top: 30px; box-shadow: 0 5px 10px rgba(133, 136, 142, 0.1);
border: 1px solid #f2f2f2;
span { border-radius: 4px;
vertical-align: middle; background: #f9f9f9;
} margin: 0 auto;
position: relative;
button { }
padding: 3px 9px;
min-width: 0px; .hotspot-inline-top {
margin-left: 7px; height: 10px;
margin-bottom: 0px; border-top-left-radius: 4px;
border: none; border-top-right-radius: 4px;
font-size: .97em; background-color: #43ad90;
font-weight: 600; }
color: white;
background-color: hsl(164, 44%, 47%); .hotspot-inline-left {
border-radius: 4px; display: inline-block;
white-space: normal; 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"> <div class="hotspot-inline trailing_bookend bookend hotspot-message" id="hotspot_intro_reply_icon">
<span>{{t 'Click anywhere on a message to reply.' }}</span> <div class="hotspot-inline-top"></div>
<button class="hotspot-button" type="button">{{t 'Got it' }}</button> <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> </div>