README WordPress the code is overflowing #3211

@saitho commented on GitHub (Apr 19, 2019):

Did you try:

pre {
  white-space: pre-wrap;
}

@saitho commented on GitHub (Apr 19, 2019): Did you try: ```css pre { white-space: pre-wrap; } ```

GiteaMirror commented

@ZerooCool commented on GitHub (Apr 19, 2019):

Nice ! Thank you !
A other way is : change PRE for a DIV :
The file is templates/repo/view_file.tmpl:49

Change the CSS is better. Can you add this fixe ?

Where i can add this code ?

@ZerooCool commented on GitHub (Apr 19, 2019): Nice ! Thank you ! A other way is : change PRE for a DIV : The file is templates/repo/view_file.tmpl:49 Change the CSS is better. Can you add this fixe ? Where i can add this code ?

GiteaMirror commented

@kolaente commented on GitHub (Apr 19, 2019):

You could add this somewhere in public/less/_repository.less and then send a pr.

However, keep in mind HTML rendering was shut off on purpose, to prevent XSS attacks.

@kolaente commented on GitHub (Apr 19, 2019): You could add this somewhere in `public/less/_repository.less` and then send a pr. However, keep in mind HTML rendering was shut off on purpose, to prevent XSS attacks.

GiteaMirror commented

https://github.com/go-gitea/gitea/blob/master/public/less/_repository.less

@ZerooCool commented on GitHub (Apr 19, 2019):

Ok I will make a proposal to update this file, with your CSS fix thank you very much.

@ZerooCool commented on GitHub (Apr 19, 2019): Ok I will make a proposal to update this file, with your CSS fix thank you very much. https://github.com/go-gitea/gitea/blob/master/public/less/_repository.less

GiteaMirror commented

@ZerooCool commented on GitHub (Apr 19, 2019):

Some checks haven’t completed yet
1 expected and 1 pending checks
approvals/lgtm Expected — Waiting for status to be reported
Required
continuous-integration/drone/pr Pending — Build is running
Required
Details

Merging is blocked
The base branch restricts merging to authorized users. Learn more about protected branches.

ae74566dae

@ZerooCool commented on GitHub (Apr 19, 2019): Some checks haven’t completed yet 1 expected and 1 pending checks approvals/lgtm Expected — Waiting for status to be reported Required continuous-integration/drone/pr Pending — Build is running Required Details **Merging is blocked** The base branch restricts merging to authorized users. Learn more about protected branches. https://github.com/go-gitea/gitea/pull/6680/commits/ae74566dae21bf00a60aeb642517f90838ef3195

GiteaMirror commented

@ZerooCool commented on GitHub (Apr 20, 2019):

kolaente say : That's changing the code-diff view, not the readme.

Ok, that's not what's wanted then.
Here is the view of the HTML code (WordPress README displayed by default on our project) that I want to change because the code overflows.

An idea of CSS to modify?
In my online tests, the following CSS I modify:
/vendor/plugins/semantic/semantic.min.css

@ZerooCool commented on GitHub (Apr 20, 2019): kolaente say : That's changing the code-diff view, not the readme. Ok, that's not what's wanted then. Here is the view of the HTML code (WordPress README displayed by default on our project) that I want to change because the code overflows. An idea of CSS to modify? In my online tests, the following CSS I modify: /vendor/plugins/semantic/semantic.min.css

GiteaMirror commented

@ZerooCool commented on GitHub (Apr 20, 2019):

Return of the administrator who deployed our GITEA.

I installed gitea via the docker I can not find the CSS files in it; I understand half that slab to docker, I think I have a docker-dial that assembles a docker gitea that is elsewhere with its own files
but I do not find "semantic.min.css" nowhere
it must be in a virtual disk image or a crap like this: smile:
if I enter the docker that I modify the file I do not know if it will survive the next "make down" make up the docker composes.

@ZerooCool commented on GitHub (Apr 20, 2019): Return of the administrator who deployed our GITEA. I installed gitea via the docker I can not find the CSS files in it; I understand half that slab to docker, I think I have a docker-dial that assembles a docker gitea that is elsewhere with its own files but I do not find "semantic.min.css" nowhere it must be in a virtual disk image or a crap like this: smile: if I enter the docker that I modify the file I do not know if it will survive the next "make down" make up the docker composes.

GiteaMirror commented

@saitho commented on GitHub (Apr 20, 2019):

