playground
/
gogs
mirror of https://github.com/gogits/gogs.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

pull request page ui review, upgrade octicon icons

pull/500/merge
fuxiaohei 10 years ago
parent
b92cac7038
commit
60c65415dd
9 changed files with 343 additions and 228 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      public/ng/css/gogs.css
  2. 20
      public/ng/fonts/octicons.css
  3. BIN
      public/ng/fonts/octicons.eot
  4. BIN
      public/ng/fonts/octicons.ttf
  5. BIN
      public/ng/fonts/octicons.woff
  6. 1
      public/ng/less/gogs/dashboard.less
  7. 23
      public/ng/less/gogs/issue.less
  8. 378
      public/ng/less/gogs/organization.less
  9. 135
      templates/repo/pulls.tmpl

14
public/ng/css/gogs.css
Unescape View File

@ -728,7 +728,6 @@ ol.linenums {
} }
#dashboard { #dashboard {
padding: 24px 0; padding: 24px 0;
margin-bottom: 60px;
} }
#dashboard-sidebar .panel-header h4 { #dashboard-sidebar .panel-header h4 {
margin: 0; margin: 0;
@ -1608,12 +1607,16 @@ The register and sign-in page style
background-color: #FFF; background-color: #FFF;
border-color: #DDD; border-color: #DDD;
} }
.pr-title {
padding: 4px 0;
}
.pr-title .pr-num { .pr-title .pr-num {
font-weight: normal; font-weight: normal;
color: #888; color: #888;
} }
.pr-meta { .pr-meta {
color: #888; color: #888;
padding: 4px 0 8px 0;
} }
.pr-meta .pr-author { .pr-meta .pr-author {
margin: 0 8px; margin: 0 8px;
@ -1687,7 +1690,7 @@ The register and sign-in page style
.issue-line, .issue-line,
.issue-merge, .issue-merge,
.issue-add-comment { .issue-add-comment {
margin-bottom: 16px; margin-bottom: 24px;
} }
.issue-comment .author-avatar img { .issue-comment .author-avatar img {
margin-right: 12px; margin-right: 12px;
@ -1791,6 +1794,7 @@ textarea#issue-add-content {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
height: 120px; height: 120px;
resize: vertical;
} }
.org-header-alert .alert { .org-header-alert .alert {
margin-top: 10px; margin-top: 10px;
@ -1825,7 +1829,11 @@ textarea#issue-add-content {
color: #d9453d; color: #d9453d;
} }
#org-header > div > .menu-line > li.right > a .octicon { #org-header > div > .menu-line > li.right > a .octicon {
margin-right: 6px; margin-right: 4px;
}
#org-header > div > .menu-line > li.right > a .label {
margin-left: 4px;
font-size: .6em;
} }
#org-header > div > .menu-line > li.right .current { #org-header > div > .menu-line > li.right .current {
border-bottom: 2px solid #D26911; border-bottom: 2px solid #D26911;

20
public/ng/fonts/octicons.css vendored
Unescape View File

@ -14,22 +14,20 @@
.mega-octicon is optimized for 32px but can be used larger. .mega-octicon is optimized for 32px but can be used larger.
*/ */
.octicon { .octicon, .mega-octicon {
font: normal normal 16px octicons; font: normal normal normal 16px/1 octicons;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mega-octicon {
font: normal normal 32px octicons;
line-height: 1;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
.mega-octicon { font-size: 32px; }
.octicon-alert:before { content: '\f02d'} /*  */ .octicon-alert:before { content: '\f02d'} /*  */
.octicon-alignment-align:before { content: '\f08a'} /* ď‚Š */ .octicon-alignment-align:before { content: '\f08a'} /* ď‚Š */

BIN
public/ng/fonts/octicons.eot
View File

Binary file not shown.

BIN
public/ng/fonts/octicons.ttf
View File

Binary file not shown.

BIN
public/ng/fonts/octicons.woff
View File

Binary file not shown.

1
public/ng/less/gogs/dashboard.less
Unescape View File

@ -43,7 +43,6 @@
} }
#dashboard { #dashboard {
padding: 24px 0; padding: 24px 0;
margin-bottom: 60px;
} }
// dashboard sidebar contains contributed repositories panel, // dashboard sidebar contains contributed repositories panel,
// and my repositories panel // and my repositories panel

