From cc1e0030dfcb582447f12ffe3000b4d5f3c15cb2 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jh.bruhn@me.com>
Date: Sat, 5 Oct 2013 00:21:10 +0200
Subject: [PATCH] Did a lot of design-optimizations mainly added icons and set
 correct bootstrap classes for forms, but also used some new fonts, provided
 via google webfonts

---
 src/main/twirl/account/edit.scala.html        | 11 ++---
 src/main/twirl/account/main.scala.html        |  2 +-
 src/main/twirl/admin/system.scala.html        | 16 +++----
 src/main/twirl/admin/users/user.scala.html    | 13 +++---
 src/main/twirl/header.scala.html              |  8 +++-
 src/main/twirl/index.scala.html               | 18 ++++++--
 src/main/twirl/main.scala.html                | 13 +++---
 src/main/twirl/newrepo.scala.html             | 16 +++----
 src/main/twirl/settings/options.scala.html    | 10 ++---
 src/main/twirl/signinform.scala.html          |  6 +--
 src/main/twirl/wiki/history.scala.html        |  2 +-
 .../webapp/assets/common/css/gitbucket.css    | 42 +++++++++++++++----
 12 files changed, 101 insertions(+), 56 deletions(-)

diff --git a/src/main/twirl/account/edit.scala.html b/src/main/twirl/account/edit.scala.html
index 947be2e04..8a2447fac 100644
--- a/src/main/twirl/account/edit.scala.html
+++ b/src/main/twirl/account/edit.scala.html
@@ -13,7 +13,7 @@
       <div class="span6">
         @if(account.isEmpty){
           <fieldset>
-            <label for="userName" class="strong">User name</label>
+            <label for="userName" class="strong">Username:</label>
             <input type="text" name="userName" id="userName" value=""/>
             <span id="error-userName" class="error"></span>
           </fieldset>
@@ -23,27 +23,28 @@
             <label for="password" class="strong">
               Password
               @if(account.nonEmpty){
-                (Input to change password)
+                (input to change password)
               }
+              :
             </label>
             <input type="password" name="password" id="password" value=""/>
             <span id="error-password" class="error"></span>
           </fieldset>
         }
         <fieldset>
-          <label for="mailAddress" class="strong">Mail Address</label>
+          <label for="mailAddress" class="strong">Mail Address:</label>
           <input type="text" name="mailAddress" id="mailAddress" value="@account.map(_.mailAddress)"/>
           <span id="error-mailAddress" class="error"></span>
         </fieldset>
         <fieldset>
-          <label for="url" class="strong">URL (Optional)</label>
+          <label for="url" class="strong">URL (optional):</label>
           <input type="text" name="url" id="url" style="width: 400px;" value="@account.map(_.url)"/>
           <span id="error-url" class="error"></span>
         </fieldset>
       </div>
       <div class="span6">
         <fieldset>
-          <label for="avatar" class="strong">Image (Optional)</label>
+          <label for="avatar" class="strong">Image (optional):</label>
           @helper.html.uploadavatar(account)
         </fieldset>
       </div>
diff --git a/src/main/twirl/account/main.scala.html b/src/main/twirl/account/main.scala.html
index f571851d6..b60fa2817 100644
--- a/src/main/twirl/account/main.scala.html
+++ b/src/main/twirl/account/main.scala.html
@@ -7,7 +7,7 @@
       <div class="span4">
         <div class="block">
           <div class="account-image">@avatar(account.userName, 200)</div>
