Skip to content

Commit 75074b7

Browse files
zhurczhurc
committed
修改站点侧边栏样式；在线编辑代码可折叠；修复一些自适应问题； review by songyumeng
1 parent cf04ff7 commit 75074b7

File tree

18 files changed

+315
-268
lines changed

18 files changed

+315
-268
lines changed

‎examples/css/editor.css‎

Lines changed: 57 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -14,79 +14,50 @@ html, body, .wrapper {
1414
.edit-container {
1515
background-color: #f9f9f9;
1616
position: relative;
17-
height: 100%;
1817
}
1918

20-
.content {
21-
top: 52px;
22-
bottom: 0;
23-
margin: 0;
24-
padding: 0;
19+
.edit-container section.content {
2520
width: 100%;
26-
z-index: 99;
27-
overflow: hidden;
21+
padding: 0;
2822
position: absolute;
23+
top: 0;
24+
bottom: 0;
2925
}
3026

31-
@media (max-width: 767px) {
32-
.edit-container {
33-
margin-top: 100px;
34-
}
35-
.content{
36-
top:0;
37-
}
27+
.content .pane {
28+
position: relative;
29+
padding: 0;
3830
}
3931

4032
#codePane {
41-
width: 660px;
4233
height: 100%;
43-
position: absolute;
4434
box-shadow: 2px 0px 6px #cccccc;
4535
}
4636

47-
.contentTool {
48-
height: 44px;
49-
line-height: 44px;
50-
box-shadow: 0px 2px 10px #dddddd;
51-
}
52-
53-
.editorBtn {
54-
display: inline-block;
55-
width: 60px;
56-
height: 30px;
57-
text-align: center;
58-
line-height: 30px;
59-
color: #0083CB;
60-
float: right;
61-
cursor: pointer;
62-
margin: 8px 4px;
63-
border-radius: 2px;
64-
}
65-
66-
.editorBtn:hover {
67-
font-weight: bolder;
68-
}
69-
70-
.editorBtn span {
71-
width: 24px;
72-
height: 24px;
37+
.codePaneTool {
38+
position: absolute;
39+
width: 100%;
40+
height: 40px;
41+
line-height: 24px;
42+
z-index: 800;
43+
background-color: white;
44+
padding: 8px 22px;
45+
box-shadow: 0 2px 10px #dddddd;
7346
}
7447

7548
#editor {
7649
font-family: Consolas, monaco, 'Courier New', Courier, monospace;
7750
position: absolute;
51+
top: 42px;
7852
bottom: 0;
79-
top: 46px;
53+
right: 0;
8054
width: 100%;
81-
font-size: 12px;
55+
line-height: 18px;
56+
font-size: 13px;
8257
}
8358

84-
#preview {
59+
#previewPane {
8560
height: 100%;
86-
right: 0;
87-
min-width: 400px;
88-
margin-left: 662px;
89-
position: relative;
9061
}
9162

9263
#innerPage {
@@ -95,34 +66,46 @@ html, body, .wrapper {
9566
border: none;
9667
}
9768

98-
@media screen and (max-width: 1024px) {
99-
#codePane {
100-
width: 340px;
101-
height: 100%;
102-
position: absolute;
103-
box-shadow: 3px 0px 6px #cccccc;
104-
}
69+
.editorBtn {
70+
display: inline-block;
71+
width: 60px;
72+
height: 24px;
73+
line-height: 24px;
74+
text-align: center;
75+
color: #0083CB;
76+
float: right;
77+
cursor: pointer;
78+
}
10579

106-
#preview {
107-
height: 100%;
108-
margin-left: 340px;
109-
position: relative;
110-
}
80+
.editorBtn:hover {
81+
font-weight: bold;
82+
}
83+
84+
#showCodeBtn {
85+
cursor: pointer;
86+
z-index: 900;
87+
position: absolute;
88+
right: 0;
89+
top: 0;
90+
width: 54px;
91+
height: 30px;
92+
line-height: 30px;
93+
margin: 4px;
94+
text-align: center;
95+
background-color: rgba(34, 45, 50, 0.7);
96+
color: #fff;
11197
}
11298