semantic.min.css is not the place to add the changes, as that is a separate project (https://github.com/Semantic-Org/Semantic-UI). Adding it to _repository.less is fine. You just added it at the wrong line (see my comment in your PR). ;)

@saitho commented on GitHub (Apr 20, 2019): semantic.min.css is not the place to add the changes, as that is a separate project (https://github.com/Semantic-Org/Semantic-UI). Adding it to _repository.less is fine. You just added it at the wrong line (see my comment in your PR). ;)

GiteaMirror commented

@ZerooCool commented on GitHub (Apr 20, 2019):

saitho say :
Adding the CSS property to pre tags inside the .non-diff-file-content .plain-text class should be fine.
on file public/less/_repository.less add the following after line 327: pre { white-space: pre-wrap; } Make sure to indent the lines properly.

Rebuild the CSS file with make generate-stylesheets and commit that as well (as suggested by the DroneCI error message).

ZerooCool :
overflow: scroll Looks better to keep line numbering, especially on PHP pages, which is not necessarily the property white-space: pre-wrap; ?

@ZerooCool commented on GitHub (Apr 20, 2019): saitho say : Adding the CSS property to pre tags inside the .non-diff-file-content .plain-text class should be fine. on file public/less/_repository.less add the following after line 327: pre { white-space: pre-wrap; } Make sure to indent the lines properly. Rebuild the CSS file with make generate-stylesheets and commit that as well (as suggested by the DroneCI error message). ZerooCool : overflow: scroll Looks better to keep line numbering, especially on PHP pages, which is not necessarily the property white-space: pre-wrap; ?

GiteaMirror commented

@ZerooCool commented on GitHub (Apr 20, 2019):

I add line 330 :
https://github.com/ZerooCool/gitea/blob/master/public/less/_repository.less

@ZerooCool commented on GitHub (Apr 20, 2019): I add line 330 : https://github.com/ZerooCool/gitea/blob/master/public/less/_repository.less

GiteaMirror commented

@ZerooCool commented on GitHub (Apr 21, 2019):

I have test a new pull request with the good code.
https://github.com/go-gitea/gitea/pull/6696

I can not finalize.
Can you make this change.

@ZerooCool commented on GitHub (Apr 21, 2019): I have test a new pull request with the good code. https://github.com/go-gitea/gitea/pull/6696 I can not finalize. Can you make this change.

GiteaMirror commented

@ZerooCool commented on GitHub (Apr 22, 2019):

I install NODE.js and NPM
sudo apt-get install curl software-properties-common
curl -sL https://deb.nodesource.com/setup_11.x | sudo bash -

cd gitea-local-depot/
make generate-stylesheets
npx lessc --clean-css public/less/index.less public/css/index.css
npm ERR! code E404
npm ERR! 404 Not Found: lessc@latest

npm ERR! A complete log of this run can be found in:
npm ERR! /home/looksaalpha/.npm/_logs/2019-04-22T02_43_17_676Z-debug.log
L'installation de lessc@latest a échoué avec le code 1
Makefile:392: recipe for target 'generate-stylesheets' failed
make: *** [generate-stylesheets] Error 1

I don't no how i can push my patch for " README WordPress the code is overflowing "

In this file :
public/less/_repository.less
Line 330
Add this code for resolve this issue :

            pre {
                overflow: scroll;
            }

Can you add this patch please, push it on the deposit, because, I can not do it.

You can see that the WordPress README is beyond the scope, so this patch seems to be necessary and answer to this problem.

Using overflow keeps line numbering, so should not generate edge effects.

Thank you for pushing this proposal, to be able to close this issue.

@ZerooCool commented on GitHub (Apr 22, 2019): I install NODE.js and NPM sudo apt-get install curl software-properties-common curl -sL https://deb.nodesource.com/setup_11.x | sudo bash - cd gitea-local-depot/ make generate-stylesheets npx lessc --clean-css public/less/index.less public/css/index.css npm ERR! code E404 npm ERR! 404 Not Found: lessc@latest npm ERR! A complete log of this run can be found in: npm ERR! /home/looksaalpha/.npm/_logs/2019-04-22T02_43_17_676Z-debug.log L'installation de lessc@latest a échoué avec le code 1 Makefile:392: recipe for target 'generate-stylesheets' failed make: *** [generate-stylesheets] Error 1 I don't no how i can push my patch for " README WordPress the code is overflowing " **In this file : public/less/_repository.less Line 330 Add this code for resolve this issue :** ``` pre { overflow: scroll; } ``` Can you add this patch please, push it on the deposit, because, I can not do it. You can see that the WordPress README is beyond the scope, so this patch seems to be necessary and answer to this problem. Using overflow keeps line numbering, so should not generate edge effects. Thank you for pushing this proposal, to be able to close this issue.

GiteaMirror commented

https://github.com/go-gitea/gitea/pull/6696

@ZerooCool commented on GitHub (Apr 23, 2019):

682da74869/public/css/index.css

https://codecov.io/gh/go-gitea/gitea/pull/6696/diff?src=pr&el=tree-more

It must be checked that the lines are always correctly numbered for the PHP files for example, if that leads to line breaks.

If everything is ok for viewing the WordPress README file that no longer floats.

If the numbering was not affected by the change for PHP files.

Then the issue is resolved and can be closed.

@ZerooCool commented on GitHub (Apr 23, 2019): https://github.com/go-gitea/gitea/pull/6696 https://github.com/go-gitea/gitea/blob/682da74869050a252c6217d2a51dd1cd97c9a0db/public/css/index.css https://codecov.io/gh/go-gitea/gitea/pull/6696/diff?src=pr&el=tree-more It must be checked that the lines are always correctly numbered for the PHP files for example, if that leads to line breaks. If everything is ok for viewing the WordPress README file that no longer floats. If the numbering was not affected by the change for PHP files. Then the issue is resolved and can be closed.

GiteaMirror commented

@lafriks commented on GitHub (Apr 24, 2019):

@ZerooCool issue will be automatically closed when PR is merged

@lafriks commented on GitHub (Apr 24, 2019): @ZerooCool issue will be automatically closed when PR is merged

GiteaMirror commented

@ZerooCool commented on GitHub (Apr 24, 2019):

@lafriks
-> https://github.com/go-gitea/gitea/pull/6696 ?

@ZerooCool commented on GitHub (Apr 24, 2019): @lafriks -> https://github.com/go-gitea/gitea/pull/6696 ?

GiteaMirror commented

@lafriks commented on GitHub (Apr 25, 2019):

Yes

@lafriks commented on GitHub (Apr 25, 2019): Yes

GiteaMirror commented

@ZerooCool commented on GitHub (Apr 26, 2019):

I can not install Gitea from Github on Debian.
I do not understand if I need install goland.

I followed another tutorial that refers to the official deposit from the site Gitea, to get to install Gitea:
https://wiki.visionduweb.fr/index.php?title=CMS#Le_tutoriel_pour_installer_Gitea

I thought that on the 24th the fix for no longer having the contents of the WordPress README coming out of the window had been fixed.

The problem persists with the version I loaded on Gitea.

I'm definitely not sure if the fix has been made on Github, and will it be carried also to the loading package on the Gitea official website.

It's really a simple CSS problem.
Can you confirm, or, explain, whether or not the patch has been brought.
I have not seen any changes since 6 days regarding CSS that I would like to correct, to no longer have the WordPress README floating.

Can you add the fix?

In this file :
public/less/_repository.less
Line 330
Add this code for resolve this issue :

            pre {
                overflow: scroll;
            }

@ZerooCool commented on GitHub (Apr 26, 2019): I can not install Gitea from Github on Debian. I do not understand if I need install goland. I followed another tutorial that refers to the official deposit from the site Gitea, to get to install Gitea: https://wiki.visionduweb.fr/index.php?title=CMS#Le_tutoriel_pour_installer_Gitea I thought that on the 24th the fix for no longer having the contents of the WordPress README coming out of the window had been fixed. The problem persists with the version I loaded on Gitea. I'm definitely not sure if the fix has been made on Github, and will it be carried also to the loading package on the Gitea official website. It's really a simple CSS problem. Can you confirm, or, explain, whether or not the patch has been brought. I have not seen any changes since 6 days regarding CSS that I would like to correct, to no longer have the WordPress README floating. Can you add the fix? **In this file : public/less/_repository.less Line 330 Add this code for resolve this issue :** ``` pre { overflow: scroll; } ```

GiteaMirror commented

@kimpenhaus commented on GitHub (Apr 29, 2019):

Hi all,

I am not by any means a CSS guru 😆 but shouldn't it be auto instead of scroll:

pre {
        overflow: auto;
}

Whilst having the scrollbars always visible it looks somewhat odd:

Having the scrollbars only visible when content is clipped it looks way better when it is not (at least for me) and fullfills its job in case of overflowing content also:

Sidenode: I am running gitea in a docker conatiner on the latest tag - currenbtly running version ccf4783

@kimpenhaus commented on GitHub (Apr 29, 2019): Hi all, I am not by any means a CSS guru 😆 but shouldn't it be `auto` instead of `scroll`: ``` pre { overflow: auto; } ``` Whilst having the scrollbars always visible it looks somewhat odd: <img width="1091" alt="Bildschirmfoto 2019-04-29 um 15 58 29" src="https://user-images.githubusercontent.com/575109/56901279-1caa3200-6a98-11e9-87ef-83d2e8d857bc.png"> Having the scrollbars only visible when content is clipped it looks way better when it is not (at least for me) and fullfills its job in case of overflowing content also: <img width="1092" alt="Bildschirmfoto 2019-04-29 um 15 59 41" src="https://user-images.githubusercontent.com/575109/56901363-495e4980-6a98-11e9-938d-3bdd1ac821c2.png"> <img width="1087" alt="Bildschirmfoto 2019-04-29 um 16 06 33" src="https://user-images.githubusercontent.com/575109/56901572-c7225500-6a98-11e9-8780-35c3f292cee2.png"> Sidenode: I am running gitea in a docker conatiner on the latest tag - currenbtly running version `ccf4783`

GiteaMirror commented