From 912b340d0d674b35ef04e66d00a10a8e4a02e82c Mon Sep 17 00:00:00 2001 From: Antoine GIRARD Date: Thu, 30 Mar 2017 03:02:37 +0200 Subject: [PATCH] Simplify settings pages with item list (#1389) * Remove point column on ssh key setting page * Remove un-used css * Some cleaning * Use octicon-key --- public/css/index.css | 82 ++++++++++------------- public/less/_repository.less | 42 ++++++------ public/less/_user.less | 17 ----- templates/repo/settings/deploy_keys.tmpl | 35 +++++----- templates/user/settings/account_link.tmpl | 12 ++-- templates/user/settings/applications.tmpl | 29 ++++---- templates/user/settings/email.tmpl | 34 +++++----- templates/user/settings/openid.tmpl | 14 ++-- templates/user/settings/sshkeys.tmpl | 35 +++++----- 9 files changed, 130 insertions(+), 170 deletions(-) diff --git a/public/css/index.css b/public/css/index.css index 01ffd7e928..8409b5128d 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -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; } diff --git a/public/less/_repository.less b/public/less/_repository.less index 406dfb2ac8..7fadc21a86 100644 --- a/public/less/_repository.less +++ b/public/less/_repository.less @@ -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 { diff --git a/public/less/_user.less b/public/less/_user.less index 51f8c20967..a3e6852994 100644 --- a/public/less/_user.less +++ b/public/less/_user.less @@ -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 { diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl index cd9dea1dda..f082fde86b 100644 --- a/templates/repo/settings/deploy_keys.tmpl +++ b/templates/repo/settings/deploy_keys.tmpl @@ -14,27 +14,22 @@ {{if .Deploykeys}}
{{range .Deploykeys}} -
-
- -
-
- -
-
- {{.Name}} -
- {{.Fingerprint}} +
+
+ +
+ +
+ {{.Name}} +
+ {{.Fingerprint}} +
+
+ {{$.i18n.Tr "settings.add_on"}} {{DateFmtShort .Created}} — {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} {{DateFmtShort .Updated}}{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}} +
-
- {{$.i18n.Tr "settings.add_on"}} {{DateFmtShort .Created}} — {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} {{DateFmtShort .Updated}}{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}} -
-
-
- -
{{end}}
diff --git a/templates/user/settings/account_link.tmpl b/templates/user/settings/account_link.tmpl index 4b19bea75c..81ddf626e1 100644 --- a/templates/user/settings/account_link.tmpl +++ b/templates/user/settings/account_link.tmpl @@ -13,16 +13,16 @@
{{if .AccountLinks}} {{range $loginSource, $provider := .AccountLinks}} -
-
- {{$provider}} - {{if $loginSource.IsActived}}{{$.i18n.Tr "settings.active"}}{{end}} -
+
+
+
+
+ {{$provider}} + {{if $loginSource.IsActived}}{{$.i18n.Tr "settings.active"}}{{end}}
-
{{end}} {{end}} diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl index d8ba6d65a7..d4d19dcedf 100644 --- a/templates/user/settings/applications.tmpl +++ b/templates/user/settings/applications.tmpl @@ -15,24 +15,19 @@ {{.i18n.Tr "settings.tokens_desc"}}
{{range .Tokens}} -
-
- -
-
- -
-
- {{.Name}} -
- {{$.i18n.Tr "settings.add_on"}} {{DateFmtShort .Created}} — {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} {{DateFmtShort .Updated}}{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}} +
+
+ +
+ +
+ {{.Name}} +
+ {{$.i18n.Tr "settings.add_on"}} {{DateFmtShort .Created}} — {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} {{DateFmtShort .Updated}}{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}} +
-
-
- -
{{end}}
diff --git a/templates/user/settings/email.tmpl b/templates/user/settings/email.tmpl index f54a2fc833..88675f0e99 100644 --- a/templates/user/settings/email.tmpl +++ b/templates/user/settings/email.tmpl @@ -12,28 +12,28 @@ {{.i18n.Tr "settings.email_desc"}}
{{range .Emails}} -
-
- {{.Email}} - {{if .IsPrimary}}{{$.i18n.Tr "settings.primary"}}{{end}} +
{{if not .IsPrimary}} -
+
-
- {{if .IsActivated}} -
-
- {{$.CsrfTokenHtml}} - - - -
-
- {{end}} +
+ {{if .IsActivated}} +
+
+ {{$.CsrfTokenHtml}} + + + +
+
+ {{end}} {{end}} -
+
+ {{.Email}} + {{if .IsPrimary}}{{$.i18n.Tr "settings.primary"}}{{end}} +
{{end}}
diff --git a/templates/user/settings/openid.tmpl b/templates/user/settings/openid.tmpl index 9da4be4274..1a73bf5545 100644 --- a/templates/user/settings/openid.tmpl +++ b/templates/user/settings/openid.tmpl @@ -12,15 +12,13 @@ {{.i18n.Tr "settings.openid_desc"}}
{{range .OpenIDs}} -
-
- {{.URI}} -
+
+
-
-
+
+
{{$.CsrfTokenHtml}} @@ -38,7 +36,9 @@
-
+
+ {{.URI}} +
{{end}}
diff --git a/templates/user/settings/sshkeys.tmpl b/templates/user/settings/sshkeys.tmpl index bb4a6c6a83..7942afde41 100644 --- a/templates/user/settings/sshkeys.tmpl +++ b/templates/user/settings/sshkeys.tmpl @@ -15,27 +15,22 @@ {{.i18n.Tr "settings.ssh_desc"}}
{{range .Keys}} -
-
- -
-
- -
-
- {{.Name}} -
- {{.Fingerprint}} +
+
+ +
+ +
+ {{.Name}} +
+ {{.Fingerprint}} +
+
+ {{$.i18n.Tr "settings.add_on"}} {{DateFmtShort .Created}} — {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} {{DateFmtShort .Updated}}{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}} +
-
- {{$.i18n.Tr "settings.add_on"}} {{DateFmtShort .Created}} — {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} {{DateFmtShort .Updated}}{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}} -
-
-
- -
{{end}}