-          <div class="block-header">@account.userName</div>
+          <div class="block-header" style="text-align: center">@account.userName</div>
         </div>
         <div class="block">
           @if(account.url.isDefined){
diff --git a/src/main/twirl/admin/system.scala.html b/src/main/twirl/admin/system.scala.html
index 81aabc93b..df79fdb16 100644
--- a/src/main/twirl/admin/system.scala.html
+++ b/src/main/twirl/admin/system.scala.html
@@ -13,13 +13,13 @@
           <!--====================================================================-->
           <label class="strong">Account registration</label>
           <fieldset>
-            <label>
+            <label class="radio">
               <input type="radio" name="allowAccountRegistration" value="true"@if(settings.allowAccountRegistration){ checked}>
-              <span class="strong">Allow</span> - Users can create account by themselves.
+              <span class="strong">Allow</span> - Users can create accounts by themselves.
             </label>
-            <label>
+            <label class="radio">
               <input type="radio" name="allowAccountRegistration" value="false"@if(!settings.allowAccountRegistration){ checked}>
-              <span class="strong">Deny</span> - Only administrators can create account.
+              <span class="strong">Deny</span> - Only administrators can create accounts.
             </label>
           </fieldset>
           <!--====================================================================-->
@@ -28,9 +28,9 @@
           <hr>
           <label class="strong">Services</label>
           <fieldset>
-            <label>
+            <label class="checkbox">
               <input type="checkbox" name="gravatar"@if(settings.gravatar){ checked}/>
-              Gravatar
+              Use Gravatar for Profile-Images
             </label>
           </fieldset>
           <!--====================================================================-->
@@ -39,7 +39,7 @@
           <hr>
           <label class="strong">Authentication</label>
           <fieldset>
-            <label>
+            <label class="checkbox">
               <input type="checkbox" id="ldapAuthentication" name="ldapAuthentication"@if(settings.ldap){ checked}/>
               LDAP
             </label>
@@ -101,7 +101,7 @@
           <hr>
           <label class="strong">Notification email</label>
           <fieldset>
-            <label>
+            <label class="checkbox">
               <input type="checkbox" id="notification" name="notification"@if(settings.notification){ checked}/>
               Send notifications
             </label>
diff --git a/src/main/twirl/admin/users/user.scala.html b/src/main/twirl/admin/users/user.scala.html
index 74979a317..7e97d0628 100644
--- a/src/main/twirl/admin/users/user.scala.html
+++ b/src/main/twirl/admin/users/user.scala.html
@@ -6,7 +6,7 @@
       <div class="row-fluid">
         <div class="span6">
           <fieldset>
-            <label for="userName" class="strong">Username</label>
+            <label for="userName" class="strong">Username:</label>
             <span id="error-userName" class="error"></span>
             <input type="text" name="userName" id="userName" value="@account.map(_.userName)"@if(account.isDefined){ readonly}/>
           </fieldset>
@@ -17,27 +17,28 @@
                 @if(account.isDefined){
                   (Input to change password)
                 }
+                :
               </label>
               <span id="error-password" class="error"></span>
               <input type="password" name="password" id="password" value="" autocomplete="off"/>
             </fieldset>
           }
           <fieldset>
-            <label for="mailAddress" class="strong">Mail Address</label>
+            <label for="mailAddress" class="strong">Mail Address:</label>
             <span id="error-mailAddress" class="error"></span>
             <input type="text" name="mailAddress" id="mailAddress" value="@account.map(_.mailAddress)"/>
           </fieldset>
           <fieldset>
-            <label class="strong">User Type</label>
-            <label for="userType_Normal">
+            <label class="strong">User Type:</label>
+            <label class="radio" for="userType_Normal">
               <input type="radio" name="isAdmin" id="userType_Normal" value="false"@if(account.isEmpty || !account.get.isAdmin){ checked}/> Normal
             </label>
-            <label for="userType_Admin">
+            <label class="radio" for="userType_Admin">
               <input type="radio" name="isAdmin" id="userType_Admin" value="true"@if(account.isDefined && account.get.isAdmin){ checked}/> Administrator
             </label>
           </fieldset>
           <fieldset>
-            <label class="strong">URL (Optional)</label>
+            <label class="strong">URL (Optional):</label>
             <span id="error-url" class="error"></span>
             <input type="text" name="url" id="url" style="width: 400px;" value="@account.map(_.url)"/>
           </fieldset>
diff --git a/src/main/twirl/header.scala.html b/src/main/twirl/header.scala.html
index cb2241e0e..38c8a513f 100644
--- a/src/main/twirl/header.scala.html
+++ b/src/main/twirl/header.scala.html
@@ -8,10 +8,14 @@
   </div>
 </div>
 <div class="head">
-  <a href="@url(repository.owner)">@repository.owner</a> / <a href="@url(repository)" class="strong">@repository.name</a>
   @if(repository.repository.isPrivate){
-    <i class="icon-lock"></i>
+      <i class="icon-lock"></i>
   }
