Add basic layout styles

2016-09-10 15:24:31 +09:00 · 2016-09-10 15:24:31 +09:00 · 287385ca85
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -2,9 +2,15 @@
 <html>
  <head>
    <title>GitHub</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/octicons.min.css">
+    <link rel="stylesheet" href="/application.css">
+    <script src="/application.js"></script>
  </head>

  <body>
-    <%= yield %>
+    <div class="container">
+      <%= yield %>
+    </div>
  </body>
 </html>
--- a/public/application.css
+++ b/public/application.css
@ -0,0 +1,54 @@
+body {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.header {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.header h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 40px;
+}
+
+.octicon {
+  vertical-align: text-top;
+}
+
+.repositories {
+  width: 350px;
+}
+
+.star-badge {
+  float: right;
+  color: #777;
+}
+
+.nav-pills .badge {
+  background-color: #ccc;
+}
+
+.show-more .spinner {
+  display: none;
+}
+
+.show-more.loading .spinner {
+  display: inline-block;
+  float: right;
+  animation-name: spin;
+  animation-duration: 2000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  padding-left: 4px;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  } to {
+    transform: rotate(360deg);
+  }
+}
--- a/public/application.js
+++ b/public/application.js
@ -0,0 +1,14 @@
+function loadMoreRepositories(event) {
+  var container = event.target.parentElement;
+  container.classList.add('loading');
+  event.preventDefault();
+
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', event.target.href, true);
+  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+  xhr.onload = function() {
+    container.insertAdjacentHTML('afterend', xhr.responseText);
+    container.remove();
+  }
+  xhr.send();
+}