113-
@media screen and (min-width: 1024px)and ( max-width: 1400px) {
99+
#showCodeBtn:hover {
100+
background-color: rgba(34, 45, 50, 0.9);
101+
}
102+
103+
@media screen and (max-width: 992px) {
114104
#codePane {
115-
width: 500px;
116-
height: 100%;
117-
position: absolute;
118-
box-shadow: 3px 0px 6px #cccccc;
105+
display: none;
119106
}
120-
121-
#preview {
122-
height: 100%;
123-
margin-left: 502px;
124-
min-width: 400px;
125-
position: relative;
107+
.codePaneTool {
108+
padding: 8px 68px 8px 20px;
126109
}
127110
}
128111

@@ -134,4 +117,4 @@ html, body, .wrapper {
134117
border-radius: 12px;
135118
background: #e7e7e7;
136119
-webkit-box-shadow: inset 0 0 6px #d1cfcf;
137-
}
120+
}

‎examples/css/examples.css‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@
99
overflow: auto;
1010
}
1111

12-
@media (max-width: 767px) {
13-
.examples-container {
14-
}
15-
}
1612

1713
#charts-list {
1814
margin: 0;
@@ -54,7 +50,7 @@ h3.category-title {
5450
overflow: hidden;
5551
text-overflow: ellipsis;
5652
white-space: nowrap;
57-
padding: 10px 10px 8px 0px;
53+
padding: 10px 10px 8px 0;
5854
margin: 0;
5955
font-weight: normal;
6056
}
@@ -67,24 +63,31 @@ h3.category-title {
6763
border-top: 3px solid #3c8dbc;
6864
}
6965