+  @if(!repository.repository.isPrivate){
+      <i class="icon-eye-open"></i>
+  }
+  <a href="@url(repository.owner)">@repository.owner</a> / <a href="@url(repository)" class="strong">@repository.name</a>
+  
   @defining(repository.repository){ x =>
     @if(repository.repository.originRepositoryName.isDefined){
       <div class="forked">
diff --git a/src/main/twirl/index.scala.html b/src/main/twirl/index.scala.html
index adce6e707..99ccf2f41 100644
--- a/src/main/twirl/index.scala.html
+++ b/src/main/twirl/index.scala.html
@@ -18,7 +18,7 @@
         <tr>
           <th class="metal">
             <div class="pull-right">
-              <a href="@path/new" class="btn btn-success btn-mini">New repository</a>
+              <a href="@path/new" class="btn btn-success btn-small">New repository</a>
             </div>
             Your repositories (@userRepositories.size)
           </th>
@@ -30,7 +30,13 @@
         } else {
           @userRepositories.map { repository =>
             <tr>
-              <td>
+              <td class="repo-list-item">
+                @if(repository.repository.isPrivate){
+                  <i class="icon-lock"></i>
+                }
+                @if(!repository.repository.isPrivate){
+                  <i class="icon-eye-open"></i>
+                }
                 @if(repository.owner == loginAccount.get.userName){
                   <a href="@url(repository)"><span class="strong">@repository.name</span></a>
                 } else {
@@ -56,7 +62,13 @@
       } else {
         @recentRepositories.map { repository =>
           <tr>
-            <td>
+            <td class="repo-list-item">
+              @if(repository.repository.isPrivate){
+              <i class="icon-lock"></i>
+              }
+              @if(!repository.repository.isPrivate){
+              <i class="icon-eye-open"></i>
+              }
               <a href="@url(repository)">@repository.owner/<span class="strong">@repository.name</span></a>
             </td>
           </tr>
diff --git a/src/main/twirl/main.scala.html b/src/main/twirl/main.scala.html
index 592238a5a..c7d8e8861 100644
--- a/src/main/twirl/main.scala.html
+++ b/src/main/twirl/main.scala.html
@@ -46,12 +46,15 @@
                 <span class="header-version">@version.majorVersion.@version.minorVersion</span>
               }
             </a>
+            <div class="nav-collapse collapse pull-left header-menu">
+            @repository.map { repository =>
+              <input type="text" name="query" style="width: 300px; margin-bottom: 0px;" placeholder="Search this repository"/>
+              <input type="hidden" name="owner" value="@repository.owner"/>
+              <input type="hidden" name="repository" value="@repository.name"/>
+            }
+            </div>
             <div class="nav-collapse collapse pull-right header-menu">
-              @repository.map { repository =>
-                <input type="text" name="query" style="width: 300px; margin-bottom: 0px;" placeholder="Search this repository"/>
-                <input type="hidden" name="owner" value="@repository.owner"/>
-                <input type="hidden" name="repository" value="@repository.name"/>
-              }
+              
               @if(loginAccount.isDefined){
                 <a href="@url(loginAccount.get.userName)" class="username menu">@avatar(loginAccount.get.userName, 20) @loginAccount.get.userName</a>
                 <a href="@path/new" class="menu" data-toggle="tooltip" data-placement="bottom" title="Create a new repo"><i class="icon-plus"></i></a>
diff --git a/src/main/twirl/newrepo.scala.html b/src/main/twirl/newrepo.scala.html
index f8973bc11..5a0526a59 100644
--- a/src/main/twirl/newrepo.scala.html
+++ b/src/main/twirl/newrepo.scala.html
@@ -5,7 +5,7 @@
 <div style="width: 600px; margin: 10px auto;">
   <form id="form" method="post" action="@path/new" validate="true">
     <fieldset>
-      <label for="name" class="strong">Repository name</label>
+      <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>
@@ -19,34 +19,34 @@
         </ul>
         <input type="hidden" name="owner" id="owner" value="@loginAccount.get.userName"/>
       </div>
-      /
+      <span class="slash">/</span>
       <input type="text" name="name" id="name" />
       <span id="error-name" class="error"></span>
     </fieldset>
     <fieldset>
-      <label for="description" class="strong">Description (optional)</label>
+      <label for="description" class="strong">Description (optional):</label>
       <input type="text" name="description" id="description" style="width: 95%;"/>
     </fieldset>
     <fieldset class="margin">
-      <label>
+      <label class="radio">
         <input type="radio" name="isPrivate" value="false" checked>
-        <span class="strong">Public</span><br>
+        <span class="strong"><i class="icon-eye-open">&nbsp;</i>&nbsp;Public</span><br>
         <div>
           <span class="note">All users and guests can read this repository.</span>
         </div>
       </label>
     </fieldset>
     <fieldset>
-      <label>
+      <label class="radio">
         <input type="radio" name="isPrivate" value="true">
-        <span class="strong">Private</span><br>
+        <span class="strong"><i class="icon-lock">&nbsp;</i>&nbsp;Private</span><br>
         <div>
           <span class="note">Only collaborators can read this repository.</span>
         </div>
       </label>
     </fieldset>
     <fieldset class="margin">
-      <label for="createReadme">
+      <label for="createReadme" class="checkbox">
         <input type="checkbox" name="createReadme" id="createReadme"/>
         <span class="strong">Initialize this repository with a README</span>
         <div>
diff --git a/src/main/twirl/settings/options.scala.html b/src/main/twirl/settings/options.scala.html
index e0698bf4f..4973bffaa 100644
--- a/src/main/twirl/settings/options.scala.html
+++ b/src/main/twirl/settings/options.scala.html
@@ -10,11 +10,11 @@
         <div class="box-header">Settings</div>
         <div class="box-content">
           <fieldset>
-            <label for="description" class="strong">Description</label>
+            <label for="description" class="strong">Description:</label>
             <input type="text" name="description" id="description" style="width: 600px;" value="@repository.repository.description"/>
           </fieldset>
           <fieldset class="margin">
-            <label for="defaultBranch" class="strong">Default Branch</label>
+            <label for="defaultBranch" class="strong">Default Branch:</label>
             <select name="defaultBranch" id="defaultBranch">
               @repository.branchList.map { branch =>
                 <option value="@branch"@if(branch==repository.repository.defaultBranch){ selected}>@branch</option>
@@ -23,7 +23,7 @@
             <span class="error" id="error-defaultBranch"></span>
           </fieldset>
           <fieldset class="margin">
-            <label>
+            <label class="radio">
               <input type="radio" name="isPrivate" value="false"
                 @if(!repository.repository.isPrivate              ){ checked  }
                 @if(repository.repository.parentUserName.isDefined){ disabled }
@@ -35,7 +35,7 @@
             </label>
           </fieldset>
           <fieldset>
-            <label>
+            <label class="radio">
               <input type="radio" name="isPrivate" value="true"
                 @if(repository.repository.isPrivate               ){ checked  }
                 @if(repository.repository.parentUserName.isDefined){ disabled }
@@ -50,7 +50,7 @@
       </div>
       @*
       <div class="box">
-        <div class="box-header">Features</div>
+        <div class="box-header">Features:</div>
         <div class="box-content">
           <dl>
             <dt>
diff --git a/src/main/twirl/signinform.scala.html b/src/main/twirl/signinform.scala.html
index fc1ca44b2..747aa71dc 100644
--- a/src/main/twirl/signinform.scala.html
+++ b/src/main/twirl/signinform.scala.html
@@ -5,7 +5,7 @@
     <th class="metal">
       @if(systemSettings.allowAccountRegistration){
         <div class="pull-right">
-          <a href="@path/register" class="btn btn-mini">Create new account</a>
+          <a href="@path/register" class="btn btn-small">Create new account</a>
         </div>
       }
       Sign in
@@ -14,10 +14,10 @@
   <tr>
     <td>
       <form action="@path/signin" method="POST" validate="true">
-        <label for="userName">Username</label>
+        <label for="userName">Username:</label>
         <span id="error-userName" class="error"></span>
         <input type="text" name="userName" id="userName" style="width: 95%"/>
-        <label for="password">Password</label>
+        <label for="password">Password:</label>
         <span id="error-password" class="error"></span>
         <input type="password" name="password" id="password" style="width: 95%"/>
         <div>
diff --git a/src/main/twirl/wiki/history.scala.html b/src/main/twirl/wiki/history.scala.html
index 27a389403..9dc1be2d2 100644
--- a/src/main/twirl/wiki/history.scala.html
+++ b/src/main/twirl/wiki/history.scala.html
@@ -35,7 +35,7 @@
     @commits.map { commit =>
       <tr>
         <td width="0%"><input type="checkbox" name="commitId" value="@commit.id"></td>
-        <td>@avatar(commit.committer, 20)<a href="@url(commit.committer)">@commit.committer</a></td>
+        <td>@avatar(commit.committer, 20)&nbsp;<a href="@url(commit.committer)">@commit.committer</a></td>
         <td width="80%">
           <span class="muted">@datetime(commit.time):</span>
           @commit.shortMessage
diff --git a/src/main/webapp/assets/common/css/gitbucket.css b/src/main/webapp/assets/common/css/gitbucket.css
index 03e3e6a65..dface9e38 100644
--- a/src/main/webapp/assets/common/css/gitbucket.css
+++ b/src/main/webapp/assets/common/css/gitbucket.css
@@ -1,8 +1,11 @@
+@import url(http://fonts.googleapis.com/css?family=Rambla:400,700,400italic,700italic|Pathway+Gothic+One|Roboto:400,400italic,700italic,700);
+
 /****************************************************************************/
 /* Common */
 /****************************************************************************/
 body {
   color: #333;
+  font-family: 'Roboto', sans-serif;
 }
 
 /* ======================================================================== */
@@ -41,6 +44,8 @@ div.nav-collapse a.menu-last {
 .navbar .brand {
   padding-top: 6px;
   padding-bottom: 6px;
+  font-family: 'Pathway Gothic One', sans-serif;
+  font-size: 27px;
 }
 
 .navbar .brand img {
@@ -83,6 +88,14 @@ div.input-prepend span.add-on {
   border-radius: 0 4px 4px 0;
 }
 
+.head i {
+    margin-top: 6px;
+}
+
+.repo-list-item i {
+    margin-top: 2px;
+}
+
 /*
 div.input-prepend span.add-on a {
   color: #333;
@@ -215,7 +228,7 @@ div.box-header-small {
 div.box-content {
   background-color: white;
   border: 1px solid #d8d8d8;
-  padding: 4px;
+  padding: 12px;
 }
 
 th.box-header {
@@ -225,6 +238,7 @@ th.box-header {
   background-image: linear-gradient(#fafafa, #e0e0e0);
   background-repeat: repeat-x;
   margin: 0;
+  height: 25px;
   border-top-left-radius: 1px;
   border-top-right-radius: 1px;
   border: 1px solid #d8d8d8;
@@ -239,6 +253,7 @@ th.metal {
   background-image: linear-gradient(#fafafa, #e8e8e8);
   background-repeat: repeat-x;
   margin: 0;
+  padding-left: 10px;
   border-top-left-radius: 1px;
   border-top-right-radius: 1px;
 }
@@ -302,9 +317,16 @@ span.highlight {
   background-color: #ffff88;
 }
 
+/****************************************************************************/
+/* Create Repo */
+/****************************************************************************/
+.slash {
+    font-size: 25px;
+}
 /****************************************************************************/
 /* Sign-in form */
 /****************************************************************************/
+
 div.signin-form {
   width: 350px;
   margin: 30px auto;
@@ -376,6 +398,8 @@ div.activity-icon-small {
 
 div.activity-content {
   margin-left: 40px;
+  padding-top: 2px;
+  padding-bottom: 2px;
 }
 
 /****************************************************************************/
@@ -402,8 +426,8 @@ table.table-file-list td {
 }
 
 th, td, .table th, .table td {
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 div.commit-avatar-image {
@@ -462,7 +486,7 @@ span.issue-status {
   display: block;
   font-size: large;
   text-align: center;
-  padding: 8px;
+  padding: 16px;
 }
 
 table.table-issues {
@@ -484,8 +508,8 @@ ul.label-list {
 
 ul.label-list a {
   padding-left: 6px;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding-top: 7px;
+  padding-bottom: 7px;
   margin-bottom: 8px;
   color: #444;
 }
@@ -569,7 +593,7 @@ span.milestone-percentage {
 }
 
 div.issue-header {
-  padding-left: 8px;
+  padding-left: 12px;
   padding-right: 8px;
   padding-top: 12px;
   padding-bottom: 12px;
@@ -579,13 +603,13 @@ div.issue-info {
   border-top: 1px solid #e5e5e5;
   border-bottom: 1px solid #e5e5e5;
   background-color: #f5f5f5;
-  padding: 8px;
+  padding: 10px;
   margin-left: 0px;
   margin-right: 0px;
 }
 
 div.issue-content {
-  padding: 8px;
+  padding: 12px;
   background-color: #fbfbfb;
 }