From 904f799c1a871d1c730b2834206da7f57c46efc5 Mon Sep 17 00:00:00 2001 From: fuxiaohei 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