Skip to content

Commit bb50ab2

Browse files
silverwindsilverwind
authored
Style and template tweaks (#13828)
* Style and template tweaks - Get red and green buttons on arc green closer to base theme - EasyMDE adjustments, toolbar and focus border - Fix header on 404 repo page - Tweaks to frontpage search, add 'Create Repo' button - Fix misaligned box headers - Fix pagination on arc-green - Fix background and footer on explore and repo search * better fix for header button alignment * add label hover for reactions
1 parent 5574796 commit bb50ab2

18 files changed

+119
-139
lines changed

‎templates/explore/code.tmpl

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,7 @@
4949
</table>
5050
</div>
5151
</div>
52-
<div class="ui bottom attached table segment">
53-
{{if $result.Language}}
54-
<i class="color-icon" style="background-color: {{$result.Color}}"></i>{{$result.Language}}
55-
{{end}}
56-
&nbsp;
57-
{{if not $result.UpdatedUnix.IsZero}}
58-
<span class="ui small grey text pull right">{{$.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix $result.UpdatedUnix $.i18n.Lang) | Safe}} &nbsp;</span>
59-
{{end}}
60-
</div>
52+
{{template "shared/searchbottom" dict "root" $ "result" .}}
6153
</div>
6254
{{end}}
6355
</div>

‎templates/repo/issue/new_form.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</a>
1414
<div class="ui segment content">
1515
<div class="field">
16-
<input name="title" id="issue_title" placeholder="{{.i18n.Tr "repo.milestones.title"}}" value="{{if .TitleQuery}}{{.TitleQuery}}{{else if .IssueTemplateTitle}}{{.IssueTemplateTitle}}{{else}}{{.title}}{{end}}" tabindex="3" autofocus required maxlength="255">
16+
<input name="title" id="issue_title" placeholder="{{.i18n.Tr "repo.milestones.title"}}" value="{{if .TitleQuery}}{{.TitleQuery}}{{else if .IssueTemplateTitle}}{{.IssueTemplateTitle}}{{else}}{{.title}}{{end}}" tabindex="3" autofocus required maxlength="255" autocomplete="off">
1717
{{if .PageIsComparePull}}
1818
<div class="title_wip_desc" data-wip-prefixes="{{Json .PullRequestWorkInProgressPrefixes}}">{{.i18n.Tr "repo.pulls.title_wip_desc" (index .PullRequestWorkInProgressPrefixes 0| Escape) | Safe}}</div>
1919
{{end}}

‎templates/repo/issue/view_content/add_reaction.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{if .ctx.IsSigned}}
2-
<div class="item action ui pointing top right select-reaction dropdown" data-action-url="{{ .ActionURL }}">
2+
<div class="item action ui pointing select-reaction dropdown" data-action-url="{{ .ActionURL }}">
33
<a class="add-reaction">
44
{{svg "octicon-smiley"}}
55
</a>

‎templates/repo/issue/view_content/context_menu.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{if .ctx.IsSigned}}
2-
<div class="item action ui pointing top right custom dropdown context-dropdown">
2+
<div class="item action ui pointing custom dropdown context-dropdown">
33
<a class="context-menu">
44
{{svg "octicon-kebab-horizontal"}}
55
</a>

‎templates/repo/issue/view_title.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<span id="issue-title">{{RenderIssueTitle .Issue.Title $.RepoLink $.Repository.ComposeMetas}}</span>
1010
<span class="index">#{{.Issue.Index}}</span>
1111
<div id="edit-title-input" class="ui input" style="display: none">
12-
<input value="{{.Issue.Title}}" maxlength="255">
12+
<input value="{{.Issue.Title}}" maxlength="255" autocomplete="off">
1313
</div>
1414
</h1>
1515
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}

‎templates/repo/search.tmpl

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,7 @@
4848
</table>
4949
</div>
5050
</div>
51-
<div class="ui bottom attached table segment">
52-
{{if $result.Language}}
53-
<i class="color-icon" style="background-color: {{$result.Color}}"></i>{{$result.Language}}
54-
{{end}}
55-
&nbsp;
56-
{{if not $result.UpdatedUnix.IsZero}}
57-
<span class="ui small grey text pull right">{{$.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix $result.UpdatedUnix $.i18n.Lang) | Safe}} &nbsp;</span>
58-
{{end}}
59-
</div>
51+
{{template "shared/searchbottom" dict "root" $ "result" .}}
6052
</div>
6153
{{end}}
6254
</div>