70-
.box.box-default{
66+
.box.box-default {
7167
background-color: #FFFFFF;
7268
border-top-color: #3c8dbc;
7369
}
7470

7571
.box-title {
76-
padding-top: 10px ;
77-
padding-bottom: 0 ;
72+
padding-top: 10px;
73+
padding-bottom: 0;
7874
padding-left: 5px;
79-
color: #555555;
75+
color: #555555;
8076
}
8177

82-
.box-header{
83-
padding-top: 10px ;
84-
padding-bottom: 5px ;
78+
.box-header {
79+
padding-top: 10px;
80+
padding-bottom: 5px;
8581
padding-left: 0;
8682
}
8783

88-
.box-body{
84+
.box-body {
8985
padding: 0;
90-
}
86+
}
87+
88+
.main-footer {
89+
color: #7d7d7d;
90+
font-size: 13px !important;
91+
text-align: center;
92+
}
93+

‎examples/css/sideBar.css‎

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,58 @@
1-
.menuTitle a.active{
2-
color: #ffffff;
1+
.main-sidebar {
2+
position: fixed;
3+
border: 1px solid #e7e7e7;
34
}
45

6+
.menuTitle a.active {
7+
color: #f8f8f8;
8+
}
9+
10+
.skin-blue .main-sidebar {
11+
background-color: #f2f2f2;
12+
}
13+
14+
.skin-blue .sidebar .second-menu,.skin-blue .sidebar .third-menu{
15+
padding-left: 0;
16+
}
17+
.skin-blue .sidebar .third-menu a{
18+
padding-left: 30px;
19+
}
20+
.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{
21+
padding-top: 0;
22+
}
23+
24+
.skin-blue .sidebar a {
25+
color: #000000;
26+
}
27+
28+
.skin-blue .treeview-menu li > a {
29+
border-left: 3px solid #f8f8f8;
30+
}
31+
32+
.skin-blue .treeview-menu li > a:hover, .skin-blue .treeview-menu li.active > a {
33+
background-color: #e9e9e9;
34+
border-left-color: #3c8dbc;
35+
}
36+
37+
.skin-blue .treeview-menu > li > a {
38+
color: #000000;
39+
}
40+
41+
.skin-blue .sidebar-menu > li > .treeview-menu {
42+
margin: 0;
43+
background: #f8f8f8;
44+
}
45+
46+
.sidebar-menu li.active > .treeview-menu {
47+
background: #f8f8f8;
48+
}
49+
50+
.skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a {
51+
color: #000000;
52+
background: #e9e9e9;
53+
border-left-color: #e9e9e9;
54+
}
55+
56+
.skin-blue .treeview-menu > li.active > a, .skin-blue .treeview-menu > li > a:hover {
57+
color: #000000;
58+
}

‎examples/iclient3d/editor.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141

4242
<!-- 侧边栏 -->
4343

44-
<aside class="sidebar-wrapper main-sidebar" style="position: fixed;">
44+
<aside class="sidebar-wrapper main-sidebar">
4545
<!-- sidebar: style can be found in sidebar.less -->
4646
<section class="sidebar" id="sidebar">
4747
<!-- sidebar menu: : style can be found in sidebar.less -->
@@ -53,26 +53,28 @@
5353
</aside>
5454
<!-- 内容区 -->
5555
<div class="content-wrapper edit-container">
56-
<div class="content">
57-
<div id="codePane">
58-
<div class="contentTool">
59-
<span style="padding-left: 20px;">源代码编辑器</span>
60-
<div class="editorBtn" id="runBtn" onclick="run()"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>&nbsp;运行</div>
61-
<div class="editorBtn" id="resetBtn" onclick="refresh()"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>&nbsp;重置</div>
62-
</div>
6356

57+
<section class="content">
58+
<a class="fa fa-compress" id="showCodeBtn">&nbsp;源码</a>
59+
<div class="pane" id="codePane" style="display: none">
60+
<div class="codePaneTool">
61+
源代码编辑器
62+
<div class="fa fa-play-circle-o editorBtn" id="runBtn" onclick="run()">&nbsp;运行</div>
63+
<div class="fa fa-undo editorBtn" id="resetBtn" onclick="refresh()">&nbsp;重置</div>
64+
</div>
6465
<div id="editor">
6566

6667
</div>
6768
</div>
68-
<div id="preview">
69+
<div class="col-md-12 pane" id="previewPane">
6970
<iframe id='innerPage' name='innerPage'></iframe>
70-
7171
</div>
72-
</div>
72+
</section>
73+
7374
</div>
7475
</div>
7576
<script type="text/javascript" src="../js/scrollTo.min.js"></script>
77+
7678
<script type="text/javascript" src="../../web/libs/js/app.min.js"></script>
7779
<script>
7880
$('.nav-header').load('../../web/header.html');

‎examples/iclient3d/examples.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141

4242
<!-- 侧边栏 -->
4343

44-
<aside class="sidebar-wrapper main-sidebar" style="position: fixed;">
44+
<aside class="sidebar-wrapper main-sidebar" >
4545
<!-- sidebar: style can be found in sidebar.less -->
4646
<section class="sidebar" id="sidebar">
4747
<!-- sidebar menu: : style can be found in sidebar.less -->
@@ -60,7 +60,7 @@
6060
</div>
6161
<!-- footer -->
6262
<footer class="main-footer">
63-
<div class="ip-copyRight iportalfooterDiv" id="iportalfooter">版权所有 © 2000-2017 北京超图软件股份有限公司 京ICP备11032883号-8 京公网安备11010502008721 甲测资字11002074
63+
<div class="iclient-copyright" id="iclient-footer">版权所有 © 2000-2017 北京超图软件股份有限公司 京ICP备11032883号-8 京公网安备11010502008721 甲测资字11002074
6464
</div>
6565
</footer>
6666

0 commit comments

Comments
 (0)