Skip to content

Commit a379960

Browse files
author
Ludovic Vannoorenberghe
committed
source page design
1 parent ebb064d commit a379960

File tree

4 files changed

+34
-52
lines changed

4 files changed

+34
-52
lines changed

assets/styles/pages/_package-source.scss

Lines changed: 19 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1-
#parent {
2-
padding: 10px;
3-
width: 100%;
1+
.source--explorer {
2+
flex: 1 1 auto;
43
display: flex;
5-
max-height: calc(100vh - 180px);
4+
margin-bottom: 5px;
5+
}
6+
.source--tree {
7+
overflow-y: scroll;
8+
width: 240px;
9+
}
10+
11+
.source--code {
12+
overflow-y: scroll;
13+
flex-grow: 1;
14+
background-color: #f6f7f9;
615
}
716
#tree {
8-
width: 200px;
9-
overflow: hidden;
10-
display: none;
11-
overflow: auto;
12-
height: auto;
1317
.list-group {
1418
margin-top: -0.5px;
1519
overflow: hidden;
@@ -24,32 +28,12 @@
2428
}
2529
}
2630
.source-header {
27-
@include clearfix;
2831
width: 100%;
29-
30-
h1 {
31-
display: inline-block;
32-
vertical-align: middle;
33-
margin: 0.25em 0;
34-
}
35-
36-
.source-header-content {
37-
width: 100%;
38-
padding-top: 15px;
39-
border-bottom: 2px solid #ebf4f7;
40-
padding-bottom: 10px;
41-
}
42-
}
43-
.source--title--container {
44-
display: flex;
45-
align-items: baseline;
46-
margin-bottom: 1rem;
32+
height: 45px;
33+
flex-shrink: 0;
4734
}
35+
4836
#source-container {
49-
flex: 1;
50-
height: auto;
51-
overflow: auto;
52-
display: none;
5337
pre{
5438
margin-top: 0px;
5539
}
@@ -83,7 +67,9 @@
8367
display:none;
8468
}
8569
.source{
86-
max-height: calc(100vh - 100px);
70+
display: flex;
71+
flex-direction: column;
72+
height: 100%;
8773
}
8874

8975
.scroll::-webkit-scrollbar {

assets/styles/pages/_shared.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
}
88

99
.page-wrap {
10-
min-height: 100%;
11-
padding-top: 30px;
12-
box-sizing:border-box;
13-
margin-bottom: -80px;
14-
padding-bottom:80px;
10+
bottom: 55px;
11+
top: 30px;
12+
left: 0;
13+
right: 0;
14+
position: fixed;
1515
}
1616

1717

assets/styles/styleguide/partials/_footer.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
.footer {
22
padding: $header-margin 0;
3-
margin-top: $default-space;
3+
position: fixed;
4+
width: 100%;
5+
bottom: 0;
6+
background-color: white;
47
border-top: 1px solid $primary-extra-light;
58

69
@include clearfix;

views/package_version/source.ejs

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
11
<% var pkgVersion = data; %>
22
<section class="source">
33
<header class="source-header">
4-
<div class="source--header-content container">
5-
<div class="ph-flex-position">
6-
<div> <!-- Do not remove this div, needed for ph-flex-position -->
7-
<div class='source--title--container'>
8-
<a href=<%= data.uri %>><h1 class='package--title' itemprop="name"><%- pkgVersion.package_name %>
9-
<span class='package--version--v'>v<%= pkgVersion.version %></span></h1></a>
10-
11-
</div>
12-
</div>
13-
</div>
4+
<div class='source-header--title'>
5+
<a class="btn btn-small btn-secondary-light" href=<%= data.uri %>><i class="fa fa-chevron-left" aria-hidden="true"></i>
6+
Back to <%- pkgVersion.package_name %></a>
147
</div>
158
</header>
169

17-
<div id="parent" class="container">
18-
<div id="tree" class="scroll" data-package-name="<%= pkgVersion.package_name %>" data-package-version="<%= pkgVersion.version %>"></div>
19-
<div id="source-container" class="scroll">
10+
<div class="source--explorer" id="parent">
11+
<div class="source--tree" id="tree" class="scroll" data-package-name="<%= pkgVersion.package_name %>" data-package-version="<%= pkgVersion.version %>"></div>
12+
<div class="source--code" id="source-container" class="scroll">
2013
<!-- Don't add a space or return within the pre tags -->
2114
<pre><code class="R" id="code"></code></pre>
2215
</div>

0 commit comments

Comments
 (0)