feat: update to gitea 1.21.3 and fix some issues

+ update the theme to work with latest gitea
+ fix some issues with the project view
1-auto-switch-between-dark-and-light-theme
Lucas Colombo 1 year ago
parent 4a1ddf4bed
commit 4bee2a7f60

@ -54,3 +54,33 @@ $ npm run serve -- --server ~/gitea/custom
# on windows
$ npm run serve -- -- --server c:/gitea/custom
```
# Changes in templates
## `home.tmpl`
Here we remove everything (default gitea welcome page). We only keep the logo and the header with the login button.
## `base/head_navbar.tmpl`
The only change here is to make the logo smaller.
```diff
- <img height="30" width="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
+ <img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
```
## `repo/home.tmpl`
+ adds `<div class="lugit-repo-header-data">...</div>` as a wrapper for the repo header data (description + labels)
+ adds `<div class="lugit-repo-content">` as a wrapper for the repo content (files, commits, branches, etc.)
Later we use css to go from default 1 column layout to 2 column layout more similar to github's design.
```diff
- <div class="ui container {{if .IsBlame}}fluid padded{{end}}>
+ <div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IIsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
```
Adds the class `lugit-repo-list-view` to the container of the repo content (only when we are not viewing a file or in blame view). This allows us to change the layout of the main repo view, except when viewing a file or in blame view.

@ -2199,13 +2199,14 @@
--color-expand-button: var(--c-elevation_6);
--color-placeholder-text: var(--c-elevation_6);
--color-editor-line-highlight: var(--color-primary-light-5);
--color-project-board-bg: var(--color-secondary-light-2);
--color-project-board-bg: var(--c-elevation_2);
--color-caret: var(--color-text);
--color-reaction-bg: rgba(var(--c-text-rgb), 0.07);
--color-reaction-active-bg: var(--color-primary-alpha-40);
--color-nav-bg: var(--c-elevation_2);
--color-nav-hover-bg: var(--c-elevation_6);
--color-label-active-bg: var(--c-elevation_6);
--color-label-text: var(--c-text);
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5);
--color-active-line: var(--c-elevation_5);
@ -2839,6 +2840,8 @@ footer .ui.dropdown .menu {
min-width: calc(var(--v-measure_1\.25x) + 6px);
padding: 6px;
text-align: center;
align-items: center;
justify-content: center;
}
.header-wrapper .ui.tabular.menu.navbar .item:hover {
background-color: var(--c-elevation_4);
@ -2846,6 +2849,7 @@ footer .ui.dropdown .menu {
#repo-topics {
row-gap: var(--v-measure_\.5x);
margin-top: 0 !important;
}
.ui.table > tr > td, .ui.table > tbody > tr > td {
@ -2962,6 +2966,21 @@ footer .ui.dropdown .menu {
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #topic_edit .field.gt-f1.gt-mr-3 {
margin: 0px !important;
}
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #topic_edit .field.gt-f1.gt-mr-3 div.fluid.multiple.search.selection.dropdown {
display: flex;
flex-wrap: wrap;
box-shadow: none;
padding: var(--v-measure_\.25x) var(--v-measure_\.5x);
}
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #topic_edit .field.gt-f1.gt-mr-3 div.fluid.multiple.search.selection.dropdown .item {
border: none;
}
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #topic_edit .field.gt-f1.gt-mr-3 div.fluid.multiple.search.selection.dropdown .menu {
top: calc(100% + 1px);
}
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #topic_edit .field.gt-f1.gt-mr-3 .dropdown {
display: none;
}
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #topic_edit .field.gt-f1.gt-mr-3 + div {
display: flex;
column-gap: var(--v-measure_1x);
@ -2974,3 +2993,12 @@ footer .ui.dropdown .menu {
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #repo-topics {
margin-top: var(--v-measure_1x) !important;
}
#project-board .project-column-header .project-column-title .circular.label {
display: flex;
padding: 0 !important;
align-items: center;
justify-content: center;
line-height: 16px;
padding: 0 var(--v-measure_\.25x) !important;
}

@ -2199,13 +2199,14 @@
--color-expand-button: var(--c-elevation_6);
--color-placeholder-text: var(--c-elevation_6);
--color-editor-line-highlight: var(--color-primary-light-5);
--color-project-board-bg: var(--color-secondary-light-2);
--color-project-board-bg: var(--c-elevation_2);
--color-caret: var(--color-text);
--color-reaction-bg: rgba(var(--c-text-rgb), 0.07);
--color-reaction-active-bg: var(--color-primary-alpha-40);
--color-nav-bg: var(--c-elevation_2);
--color-nav-hover-bg: var(--c-elevation_6);
--color-label-active-bg: var(--c-elevation_6);
--color-label-text: var(--c-text);
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5);
--color-active-line: var(--c-elevation_5);
@ -2839,6 +2840,8 @@ footer .ui.dropdown .menu {
min-width: calc(var(--v-measure_1\.25x) + 6px);
padding: 6px;
text-align: center;
align-items: center;
justify-content: center;
}
.header-wrapper .ui.tabular.menu.navbar .item:hover {
background-color: var(--c-elevation_4);
@ -2846,6 +2849,7 @@ footer .ui.dropdown .menu {
#repo-topics {
row-gap: var(--v-measure_\.5x);
margin-top: 0 !important;
}
.ui.table > tr > td, .ui.table > tbody > tr > td {
@ -2962,6 +2966,21 @@ footer .ui.dropdown .menu {
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #topic_edit .field.gt-f1.gt-mr-3 {
margin: 0px !important;
}
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #topic_edit .field.gt-f1.gt-mr-3 div.fluid.multiple.search.selection.dropdown {
display: flex;
flex-wrap: wrap;
box-shadow: none;
padding: var(--v-measure_\.25x) var(--v-measure_\.5x);
}
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #topic_edit .field.gt-f1.gt-mr-3 div.fluid.multiple.search.selection.dropdown .item {
border: none;
}
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #topic_edit .field.gt-f1.gt-mr-3 div.fluid.multiple.search.selection.dropdown .menu {
top: calc(100% + 1px);
}
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #topic_edit .field.gt-f1.gt-mr-3 .dropdown {
display: none;
}
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #topic_edit .field.gt-f1.gt-mr-3 + div {
display: flex;
column-gap: var(--v-measure_1x);
@ -2974,3 +2993,12 @@ footer .ui.dropdown .menu {
.page-content.repository.file.list > .ui.container.lugit-repo-list-view #repo-topics {
margin-top: var(--v-measure_1x) !important;
}
#project-board .project-column-header .project-column-title .circular.label {
display: flex;
padding: 0 !important;
align-items: center;
justify-content: center;
line-height: 16px;
padding: 0 var(--v-measure_\.25x) !important;
}

@ -1,30 +0,0 @@
<footer class="page-footer" role="group" aria-label="{{ctx.Locale.Tr "aria.footer"}}">
<div class="left-links" role="contentinfo" aria-label="{{ctx.Locale.Tr "aria.footer.software"}}">
<a target="_blank" rel="noopener noreferrer" href="https://about.gitea.com">{{ctx.Locale.Tr "powered_by" "Gitea"}}</a>
{{if (or .ShowFooterVersion .PageIsAdmin)}}
{{ctx.Locale.Tr "version"}}:
{{if .IsAdmin}}
<a href="{{AppSubUrl}}/admin/config">{{AppVer}}</a>
{{else}}
{{AppVer}}
{{end}}
{{end}}
{{if and .TemplateLoadTimes ShowFooterTemplateLoadTime}}
{{ctx.Locale.Tr "page"}}: <strong>{{LoadTimes .PageStartTime}}</strong>
{{ctx.Locale.Tr "template"}}{{if .TemplateName}} {{.TemplateName}}{{end}}: <strong>{{call .TemplateLoadTimes}}</strong>
{{end}}
</div>
<div class="right-links" role="group" aria-label="{{ctx.Locale.Tr "aria.footer.links"}}">
<div class="ui dropdown upward language">
<span class="flex-text-inline">{{svg "octicon-globe" 14}} {{ctx.Locale.LangName}}</span>
<div class="menu language-menu">
{{range .AllLangs}}
<a lang="{{.Lang}}" data-url="{{AppSubUrl}}/?lang={{.Lang}}" class="item {{if eq ctx.Locale.Lang .Lang}}active selected{{end}}">{{.Name}}</a>
{{end}}
</div>
</div>
<a href="{{AssetUrlPrefix}}/licenses.txt">{{ctx.Locale.Tr "licenses"}}</a>
{{if .EnableSwagger}}<a href="{{AppSubUrl}}/api/swagger">API</a>{{end}}
{{template "custom/extra_links_footer" .}}
</div>
</footer>

@ -1,12 +1,14 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
{{template "repo/header" .}}
<div class="ui container {{if .IsBlame}}fluid padded{{end}}">
<div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IIsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
<div class="lugit-repo-header-data">
{{template "base/alert" .}}
{{template "repo/code/recently_pushed_new_branches" .}}
{{if and (not .HideRepoInfo) (not .IsBlame)}}
<div class="ui repo-description gt-word-break">
<div id="repo-desc" class="gt-font-16">
<h5>{{ctx.Locale.Tr "repo.repo_desc"}}</h5>
{{$description := .Repository.DescriptionHTML $.Context}}
{{if $description}}<span class="description">{{$description | RenderCodeBlock}}</span>{{else if .IsRepositoryAdmin}}<span class="no-description text-italic">{{ctx.Locale.Tr "repo.no_desc"}}</span>{{end}}
<a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
@ -61,6 +63,8 @@
{{end}}
</div>
{{end}}
</div>
<div class="lugit-repo-content">
{{template "repo/sub_menu" .}}
<div class="repo-button-row">
<div class="gt-df gt-ac gt-fw gt-gap-y-3">
@ -161,5 +165,6 @@
{{template "repo/view_list" .}}
{{end}}
</div>
</div>
</div>
{{template "base/footer" .}}

@ -1,30 +0,0 @@
<footer class="page-footer" role="group" aria-label="{{ctx.Locale.Tr "aria.footer"}}">
<div class="left-links" role="contentinfo" aria-label="{{ctx.Locale.Tr "aria.footer.software"}}">
<a target="_blank" rel="noopener noreferrer" href="https://about.gitea.com">{{ctx.Locale.Tr "powered_by" "Gitea"}}</a>
{{if (or .ShowFooterVersion .PageIsAdmin)}}
{{ctx.Locale.Tr "version"}}:
{{if .IsAdmin}}
<a href="{{AppSubUrl}}/admin/config">{{AppVer}}</a>
{{else}}
{{AppVer}}
{{end}}
{{end}}
{{if and .TemplateLoadTimes ShowFooterTemplateLoadTime}}
{{ctx.Locale.Tr "page"}}: <strong>{{LoadTimes .PageStartTime}}</strong>
{{ctx.Locale.Tr "template"}}{{if .TemplateName}} {{.TemplateName}}{{end}}: <strong>{{call .TemplateLoadTimes}}</strong>
{{end}}
</div>
<div class="right-links" role="group" aria-label="{{ctx.Locale.Tr "aria.footer.links"}}">
<div class="ui dropdown upward language">
<span class="flex-text-inline">{{svg "octicon-globe" 14}} {{ctx.Locale.LangName}}</span>
<div class="menu language-menu">
{{range .AllLangs}}
<a lang="{{.Lang}}" data-url="{{AppSubUrl}}/?lang={{.Lang}}" class="item {{if eq ctx.Locale.Lang .Lang}}active selected{{end}}">{{.Name}}</a>
{{end}}
</div>
</div>
<a href="{{AssetUrlPrefix}}/licenses.txt">{{ctx.Locale.Tr "licenses"}}</a>
{{if .EnableSwagger}}<a href="{{AppSubUrl}}/api/swagger">API</a>{{end}}
{{template "custom/extra_links_footer" .}}
</div>
</footer>

@ -1,12 +1,14 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
{{template "repo/header" .}}
<div class="ui container {{if .IsBlame}}fluid padded{{end}}">
<div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IIsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
<div class="lugit-repo-header-data">
{{template "base/alert" .}}
{{template "repo/code/recently_pushed_new_branches" .}}
{{if and (not .HideRepoInfo) (not .IsBlame)}}
<div class="ui repo-description gt-word-break">
<div id="repo-desc" class="gt-font-16">
<h5>{{ctx.Locale.Tr "repo.repo_desc"}}</h5>
{{$description := .Repository.DescriptionHTML $.Context}}
{{if $description}}<span class="description">{{$description | RenderCodeBlock}}</span>{{else if .IsRepositoryAdmin}}<span class="no-description text-italic">{{ctx.Locale.Tr "repo.no_desc"}}</span>{{end}}
<a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
@ -61,6 +63,8 @@
{{end}}
</div>
{{end}}
</div>
<div class="lugit-repo-content">
{{template "repo/sub_menu" .}}
<div class="repo-button-row">
<div class="gt-df gt-ac gt-fw gt-gap-y-3">
@ -161,5 +165,6 @@
{{template "repo/view_list" .}}
{{end}}
</div>
</div>
</div>
{{template "base/footer" .}}

@ -231,13 +231,14 @@
--color-expand-button: #{color.get('elevation/6')};
--color-placeholder-text: #{color.get('elevation/6')};
--color-editor-line-highlight: var(--color-primary-light-5);
--color-project-board-bg: var(--color-secondary-light-2);
--color-project-board-bg: #{color.get('elevation/2')};
--color-caret: var(--color-text);
--color-reaction-bg: rgba(#{color.get('text', 'rgb')}, 0.07);
--color-reaction-active-bg: var(--color-primary-alpha-40);
--color-nav-bg: #{$lvl2};
--color-nav-hover-bg: #{color.get('elevation/6')};
--color-label-active-bg: #{color.get('elevation/6')};
--color-label-text: #{color.get('text')};
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5);
--color-active-line: #{color.get('elevation/5')};

@ -0,0 +1,19 @@
@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;
@mixin apply-styles {
#project-board {
.project-column-header {
.project-column-title {
.circular.label {
display: flex;
padding: 0 !important;
align-items: center;
justify-content: center;
line-height: 16px;
padding: 0 var.get('measure/.25x') !important;
}
}
}
}
}

@ -44,7 +44,7 @@
// border-bottom: 4px solid color.get('primary/base');;
&::after {
background: color.get('primary/base');;
background: color.get('primary/base');
border-radius: 6px;
bottom: calc(0px - var(--item-margin-bottom));
content: "";
@ -66,6 +66,8 @@
min-width: calc(var.get('measure/1.25x') + 6px);
padding: 6px;
text-align: center;
align-items: center;
justify-content: center;
}
&:hover {

@ -1,7 +1,9 @@
@use './repo-header';
@use './repo';
@use './project';
@mixin apply-custom-styles {
@include repo-header.apply-styles();
@include repo.apply-styles();
@include project.apply-styles();
}

@ -5,6 +5,7 @@
#repo-topics {
row-gap: var.get('measure/.5x');
margin-top: 0 !important;
}
.ui.table>tr>td, .ui.table>tbody>tr>td {
@ -149,6 +150,28 @@
.field.gt-f1.gt-mr-3 {
margin: 0px !important;
// topic selection editing (task list
div.fluid.multiple.search.selection.dropdown {
display: flex;
flex-wrap: wrap;
box-shadow: none;
padding: var.get('measure/.25x') var.get('measure/.5x');
.item {
border: none;
}
.menu {
top: calc(100% + 1px);
}
}
.dropdown {
display: none;
}
// Cancel, Save buttons
+div {
display: flex;
column-gap: var.get('measure/1x');

@ -4,7 +4,6 @@ import { buildFonts } from './fonts.js';
import { buildTemplates } from './templates.js';
import { copyTo } from './copy-to.js';
import { restartService } from './restart-service.js';
import { buildImg } from './img.js';
import { extname } from 'path';
import browsersync from 'browser-sync';

Loading…
Cancel
Save