Simplify settings pages with item list (#1389)
* Remove point column on ssh key setting page * Remove un-used css * Some cleaning * Use octicon-key
This commit is contained in:
Antoine GIRARD
Lunny Xiao
parent
129b0d6a4b
commit
912b340d0d
9 changed files with 130 additions and 170 deletions
|
|
@ -820,7 +820,7 @@ footer .ui.language .menu {
|
|||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbbbbb;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
.markdown:not(code) input[type="checkbox"] {
|
||||
vertical-align: middle !important;
|
||||
|
|
@ -896,7 +896,7 @@ footer .ui.language .menu {
|
|||
}
|
||||
.install form label {
|
||||
text-align: right;
|
||||
width: 320px;
|
||||
width: 320px !important;
|
||||
}
|
||||
.install form input {
|
||||
width: 35% !important;
|
||||
|
|
@ -905,7 +905,7 @@ footer .ui.language .menu {
|
|||
text-align: left;
|
||||
}
|
||||
.install form .field .help {
|
||||
margin-left: 335px;
|
||||
margin-left: 335px !important;
|
||||
}
|
||||
.install form .field.optional .title {
|
||||
margin-left: 38%;
|
||||
|
|
@ -940,18 +940,18 @@ footer .ui.language .menu {
|
|||
text-align: center;
|
||||
}
|
||||
#create-page-form form .header {
|
||||
padding-left: 280px;
|
||||
padding-left: 280px !important;
|
||||
}
|
||||
#create-page-form form .inline.field > label {
|
||||
text-align: right;
|
||||
width: 250px;
|
||||
width: 250px !important;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
#create-page-form form .help {
|
||||
margin-left: 265px;
|
||||
margin-left: 265px !important;
|
||||
}
|
||||
#create-page-form form .optional .title {
|
||||
margin-left: 250px;
|
||||
margin-left: 250px !important;
|
||||
}
|
||||
#create-page-form form input,
|
||||
#create-page-form form textarea {
|
||||
|
|
@ -994,7 +994,7 @@ footer .ui.language .menu {
|
|||
.user.reset.password form .header,
|
||||
.user.signin form .header,
|
||||
.user.signup form .header {
|
||||
padding-left: 280px;
|
||||
padding-left: 280px !important;
|
||||
}
|
||||
.user.activate form .inline.field > label,
|
||||
.user.forgot.password form .inline.field > label,
|
||||
|
|
@ -1002,7 +1002,7 @@ footer .ui.language .menu {
|
|||
.user.signin form .inline.field > label,
|
||||
.user.signup form .inline.field > label {
|
||||
text-align: right;
|
||||
width: 250px;
|
||||
width: 250px !important;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.user.activate form .help,
|
||||
|
|
@ -1010,14 +1010,14 @@ footer .ui.language .menu {
|
|||
.user.reset.password form .help,
|
||||
.user.signin form .help,
|
||||
.user.signup form .help {
|
||||
margin-left: 265px;
|
||||
margin-left: 265px !important;
|
||||
}
|
||||
.user.activate form .optional .title,
|
||||
.user.forgot.password form .optional .title,
|
||||
.user.reset.password form .optional .title,
|
||||
.user.signin form .optional .title,
|
||||
.user.signup form .optional .title {
|
||||
margin-left: 250px;
|
||||
margin-left: 250px !important;
|
||||
}
|
||||
.user.activate form input,
|
||||
.user.forgot.password form input,
|
||||
|
|
@ -1051,7 +1051,7 @@ footer .ui.language .menu {
|
|||
.user.reset.password form .inline.field > label,
|
||||
.user.signin form .inline.field > label,
|
||||
.user.signup form .inline.field > label {
|
||||
width: 200px;
|
||||
width: 200px !important;
|
||||
}
|
||||
.repository.new.repo form,
|
||||
.repository.new.migrate form,
|
||||
|
|
@ -1067,24 +1067,24 @@ footer .ui.language .menu {
|
|||
.repository.new.repo form .header,
|
||||
.repository.new.migrate form .header,
|
||||
.repository.new.fork form .header {
|
||||
padding-left: 280px;
|
||||
padding-left: 280px !important;
|
||||
}
|
||||
.repository.new.repo form .inline.field > label,
|
||||
.repository.new.migrate form .inline.field > label,
|
||||
.repository.new.fork form .inline.field > label {
|
||||
text-align: right;
|
||||
width: 250px;
|
||||
width: 250px !important;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.repository.new.repo form .help,
|
||||
.repository.new.migrate form .help,
|
||||
.repository.new.fork form .help {
|
||||
margin-left: 265px;
|
||||
margin-left: 265px !important;
|
||||
}
|
||||
.repository.new.repo form .optional .title,
|
||||
.repository.new.migrate form .optional .title,
|
||||
.repository.new.fork form .optional .title {
|
||||
margin-left: 250px;
|
||||
margin-left: 250px !important;
|
||||
}
|
||||
.repository.new.repo form input,
|
||||
.repository.new.migrate form input,
|
||||
|
|
@ -1119,7 +1119,7 @@ footer .ui.language .menu {
|
|||
width: 50%!important;
|
||||
}
|
||||
.repository.new.repo .ui.form #auto-init {
|
||||
margin-left: 265px;
|
||||
margin-left: 265px !important;
|
||||
}
|
||||
.new.webhook form .help {
|
||||
margin-left: 25px;
|
||||
|
|
@ -2374,25 +2374,25 @@ footer .ui.language .menu {
|
|||
.settings .content .segment {
|
||||
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.settings .key.list .item:not(:first-child) {
|
||||
.settings .list .item .green {
|
||||
color: #21BA45 !important;
|
||||
}
|
||||
.settings .list .item:not(:first-child) {
|
||||
border-top: 1px solid #eaeaea;
|
||||
padding: 1rem;
|
||||
margin: 15px -1rem -1rem -1rem;
|
||||
min-height: 60px;
|
||||
}
|
||||
.settings .key.list .ssh-key-state-indicator {
|
||||
float: left;
|
||||
color: gray;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
.settings .list .item > .mega-octicon {
|
||||
display: table-cell;
|
||||
}
|
||||
.settings .key.list .ssh-key-state-indicator.active {
|
||||
color: #6cc644;
|
||||
.settings .list .item > .mega-octicon + .content {
|
||||
display: table-cell;
|
||||
padding: 0 0 0 .5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.settings .key.list .meta {
|
||||
.settings .list.key .meta {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.settings .key.list .print {
|
||||
color: #767676;
|
||||
}
|
||||
.settings .key.list .activity {
|
||||
color: #666;
|
||||
}
|
||||
.settings .hook.list > .item:not(:first-child) {
|
||||
|
|
@ -2625,18 +2625,18 @@ footer .ui.language .menu {
|
|||
text-align: center;
|
||||
}
|
||||
.organization.new.org form .header {
|
||||
padding-left: 280px;
|
||||
padding-left: 280px !important;
|
||||
}
|
||||
.organization.new.org form .inline.field > label {
|
||||
text-align: right;
|
||||
width: 250px;
|
||||
width: 250px !important;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.organization.new.org form .help {
|
||||
margin-left: 265px;
|
||||
margin-left: 265px !important;
|
||||
}
|
||||
.organization.new.org form .optional .title {
|
||||
margin-left: 250px;
|
||||
margin-left: 250px !important;
|
||||
}
|
||||
.organization.new.org form input,
|
||||
.organization.new.org form textarea {
|
||||
|
|
@ -2738,18 +2738,6 @@ footer .ui.language .menu {
|
|||
padding-top: 15px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.user.settings .list .item.ui.grid {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.user.settings .email.list .item:not(:first-child),
|
||||
.user.settings .openid.list .item:not(:first-child) {
|
||||
border-top: 1px solid #eaeaea;
|
||||
height: 50px;
|
||||
}
|
||||
.user.settings .email.list .item:not(:first-child) .button,
|
||||
.user.settings .openid.list .item:not(:first-child) .button {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.user.profile .ui.card .username {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1362,27 +1362,31 @@
|
|||
box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
|
||||
}
|
||||
}
|
||||
.key.list {
|
||||
.item:not(:first-child) {
|
||||
border-top: 1px solid #eaeaea;
|
||||
}
|
||||
.ssh-key-state-indicator {
|
||||
float: left;
|
||||
color: gray;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
&.active {
|
||||
color: #6cc644;
|
||||
.list {
|
||||
.item {
|
||||
.green {
|
||||
color: #21BA45 !important;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid #eaeaea;
|
||||
padding:1rem;
|
||||
margin: 15px -1rem -1rem -1rem;
|
||||
min-height: 60px;
|
||||
}
|
||||
> .mega-octicon {
|
||||
display: table-cell;
|
||||
}
|
||||
> .mega-octicon + .content {
|
||||
display: table-cell;
|
||||
padding: 0 0 0 .5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.meta {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.print {
|
||||
color: #767676;
|
||||
}
|
||||
.activity {
|
||||
color: #666;
|
||||
&.key{
|
||||
.meta {
|
||||
padding-top: 5px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hook.list {
|
||||
|
|
|
|||
|
|
@ -4,23 +4,6 @@
|
|||
padding-bottom: @footer-margin * 2;
|
||||
}
|
||||
|
||||
&.settings {
|
||||
.list {
|
||||
.item.ui.grid {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.email.list, .openid.list {
|
||||
.item:not(:first-child) {
|
||||
border-top: 1px solid #eaeaea;
|
||||
height: 50px;
|
||||
.button {
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.profile {
|
||||
.ui.card {
|
||||
.username {
|
||||
|
|
|
|||
|
|
@ -14,27 +14,22 @@
|
|||
{{if .Deploykeys}}
|
||||
<div class="ui key list">
|
||||
{{range .Deploykeys}}
|
||||
<div class="item ui grid">
|
||||
<div class="one wide column">
|
||||
<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>
|
||||
</div>
|
||||
<div class="one wide column">
|
||||
<i class="mega-octicon octicon-key left"></i>
|
||||
</div>
|
||||
<div class="eleven wide column">
|
||||
<strong>{{.Name}}</strong>
|
||||
<div class="print meta">
|
||||
{{.Fingerprint}}
|
||||
<div class="item">
|
||||
<div class="right floated content">
|
||||
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
|
||||
{{$.i18n.Tr "settings.delete_key"}}
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
<div class="content">
|
||||
<strong>{{.Name}}</strong>
|
||||
<div class="print meta">
|
||||
{{.Fingerprint}}
|
||||
</div>
|
||||
<div class="activity meta">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity meta">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two wide column">
|
||||
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
|
||||
{{$.i18n.Tr "settings.delete_key"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,16 +13,16 @@
|
|||
</div>
|
||||
{{if .AccountLinks}}
|
||||
{{range $loginSource, $provider := .AccountLinks}}
|
||||
<div class="item ui grid">
|
||||
<div class="column">
|
||||
<strong>{{$provider}}</strong>
|
||||
{{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
|
||||
<div class="ui right">
|
||||
<div class="item">
|
||||
<div class="right floated content">
|
||||
<button class="ui red tiny button delete-button" data-url="{{$.Link}}" data-id="{{$loginSource.ID}}">
|
||||
{{$.i18n.Tr "settings.delete_key"}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<strong>{{$provider}}</strong>
|
||||
{{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -15,24 +15,19 @@
|
|||
{{.i18n.Tr "settings.tokens_desc"}}
|
||||
</div>
|
||||
{{range .Tokens}}
|
||||
<div class="item ui grid">
|
||||
<div class="one wide column">
|
||||
<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>
|
||||
</div>
|
||||
<div class="one wide column">
|
||||
<i class="fa fa-send fa-2x left"></i>
|
||||
</div>
|
||||
<div class="eleven wide column">
|
||||
<strong>{{.Name}}</strong>
|
||||
<div class="activity meta">
|
||||
<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>
|
||||
<div class="item">
|
||||
<div class="right floated content">
|
||||
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
|
||||
{{$.i18n.Tr "settings.delete_token"}}
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
<div class="content">
|
||||
<strong>{{.Name}}</strong>
|
||||
<div class="activity meta">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two wide column">
|
||||
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
|
||||
{{$.i18n.Tr "settings.delete_token"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,28 +12,28 @@
|
|||
{{.i18n.Tr "settings.email_desc"}}
|
||||
</div>
|
||||
{{range .Emails}}
|
||||
<div class="item ui grid">
|
||||
<div class="column">
|
||||
<strong>{{.Email}}</strong>
|
||||
{{if .IsPrimary}}<span class="text red">{{$.i18n.Tr "settings.primary"}}</span>{{end}}
|
||||
<div class="item">
|
||||
{{if not .IsPrimary}}
|
||||
<div class="ui right">
|
||||
<div class="right floated content">
|
||||
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
|
||||
{{$.i18n.Tr "settings.delete_key"}}
|
||||
</button>
|
||||
</div>
|
||||
{{if .IsActivated}}
|
||||
<div class="ui right">
|
||||
<form action="{{$.Link}}" method="post">
|
||||
{{$.CsrfTokenHtml}}
|
||||
<input name="_method" type="hidden" value="PRIMARY">
|
||||
<input name="id" type="hidden" value="{{.ID}}">
|
||||
<button class="ui green tiny button">{{$.i18n.Tr "settings.primary_email"}}</button>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{if .IsActivated}}
|
||||
<div class="right floated content">
|
||||
<form action="{{$.Link}}" method="post">
|
||||
{{$.CsrfTokenHtml}}
|
||||
<input name="_method" type="hidden" value="PRIMARY">
|
||||
<input name="id" type="hidden" value="{{.ID}}">
|
||||
<button class="ui green tiny button">{{$.i18n.Tr "settings.primary_email"}}</button>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="content">
|
||||
<strong>{{.Email}}</strong>
|
||||
{{if .IsPrimary}}<span class="text red">{{$.i18n.Tr "settings.primary"}}</span>{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,15 +12,13 @@
|
|||
{{.i18n.Tr "settings.openid_desc"}}
|
||||
</div>
|
||||
{{range .OpenIDs}}
|
||||
<div class="item ui grid">
|
||||
<div class="column">
|
||||
<strong>{{.URI}}</strong>
|
||||
<div class="ui right">
|
||||
<div class="item">
|
||||
<div class="right floated content">
|
||||
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
|
||||
{{$.i18n.Tr "settings.delete_key"}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="ui right">
|
||||
</div>
|
||||
<div class="right floated content">
|
||||
<form action="{{$.Link}}/toggle_visibility" method="post">
|
||||
{{$.CsrfTokenHtml}}
|
||||
<input name="id" type="hidden" value="{{.ID}}">
|
||||
|
|
@ -38,7 +36,9 @@
|
|||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<strong>{{.URI}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,27 +15,22 @@
|
|||
{{.i18n.Tr "settings.ssh_desc"}}
|
||||
</div>
|
||||
{{range .Keys}}
|
||||
<div class="item ui grid">
|
||||
<div class="one wide column">
|
||||
<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 tiny"{{end}}></i>
|
||||
</div>
|
||||
<div class="one wide column">
|
||||
<i class="mega-octicon octicon-key left"></i>
|
||||
</div>
|
||||
<div class="eleven wide column">
|
||||
<strong>{{.Name}}</strong>
|
||||
<div class="print meta">
|
||||
{{.Fingerprint}}
|
||||
<div class="item">
|
||||
<div class="right floated content">
|
||||
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
|
||||
{{$.i18n.Tr "settings.delete_key"}}
|
||||
</button>
|
||||
</div>
|
||||
<i class="mega-octicon octicon-key {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
|
||||
<div class="content">
|
||||
<strong>{{.Name}}</strong>
|
||||
<div class="print meta">
|
||||
{{.Fingerprint}}
|
||||
</div>
|
||||
<div class="activity meta">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity meta">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two wide column">
|
||||
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
|
||||
{{$.i18n.Tr "settings.delete_key"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue