Skip to content

Commit 912b340

Browse files
sapklunny
sapk
authored and
lunny
committed
Simplify settings pages with item list (#1389)
* Remove point column on ssh key setting page * Remove un-used css * Some cleaning * Use octicon-key
1 parent 129b0d6 commit 912b340

File tree

9 files changed

+130
-170
lines changed

9 files changed

+130
-170
lines changed

‎public/css/index.css‎

Lines changed: 35 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -820,7 +820,7 @@ footer .ui.language .menu {
820820
border: solid 1px #ccc;
821821
border-bottom-color: #bbb;
822822
border-radius: 3px;
823-
box-shadow: inset 0 -1px 0 #bbbbbb;
823+
box-shadow: inset 0 -1px 0 #bbb;
824824
}
825825
.markdown:not(code) input[type="checkbox"] {
826826
vertical-align: middle !important;
@@ -896,7 +896,7 @@ footer .ui.language .menu {
896896
}
897897
.install form label {
898898
text-align: right;
899-
width: 320px;
899+
width: 320px !important;
900900
}
901901
.install form input {
902902
width: 35% !important;
@@ -905,7 +905,7 @@ footer .ui.language .menu {
905905
text-align: left;
906906
}
907907
.install form .field .help {
908-
margin-left: 335px;
908+
margin-left: 335px !important;
909909
}
910910
.install form .field.optional .title {
911911
margin-left: 38%;
@@ -940,18 +940,18 @@ footer .ui.language .menu {
940940
text-align: center;
941941
}
942942
#create-page-form form .header {
943-
padding-left: 280px;
943+
padding-left: 280px !important;
944944
}
945945
#create-page-form form .inline.field > label {
946946
text-align: right;
947-
width: 250px;
947+
width: 250px !important;
948948
word-wrap: break-word;
949949
}
950950
#create-page-form form .help {
951-
margin-left: 265px;
951+
margin-left: 265px !important;
952952
}
953953
#create-page-form form .optional .title {
954-
margin-left: 250px;
954+
margin-left: 250px !important;
955955
}
956956
#create-page-form form input,
957957
#create-page-form form textarea {
@@ -994,30 +994,30 @@ footer .ui.language .menu {
994994
.user.reset.password form .header,
995995
.user.signin form .header,
996996
.user.signup form .header {
997-
padding-left: 280px;
997+
padding-left: 280px !important;
998998
}
999999
.user.activate form .inline.field > label,
10001000
.user.forgot.password form .inline.field > label,
10011001
.user.reset.password form .inline.field > label,
10021002
.user.signin form .inline.field > label,
10031003
.user.signup form .inline.field > label {
10041004
text-align: right;
1005-
width: 250px;
1005+
width: 250px !important;
10061006
word-wrap: break-word;
10071007
}
10081008
.user.activate form .help,
10091009
.user.forgot.password form .help,
10101010
.user.reset.password form .help,
10111011
.user.signin form .help,
10121012
.user.signup form .help {
1013-
margin-left: 265px;
1013+
margin-left: 265px !important;
10141014
}
10151015
.user.activate form .optional .title,
10161016
.user.forgot.password form .optional .title,
10171017
.user.reset.password form .optional .title,
10181018
.user.signin form .optional .title,
10191019
.user.signup form .optional .title {
1020-
margin-left: 250px;
1020+
margin-left: 250px !important;
10211021
}
10221022
.user.activate form input,
10231023
.user.forgot.password form input,
@@ -1051,7 +1051,7 @@ footer .ui.language .menu {
10511051
.user.reset.password form .inline.field > label,
10521052
.user.signin form .inline.field > label,
10531053
.user.signup form .inline.field > label {
1054-
width: 200px;
1054+
width: 200px !important;
10551055
}
10561056
.repository.new.repo form,
10571057
.repository.new.migrate form,
@@ -1067,24 +1067,24 @@ footer .ui.language .menu {
10671067
.repository.new.repo form .header,
10681068
.repository.new.migrate form .header,
10691069
.repository.new.fork form .header {
1070-
padding-left: 280px;
1070+
padding-left: 280px !important;
10711071
}
10721072
.repository.new.repo form .inline.field > label,
10731073
.repository.new.migrate form .inline.field > label,
10741074
.repository.new.fork form .inline.field > label {
10751075
text-align: right;
1076-
width: 250px;
1076+
width: 250px !important;
10771077
word-wrap: break-word;
10781078
}
10791079
.repository.new.repo form .help,
10801080
.repository.new.migrate form .help,
10811081
.repository.new.fork form .help {
1082-
margin-left: 265px;
1082+
margin-left: 265px !important;
10831083
}
10841084
.repository.new.repo form .optional .title,
10851085
.repository.new.migrate form .optional .title,
10861086
.repository.new.fork form .optional .title {
1087-
margin-left: 250px;
1087+
margin-left: 250px !important;
10881088
}
10891089
.repository.new.repo form input,
10901090
.repository.new.migrate form input,
@@ -1119,7 +1119,7 @@ footer .ui.language .menu {
11191119
width: 50%!important;
11201120
}
11211121
.repository.new.repo .ui.form #auto-init {
1122-
margin-left: 265px;
1122+
margin-left: 265px !important;
11231123
}
11241124
.new.webhook form .help {
11251125
margin-left: 25px;
@@ -2374,25 +2374,25 @@ footer .ui.language .menu {
23742374
.settings .content .segment {
23752375
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
23762376
}
2377-
.settings .key.list .item:not(:first-child) {
2377+
.settings .list .item .green {
2378+
color: #21BA45 !important;
2379+
}
2380+
.settings .list .item:not(:first-child) {
23782381
border-top: 1px solid #eaeaea;
2382+
padding: 1rem;
2383+
margin: 15px -1rem -1rem -1rem;
2384+
min-height: 60px;
23792385
}
2380-
.settings .key.list .ssh-key-state-indicator {
2381-
float: left;
2382-
color: gray;
2383-
padding-left: 10px;
2384-
padding-top: 10px;
2386+
.settings .list .item > .mega-octicon {
2387+
display: table-cell;
23852388
}
2386-
.settings .key.list .ssh-key-state-indicator.active {
2387-
color: #6cc644;
2389+
.settings .list .item > .mega-octicon + .content {
2390+
display: table-cell;
2391+
padding: 0 0 0 .5em;
2392+
vertical-align: top;
23882393
}
2389-
.settings .key.list .meta {
2394+
.settings .list.key .meta {
23902395
padding-top: 5px;
2391-
}
2392-
.settings .key.list .print {
2393-
color: #767676;
2394-
}
2395-
.settings .key.list .activity {
23962396
color: #666;
23972397
}
23982398
.settings .hook.list > .item:not(:first-child) {
@@ -2625,18 +2625,18 @@ footer .ui.language .menu {
26252625
text-align: center;
26262626
}
26272627
.organization.new.org form .header {
2628-
padding-left: 280px;
2628+
padding-left: 280px !important;
26292629
}
26302630
.organization.new.org form .inline.field > label {
26312631
text-align: right;
2632-
width: 250px;
2632+
width: 250px !important;
26332633
word-wrap: break-word;
26342634
}
26352635
.organization.new.org form .help {
2636-
margin-left: 265px;
2636+
margin-left: 265px !important;
26372637
}
26382638
.organization.new.org form .optional .title {
2639-
margin-left: 250px;
2639+
margin-left: 250px !important;
26402640
}
26412641
.organization.new.org form input,
26422642
.organization.new.org form textarea {
@@ -2738,18 +2738,6 @@ footer .ui.language .menu {
27382738
padding-top: 15px;
27392739
padding-bottom: 80px;
27402740
}
2741-
.user.settings .list .item.ui.grid {
2742-
margin-top: 15px;
2743-
}
2744-
.user.settings .email.list .item:not(:first-child),
2745-
.user.settings .openid.list .item:not(:first-child) {
2746-
border-top: 1px solid #eaeaea;
2747-
height: 50px;
2748-
}
2749-
.user.settings .email.list .item:not(:first-child) .button,
2750-
.user.settings .openid.list .item:not(:first-child) .button {
2751-
margin-top: -10px;
2752-
}
27532741
.user.profile .ui.card .username {
27542742
display: block;
27552743
}

‎public/less/_repository.less‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1362,27 +1362,31 @@
13621362
box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
13631363
}
13641364
}
1365-
.key.list {
1366-
.item:not(:first-child) {
1367-
border-top: 1px solid #eaeaea;
1368-
}
1369-
.ssh-key-state-indicator {
1370-
float: left;
1371-
color: gray;
1372-
padding-left: 10px;
1373-
padding-top: 10px;
1374-
&.active {
1375-
color: #6cc644;
1365+
.list {
1366+
.item {
1367+
.green {
1368+
color: #21BA45 !important;
1369+
}
1370+
&:not(:first-child) {
1371+
border-top: 1px solid #eaeaea;
1372+
padding:1rem;
1373+
margin: 15px -1rem -1rem -1rem;
1374+
min-height: 60px;
1375+
}
1376+
> .mega-octicon {
1377+
display: table-cell;
1378+
}
1379+
> .mega-octicon + .content {
1380+
display: table-cell;
1381+
padding: 0 0 0 .5em;
1382+
vertical-align: top;
13761383
}
13771384
}
1378-
.meta {
1379-
padding-top: 5px;
1380-
}
1381-
.print {
1382-
color: #767676;
1383-
}
1384-
.activity {
1385-
color: #666;
1385+
&.key{
1386+
.meta {
1387+
padding-top: 5px;
1388+
color: #666;
1389+
}
13861390
}
13871391
}
13881392
.hook.list {

‎public/less/_user.less‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,6 @@
44
padding-bottom: @footer-margin * 2;
55
}
66

7-
&.settings {
8-
.list {
9-
.item.ui.grid {
10-
margin-top: 15px;
11-
}
12-
}
13-
.email.list, .openid.list {
14-
.item:not(:first-child) {
15-
border-top: 1px solid #eaeaea;
16-
height: 50px;
17-
.button {
18-
margin-top: -10px;
19-
}
20-
}
21-
}
22-
}
23-
247
&.profile {
258
.ui.card {
269
.username {

‎templates/repo/settings/deploy_keys.tmpl‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,22 @@
1414
{{if .Deploykeys}}
1515
<div class="ui key list">
1616
{{range .Deploykeys}}
17-
<div class="item ui grid">
18-
<div class="one wide column">
19-
<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted"{{end}}></i>
20-
</div>
21-
<div class="one wide column">
22-
<i class="mega-octicon octicon-key left"></i>
23-
</div>
24-
<div class="eleven wide column">
25-
<strong>{{.Name}}</strong>
26-
<div class="print meta">
27-
{{.Fingerprint}}
17+
<div class="item">
18+
<div class="right floated content">
19+
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
20+
{{$.i18n.Tr "settings.delete_key"}}
21+
</button>
22+
</div>
23+
<i class="mega-octicon octicon-key {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted"{{end}}></i>
24+
<div class="content">
25+
<strong>{{.Name}}</strong>
26+
<div class="print meta">
27+
{{.Fingerprint}}
28+
</div>
29+
<div class="activity meta">
30+
<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> — <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
31+
</div>
2832
</div>
29-
<div class="activity meta">
30-
<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> — <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
31-
</div>
32-
</div>
33-
<div class="two wide column">
34-
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
35-
{{$.i18n.Tr "settings.delete_key"}}
36-
</button>
37-
</div>
3833
</div>
3934
{{end}}
4035
</div>

‎templates/user/settings/account_link.tmpl‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@
1313
</div>
1414
{{if .AccountLinks}}
1515
{{range $loginSource, $provider := .AccountLinks}}
16-
<div class="item ui grid">
17-
<div class="column">
18-
<strong>{{$provider}}</strong>
19-
{{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
20-
<div class="ui right">
16+
<div class="item">
17+
<div class="right floated content">
2118
<button class="ui red tiny button delete-button" data-url="{{$.Link}}" data-id="{{$loginSource.ID}}">
2219
{{$.i18n.Tr "settings.delete_key"}}
2320
</button>
21+
</div>
22+
<div class="content">
23+
<strong>{{$provider}}</strong>
24+
{{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
2425
</div>
25-
</div>
2626
</div>
2727
{{end}}
2828
{{end}}

‎templates/user/settings/applications.tmpl‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,19 @@
1515
{{.i18n.Tr "settings.tokens_desc"}}
1616
</div>
1717
{{range .Tokens}}
18-
<div class="item ui grid">
19-
<div class="one wide column">
20-
<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
21-
</div>
22-
<div class="one wide column">
23-
<i class="fa fa-send fa-2x left"></i>
24-
</div>
25-
<div class="eleven wide column">
26-
<strong>{{.Name}}</strong>
27-
<div class="activity meta">
28-
<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> — <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
18+
<div class="item">
19+
<div class="right floated content">
20+
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
21+
{{$.i18n.Tr "settings.delete_token"}}
22+
</button>
23+
</div>
24+
<i class="big send icon {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
25+
<div class="content">
26+
<strong>{{.Name}}</strong>
27+
<div class="activity meta">
28+
<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> — <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
29+
</div>
2930
</div>
30-
</div>
31-
<div class="two wide column">
32-
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
33-
{{$.i18n.Tr "settings.delete_token"}}
34-
</button>
35-
</div>
3631
</div>
3732
{{end}}
3833
</div>

0 commit comments

Comments
 (0)