Fix styles of the repository creation page and more

src/main/twirl/gitbucket/core/account/main.scala.html

@@ -39,14 +39,14 @@
             @if(loginAccount.isDefined && loginAccount.get.userName == account.userName){
               <li class="pull-right">
                 <div class="button-group">
-                  <a href="@url(account.userName)/_edit" class="btn">Edit Your Profile</a>
+                  <a href="@url(account.userName)/_edit" class="btn btn-default">Edit Your Profile</a>
                 </div>
               </li>
             }
             @if(loginAccount.isDefined && account.isGroupAccount && isGroupManager){
               <li class="pull-right">
                 <div class="button-group">
-                  <a href="@url(account.userName)/_editgroup" class="btn">Edit Group</a>
+                  <a href="@url(account.userName)/_editgroup" class="btn btn-default">Edit Group</a>
                 </div>
               </li>
             }

src/main/twirl/gitbucket/core/account/newrepo.scala.html

@@ -4,45 +4,56 @@ isCreateRepoOptionPublic: Boolean)(implicit context: gitbucket.core.controller.C
 @import gitbucket.core.view.helpers._
 @html.main("Create a New Repository"){
 <div style="width: 600px; margin: 10px auto;">
+  <h2>Create a new repository</h2>
+  <p class="muted">
+    A repository contains all the files for your project, including the revision history.
+  </p>
   <form id="form" method="post" action="@path/new" validate="true">
-    <fieldset>
-      <label for="name" class="strong">Repository name:</label>
-      <div class="btn-group" style="margin-bottom: 10px;" id="owner-dropdown">
-        <button class="btn dropdown-toggle" data-toggle="dropdown">
-          <span class="strong">@avatar(loginAccount.get.userName, 20) @loginAccount.get.userName</span>
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu">
-          <li><a href="javascript:void(0);" data-name="@loginAccount.get.userName"><i class="octicon octicon-check"></i> <span>@avatar(loginAccount.get.userName, 20) @loginAccount.get.userName</span></a></li>
-          @groupNames.map { groupName =>
-            <li><a href="javascript:void(0);" data-name="@groupName"><i class="icon-white"></i> <span>@avatar(groupName, 20) @groupName</span></a></li>
-          }
-        </ul>
-        <input type="hidden" name="owner" id="owner" value="@loginAccount.get.userName"/>
-      </div>
-      <span class="slash">/</span>
-      <input type="text" name="name" id="name" autofocus />
-      <span id="error-name" class="error"></span>
+    <fieldset class="margin form-group">
+      <dl style="float: left;">
+        <dt>Owner</dt>
+        <dd style="margin-left: 0px;">
+          <div class="btn-group" id="owner-dropdown">
+            <button class="btn dropdown-toggle btn-default" data-toggle="dropdown">
+              <span class="strong">@avatar(loginAccount.get.userName, 20) @loginAccount.get.userName</span>
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a href="javascript:void(0);" data-name="@loginAccount.get.userName"><i class="octicon octicon-check"></i> <span>@avatar(loginAccount.get.userName, 20) @loginAccount.get.userName</span></a></li>
+              @groupNames.map { groupName =>
+                <li><a href="javascript:void(0);" data-name="@groupName"><i class="icon-white"></i> <span>@avatar(groupName, 20) @groupName</span></a></li>
+              }
+            </ul>
+            <input type="hidden" name="owner" id="owner" value="@loginAccount.get.userName"/>
+          </div>
+        </dd>
+      </dl>
+      <span class="slash" style="float: left; margin-left: 10px; margin-right: 10px; margin-top: 15px;">/</span>
+      <dl>
+        <dt>Repository name</dt>
+        <dd style="margin-left: 0px;">
+          <input type="text" name="name" id="name" class="form-control" style="width: 200px;" autofocus />
+          <span id="error-name" class="error"></span>
+        </dd>
+      </dl>
     </fieldset>
-    <fieldset>
+    <fieldset class="form-group">
       <label for="description" class="strong">Description (optional):</label>
-      <input type="text" name="description" id="description" style="width: 95%;"/>
+      <input type="text" name="description" id="description" class="form-control" style="width: 95%;"/>
     </fieldset>
     <fieldset class="margin">
       <label class="radio">
         <input type="radio" name="isPrivate" value="false" @if(isCreateRepoOptionPublic){checked}>
-        <span class="strong"><i class="octicon octicon-repo"></i>&nbsp;</i>&nbsp;Public</span><br>
-        <div>
-          <span>All users and guests can read this repository.</span>
+        <span class="strong"><i class="octicon octicon-repo"></i>&nbsp;</i>&nbsp;Public</span>
+        <div class="normal muted">
+          Anyone can see this repository. You choose who can commit.
         </div>
       </label>
-    </fieldset>
-    <fieldset>
       <label class="radio">
         <input type="radio" name="isPrivate" value="true" @if(!isCreateRepoOptionPublic){checked}>
-        <span class="strong"><i class="octicon octicon-lock"></i>&nbsp;</i>&nbsp;Private</span><br>
-        <div>
-          <span>Only collaborators can read this repository.</span>
+        <span class="strong"><i class="octicon octicon-lock"></i>&nbsp;</i>&nbsp;Private</span>
+        <div class="normal muted">
+          You choose who can see and commit to this repository.
         </div>
       </label>
     </fieldset>
@@ -50,13 +61,13 @@ isCreateRepoOptionPublic: Boolean)(implicit context: gitbucket.core.controller.C
       <label for="createReadme" class="checkbox">
         <input type="checkbox" name="createReadme" id="createReadme"/>
         <span class="strong">Initialize this repository with a README</span>
-        <div>
-          <span>This will allow you to <code>git clone</code> the repository immediately.</span>
+        <div class="normal muted">
+          This will let you immediately clone the repository to your computer. Skip this step if you’re importing an existing repository.
         </div>
       </label>
     </fieldset>
-    <fieldset class="margin">
-      <input type="submit" class="btn btn-success" value="Create repository"/>
+    <fieldset class="margin form-actions">
+      <input type="submit" class="btn btn-success btn-lg" value="Create repository"/>
     </fieldset>
   </form>
 </div>

src/main/twirl/gitbucket/core/helper/preview.scala.html

@@ -14,11 +14,11 @@
 @import gitbucket.core._
 @import gitbucket.core.view.helpers._
 <div class="tabbable">
-  <ul class="nav nav-tabs" style="margin-top: 12px;">
+  <ul class="nav nav-tabs fill-width pull-left" style="margin-top: 12px; margin-bottom: 10px;">
     <li class="active"><a href="#tab@uid" data-toggle="tab">Write</a></li>
     <li><a href="#tab@(uid+1)" data-toggle="tab" id="preview@uid">Preview</a></li>
   </ul>
-  <div class="tab-content">
+  @*<div class="tab-content">*@
     <div class="tab-pane active" style="margin-top: 4px;" id="tab@uid">
       <span id="error-content" class="error"></span>
       @textarea = {
@@ -37,7 +37,7 @@
       <div class="markdown-body" id="preview-area@uid">
       </div>
     </div>
-  </div>
+  @*</div>*@
 </div>
 <link  href="@assets/vendors/google-code-prettify/prettify.css" type="text/css" rel="stylesheet"/>
 <script src="@assets/vendors/google-code-prettify/prettify.js"></script>

src/main/twirl/gitbucket/core/search/menu.scala.html

@@ -3,8 +3,8 @@
 @import context._
 @import gitbucket.core.view.helpers._
 @html.menu("", repository){
-  <div class="row-fluid">
-    <div class="span3">
+  <div class="row">
+    <div class="col-md-3">
       <div class="box">
         <ul class="nav nav-tabs nav-stacked side-menu">
           <li@if(active=="code"){ class="active"}>
@@ -26,10 +26,10 @@
         </ul>
       </div>
     </div>
-    <div class="span9">
-      <form action="@url(repository)/search" method="GET">
-        <input type="text" name="q" value="@query" style="width: 80%; margin-bottom: 0px;"/>
-        <input type="submit" value="Search" class="btn" style="width: 15%;"/>
+    <div class="col-md-9">
+      <form action="@url(repository)/search" method="GET" class="form-inline">
+        <input type="text" name="q" value="@query" class="form-control" style="width: 80%; margin-bottom: 0px;"/>
+        <input type="submit" value="Search" class="btn btn-default" style="width: 15%;"/>
         <input type="hidden" name="type" value="@active"/>
       </form>
       @body

src/main/twirl/gitbucket/core/wiki/compare.scala.html

@@ -17,10 +17,10 @@
       <li class="pull-right">
         <div class="btn-group">
         @if(pageName.isDefined){
-          <a class="btn btn-small" href="@url(repository)/wiki/@urlEncode(pageName)">View Page</a>
-          <a class="btn btn-small" href="@url(repository)/wiki/@urlEncode(pageName)/_history">Back to Page History</a>
+          <a class="btn btn-small btn-default" href="@url(repository)/wiki/@urlEncode(pageName)">View Page</a>
+          <a class="btn btn-small btn-default" href="@url(repository)/wiki/@urlEncode(pageName)/_history">Back to Page History</a>
         } else {
-          <a class="btn btn-small" href="@url(repository)/wiki/_history">Back to Wiki History</a>
+          <a class="btn btn-small btn-default" href="@url(repository)/wiki/_history">Back to Wiki History</a>
         }
         </div>
       </li>

src/main/twirl/gitbucket/core/wiki/edit.scala.html

@@ -12,8 +12,8 @@
       <li class="pull-right">
         <div>
           @if(page.isDefined){
-            <a class="btn btn-small" href="@url(repository)/wiki/@urlEncode(pageName)/_delete" id="delete">Delete Page</a>
-            <a class="btn btn-small" href="@url(repository)/wiki/@urlEncode(pageName)/_history">Page History</a>
+            <a class="btn btn-small btn-default" href="@url(repository)/wiki/@urlEncode(pageName)/_delete" id="delete">Delete Page</a>
+            <a class="btn btn-small btn-default" href="@url(repository)/wiki/@urlEncode(pageName)/_history">Page History</a>
           }
           <a class="btn btn-small btn-success" href="@url(repository)/wiki/_new">New Page</a>
         </div>
@@ -21,7 +21,7 @@
     </ul>
     <form action="@url(repository)/wiki/@if(page.isEmpty){_new} else {_edit}" method="POST" validate="true">
       <span id="error-pageName" class="error"></span>
-      <input type="text" name="pageName" value="@pageName" style="width: 910px; font-weight: bold;" placeholder="Input a page name."/>
+      <input type="text" name="pageName" value="@pageName" class="form-control" style="width: 900px; font-weight: bold;" placeholder="Input a page name."/>
       @helper.html.preview(
         repository         = repository,
         content            = page.map(_.content).getOrElse(""),
@@ -29,14 +29,19 @@
         enableRefsLink     = false,
         enableTaskList     = false,
         hasWritePermission = false,
-        style              = "width: 910px; height: 400px;",
+        style              = "width: 900px; height: 400px;",
         styleClass         = "monospace",
         placeholder        = ""
       )
-      <input type="text" name="message" value="" style="width: 910px;" placeholder="Write a small message here explaining this change. (Optional)"/>
-      <input type="hidden" name="currentPageName" value="@pageName"/>
-      <input type="hidden" name="id" value="@page.map(_.id)"/>
-      <input type="submit" value="Save" class="btn btn-success">
+      <div class="form-group">
+        <label for="message">Edit Message</label>
+        <input type="text" id="message" name="message" value="" class="form-control" style="width: 900px;" placeholder="Write a small message here explaining this change. (Optional)"/>
+      </div>
+      <div class="form-group pull-right">
+        <input type="hidden" name="currentPageName" value="@pageName"/>
+        <input type="hidden" name="id" value="@page.map(_.id)"/>
+        <input type="submit" value="Save" class="btn btn-success btn-lg">
+      </div>
     </form>
   }
 }

src/main/twirl/gitbucket/core/wiki/history.scala.html

@@ -23,7 +23,7 @@
             }
           } else {
             @if(loginAccount.isDefined){
-              <a class="btn btn-small" href="@url(repository)/wiki/@urlEncode(pageName)/_edit">Edit Page</a>
+              <a class="btn btn-small btn-default" href="@url(repository)/wiki/@urlEncode(pageName)/_edit">Edit Page</a>
               <a class="btn btn-small btn-success" href="@url(repository)/wiki/_new">New Page</a>
             }
           }