23
public/ng/less/gogs/issue.less
Unescape View File

@ -1,19 +1,15 @@
@import "../ui/var"; @import "../ui/var";
.repo-issue-wrapper { .repo-issue-wrapper {
padding: 18px 0; padding: 18px 0;
} }
.pr-main { .pr-main {
padding-right: 40px; padding-right: 40px;
box-sizing: border-box; box-sizing: border-box;
} }
.pr-sidebar { .pr-sidebar {
border-left: 1px solid #DDD; border-left: 1px solid #DDD;
box-sizing: border-box; box-sizing: border-box;
} }
#pr-sidebar-nav { #pr-sidebar-nav {
margin-top: 6px; margin-top: 6px;
li { li {
@ -39,16 +35,16 @@
} }
} }
} }
.pr-title { .pr-title {
.pr-num { .pr-num {
font-weight: normal; font-weight: normal;
color: #888; color: #888;
} }
padding: 4px 0;
} }
.pr-meta { .pr-meta {
color: #888; color: #888;
padding: 4px 0 8px 0;
.pr-author { .pr-author {
margin: 0 8px; margin: 0 8px;
color: #444; color: #444;
@ -62,7 +58,6 @@
padding: 4px 6px; padding: 4px 6px;
} }
} }
.pr-nav { .pr-nav {
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
margin-top: 16px; margin-top: 16px;
@ -89,7 +84,6 @@
} }
} }
} }
.diff-bar { .diff-bar {
.diff-add { .diff-add {
color: @btnGreenColor; color: @btnGreenColor;
@ -114,26 +108,22 @@
border-bottom-left-radius: .2em; border-bottom-left-radius: .2em;
} }
} }
#pr-commit, #pr-commit,
#pr-file-diff, #pr-file-diff,
#issue-add-comment-preview { #issue-add-comment-preview {
display: none; display: none;
} }
#pr-conversation-list { #pr-conversation-list {
padding-right: 30px; padding-right: 30px;
box-sizing: border-box; box-sizing: border-box;
} }
.issue-comment, .issue-comment,
.issue-commit, .issue-commit,
.issue-line, .issue-line,
.issue-merge, .issue-merge,
.issue-add-comment { .issue-add-comment {
margin-bottom: 16px; margin-bottom: 24px;
} }
.issue-comment { .issue-comment {
.author-avatar { .author-avatar {
img { img {
@ -165,7 +155,6 @@
} }
} }
} }
.issue-commit { .issue-commit {
line-height: 32px; line-height: 32px;
i, .author-avatar img { i, .author-avatar img {
@ -181,7 +170,6 @@
line-height: 24px; line-height: 24px;
} }
} }
.issue-merge { .issue-merge {
.ico { .ico {
width: 40px; width: 40px;
@ -202,7 +190,6 @@
font-size: 13px; font-size: 13px;
} }
} }
.issue-merge-ok { .issue-merge-ok {
.ico { .ico {
background-color: #65AD4E; background-color: #65AD4E;
@ -217,12 +204,10 @@
color: darken(#65AD4E, 10%); color: darken(#65AD4E, 10%);
} }
} }
.issue-line { .issue-line {
height: 4px; height: 4px;
background-color: #E6E6E6; background-color: #E6E6E6;
} }
.issue-add-comment { .issue-add-comment {
.panel { .panel {
margin-left: 60px; margin-left: 60px;
@ -254,9 +239,9 @@
} }
} }
} }
textarea#issue-add-content { textarea#issue-add-content {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
height: 120px; height: 120px;
resize: vertical;
} }

378
public/ng/less/gogs/organization.less
Unescape View File

