iopietro / Travianz-Legacy

Join our Discord Server: https://discordapp.com/invite/9fbJKP9 | New repo: https://github.com/iopietro/Travianz
GNU General Public License v3.0
160 stars 94 forks source link

Tooltips for server settings #519

Open velhbxtyrj opened 6 years ago

velhbxtyrj commented 6 years ago

I offer for your consideration a few decorations for the admin panel: tooltips for server settings. Who and what thinks about it?

1 default

Some code:

<style>
    .tooltip {border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;}
    .tooltip span {margin-left: -999em; position: absolute;}
    .tooltip:hover span {font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;}
    .classic {padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; border-radius: 5px 5px;}
</style>

    <tr>
        <td>Server Name <em class="tooltip">?<span class="classic">Name of your game server</span></em></td>
        <td><?php echo SERVER_NAME;?></td>
    </tr>
Shadowss commented 6 years ago

Maybe you can reduced loads with 30% like you said

iopietro commented 6 years ago

@phaze1G, If you want to do pull requestes, you have to fork this project and then edit things in the fork you've made (you can fork it by clicking "Fork" here: https://github.com/Shadowss/TravianZ). After editing things in your fork you can open a pull request (from your fork) by clicking on "New pull request" in the main page of your fork.

If you want to commit many files at once, in different folders, etc. I advice you to use a git client, I personally use "TortoiseGit" (https://tortoisegit.org/), imho one of the simpler git client in circulation.

You can configure it simply by following this guide http://robertgreiner.com/2010/02/getting-started-with-git-and-tortoisegit-on-windows/ (the first I've found on google).

After configuring TortoiseGit (or any other git client), you have to clone your fork repository or this project repository. You can do that by openin the context menu in a folder you like, and then clicking on "Git Clone" (this is the procedure for TortoiseGit) and then pasting this repository or your fork git clone url (https://github.com/Shadowss/TravianZ.git).

You can obtain the "Git clone url" clicking on "Clone or download" in the main page of this project. For any doubts feel free to ask :) .

velhbxtyrj commented 6 years ago

It is necessary to decide.

  1. A slightly modified first option for displaying tooltips: https://jsfiddle.net/4ah7j674/

  2. Modified version in black: https://jsfiddle.net/1wnr9cc0/

iopietro commented 6 years ago

I prefer the second one.

eliopinho commented 6 years ago

agree

velhbxtyrj commented 6 years ago

I made the second option.

@iopietro I want to ask you to read and if necessary correct the texts. Link with the beginning of the texts below :)

https://github.com/Shadowss/TravianZ/blob/730378a84e91b18b4cd3455723deff03bb672bcc/GameEngine/Lang/en.php#L1252

Shadowss commented 6 years ago

@phaze1G you said : One more idea, we should replace the most of things we can with css instead of images. Rest of the stuff should be added as sprites css image. It would increase load speed by at least 30%.

Can you do that for us ? Reducing load with 30% is great for our servers and for our version.

RevertIT commented 6 years ago

There are dozen of images and ill need help from others too. Ill replace the much i can when i have free time

Shadowss commented 6 years ago

Great , thanks @phaze1G

eliopinho commented 6 years ago

friends , don't forget of include this in translation files :smiley:

really good job!

velhbxtyrj commented 6 years ago

Another one: https://jsfiddle.net/h1yzL6fs/

iopietro commented 6 years ago

I like it!

eliopinho commented 6 years ago

Really nice! How about the blue color became green like the game ??

velhbxtyrj commented 6 years ago

@Shadowss @iopietro @phaze1G @eliopinho I think it's worth to be determined definitively:

  1. https://jsfiddle.net/1wnr9cc0/

  2. https://jsfiddle.net/h1yzL6fs/1/

  3. https://jsfiddle.net/80kvj6vn/

eliopinho commented 6 years ago

I like 3 :)

iopietro commented 6 years ago

I like the third too, but i can't see it and the second from firefox.

velhbxtyrj commented 6 years ago

OK. Tomorrow I'll try to work on it and fix it for firefox.

RevertIT commented 6 years ago

Always keep font default or web safe. This one you used is not for web purposes.

velhbxtyrj commented 6 years ago

I have a little doubt that I would implement this. Does not work for old IE. And this browser is still used. The number of users is small, but we should not do what will be unpleasant for them.