‎templates/repo/settings/lfs.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<h4 class="ui top attached header">
88
{{.i18n.Tr "repo.settings.lfs_filelist"}} ({{.i18n.Tr "admin.total" .Total}})
99
<div class="ui right">
10-
<a class="ui black tiny show-panel button" href="{{.Link}}/locks"><span class="octicon-tiny">{{svg "octicon-lock"}}</span>{{.i18n.Tr "repo.settings.lfs_locks"}}</a>
11-
<a class="ui blue tiny show-panel button" href="{{.Link}}/pointers"><span class="octicon-tiny">{{svg "octicon-search"}}</span>&nbsp;{{.i18n.Tr "repo.settings.lfs_findpointerfiles"}}</a>
10+
<a class="ui tiny show-panel button" href="{{.Link}}/locks"><span class="octicon-tiny">{{svg "octicon-lock"}}</span>{{.i18n.Tr "repo.settings.lfs_locks"}}</a>
11+
<a class="ui primary tiny show-panel button" href="{{.Link}}/pointers"><span class="octicon-tiny">{{svg "octicon-search"}}</span>&nbsp;{{.i18n.Tr "repo.settings.lfs_findpointerfiles"}}</a>
1212
</div>
1313
</h4>
1414
<table id="lfs-files-table" class="ui attached segment single line table">
@@ -25,7 +25,7 @@
2525
<td>{{FileSize .Size}}</td>
2626
<td>{{TimeSince .CreatedUnix.AsTime $.Lang}}</td>
2727
<td class="right aligned">
28-
<a class="ui blue show-panel button" href="{{$.Link}}/find?oid={{.Oid}}&size={{.Size}}">{{$.i18n.Tr "repo.settings.lfs_findcommits"}}</a>
28+
<a class="ui primary show-panel button" href="{{$.Link}}/find?oid={{.Oid}}&size={{.Size}}">{{$.i18n.Tr "repo.settings.lfs_findcommits"}}</a>
2929
<button class="ui basic show-modal icon button" data-modal="#delete-{{.Oid}}">
3030
<span class="btn-octicon btn-octicon-danger poping up" data-content="{{$.i18n.Tr "repo.editor.delete_this_file"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-trashcan"}}</span>
3131
</button>

‎templates/shared/searchbottom.tmpl

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="ui bottom attached table segment df ac sb">
2+
<div class="ml-3">
3+
{{if .result.Language}}
4+
<i class="color-icon" style="background-color: {{.result.Color}}"></i>{{.result.Language}}
5+
{{end}}
6+
</div>
7+
<div class="mr-3">
8+
{{if not .result.UpdatedUnix.IsZero}}
9+
<span class="ui grey text">{{.root.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix .result.UpdatedUnix .root.i18n.Lang) | Safe}}</span>
10+
{{end}}
11+
</div>
12+
</div>

‎templates/status/404.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{template "base/head" .}}
2-
<div class="page-content ui container center {{if .IsRepo}}repository{{end}}">
2+
<div class="page-content ui container center full-screen-width {{if .IsRepo}}repository{{end}}">
33
{{if .IsRepo}}{{template "repo/header" .}}{{end}}
44
<div class="ui container center">
55
<p style="margin-top: 100px"><img class="ui centered image" src="{{StaticUrlPrefix}}/img/404.png" alt="404"/></p>

‎templates/status/500.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{template "base/head" .}}
2-
<div class="page-content ui container center">
2+
<div class="page-content ui container full-screen-width center">
33
<p style="margin-top: 100px"><img class="ui centered image" src="{{StaticUrlPrefix}}/img/500.png" alt="500"/></p>
44
<div class="ui divider"></div>
55
<br>

‎templates/user/dashboard/issues.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
</div>
7878
</form>
7979
</div>
80-
<div class="column right aligned">
80+
<div class="column right aligned df ac je">
8181
<!-- Sort -->
8282
<div class="ui dropdown type jump item">
8383
<span class="text">

