Raw file view tweaks (#15520)

- Limit SVG images to 600px width
- Adjust size of view toggle buttons to match other buttons
- Make Edit/Delete buttons easier to click

Had to create a separate CSS file because the less parser can not parse
CSS4 case-insensitive attribute selectors which are widely supported by
browsers.

Fixes: https://github.com/go-gitea/gitea/issues/15515
This commit is contained in:
silverwind 2021-04-22 23:43:44 +02:00 committed by GitHub
parent 8ea1d32bea
commit 834fc74873
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 13 deletions

View file

@ -33,9 +33,9 @@
{{if not .ReadmeInList}} {{if not .ReadmeInList}}
<div class="file-header-right file-actions df ac"> <div class="file-header-right file-actions df ac">
{{if .HasSourceRenderedToggle}} {{if .HasSourceRenderedToggle}}
<div class="ui compact icon buttons"> <div class="ui compact icon buttons two-toggle-buttons">
<a href="{{$.Link}}?display=source" class="ui tiny basic button poping up {{if .IsDisplayingSource}}active{{end}}" data-content="{{.i18n.Tr "repo.file_view_source"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-code"}}</a> <a href="{{$.Link}}?display=source" class="ui mini basic button poping up {{if .IsDisplayingSource}}active{{end}}" data-content="{{.i18n.Tr "repo.file_view_source"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-code" 15}}</a>
<a href="{{$.Link}}" class="ui tiny basic button poping up {{if .IsDisplayingRendered}}active{{end}}" data-content="{{.i18n.Tr "repo.file_view_rendered"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-file"}}</a> <a href="{{$.Link}}" class="ui mini basic button poping up {{if .IsDisplayingRendered}}active{{end}}" data-content="{{.i18n.Tr "repo.file_view_rendered"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-file" 15}}</a>
</div> </div>
{{end}} {{end}}
<div class="ui buttons mr-2"> <div class="ui buttons mr-2">

View file

@ -1594,6 +1594,14 @@ a.ui.label:hover {
border-left: none; border-left: none;
} }
.two-toggle-buttons .button:not(.active):first-of-type {
border-right: none;
}
.two-toggle-buttons .button.active:last-of-type {
border-left: 1px solid var(--color-light-border);
}
.ui.labeled.button.disabled > .button, .ui.labeled.button.disabled > .button,
.ui.basic.buttons .button, .ui.basic.buttons .button,
.ui.basic.button { .ui.basic.button {

View file

@ -396,15 +396,10 @@
.file-actions { .file-actions {
.btn-octicon { .btn-octicon {
display: inline-block;
padding: 5px;
margin-left: 5px;
line-height: 1; line-height: 1;
color: var(--color-text); padding: 10px 8px;
vertical-align: middle; vertical-align: middle;
background: transparent; color: var(--color-text);
border: 0;
outline: none;
} }
.btn-octicon:hover { .btn-octicon:hover {
@ -412,7 +407,7 @@
} }
.btn-octicon-danger:hover { .btn-octicon-danger:hover {
color: #bd2c00; color: var(--color-red);
} }
.btn-octicon.disabled { .btn-octicon.disabled {
@ -430,13 +425,18 @@
.view-raw { .view-raw {
padding: 5px; padding: 5px;
* { > * {
max-width: 100%; max-width: 100%;
border: 1px solid var(--color-secondary);
} }
img { img {
margin: 1rem 0;
border-radius: 0; border-radius: 0;
object-fit: contain;
} }
/* also see misc.css for one more related rule */
} }
.plain-text { .plain-text {

5
web_src/less/misc.css Normal file
View file

@ -0,0 +1,5 @@
/* can not have this selector in less because of https://github.com/less/less.js/issues/3027 */
.view-raw img[src$='.svg' i] {
max-height: 600px !important;
max-width: 600px !important;
}

View file

@ -48,6 +48,7 @@ export default {
resolve(__dirname, 'web_src/fomantic/build/semantic.js'), resolve(__dirname, 'web_src/fomantic/build/semantic.js'),
resolve(__dirname, 'web_src/js/index.js'), resolve(__dirname, 'web_src/js/index.js'),
resolve(__dirname, 'web_src/fomantic/build/semantic.css'), resolve(__dirname, 'web_src/fomantic/build/semantic.css'),
resolve(__dirname, 'web_src/less/misc.css'),
resolve(__dirname, 'web_src/less/index.less'), resolve(__dirname, 'web_src/less/index.less'),
], ],
swagger: [ swagger: [