From 904f799c1a871d1c730b2834206da7f57c46efc5 Mon Sep 17 00:00:00 2001
From: fuxiaohei <fuxiaohei@vip.qq.com>
Date: Tue, 23 Sep 2014 21:43:45 +0800
Subject: [PATCH] improve ui details
---
public/ng/css/gogs.css | 17 +-
public/ng/less/gogs/base.less | 5 +
public/ng/less/gogs/dashboard.less | 57 +--
public/ng/less/gogs/repository.less | 759 ++++++++++++++--------------
4 files changed, 419 insertions(+), 419 deletions(-)
diff --git a/public/ng/css/gogs.css b/public/ng/css/gogs.css
index 5429d0126..1d0c468ca 100644
--- a/public/ng/css/gogs.css
+++ b/public/ng/css/gogs.css
@@ -45,6 +45,9 @@ img.avatar-100 {
height: 100px;
vertical-align: middle;
}
+.drop-down .panel-header {
+ font-size: 14px;
+}
#wrapper {
padding: 0;
margin: 0 0 -55px 0;
@@ -703,11 +706,12 @@ ol.linenums {
height: 69px;
}
#dashboard-header > .menu-line > li {
- padding: 12px 0;
+ padding: 12px 6px;
}
#dashboard-header > .menu-line > li.right > a {
font-size: 1.2em;
color: #444444;
+ padding: .4em .8em;
}
#dashboard-header > .menu-line > li.right > a:hover {
background-color: transparent;
@@ -724,6 +728,7 @@ ol.linenums {
}
#dashboard {
padding: 24px 0;
+ margin-bottom: 60px;
}
#dashboard-sidebar .panel-header h4 {
margin: 0;
@@ -737,7 +742,7 @@ ol.linenums {
border-top-left-radius: .3em;
border-top-right-radius: .3em;
width: 100%;
- height: 35px;
+ height: 32px;
}
#dashboard-sidebar-menu > li {
border: 1px solid #d6d6d6;
@@ -746,8 +751,8 @@ ol.linenums {
border-bottom: none;
}
#dashboard-sidebar-menu > li > a {
- padding-top: .4em;
- padding-bottom: .4em;
+ padding-top: .3em;
+ padding-bottom: .3em;
}
#dashboard-sidebar-menu > li.first {
border-top-left-radius: .3em;
@@ -821,6 +826,7 @@ ol.linenums {
}
#dashboard-my-repo .repo-count {
margin-left: 4px;
+ font-size: .8em;
}
#dashboard-my-org,
#dashboard-my-mirror {
@@ -828,7 +834,7 @@ ol.linenums {
}
#dashboard-new-repo {
width: 50px;
- height: 35px;
+ height: 33px;
padding-top: 6px;
margin-right: 1px;
border-top-left-radius: .3em;
@@ -994,7 +1000,6 @@ The register and sign-in page style
}
#repo-header-meta a > .btn {
line-height: 16px;
- font-size: 1.05em;
margin-left: 16px;
}
#repo-header-meta a > .btn i {
diff --git a/public/ng/less/gogs/base.less b/public/ng/less/gogs/base.less
index 241846dbb..47d8b1b65 100644
--- a/public/ng/less/gogs/base.less
+++ b/public/ng/less/gogs/base.less
@@ -55,6 +55,11 @@ img.avatar-100{
height: 100px;
vertical-align: middle;
}
+.drop-down{
+ .panel-header{
+ font-size: 14px;
+ }
+}
#wrapper {
padding: 0;
margin: 0 0 -55px 0;
diff --git a/public/ng/less/gogs/dashboard.less b/public/ng/less/gogs/dashboard.less
index 60aa80726..1609b9d1c 100644
--- a/public/ng/less/gogs/dashboard.less
+++ b/public/ng/less/gogs/dashboard.less
@@ -14,12 +14,13 @@
height: 69px;
> .menu-line {
> li {
- padding: 12px 0;
+ padding: 12px 6px;
}
> li.right {
> a {
font-size: 1.2em;
color: @dashboardHeaderLinkColor;
+ padding: .4em .8em;
&:hover {
background-color: transparent;
color: @dashboardHeaderLinkHoverColor;
@@ -34,18 +35,16 @@
}
}
}
-
// dashboard context switch selection
#dashboard-selection-menu {
a img {
margin: -4px 10px 0 0;
}
}
-
#dashboard {
padding: 24px 0;
+ margin-bottom: 60px;
}
-
// dashboard sidebar contains contributed repositories panel,
// and my repositories panel
#dashboard-sidebar {
@@ -58,7 +57,6 @@
border-bottom-right-radius: .3em;
}
}
-
#dashboard-sidebar-menu {
border-top-left-radius: .3em;
border-top-right-radius: .3em;
@@ -68,8 +66,8 @@
margin-right: -1px;
border-bottom: none;
> a {
- padding-top: .4em;
- padding-bottom: .4em;
+ padding-top: .3em;
+ padding-bottom: .3em;
}
}
> li.first {
@@ -83,7 +81,7 @@
float: right;
}
width: 100%;
- height: 35px;
+ height: 32px;
> li.js-tab-nav-show {
background-color: #EEEEEE;
}
@@ -94,7 +92,6 @@
}
}
}
-
#dashboard-my-mirror,
#dashboard-my-org,
#dashboard-my-repo {
@@ -130,7 +127,6 @@
border-top: 1px solid #d6d6d6;
}
}
-
#dashboard-my-repo {
.panel-header {
.octicon {
@@ -140,18 +136,17 @@
}
.repo-count {
margin-left: 4px;
+ font-size: .8em;
}
}
-
#dashboard-my-org,
#dashboard-my-mirror {
display: none;
}
-
// the button of new repository in my repositories panel
#dashboard-new-repo {
width: 50px;
- height: 35px;
+ height: 33px;
padding-top: 6px;
margin-right: 1px;
.octicon {
@@ -160,7 +155,6 @@
border-top-left-radius: .3em;
border-top-right-radius: .3em;
}
-
// the drop-down menu of #dashboard-new-repo
#dashboard-new-repo-menu {
top: 35px;
@@ -172,28 +166,26 @@
font-size: 1.1em;
}
}
-
#dashboard-selection-menu {
- width: auto;
- max-width: 300px;
- > .drop-down {
- top: 56px;
+ width: auto;
+ max-width: 300px;
+ > .drop-down {
+ top: 56px;
+ }
+ li {
+ white-space: nowrap;
+ &.checked {
+ .octicon {
+ opacity: 1;
+ }
}
- li {
- white-space: nowrap;
- &.checked {
- .octicon {
- opacity: 1;
- }
- }
- a {
- text-overflow: ellipsis;
- -o-text-overflow: ellipsis;
- overflow: hidden;
- }
+ a {
+ text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ overflow: hidden;
}
+ }
}
-
// the drop-down menu of #dashboard-selection-menu
#dashboard-switch-menu {
> li {
@@ -226,7 +218,6 @@
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
-
#dashboard-news {
.news {
margin-right: 2.4em;
diff --git a/public/ng/less/gogs/repository.less b/public/ng/less/gogs/repository.less
index c86cb7f07..0753d11fb 100644
--- a/public/ng/less/gogs/repository.less
+++ b/public/ng/less/gogs/repository.less
@@ -6,460 +6,459 @@
/* repository main */
#repo-wrapper {
- padding-bottom: 100px;
+ padding-bottom: 100px;
}
#repo-header {
- height: 69px;
- border-bottom: 1px solid@repoHeaderBorderColor;
+ height: 69px;
+ border-bottom: 1px solid@repoHeaderBorderColor;
-background-color: @repoHeaderBgColor;
+ background-color: @repoHeaderBgColor;
}
#repo-header-name {
- line-height: 66px;
- color: @repoHeaderNameColor;
- font-size: 1.6em;
- font-weight: normal;
- margin-bottom: 0;
- i {
- margin-right: 12px;
- vertical-align: middle;
- }
- .divider {
- margin: 0 4px;
- }
+ line-height: 66px;
+ color: @repoHeaderNameColor;
+ font-size: 1.6em;
+ font-weight: normal;
+ margin-bottom: 0;
+ i {
+ margin-right: 12px;
+ vertical-align: middle;
+ }
+ .divider {
+ margin: 0 4px;
+ }
}
#repo-header-meta {
- line-height: 66px;
- li {
- > a {
- padding: 0;
- &:hover {
- background-color: transparent;
- }
- }
- }
- a {
- &>.btn {
- line-height: 16px;
- font-size: 1.05em;
- margin-left: 16px;
- i {
- margin-right: 6px;
- }
- .num {
- margin-left: 6px;
- }
- }
- }
+ line-height: 66px;
+ li {
+ > a {
+ padding: 0;
+ &:hover {
+ background-color: transparent;
+ }
+ }
+ }
+ a {
+ & > .btn {
+ line-height: 16px;
+ margin-left: 16px;
+ i {
+ margin-right: 6px;
+ }
+ .num {
+ margin-left: 6px;
+ }
+ }
+ }
}
#repo-header-download-btn {
- > .btn > i {
- margin-right: 0 !important;
- }
- &:hover {
- &:after, .btn {
- background-color: @btnHoverBlackColor;
- color: #FFF;
- }
- }
- &:after {
- background-color: @btnBlackColor;
- padding: 9px 16px 8px 0;
- margin-left: -8px !important;
- color: #FFF;
- border-top: 1px solid@btnBlackColor;
- border-bottom: 1px solid@btnBlackColor;
- border-top-right-radius: .25em;
- border-bottom-right-radius: .25em;
- }
+ > .btn > i {
+ margin-right: 0 !important;
+ }
+ &:hover {
+ &:after, .btn {
+ background-color: @btnHoverBlackColor;
+ color: #FFF;
+ }
+ }
+ &:after {
+ background-color: @btnBlackColor;
+ padding: 9px 16px 8px 0;
+ margin-left: -8px !important;
+ color: #FFF;
+ border-top: 1px solid@btnBlackColor;
+ border-bottom: 1px solid@btnBlackColor;
+ border-top-right-radius: .25em;
+ border-bottom-right-radius: .25em;
+ }
}
#repo-header-download-drop {
- line-height: 24px;
- width: 440px;
- top: 50px;
- left: -370px;
- padding: 20px;
- box-sizing: border-box;
- z-index: 1;
- .btn > i {
- margin-right: 6px;
- }
- button,
- input {
- font-size: 11px;
- }
+ line-height: 24px;
+ width: 440px;
+ top: 50px;
+ left: -370px;
+ padding: 20px;
+ box-sizing: border-box;
+ z-index: 1;
+ .btn > i {
+ margin-right: 6px;
+ }
+ button,
+ input {
+ font-size: 11px;
+ }
}
#repo-content {
- padding: 18px 0;
+ padding: 18px 0;
}
#repo-clone-url {
- border-right: none;
- width: 190px;
- border-left: none;
+ border-right: none;
+ width: 190px;
+ border-left: none;
}
#repo-clone-help {
- clear: both;
- line-height: 48px;
+ clear: both;
+ line-height: 48px;
}
#repo-clone-zip {
- line-height: 48px;
- a {
- cursor: pointer;
- color: white;
- overflow: visible;
- padding: .6em 1.2em;
- }
- .btn {
- margin: 0 6px;
- }
+ line-height: 48px;
+ a {
+ cursor: pointer;
+ color: white;
+ overflow: visible;
+ padding: .6em 1.2em;
+ }
+ .btn {
+ margin: 0 6px;
+ }
}
#repo-desc {
- font-size: 1.2em;
+ font-size: 1.2em;
}
#repo-sidebar-nav {
- .label {
- font-size: 12px;
- line-height: 1.4em;
- margin-top: 2px;
- }
- i {
- margin-right: 6px;
- }
+ .label {
+ font-size: 12px;
+ line-height: 1.4em;
+ margin-top: 2px;
+ }
+ i {
+ margin-right: 6px;
+ }
}
#repo-file-nav {
- padding: .6em 0 1em 0;
- > li > a {
- padding-left: 0;
- &:hover {
- background-color: transparent;
- }
- }
- li.repo-jump > a {
- padding-right: 0;
- .btn {
- margin-left: -1px;
- }
- }
+ padding: .6em 0 1em 0;
+ > li > a {
+ padding-left: 0;
+ &:hover {
+ background-color: transparent;
+ }
+ }
+ li.repo-jump > a {
+ padding-right: 0;
+ .btn {
+ margin-left: -1px;
+ }
+ }
}
#repo-branch-switch {
- > a {
- .btn {
- padding-right: 30px;
- }
- &:after {
- position: absolute;
- top: 12px;
- right: 30px;
- margin-left: 0;
- color: @baseFontColor;
+ > a {
+ .btn {
+ padding-right: 30px;
+ }
+ &:after {
+ position: absolute;
+ top: 12px;
+ right: 30px;
+ margin-left: 0;
+ color: @baseFontColor;
- }
- }
- > .drop-down {
- top: 40px;
- left: 0;
- }
+ }
+ }
+ > .drop-down {
+ top: 40px;
+ left: 0;
+ }
}
#repo-branch-filter-ipt {
- width: 100%;
- border-left: none;
- border-right: none;
- box-sizing: border-box;
+ width: 100%;
+ border-left: none;
+ border-right: none;
+ box-sizing: border-box;
}
#repo-branch-tag {
- .tab-nav {
- border-bottom: 1px solid #EAEAEA;
- a {
- padding: .3em .8em;
- }
- .js-tab-nav-show {
- background-color: #EEE;
- font-weight: bold;
- }
- }
+ .tab-nav {
+ border-bottom: 1px solid #EAEAEA;
+ a {
+ padding: .3em .8em;
+ }
+ .js-tab-nav-show {
+ background-color: #EEE;
+ font-weight: bold;
+ }
+ }
}
#repo-branch-list,
#repo-tag-list {
- li {
- i {
- margin-right: 12px;
- opacity: 0;
- }
- }
- li.checked {
- i {
- opacity: 1;
- }
- }
+ li {
+ i {
+ margin-right: 12px;
+ opacity: 0;
+ }
+ }
+ li.checked {
+ i {
+ opacity: 1;
+ }
+ }
}
#repo-tag-list {
- display: none;
+ display: none;
}
#repo-bread {
- .bread {
- padding-right: 0;
- font-size: 16px;
- font-weight: bold;
- }
+ .bread {
+ padding-right: 0;
+ font-size: 16px;
+ font-weight: bold;
+ }
}
#repo-main {
- padding-right: 40px;
- box-sizing: border-box;
+ padding-right: 40px;
+ box-sizing: border-box;
}
#repo-files-table {
- margin-bottom: 20px;
- th, td {
- text-align: left;
- line-height: 32px;
- }
- td.icon {
- width: 16px;
- padding-right: .1em;
- padding-left: 1em;
- }
- td.name {
- max-width: 120px;
- .text-truncate {
- max-width: 100%;
- }
- }
- td.age {
- max-width: 120px;
- text-align: right;
- }
- td.msg {
- max-width: 440px;
- .text-truncate {
- max-width: 100%;
- }
- }
- td.age,
- td.size,
- td.msg a {
- color: #888;
- }
- td.msg a:hover {
- color: #428BCA;
- text-decoration: underline;
- }
- tbody {
- background-color: #FFF;
- tr:hover {
- background-color: #ffffEE;
- }
- }
- thead {
- background-color: #F0F0F0;
- .author {
- a {
- margin: 0 .4em;
- }
- }
- .last-commit {
- strong {
- color: #444;
- }
- .text-truncate {
- margin-left: .4em;
- }
- }
- .last-commit .text-truncate,
- .age {
- font-weight: normal;
- color: #888;
- }
- }
+ margin-bottom: 20px;
+ th, td {
+ text-align: left;
+ line-height: 32px;
+ }
+ td.icon {
+ width: 16px;
+ padding-right: .1em;
+ padding-left: 1em;
+ }
+ td.name {
+ max-width: 120px;
+ .text-truncate {
+ max-width: 100%;
+ }
+ }
+ td.age {
+ max-width: 120px;
+ text-align: right;
+ }
+ td.msg {
+ max-width: 440px;
+ .text-truncate {
+ max-width: 100%;
+ }
+ }
+ td.age,
+ td.size,
+ td.msg a {
+ color: #888;
+ }
+ td.msg a:hover {
+ color: #428BCA;
+ text-decoration: underline;
+ }
+ tbody {
+ background-color: #FFF;
+ tr:hover {
+ background-color: #ffffEE;
+ }
+ }
+ thead {
+ background-color: #F0F0F0;
+ .author {
+ a {
+ margin: 0 .4em;
+ }
+ }
+ .last-commit {
+ strong {
+ color: #444;
+ }
+ .text-truncate {
+ margin-left: .4em;
+ }
+ }
+ .last-commit .text-truncate,
+ .age {
+ font-weight: normal;
+ color: #888;
+ }
+ }
}
#repo-readme {
- margin-bottom: 80px;
+ margin-bottom: 80px;
}
#repo-bare-start {
- margin-bottom: 100px;
- .panel-content {
- background-color: #FFF;
- }
- pre {
- margin: 0 40px;
- padding: 6px 10px;
- border: 1px solid #ddd;
- background: #f8f8f8;
- }
+ margin-bottom: 100px;
+ .panel-content {
+ background-color: #FFF;
+ }
+ pre {
+ margin: 0 40px;
+ padding: 6px 10px;
+ border: 1px solid #ddd;
+ background: #f8f8f8;
+ }
}
.repo-bare {
- #repo-bare-start {
- h2 {
- margin-top: 30px;
- margin-bottom: 24px;
- }
- }
- #repo-header-meta {
- display: none;
- }
- #repo-clone-ssh {
- margin-left: 200px;
- }
- #repo-clone-copy {
- margin-right: 200px;
- }
- #repo-clone-help {
- clear: both;
- width: 100%;
- }
- #repo-clone-url {
- width: 520px;
- }
+ #repo-bare-start {
+ h2 {
+ margin-top: 30px;
+ margin-bottom: 24px;
+ }
+ }
+ #repo-header-meta {
+ display: none;
+ }
+ #repo-clone-ssh {
+ margin-left: 200px;
+ }
+ #repo-clone-copy {
+ margin-right: 200px;
+ }
+ #repo-clone-help {
+ clear: both;
+ width: 100%;
+ }
+ #repo-clone-url {
+ width: 520px;
+ }
}
/* repository create */
#team-create-form,
#repo-migrate-form,
#repo-create-form {
- width: 800px;
- margin: 60px auto auto auto;
- background: white;
- h2 {
- margin: .5em 1em;
- }
- .field {
- margin: 1.2em 0 2em 0;
- }
- .ipt {
- width: 540px;
- }
- textarea {
- height: 120px;
- }
- .avatar {
- vertical-align: middle;
- margin-right: .6em;
- width: 28px;
- height: 28px;
- }
- &:hover {
- box-shadow: 0px 0px 6px #CCC;
- }
+ width: 800px;
+ margin: 60px auto auto auto;
+ background: white;
+ h2 {
+ margin: .5em 1em;
+ }
+ .field {
+ margin: 1.2em 0 2em 0;
+ }
+ .ipt {
+ width: 540px;
+ }
+ textarea {
+ height: 120px;
+ }
+ .avatar {
+ vertical-align: middle;
+ margin-right: .6em;
+ width: 28px;
+ height: 28px;
+ }
+ &:hover {
+ box-shadow: 0px 0px 6px #CCC;
+ }
}
#repo-create-cancel {
- margin-left: 4em;
+ margin-left: 4em;
}
#repo-create-owner-list {
- top: 30px;
- left: 0;
- width: auto;
- max-width: 300px;
- .octicon {
- margin-right: 12px;
- opacity: 0;
- }
- .avatar {
- width: 20px;
- height: 20px;
- }
- li {
- white-space: nowrap;
- &.checked {
- .octicon {
- opacity: 1;
- }
- }
- a {
- text-overflow: ellipsis;
- -o-text-overflow: ellipsis;
- overflow: hidden;
- }
- }
+ top: 30px;
+ left: 0;
+ width: auto;
+ max-width: 300px;
+ .octicon {
+ margin-right: 12px;
+ opacity: 0;
+ }
+ .avatar {
+ width: 20px;
+ height: 20px;
+ }
+ li {
+ white-space: nowrap;
+ &.checked {
+ .octicon {
+ opacity: 1;
+ }
+ }
+ a {
+ text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ }
}
.file-name {
- margin-left: 1em;
+ margin-left: 1em;
}
.file-size {
- font-size: 13px;
- color: #888;
- margin-left: 1em;
+ font-size: 13px;
+ color: #888;
+ margin-left: 1em;
}
.code-view {
- overflow: auto;
- overflow-x: auto;
- overflow-y: hidden;
- background: white;
- .view-raw {
- min-height: 40px;
- text-align: center;
- padding-top: 20px;
- .btn {
- font-size: 1.05em;
- line-height: 16px;
- padding: 6px 8px;
- }
- }
- table {
- width: 100%;
- td {
- padding: 0;
- }
- }
- .lines-num {
- vertical-align: top;
- text-align: right;
- color: #999;
- background: #f5f5f5;
- width: 1%;
- span {
- font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
- line-height: 18px;
- padding: 0 8px 0 10px;
- cursor: pointer;
- display: block;
- margin-top: 2px;
- font-size: 12px;
- }
- }
- .lines-code > pre {
- border: none;
- border-left: 1px solid #ddd;
- > ol.linenums > li {
- padding: 0 10px;
- &.active {
- background: #ffffdd;
- }
- }
- }
+ overflow: auto;
+ overflow-x: auto;
+ overflow-y: hidden;
+ background: white;
+ .view-raw {
+ min-height: 40px;
+ text-align: center;
+ padding-top: 20px;
+ .btn {
+ font-size: 1.05em;
+ line-height: 16px;
+ padding: 6px 8px;
+ }
+ }
+ table {
+ width: 100%;
+ td {
+ padding: 0;
+ }
+ }
+ .lines-num {
+ vertical-align: top;
+ text-align: right;
+ color: #999;
+ background: #f5f5f5;
+ width: 1%;
+ span {
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+ line-height: 18px;
+ padding: 0 8px 0 10px;
+ cursor: pointer;
+ display: block;
+ margin-top: 2px;
+ font-size: 12px;
+ }
+ }
+ .lines-code > pre {
+ border: none;
+ border-left: 1px solid #ddd;
+ > ol.linenums > li {
+ padding: 0 10px;
+ &.active {
+ background: #ffffdd;
+ }
+ }
+ }
}
.repo-setting-zone {
- padding: 30px;
+ padding: 30px;
}
#team-repositories-list,
#team-members-list,
#repo-collab-list {
- list-style: none;
- padding: 10px 0 5px 0;
- li.collab {
- clear: both;
- height: 50px;
- padding: 0 15px 0 15px;
- }
- a.member {
- color: #444;
- height: 50px;
- line-height: 50px;
- &:hover {
- color: #4183C4;
- }
- }
- .avatar {
- margin-right: 1em;
- width: 40px;
- }
- .remove-collab {
- color: #DD4B39;
- }
+ list-style: none;
+ padding: 10px 0 5px 0;
+ li.collab {
+ clear: both;
+ height: 50px;
+ padding: 0 15px 0 15px;
+ }
+ a.member {
+ color: #444;
+ height: 50px;
+ line-height: 50px;
+ &:hover {
+ color: #4183C4;
+ }
+ }
+ .avatar {
+ margin-right: 1em;
+ width: 40px;
+ }
+ .remove-collab {
+ color: #DD4B39;
+ }
}
.repo-user-list-block {
- position: relative;
- top: 5px;
+ position: relative;
+ top: 5px;
}
.setting-list {
- width: 100%;
- list-style: none;
+ width: 100%;
+ list-style: none;
}
\ No newline at end of file