src/main/twirl/gitbucket/core/wiki/page.scala.html

@@ -18,16 +18,16 @@
       <li class="pull-right">
         @if(hasWritePermission){
           <div>
-            <a class="btn btn-small" href="@url(repository)/wiki/@urlEncode(pageName)/_edit">Edit Page</a>
+            <a class="btn btn-small btn-default" href="@url(repository)/wiki/@urlEncode(pageName)/_edit">Edit Page</a>
             <a class="btn btn-small btn-success" href="@url(repository)/wiki/_new">New Page</a>
           </div>
         }
       </li>
     </ul>
-    <div style="width: 200px;" class="pull-right">
+    <div style="width: 200px; margin-top: 20px;" class="pull-right">
       @defining(15){ max =>
         <div class="box-header">
-          <span class="strong">Pages</span> <span class="label">@pages.length</span>
+          <span class="strong">Pages</span> <span class="badge">@pages.length</span>
         </div>
         <div class="box-content-bottom" style="padding: 0px;">
           @pages.zipWithIndex.map { case (page, i) =>
@@ -54,7 +54,7 @@
         </div>
       }
     </div>
-    <div style="width: 700px;" class="pull-left">
+    <div style="width: 680px;" class="pull-left">
       <div class="markdown-body">
         @markdown(page.content, repository, true, false, false, false, pages)
       </div>

src/main/twirl/gitbucket/core/wiki/pages.scala.html

@@ -12,7 +12,7 @@
       <li class="pull-right">
         <div class="btn-group">
           @if(hasWritePermission){
-            <a class="btn btn-small" href="@url(repository)/wiki/_new">New Page</a>
+            <a class="btn btn-small btn-default" href="@url(repository)/wiki/_new">New Page</a>
           }
         </div>
       </li>

src/main/webapp/assets/common/css/gitbucket.css

@@ -74,11 +74,11 @@ blockquote p {
 .table-bordered > thead > tr > td {
   border-bottom-width: 1px;
 }
-
+/*
 .tab-content {
   margin-top: 20px;
 }
-
+*/
 .danger {
   color: #900;
 }
@@ -87,6 +87,10 @@ blockquote p {
   color: #F28722;
 }
 
+.muted {
+  color: #777;
+}
+
 dl {
   margin: 0px;
 }
@@ -219,6 +223,10 @@ span.error {
   font-weight: bold;
 }
 
+.normal {
+  font-weight: normal;
+}
+
 .shorten-text {
   text-overflow: ellipsis;
   white-space: nowrap;