‎templates/user/dashboard/repolist.tmpl

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,15 @@
2323
<a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{.i18n.Tr "organization"}}</a>
2424
</div>
2525
<div v-show="tab === 'repos'" class="ui tab active list dashboard-repos">
26-
<h4 class="ui top attached header">
27-
{{.i18n.Tr "home.my_repos"}} <span class="ui grey label">${reposTotalCount}</span>
26+
<h4 class="ui top attached header df ac">
27+
<div class="f1 df ac">
28+
{{.i18n.Tr "home.my_repos"}}
29+
<span class="ui grey label ml-3">${reposTotalCount}</span>
30+
</div>
31+
<a class="poping up" :href="suburl + '/repo/create'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
32+
{{svg "octicon-plus"}}
33+
<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
34+
</a>
2835
</h4>
2936
<div class="ui attached secondary segment repos-search">
3037
<div class="ui fluid right action left icon input" :class="{loading: isLoading}">
@@ -94,13 +101,16 @@
94101
<div v-if="repos.length" class="ui attached table segment rounded-bottom">
95102
<ul class="repo-owner-name-list">
96103
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
97-
<a :href="suburl + '/' + repo.full_name">
98-
<component v-bind:is="repoIcon(repo)" size="16"></component>
99-
<strong class="text truncate item-name">${repo.full_name}</strong>
100-
<i v-if="repo.archived" class="archive icon archived-icon"></i>
101-
<span class="ui right text light grey">
102-
${repo.stars_count} <span class="rear">{{svg "octicon-star"}}</span>
103-
</span>
104+
<a class="df ac sb" :href="suburl + '/' + repo.full_name">
105+
<div class="f1 df ac">
106+
<component v-bind:is="repoIcon(repo)" size="16"></component>
107+
<strong class="text truncate item-name">${repo.full_name}</strong>
108+
<i v-if="repo.archived" class="archive icon archived-icon"></i>
109+
</div>
110+
<div class="text light grey df ac">
111+
${repo.stars_count}
112+
{{svg "octicon-star" 16 "rear ml-2"}}
113+
</div>
104114
</a>
105115
</li>
106116
<li v-if="showMoreReposLink">
@@ -129,25 +139,29 @@
129139
</ul>
130140
</div>
131141
</div>
132-
<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list">
133-
<h4 class="ui top attached header">
134-
{{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">${organizationsTotalCount}</span>
135-
<div v-if="canCreateOrganization" class="ui right">
136-
<a class="poping up" :href="suburl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
137-
<i class="plus icon"></i>
138-
<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
139-
</a>
142+
<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list dashboard-orgs">
143+
<h4 class="ui top attached header df ac">
144+
<div class="f1 df ac">
145+
{{.i18n.Tr "home.my_orgs"}}
146+
<span class="ui grey label ml-3">${organizationsTotalCount}</span>
140147
</div>
148+
<a v-if="canCreateOrganization" class="poping up" :href="suburl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
149+
{{svg "octicon-plus"}}
150+
<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
151+
</a>
141152
</h4>
142153
<div v-if="organizations.length" class="ui attached table segment rounded-bottom">
143154
<ul class="repo-owner-name-list">
144155
<li v-for="org in organizations">
145-
<a :href="suburl + '/' + org.name">
146-
{{svg "octicon-organization"}}
147-
<strong class="text truncate item-name">${org.name}</strong>
148-
<span class="ui right text light grey">
149-
${org.num_repos} <span class="rear">{{svg "octicon-repo"}}</span>
150-
</span>
156+
<a class="df ac sb" :href="suburl + '/' + org.name">
157+
<div class="f1">
158+
{{svg "octicon-organization" 16 "mr-2"}}
159+
<strong class="text truncate item-name">${org.name}</strong>
160+
</div>
161+
<div class="text light grey df ac">
162+
${org.num_repos}
163+
{{svg "octicon-repo" 16 "rear ml-2 mt-1"}}
164+
</div>
151165
</a>
152166
</li>
153167
</ul>

‎web_src/less/_base.less

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
--color-purple: #a333c8;
7070
--color-pink: #e03997;
7171
--color-brown: #a5673f;
72-
--color-grey: #767676;
72+
--color-grey: #888888;
7373
--color-black: #1b1c1d;
7474
--color-gold: #a1882b;
7575
--color-white: #ffffff;
@@ -97,6 +97,7 @@
9797
--color-markdown-table-row: #00000008;
9898
--color-markdown-code-block: #00000010;
9999
--color-button: #ffffff;
100+
--color-code-bg: #ffffff;
100101
}
101102

102103
:root:lang(ja) {
@@ -253,6 +254,10 @@ a.muted:hover,
253254
border-color: var(--color-primary);
254255
}
255256

257+
.CodeMirror-focused {
258+
border-color: var(--color-primary) !important;
259+
}
260+
256261
.ui.action.input:not([class*="left action"]) > input:focus {
257262
border-right-color: var(--color-primary);
258263
}
@@ -288,6 +293,10 @@ a.muted:hover,
288293
background: none;
289294
}
290295