@ -1,229 +1,233 @@
@import "../ui/var"; @import "../ui/var";
.org-header-alert .alert { .org-header-alert .alert {
margin-top: 10px; margin-top: 10px;
} }
.org-header { .org-header {
padding: 16px 0; padding: 16px 0;
background-color: #FFF; background-color: #FFF;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
img { img {
padding-right: 10px; padding-right: 10px;
} }
} }
#org-home-header { #org-home-header {
min-height: 100px; min-height: 100px;
} }
#org-header { #org-header {
height: 48px; height: 48px;
.org-name { .org-name {
padding-left: 10px; padding-left: 10px;
font-size: 1.4em; font-size: 1.4em;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
margin-bottom: 0; margin-bottom: 0;
} }
> div { > div {
> .menu-line { > .menu-line {
> li { > li {
&.right { &.right {
> a { > a {
font-size: 1.2em; font-size: 1.2em;
color: @dashboardHeaderLinkColor; color: @dashboardHeaderLinkColor;
&:hover { &:hover {
background-color: transparent; background-color: transparent;
color: @dashboardHeaderLinkHoverColor; color: @dashboardHeaderLinkHoverColor;
} }
.octicon { .octicon {
margin-right: 6px; margin-right: 4px;
} }
} .label{
.current { margin-left: 4px;
border-bottom: 2px solid #D26911; font-size: .6em;
} }
} }
} .current {
} border-bottom: 2px solid #D26911;
} }
}
}
}
}
} }
#org-home-header-info { #org-home-header-info {
padding-top: 10px; padding-top: 10px;
h2 { h2 {
font-size: 30px; font-size: 30px;
} }
ul { ul {
list-style: none; list-style: none;
li { li {
float: left; float: left;
padding-right: 5px; padding-right: 5px;
} }
} }
} }
#org-home-repo-list { #org-home-repo-list {
padding: 10px 0; padding: 10px 0;
} }
#org-repo-list { #org-repo-list {
padding: 10px 0; padding: 10px 0;
.org-repo-item { .org-repo-item {
border-top: 1px solid #eee; border-top: 1px solid #eee;
padding: 30px 20px; padding: 30px 20px;
.org-repo-status { .org-repo-status {
list-style: none; list-style: none;
color: #888; color: #888;
li { li {
float: left; float: left;
margin-right: 6px; margin-right: 6px;
} }
} }
h2 { h2 {
margin-bottom: 5px; margin-bottom: 5px;
} }
.org-repo-description { .org-repo-description {
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} }
.org-repo-updated { .org-repo-updated {
font-size: 12px; font-size: 12px;
display: block; display: block;
margin: 5px 0 0; margin: 5px 0 0;
color: #808080; color: #808080;
} }
} }
} }
.org-sidebar { .org-sidebar {
margin: -80px 0 0 20px; margin: -80px 0 0 20px;
.panel-footer { .panel-footer {
padding: .8em 1.2em; padding: .8em 1.2em;
} }
.member-avatar-group { .member-avatar-group {
padding: 15px; padding: 15px;
img { img {
width: 59px; width: 59px;
height: 59px; height: 59px;
border-radius: 3px; border-radius: 3px;
} }
} }
} }
#org-home-team-list { #org-home-team-list {
padding: 0 15px; padding: 0 15px;
ul { ul {
list-style: none; list-style: none;
padding-top: 10px; padding-top: 10px;
li { li {
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
} }
} }
} }
.team-name { .team-name {
display: block; display: block;
font-size: 14px; font-size: 14px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.team-meta { .team-meta {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
color: #777; color: #777;
} }
.org-toolbar { .org-toolbar {
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
#org-member-list { #org-member-list {
.org-member-item { .org-member-item {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
padding: 15px 20px; padding: 15px 20px;
.member-name { .member-name {
padding-left: 15px; padding-left: 15px;
} }
ul { ul {
list-style: none; list-style: none;
li { li {
text-align: center; text-align: center;
display: inline-block; display: inline-block;
} }
} }
} }
} }
.invite-box { .invite-box {
padding: 50px 0; padding: 50px 0;
min-height: 130px; min-height: 130px;
margin: 0 auto; margin: 0 auto;
width: 50%; width: 50%;
input { input {
width: 300px; width: 300px;
} }
} }
#org-member-list-block { #org-member-list-block {
padding-top: 2px; padding-top: 2px;
} }
.org-team-list { .org-team-list {
.org-team-list-item { .org-team-list-item {
float: left; float: left;
padding: 15px; padding: 15px;
width: 555px; width: 555px;
.member-avatar-group { .member-avatar-group {
padding: 5px 15px; padding: 5px 15px;
img { img {
width: 38px; width: 38px;
height: 38px; height: 38px;
border-radius: 3px; border-radius: 3px;
} }
} }
} }
} }
#team-create-form { #team-create-form {
.note { .note {
margin-left: 153px; margin-left: 153px;
} }
} }
#org-team-card { #org-team-card {
.desc { .desc {
font-size: 14px; font-size: 14px;
padding: 10px 20px; padding: 10px 20px;
} }
.team-stats { .team-stats {
padding: 0 20px 10px 20px; padding: 0 20px 10px 20px;
text-transform: uppercase; text-transform: uppercase;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
} }
.panel-footer { .panel-footer {
padding: 10px 20px; padding: 10px 20px;
} }
} }
#team-repositories-list, #team-repositories-list,
#team-members-list { #team-members-list {
.panel-body .search { .panel-body .search {
padding: 4px 0 10px 10px; padding: 4px 0 10px 10px;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
} }
li { li {
&.collab { &.collab {
padding-top: 10px !important; padding-top: 10px !important;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
} }
&:last-child { &:last-child {
border-bottom: 0 !important; border-bottom: 0 !important;
} }
} }
} }
#team-repositories-list { #team-repositories-list {
li { li {
a .octicon { a .octicon {
color: #888; color: #888;
} }
.member { .member {
color: @linkColor; color: @linkColor;
font-size: 14px; font-size: 14px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
} }
} }

