Skip to content

Commit 049f2a1

Browse files
shengyuanshengyuan
committed
Add resize bar to the corners of stages
1 parent 8c45a8e commit 049f2a1

3 files changed

Lines changed: 74 additions & 8 deletions

File tree

‎css/stages.css‎

Lines changed: 69 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -113,17 +113,19 @@ table.nav{
113113

114114
#simulator-area {
115115
display: none;
116-
z-index: 99;
116+
z-index: 999;
117117
position: absolute;
118118
right: 32%;
119119
top: 125px;
120120
width: 400px;
121+
height: 400px;
122+
min-height: 225px;
121123
min-width: 225px;
122-
max-width: 70%;
123124
background: rgba(255, 255, 255, 1);
124125
border-radius: 20px;
125126
border: 10px solid #ccc;
126127
transition: opacity .3s;
128+
cursor: move;
127129
}
128130

129131
#simulator-area.init {
@@ -145,14 +147,73 @@ table.nav{
145147
display: block;
146148
}
147149

148-
#simulator-resize-bar {
149-
height: calc(100% - 40px);
150-
width: 10px;
151-
background: #ccc;
150+
.resize-area {
152151
position: absolute;
152+
width: 10px;
153+
height: 10px;
154+
background-image: url(../media/resize-bar.png);
155+
background-repeat: no-repeat;
156+
z-index: 99;
157+
}
158+
159+
.resize-bar-left {
160+
top: 50%;
153161
left: -10px;
154-
top: 20px;
155-
cursor: col-resize;
162+
margin-top: -5px;
163+
cursor: ew-resize;
164+
background-position: 4px -6px;
165+
}
166+
167+
.resize-bar-right {
168+
top: 50%;
169+
right: -10px;
170+
margin-top: -5px;
171+
cursor: ew-resize;
172+
background-position: 4px -6px;
173+
}
174+
175+
.resize-bar-bottom {
176+
bottom: -10px;
177+
left: 50%;
178+
margin-left: -5px;
179+
cursor: ns-resize;
180+
background-position: 1px 4px;
181+
}
182+
183+
.resize-bar-top {
184+
top: -10px;
185+
left: 50%;
186+
margin-left: -5px;
187+
cursor: ns-resize;
188+
background-position: 1px 4px;
189+
}
190+
191+
.resize-bar-top-left {
192+
top: -5px;
193+
left: -4px;
194+
cursor: nwse-resize;
195+
background-position: 0px -30px;
196+
}
197+
198+
.resize-bar-top-right {
199+
top: -5px;
200+
right: -8px;
201+
cursor: nesw-resize;
202+
background-position: 0px -18px;
203+
}
204+
205+
.resize-bar-bottom-right {
206+
bottom: -5px;
207+
right: -8px;
208+
cursor: nwse-resize;
209+
background-position: 0px -30px;
210+
}
211+
212+
.resize-bar-bottom-left {
213+
bottom: -5px;
214+
left: -4px;
215+
cursor: nesw-resize;
216+
background-position: 0px -18px;
156217
}
157218

158219
#simulator-area.resize {

‎css/style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1053,6 +1053,7 @@ td#copyCode div {
10531053
top: 15px;
10541054
left: 15px;
10551055
bottom: 15px;
1056+
right: 15px;
10561057
z-index: 999;
10571058
}
10581059

‎views/stages.handlebars‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@
8383
<div class="resize-area resize-bar-right"></div>
8484
<div class="resize-area resize-bar-bottom"></div>
8585
<div class="resize-area resize-bar-top"></div>
86+
<div class="resize-area resize-bar-top-left"></div>
87+
<div class="resize-area resize-bar-top-right"></div>
88+
<div class="resize-area resize-bar-bottom-left"></div>
89+
<div class="resize-area resize-bar-bottom-right"></div>
8690
<div class="simulator-area-content">
8791
<div class="close-btn"></div>
8892
<div class="icon-enlarge"></div>

0 commit comments

Comments
 (0)