296+
.ui.ui.menu .item.disabled {
297+
color: var(--color-text-light-2);
298+
}
299+
291300
.ui.dropdown .menu {
292301
background: var(--color-menu);
293302
border-color: var(--color-secondary);
@@ -307,6 +316,8 @@ a.muted:hover,
307316
}
308317

309318
.ui.dropdown .menu .active.item {
319+
color: var(--color-text);
320+
background: var(--color-active);
310321
font-weight: normal;
311322
}
312323

@@ -523,17 +534,15 @@ a.muted:hover,
523534
flex-direction: inherit;
524535
}
525536

526-
.ui.dropdown:not(.labeled) > .dropdown.icon {
527-
height: 14px;
528-
vertical-align: bottom;
529-
margin-bottom: -2px;
530-
margin-left: .5rem;
531-
}
532-
533537
.ui.dropdown .menu {
534538
border-color: var(--color-secondary);
535539
}
536540

541+
.ui.pagination.menu .active.item {
542+
color: var(--color-text);
543+
background: var(--color-active);
544+
}
545+
537546
.ui.form .field > .selection.dropdown > .dropdown.icon {
538547
height: auto;
539548
}
@@ -1266,6 +1275,11 @@ a.ui.label:hover {
12661275
color: var(--color-text);
12671276
}
12681277

1278+
.ui.basic.labels a.label:hover,
1279+
a.ui.basic.label:hover {
1280+
background: var(--color-label-hover);
1281+
}
1282+
12691283
.ui.label > .detail .icons {
12701284
margin-right: .25em;
12711285
}
@@ -1597,6 +1611,7 @@ a.ui.label:hover {
15971611
}
15981612

15991613
.ui.attached.header {
1614+
position: relative;
16001615
background: var(--color-box-header);
16011616
border-color: var(--color-secondary);
16021617

@@ -1606,6 +1621,14 @@ a.ui.label:hover {
16061621
}
16071622
}
16081623

1624+
/* fix misaligned right buttons on box headers */
1625+
.ui.attached.header .right {
1626+
position: absolute;
1627+
right: .78571429rem;
1628+
top: 50%;
1629+
transform: translateY(-50%);
1630+
}
1631+
16091632
/* https://github.com/go-gitea/gitea/issues/10210 */
16101633
.ui.attached.segment ~ .ui.top.attached.header {
16111634
margin-top: 1rem;

‎web_src/less/_chroma.less

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
/* Background */
2-
3-
.chroma {
4-
background-color: #ffffff;
1+
.chroma,
2+
.lines-code {
3+
background-color: var(--color-code-bg);
54
}
65
/* LineTableTD */
76

‎web_src/less/_dashboard.less

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@
6363
}
6464
}
6565

66-
.dashboard-repos {
66+
.dashboard-repos,
67+
.dashboard-orgs {
6768
margin: 0 1px; /* Accomodate for Semantic's 1px hacks on .attached elements */
6869
}
6970

‎web_src/less/_editor.less

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,26 @@
3737
border-color: var(--color-secondary);
3838
}
3939

40+
.editor-toolbar button {
41+
border: none !important;
42+
color: var(--color-text-light);
43+
}
44+
4045
.editor-toolbar button:not(:hover) {
4146
background-color: transparent !important;
4247
}
4348

4449
.editor-toolbar i.separator {
4550
border-left: none;
51+
border-right-color: var(--color-secondary);
52+
}
53+
54+
.editor-toolbar button:hover {
55+
background: var(--color-hover);
56+
}
57+
58+
.editor-toolbar button.active {
59+
background: var(--color-active);
4660
}
4761

4862
.editor-loading {

‎web_src/less/helpers.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@
2020
word-break: break-all !important;
2121
}
2222

23+
.full-screen-width { width: 100vw !important; }
24+
.full-screen-height { height: 100vw !important; }
25+
2326
.rounded { border-radius: var(--border-radius) !important; }
2427
.rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
2528
.rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }

0 commit comments

Comments
 (0)