Skip to content

Commit 3d3faa2

Browse files
thehowllunny
thehowl
authored and
lunny
committed
Responsive view (#2750)
* Viewport meta tag * responsive: dashboard * responsive: issues page * responsive: Explore page * responsive: navbar, and some navbar css refactoring * responsive: button for collapsing navbar in mobile view * Mark the hamburger button as active when pressed * better homepage for responsive views * Bring back jump class in navbar The class was necessary, because this way the dropdown doesn't assume the contents of the selected item. * make repository homes responsive * Make file view page responsive * Make forms look good on responsive views * make commits and commit diff view responsive * issues and PRs * responsive wiki * Don't place auto-init far off the page * Minor changes to amend broken stuff minor improvements - make login/sign up in navbar stackable - make navbar in explore and sign in not stackable Change selected class in TestPullCompare Fix typo that happened when rebasing fix dashboard on org view improve profile UI Use clearing on file diff to fix broken UI caused by floating elements remove unresolved merge conflict, and | Sanitize Fix repo home not loading
1 parent 2f8c65c commit 3d3faa2

30 files changed

+699
-548
lines changed

‎integrations/pull_compare_test.go

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ func TestPullCompare(t *testing.T) {
1818
req := NewRequest(t, "GET", "/user2/repo1/pulls")
1919
resp := session.MakeRequest(t, req, http.StatusOK)
2020
htmlDoc := NewHTMLParser(t, resp.Body)
21-
link, exists := htmlDoc.doc.Find(".navbar").Find(".ui.green.button").Attr("href")
21+
link, exists := htmlDoc.doc.Find(".ui.three.column.grid").Find(".ui.green.button").Attr("href")
2222
assert.True(t, exists, "The template has changed")
2323

2424
req = NewRequest(t, "GET", link)

‎public/css/index.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/index.js

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1531,11 +1531,11 @@ $(document).ready(function () {
15311531
$('.issue-checkbox').click(function() {
15321532
var numChecked = $('.issue-checkbox').children('input:checked').length;
15331533
if (numChecked > 0) {
1534-
$('.issue-filters').hide();
1535-
$('.issue-actions').show();
1534+
$('#issue-filters').hide();
1535+
$('#issue-actions').show();
15361536
} else {
1537-
$('.issue-filters').show();
1538-
$('.issue-actions').hide();
1537+
$('#issue-filters').show();
1538+
$('#issue-actions').hide();
15391539
}
15401540
});
15411541

@@ -1568,6 +1568,7 @@ $(document).ready(function () {
15681568
initVueApp();
15691569
initTeamSettings();
15701570
initCtrlEnterSubmit();
1571+
initNavbarContentToggle();
15711572

15721573
// Repo clone url.
15731574
if ($('#repo-clone-url').length > 0) {
@@ -2076,3 +2077,20 @@ function initFilterBranchTagDropdown(selector) {
20762077
$(".commit-button").click(function() {
20772078
$(this).parent().find('.commit-body').toggle();
20782079
});
2080+
2081+
function initNavbarContentToggle() {
2082+
var content = $('#navbar');
2083+
var toggle = $('#navbar-expand-toggle');
2084+
var isExpanded = false;
2085+
toggle.click(function() {
2086+
isExpanded = !isExpanded;
2087+
if (isExpanded) {
2088+
content.addClass('shown');
2089+
toggle.addClass('active');
2090+
}
2091+
else {
2092+
content.removeClass('shown');
2093+
toggle.removeClass('active');
2094+
}
2095+
});
2096+
}

‎public/less/_base.less

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@footer-margin: 40px;
22

33
body {
4-
font-family: "Helvetica Neue", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
4+
font-family: "Lato", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
55
background-color: #fff;
66
overflow-y: scroll;
77
-webkit-font-smoothing: antialiased;
@@ -61,6 +61,7 @@ pre, code {
6161
z-index: 900;
6262
left: 0;
6363
width: 100%;
64+
margin: 0;
6465
&.light {
6566
background-color: white;
6667
border-bottom: 1px solid #DDDDDD;
@@ -86,18 +87,11 @@ pre, code {
8687
.top.menu .menu {
8788
z-index: 900;
8889
}
89-
.icon,
9090
.octicon {
91-
margin-right: 5px !important;
92-
}
93-
.head.link.item {
94-
padding-right: 0 !important;
95-
}
96-
.avatar > .ui.image {
97-
margin-right: 0;
98-
}
99-
.avatar .octicon-triangle-down {
100-
margin-top: 6.5px;
91+
&.fitted {
92+
margin-right: 0;
93+
}
94+
margin-right: .75em;
10195
}
10296
.searchbox {
10397
background-color: rgb(244, 244, 244) !important;
@@ -109,17 +103,26 @@ pre, code {
109103
width: 16px;
110104
text-align: center;
111105
}
112-
.right.menu {
113-
.menu {
114-
left: auto;
115-
right: 0;
116-
}
117-
.dropdown .menu {
118-
margin-top: 0;
106+
@media only screen and (max-width: 767px) {
107+
#navbar:not(.shown) > *:not(:first-child) {
108+
display: none;
119109
}
120110
}
121111
}
122112

113+
.right.stackable.menu {
114+
// responsive fix: this makes sure that the right menu when the page
115+
// is on mobile view will have elements stacked on top of each other.
116+
// no, stackable won't work on right menus.
117+
margin-left: auto;
118+
display: flex;
119+
display: -ms-flexbox;
120+
-ms-flex-align: inherit;
121+
align-items: inherit;
122+
-ms-flex-direction: inherit;
123+
flex-direction: inherit;
124+
}
125+
123126
.ui {
124127
&.left {
125128
float: left;
@@ -443,6 +446,23 @@ footer {
443446
.generate-img(@n, (@i + 1));
444447
}
445448

449+
// Conditional display
450+
@media only screen and (min-width: 768px) {
451+
.mobile-only, .ui.button.mobile-only {
452+
display: none;
453+
}
454+
// has the same behaviour of sr-only, hiding the content for
455+
// non-screenreaders, but is shown on mobile devices.
456+
.sr-mobile-only {
457+
.sr-only();
458+
}
459+
}
460+
@media only screen and (max-width: 767px) {
461+
.not-mobile {
462+
display: none;
463+
}
464+
}
465+
446466
// Accessibility
447467
.sr-only {
448468
position: absolute;

‎public/less/_dashboard.less

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,26 +29,23 @@
2929
}
3030
}
3131

32-
// Sort
33-
.jump.item {
34-
margin: 1px;
35-
padding-right: 0;
36-
}
37-
.menu {
38-
max-height: 300px;
39-
overflow-x: auto;
40-
right: 0!important;
41-
left: auto!important;
42-
}
43-
}
44-
.ui.right .head.menu {
45-
margin-top: -5px;
46-
.item.active {
47-
color: #d9453d;
48-
}
49-
}
32+
// Sort
33+
.jump.item {
34+
margin: 1px;
35+
padding-right: 0;
36+
}
37+
.menu {
38+
max-height: 300px;
39+
overflow-x: auto;
40+
right: 0!important;
41+
left: auto!important;
42+
}
43+
}
44+
.right.stackable.menu > .item.active {
45+
color: #d9453d;
46+
}
5047
}
51-
48+
5249
/* Accomodate for Semantic's 1px hacks on .attached elements */
5350
.dashboard-repos {
5451
margin: 0 1px;

‎public/less/_explore.less

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
background-color: #FAFAFA !important;
1111
border-width: 1px !important;
1212

13-
.octicon {
14-
width: 16px;
15-
text-align: center;
16-
}
17-
}
13+
.octicon {
14+
width: 16px;
15+
text-align: center;
16+
margin-right: 5px;
17+
}
18+
}
1819
}
1920

2021
.ui.repository.list {

‎public/less/_form.less

Lines changed: 47 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -19,31 +19,41 @@
1919

2020
@create-page-form-input-padding: 250px !important;
2121
#create-page-form {
22-
form {
23-
margin: auto;
24-
width: 800px!important;
25-
.ui.message {
26-
text-align: center;
27-
}
28-
.header {
29-
padding-left: @create-page-form-input-padding+30px;
30-
}
31-
.inline.field > label {
32-
text-align: right;
33-
width: @create-page-form-input-padding;
34-
word-wrap: break-word;
35-
}
36-
.help {
37-
margin-left: @create-page-form-input-padding+15px;
38-
}
39-
.optional .title {
40-
margin-left: @create-page-form-input-padding;
41-
}
42-
input,
43-
textarea {
44-
width: 50%!important;
45-
}
46-
}
22+
form {
23+
margin: auto;
24+
.ui.message {
25+
text-align: center;
26+
}
27+
@media only screen and (min-width: 768px) {
28+
width: 800px!important;
29+
.header {
30+
padding-left: @create-page-form-input-padding+30px;
31+
}
32+
.inline.field > label {
33+
text-align: right;
34+
width: @create-page-form-input-padding;
35+
word-wrap: break-word;
36+
}
37+
.help {
38+
margin-left: @create-page-form-input-padding+15px;
39+
}
40+
.optional .title {
41+
margin-left: @create-page-form-input-padding;
42+
}
43+
input,
44+
textarea {
45+
width: 50%!important;
46+
}
47+
}
48+
@media only screen and (max-width: 767px) {
49+
.optional .title {
50+
margin-left: 15px;
51+
}
52+
.inline.field > label {
53+
display: block;
54+
}
55+
}
56+
}
4757
}
4858

4959
.signin {
@@ -113,16 +123,18 @@
113123
}
114124
}
115125

116-
&.new.repo {
117-
.ui.form {
118-
.selection.dropdown:not(.owner) {
119-
width: 50%!important;
120-
}
121-
#auto-init {
122-
margin-left: @create-page-form-input-padding+15px;
123-
}
124-
}
125-
}
126+
&.new.repo {
127+
.ui.form {
128+
.selection.dropdown:not(.owner) {
129+
width: 50%!important;
130+
}
131+
@media only screen and (min-width: 768px) {
132+
#auto-init {
133+
margin-left: @create-page-form-input-padding+15px;
134+
}
135+
}
136+
}
137+
}
126138
}
127139

128140
.new.webhook {

‎public/less/_home.less

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,46 @@
11
.home {
2-
padding-bottom: @footer-margin * 2;
3-
.logo {
4-
max-width: 220px;
5-
}
6-
.hero {
7-
h1, h2 {
8-
font-family: 'PT Sans Narrow', sans-serif, 'Microsoft YaHei';
9-
}
10-
h1 {
11-
font-size: 5.5em;
12-
}
13-
h2 {
14-
font-size: 3em;
15-
}
16-
.octicon {
17-
color: #5aa509;
18-
font-size: 40px;
19-
width: 50px;
20-
}
21-
&.header {
22-
font-size: 20px;
23-
}
24-
}
25-
p.large {
26-
font-size: 16px
27-
}
28-
.stackable {
29-
padding-top: 30px;
30-
}
31-
a {
32-
color: #5aa509;
33-
}
2+
padding-bottom: @footer-margin * 2;
3+
.logo {
4+
max-width: 220px;
5+
}
6+
.hero {
7+
h1, h2 {
8+
font-family: 'PT Sans Narrow', sans-serif, 'Microsoft YaHei';
9+
}
10+
@media only screen and (max-width: 767px) {
11+
h1 {
12+
font-size: 3.5em;
13+
}
14+
h2 {
15+
font-size: 2em;
16+
}
17+
}
18+
@media only screen and (min-width: 768px) {
19+
h1 {
20+
font-size: 5.5em;
21+
}
22+
h2 {
23+
font-size: 3em;
24+
}
25+
}
26+
.octicon {
27+
color: #5aa509;
28+
font-size: 40px;
29+
width: 50px;
30+
}
31+
&.header {
32+
font-size: 20px;
33+
}
34+
}
35+
p.large {
36+
font-size: 16px
37+
}
38+
.stackable {
39+
padding-top: 30px;
40+
}
41+
a {
42+
color: #5aa509;
43+
}
3444
}
3545

3646
.signup {

0 commit comments

Comments
 (0)