Responsive view

integrations/pull_compare_test.go

@@ -18,7 +18,7 @@ func TestPullCompare(t *testing.T) {
 	req := NewRequest(t, "GET", "/user2/repo1/pulls")
 	resp := session.MakeRequest(t, req, http.StatusOK)
 	htmlDoc := NewHTMLParser(t, resp.Body)
-	link, exists := htmlDoc.doc.Find(".navbar").Find(".ui.green.button").Attr("href")
+	link, exists := htmlDoc.doc.Find(".ui.three.column.grid").Find(".ui.green.button").Attr("href")
 	assert.True(t, exists, "The template has changed")
 
 	req = NewRequest(t, "GET", link)

public/js/index.js

@@ -1531,11 +1531,11 @@ $(document).ready(function () {
     $('.issue-checkbox').click(function() {
         var numChecked = $('.issue-checkbox').children('input:checked').length;
         if (numChecked > 0) {
-            $('.issue-filters').hide();
-            $('.issue-actions').show();
+            $('#issue-filters').hide();
+            $('#issue-actions').show();
         } else {
-            $('.issue-filters').show();
-            $('.issue-actions').hide();
+            $('#issue-filters').show();
+            $('#issue-actions').hide();
         }
     });
 
@@ -1568,6 +1568,7 @@ $(document).ready(function () {
     initVueApp();
     initTeamSettings();
     initCtrlEnterSubmit();
+    initNavbarContentToggle();
 
     // Repo clone url.
     if ($('#repo-clone-url').length > 0) {
@@ -2076,3 +2077,20 @@ function initFilterBranchTagDropdown(selector) {
 $(".commit-button").click(function() {
     $(this).parent().find('.commit-body').toggle();
 });
+
+function initNavbarContentToggle() {
+    var content = $('#navbar');
+    var toggle = $('#navbar-expand-toggle');
+    var isExpanded = false;
+    toggle.click(function() {
+        isExpanded = !isExpanded;
+        if (isExpanded) {
+            content.addClass('shown');
+            toggle.addClass('active');
+        }
+        else {
+            content.removeClass('shown');
+            toggle.removeClass('active');
+        }
+    });
+}

public/less/_base.less

@@ -1,7 +1,7 @@
 @footer-margin: 40px;
 
 body {
-    font-family: "Helvetica Neue", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
+    font-family: "Lato", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
     background-color: #fff;
     overflow-y: scroll;
     -webkit-font-smoothing: antialiased;
@@ -61,6 +61,7 @@ pre, code {
     z-index: 900;
     left: 0;
     width: 100%;
+    margin: 0;
     &.light {
         background-color: white;
         border-bottom: 1px solid #DDDDDD;
@@ -86,18 +87,11 @@ pre, code {
     .top.menu .menu {
         z-index: 900;
     }
-    .icon,
     .octicon {
-        margin-right: 5px !important;
-    }
-    .head.link.item {
-        padding-right: 0 !important;
-    }
-    .avatar > .ui.image {
-        margin-right: 0;
-    }
-    .avatar .octicon-triangle-down {
-        margin-top: 6.5px;
+        &.fitted {
+            margin-right: 0;
+        }
+        margin-right: .75em;
     }
     .searchbox {
         background-color: rgb(244, 244, 244) !important;
@@ -109,17 +103,26 @@ pre, code {
         width: 16px;
         text-align: center;
     }
-    .right.menu {
-        .menu {
-            left: auto;
-            right: 0;
-        }
-        .dropdown .menu {
-            margin-top: 0;
+    @media only screen and (max-width: 767px) {
+        #navbar:not(.shown) > *:not(:first-child) {
+            display: none;
         }
     }
 }
 
+.right.stackable.menu {
+    // responsive fix: this makes sure that the right menu when the page
+    // is on mobile view will have elements stacked on top of each other.
+    // no, stackable won't work on right menus.
+    margin-left: auto;
+    display: flex;
+    display: -ms-flexbox;
+    -ms-flex-align: inherit;
+    align-items: inherit;
+    -ms-flex-direction: inherit;
+    flex-direction: inherit;
+}
+
 .ui {
     &.left {
         float: left;
@@ -443,6 +446,23 @@ footer {
     .generate-img(@n, (@i + 1));
 }
 
+// Conditional display
+@media only screen and (min-width: 768px) {
+    .mobile-only, .ui.button.mobile-only {
+      display: none;
+    }
+    // has the same behaviour of sr-only, hiding the content for
+    // non-screenreaders, but is shown on mobile devices.
+    .sr-mobile-only {
+        .sr-only();
+    }
+}
+@media only screen and (max-width: 767px) {
+    .not-mobile {
+        display: none;
+    }
+}
+
 // Accessibility
 .sr-only {
     position: absolute;

public/less/_dashboard.less

@@ -29,26 +29,23 @@
                 }
             }
 
-            // Sort
-            .jump.item {
-                margin: 1px;
-                padding-right: 0;
-            }
-            .menu {
-                max-height: 300px;
-                overflow-x: auto;
-                right: 0!important;
-                left: auto!important;
-            }
-        }
-        .ui.right .head.menu {
-            margin-top: -5px;
-            .item.active {
-                color: #d9453d;
-            }
-        }
+			// Sort
+			.jump.item {
+				margin: 1px;
+				padding-right: 0;
+			}
+			.menu {
+				max-height: 300px;
+				overflow-x: auto;
+				right: 0!important;
+				left: auto!important;
+			}
+		}
+		.right.stackable.menu > .item.active {
+			color: #d9453d;
+		}
     }
-
+    
     /* Accomodate for Semantic's 1px hacks on .attached elements */
     .dashboard-repos {
         margin: 0 1px;

public/less/_explore.less

@@ -10,11 +10,12 @@
         background-color: #FAFAFA !important;
         border-width: 1px !important;
 
-        .octicon {
-            width: 16px;
-            text-align: center;
-        }
-    }
+		.octicon {
+			width: 16px;
+			text-align: center;
+			margin-right: 5px;
+		}
+	}
 }
 
 .ui.repository.list {

public/less/_form.less

@@ -19,31 +19,41 @@
 
 @create-page-form-input-padding: 250px !important;
 #create-page-form {
-    form {
-        margin: auto;
-        width: 800px!important;
-        .ui.message {
-            text-align: center;
-        }
-        .header {
-            padding-left: @create-page-form-input-padding+30px;
-        }
-        .inline.field > label {
-            text-align: right;
-            width: @create-page-form-input-padding;
-            word-wrap: break-word;
-        }
-        .help {
-            margin-left: @create-page-form-input-padding+15px;
-        }
-        .optional .title {
-            margin-left: @create-page-form-input-padding;
-        }
-        input,
-        textarea {
-            width: 50%!important;
-        }
-    }
+	form {
+		margin: auto;
+		.ui.message {
+			text-align: center;
+		}
+		@media only screen and (min-width: 768px) {
+			width: 800px!important;
+			.header {
+				padding-left: @create-page-form-input-padding+30px;
+			}
+			.inline.field > label {
+				text-align: right;
+				width: @create-page-form-input-padding;
+				word-wrap: break-word;
+			}
+			.help {
+				margin-left: @create-page-form-input-padding+15px;
+			}
+			.optional .title {
+				margin-left: @create-page-form-input-padding;
+			}
+			input,
+			textarea {
+				width: 50%!important;
+			}
+		}
+		@media only screen and (max-width: 767px) {
+			.optional .title {
+				margin-left: 15px;
+			}
+			.inline.field > label {
+				display: block;
+			}
+		}
+	}
 }
 
 .signin {
@@ -113,16 +123,18 @@
         }
     }
 
-    &.new.repo {
-        .ui.form {
-            .selection.dropdown:not(.owner) {
-                width: 50%!important;
-            }
-            #auto-init {
-                margin-left: @create-page-form-input-padding+15px;
-            }
-        }
-    }
+	&.new.repo {
+		.ui.form {
+			.selection.dropdown:not(.owner) {
+				width: 50%!important;
+			}
+			@media only screen and (min-width: 768px) {
+				#auto-init {
+					margin-left: @create-page-form-input-padding+15px;
+				}
+			}
+		}
+	}
 }
 
 .new.webhook {

public/less/_home.less

@@ -1,36 +1,46 @@
 .home {
-    padding-bottom: @footer-margin * 2;
-    .logo {
-        max-width: 220px;
-    }
-    .hero {
-        h1, h2 {
-            font-family: 'PT Sans Narrow', sans-serif, 'Microsoft YaHei';
-        }
-        h1 {
-            font-size: 5.5em;
-        }
-        h2 {
-            font-size: 3em;
-        }
-        .octicon {
-            color: #5aa509;
-            font-size: 40px;
-            width: 50px;
-        }
-        &.header {
-            font-size: 20px;
-        }
-    }
-    p.large {
-        font-size: 16px
-    }
-    .stackable {
-        padding-top: 30px;
-    }
-    a {
-        color: #5aa509;
-    }
+	padding-bottom: @footer-margin * 2;
+	.logo {
+		max-width: 220px;
+	}
+	.hero {
+		h1, h2 {
+			font-family: 'PT Sans Narrow', sans-serif, 'Microsoft YaHei';
+		}
+		@media only screen and (max-width: 767px) {
+			h1 {
+				font-size: 3.5em;
+			}
+			h2 {
+				font-size: 2em;
+			}
+		}
+		@media only screen and (min-width: 768px) {
+			h1 {
+				font-size: 5.5em;
+			}
+			h2 {
+				font-size: 3em;
+			}
+		}
+		.octicon {
+			color: #5aa509;
+			font-size: 40px;
+			width: 50px;
+		}
+		&.header {
+			font-size: 20px;
+		}
+	}
+	p.large {
+		font-size: 16px
+	}
+	.stackable {
+		padding-top: 30px;
+	}
+	a {
+		color: #5aa509;
+	}
 }
 
 .signup {