135
templates/repo/pulls.tmpl
Unescape View File

@ -1,9 +1,130 @@
{{template "base/head" .}} {{template "ng/base/head" .}}
{{template "base/navbar" .}} {{template "ng/base/header" .}}
{{template "repo/nav" .}} <div id="repo-wrapper">
{{template "repo/toolbar" .}} {{template "repo/header" .}}
<div id="body" class="container"> <div class="clear container repo-issue-wrapper repo-pr">
<div id="source"> <div class="pr-main grid-11-12 left">
<div class="pr-title clear">
<h2 class="pr-title grid-5-6 left">Fix: Repo Name can not be converted to lower in some cases <span class="pr-num">#256</span></h2>
<div class="pr-title-btn grid-1-6 right text-right">
<button class="btn btn-gray btn-radius">Edit</button>&nbsp;&nbsp;
<a href="#"><button class="btn btn-green btn-radius">New Issue</button></a>
</div>
</div>
<div class="pr-meta">
<button class="btn btn-small btn-green btn-radius">
<i class="octicon octicon-git-pull-request"></i> Open
</button>
<span class="msg">
<a href="#" class="text-bold pr-author">eryx</a>wants to merge 2 commits into <span class="pr-branch label label-gray radius">gogits:master</span> from <span class="pr-branch label label-gray radius">unknown repository</span>
</span>
</div>
<div class="pr-nav clear">
<ul class="menu menu-line left" id="pr-nav">
<li class="current js-tab-nav js-tab-nav-show" data-tab-target="#pr-conversation"><a href="#"><i class="octicon octicon-comment"></i>conversations
<span class="label label-gray label-radius">5</span>
</a></li>
<li class="js-tab-nav" data-tab-target="#pr-commit"><a href="#"><i class="octicon octicon-git-commit"></i>commits
<span class="label label-gray label-radius">2</span>
</a></li>
<li class="js-tab-nav" data-tab-target="#pr-file-diff"><a href="#"><i class="octicon octicon-file-code"></i>files
<span class="label label-gray label-radius">3</span>
</a></li>
</ul>
<div class="diff-bar right">
<span class="diff-add">+12</span>
<span class="inline-block diff-status">
<span class="block diff-status-inner"></span>
</span>
<span class="diff-delete">-7</span>
</div>
</div>
<div id="pr-conversation" class="js-tab-show clear">
<div id="pr-conversation-list" class="left grid-5-6">
<div class="issue-comment clear">
<a class="author-avatar" href="#"><img class="avatar-40 radius" src="https://avatars2.githubusercontent.com/u/275347?v=1&s=96" alt=""/></a>
<div class="panel panel-radius">
<p class="panel-header clear"><a class="author-name" href="#">eryx</a>
<span class="date">7 days ago</span>
<span class="action right">
<span class="label label-black label-radius">owner</span>
<a href="#"><i class="octicon octicon-pencil"></i></a>
<a href="#"><i class="octicon octicon-x"></i></a>
</span>
</p>
<div class="panel-content content markdown">just like github.com, the RepoName can not be converted to lower in the case of backend data storage, or frontend clone link display.</div>
</div>
</div>
<div class="issue-commit clear">
<i class="mega-octicon octicon-git-commit left"></i>
<a class="author-avatar left" href="#"><img class="avatar-24 radius" src="https://avatars2.githubusercontent.com/u/275347?v=1&s=96" alt=""/></a>
<a class="sha right" href="#">8e259ba</a>
<span class="message">Fix: Repo Name can not be converted to lower in the case of backend data storage, or frontend clone link display. or frontend clone link display or frontend clone link display.</span>
</div>
<div class="issue-line"></div>
<div class="issue-merge issue-merge-ok clear">
<span class="inline-block radius ico"><i class="mega-octicon octicon-git-pull-request"></i></span>
<div class="panel panel-radius">
<p class="panel-header clear">
<i class="octicon octicon-check"></i><strong>All is well !</strong>
</p>
<div class="panel-content content clear">
<div class="message left"><strong>This pull request can be automatically merged.</strong><br/>
You can also merge branches on the <a href="#">command line</a>.</div>
<button class="btn btn-green right btn-radius">
<i class="octicon octicon-git-merge"></i>
Merge Pull Request
</button>
</div>
</div>
</div>
<div class="issue-add-comment clear">
<a class="author-avatar" href="#"><img class="avatar-40 radius" src="https://avatars2.githubusercontent.com/u/275347?v=1&s=96" alt=""/></a>
<div class="panel panel-radius">
<div class="panel-header">
<ul class="menu menu-line add-nav">
<li class="js-tab-nav js-tab-nav-show" data-tab-target="#issue-add-comment-form"><a href="#">Write</a></li>
<li class="js-tab-nav" data-tab-target="#issue-add-comment-preview"><a href="#">Preview</a></li>
</ul>
</div>
<div class="panel-content content">
<form id="issue-add-comment-form" action="#" method="post">
<textarea class="ipt ipt-radius" name="content" id="issue-add-content"></textarea>
<p class="submit text-right">
<button class="btn btn-gray btn-radius text-bold" name="submit" value="close">Close pull request</button>&nbsp;&nbsp;
<button class="btn btn-green btn-radius text-bold" name="submit" value="comment">Comment</button>
</p>
</form>
<div id="issue-add-comment-preview">
preview
</div>
</div>
</div>
</div>
</div>
<div id="pr-conversation-sidebar" class="left grid-1-6">
1-4
</div>
</div>
<div id="pr-commit">commit</div>
<div id="pr-file-diff">file diff</div>
</div>
<div class="pr-sidebar grid-1-12 right">
<ul class="menu menu-vertical" id="pr-sidebar-nav">
<li><a href="#" class="btn-right-radius"><i class="octicon octicon-code"></i>
<span class="right">code</span></a></li>
<li class="border-bottom"></li>
<li><a href="#" class="btn-right-radius"><i class="octicon octicon-issue-opened"></i>
<span class="num right label label-blue label-radius">12</span>
</a></li>
<li class="current"><a href="#" class="btn-right-radius"><i class="octicon octicon-git-pull-request"></i>
<span class="num right label label-black label-radius">12</span>
</a></li>
<li class="border-bottom"></li>
<li><a href="#" class="btn-right-radius"><i class="octicon octicon-tools"></i></a></li>
</ul>
</div>
</div> </div>
</div> </div>
{{template "base/footer" .}} </div>
{{template "ng/base/footer" .}}
Write Preview
Loading…
Cancel
Save