Mercurial > hg > batmud > maputils
changeset 1677:9d51b4138e7d
CSS updates and related code changes.
| author | Matti Hamalainen <ccr@tnsp.org> |
|---|---|
| date | Tue, 25 Apr 2017 17:30:08 +0300 |
| parents | 8d1c971ba148 |
| children | a4dc64446036 |
| files | www/common.inc.php www/info.php www/latest.php www/level.php www/loc.php www/maps.css www/menu.inc.php www/quests.php www/ss.php |
| diffstat | 9 files changed, 151 insertions(+), 136 deletions(-) [+] |
line wrap: on
line diff
--- a/www/common.inc.php Tue Apr 25 17:29:42 2017 +0300 +++ b/www/common.inc.php Tue Apr 25 17:30:08 2017 +0300 @@ -351,7 +351,7 @@ function mpPrintExtraBoxAlphaList($prefix, $table, $class = FALSE) { - echo "<div id=\"extrabox\"".($class !== FALSE ? " class=\"".$class."\"" : "").">\n"; + echo "<div id=\"extraBox\"".($class !== FALSE ? " class=\"".$class."\"" : "").">\n"; foreach ($table as $alpha => $locs) {
--- a/www/info.php Tue Apr 25 17:29:42 2017 +0300 +++ b/www/info.php Tue Apr 25 17:30:08 2017 +0300 @@ -90,39 +90,25 @@ $letter = strtoupper($alpha); echo "<h3><a id=\"ch".$letter."\"></a>".$letter."</h3>\n"; - echo "<table class=\"loc\">\n"; + echo "<div class=\"locTable\">\n"; $n = 0; foreach ($data as $wizard) { - if ($n == 0) echo " <tr>\n"; - $totalWiz++; - printf(" <td style=\"width: %d%%; background: %s;\">". + printf(" <div class=\"locWizard\" style=\"background: %s;\">". "<a href=\"loc.php?a=%s\">%s</a> <span style=\"color: #f80;\">", - (100 / $maxRow), (count($wizard) > 2 || isset($wizard["desc"])) ? "#474" : "#744", $wizard["name"], $wizard["name"]); + (count($wizard) > 2 || isset($wizard["desc"])) ? "#474" : "#744", + $wizard["name"], $wizard["name"]); if ($wizard["areas"] > 0) echo " (".$wizard["areas"].")"; - echo "</span></td>\n"; - - $n++; - if ($n >= $maxRow) - { - echo " </tr>\n"; - $n = 0; - } + echo "</span></div>\n"; } - if ($n > 0) - { - while ($n++ < $maxRow) - echo " <td></td>\n"; - echo " </tr>\n"; - } - echo "</table>\n"; + echo "</div>\n"; } echo "<p><b>".$totalWiz."</b> wizards.</p>\n";
--- a/www/latest.php Tue Apr 25 17:29:42 2017 +0300 +++ b/www/latest.php Tue Apr 25 17:30:08 2017 +0300 @@ -64,7 +64,7 @@ // Print the list $totalLoc = 0; echo - "<table class=\"loc\">\n". + "<table class=\"locTable\">\n". " <tr>\n". " <th>Date</th>\n". " <th>Location name</th>\n".
--- a/www/level.php Tue Apr 25 17:29:42 2017 +0300 +++ b/www/level.php Tue Apr 25 17:30:08 2017 +0300 @@ -50,7 +50,7 @@ if (count($areaTable) > 0) { echo - " <table class=\"loc quests\">\n". + " <table class=\"locTable quests\">\n". " <tr>\n". " <th>Location</th>\n". " <th>Limit</th>\n".
--- a/www/loc.php Tue Apr 25 17:29:42 2017 +0300 +++ b/www/loc.php Tue Apr 25 17:30:08 2017 +0300 @@ -3,6 +3,7 @@ require "world.inc.php"; require "common.inc.php"; + // Wizard info box special formatting tags $specTags = [ "b" => "<b>", @@ -248,11 +249,9 @@ $s = $wizImageURL."unknown.png"; echo - "<div class=\"wizinfo\">\n". - " <table>\n". - " <tr>\n". - " <td class=\"img\"><img src=\"".$s."\" alt=\"".$coderName."\" /></td>\n". - " <td class=\"info\">\n". + "<div class=\"wizInfoBox\">\n". + " <div class=\"wizImage\"><img src=\"".$s."\" alt=\"".$coderName."\" /></div>\n". + " <div class=\"wizInfo\">\n". " <h2>".$coderName."</h2>\n"; // Description block @@ -279,9 +278,7 @@ } echo - " </td>\n". - " </tr>\n". - " </table>\n". + " </div>\n". "</div>\n"; } else @@ -326,21 +323,18 @@ echo "<h3 class=\"alpha\"><a id=\"ch".$letter."\"></a>".$letter."</h3>\n". mpSpecialDate("loc", 2). - "<table class=\"loc\">\n"; + "<div class=\"locTable\">\n"; $n = 0; foreach ($alphaLocs as $ik => $iv) { - if ($n == 0) - echo " <tr>\n"; - $totalLoc++; // Print location entry - printf(" <td class=\"%s\" style=\"width: %d%%\">", - $iv["continent"], (100 / $maxColumns)); - - echo mpGetMapLink($iv, $continentList[$iv["continent"]][4]); + echo + " <div class=\"locCell ".$iv["continent"]."\">". + "<div class=\"locHeader\">". + "<span class=\"locTitle\">".mpGetMapLink($iv, $continentList[$iv["continent"]][4])."</span>"; // If either freeform desc or URL field are set, we add those if (isset($iv["url"]) || isset($iv["freeform"])) @@ -356,7 +350,7 @@ $urlEnd = "</a>"; if (strlen($iv["url"]) > 40) $urlEnt = substr($urlEnt, 0, 40)."..."; - $desc .= "<br /><br /><b>".chentities($urlEnt)."</b>"; + $desc .= "<div class=\"locURL\">".chentities($urlEnt)."</div>"; } else { @@ -364,15 +358,17 @@ } echo - " ".$urlBegin."<img class=\"noborder\" src=\"img/question.png\" onmouseover=\"stt(".$totalLoc. - ");\" onmouseout=\"htt();\" alt=\"(?)\" />".$urlEnd."\n"; + " ".$urlBegin."<img src=\"img/question.png\" onmouseover=\"stt(".$totalLoc. + ");\" onmouseout=\"htt();\" alt=\"(?)\" />".$urlEnd; $locationTips[$totalLoc] = [ "title" => $iv["name"], "desc" => $desc ]; - } - + } + + echo "</div>"; // locHeader + // Alternative names if (($nnames = count($iv["names"])) > 1) { @@ -385,7 +381,7 @@ chentities($iv["names"][$nname]["name"]). ($norig ? "</b>" : ""); } - echo "<br />".implode(" | ", $fs); + echo "<div class=\"locAltNames\">".implode(" | ", $fs)."</div>"; } // Coder / society names @@ -411,26 +407,13 @@ else $fs[] = $name["name"]; } - echo "<br />[".implode(", ", $fs)."]"; + echo "<div class=\"locCoders\">".implode(", ", $fs)."</div>"; } } - echo "</td>\n"; - - if (++$n >= $maxColumns) - { - echo " </tr>\n"; - $n = 0; - } + echo "</div>\n"; } - - if ($n > 0) - { - while ($n++ < $maxColumns) - echo " <td></td>\n"; - echo " </tr>\n"; - } - echo "</table>\n"; + echo "</div>\n"; } echo
--- a/www/maps.css Tue Apr 25 17:29:42 2017 +0300 +++ b/www/maps.css Tue Apr 25 17:30:08 2017 +0300 @@ -1,27 +1,30 @@ body { - margin: 1em; color: #ded; background: #121; font-family: Verdana, Arial, helvetica, sans-serif; font-size: 10pt; + margin: 0.25em; } + .over { text-decoration: line-through; } -.noborder, img { +img { border: none; padding: 0px; } + div.batmud { border: none; text-align: center; padding-top: 1em; } + div.controls { display: flex; justify-content: space-around; @@ -39,7 +42,7 @@ margin-bottom: 0.1em; padding: 0.5em; border: 1px solid white; - border-radius: 0.3em; + border-radius: 0.25em; text-decoration: none; box-shadow: 2px 2px 1px #000; } @@ -63,6 +66,7 @@ background: white; } + .submit { color: white; background: #8a8; @@ -74,31 +78,59 @@ } +.locTable { + width: 100%; +} -table.loc { - width: 95%; +div.locCell, table.locTable td, div.locWizard { + border: 1px solid black; + text-align: center; + font-size: 1em; + padding: 0.2em; + margin: 0.1em; } -table.loc a, table.loc a:visited, table.loc a:active { +div.locCell { + display: inline-table; + vertical-align: top; + height: 5em; + width: 18%; + min-width: 10em; +} + +div.locWizard { + display: inline-table; + vertical-align: top; + height: 1em; + width: 18%; + min-width: 8em; +} + +.locTable a, .locTable a:visited, .locTable a:active { text-decoration: none; color: white; } -table.loc a:hover { +.locTable a:hover { text-shadow: 1px 1px 2px #000; text-decoration: underline; } -table.loc td { - border: 1px solid black; - text-align: center; - font-size: 0.9em; - padding: 0.2em; +div.locHeader { + background: rgba(0,0,0,0.25); + padding-bottom: 0.25em; +} + +div.locCoders { + background: rgba(255,255,255,0.15); + margin-top: 0.25em; + padding: 0.15em; } + div.quests { - max-width: 50%; + width: 49%; display: inline-block; vertical-align: top; } @@ -107,6 +139,7 @@ width: 100%; } + table.area { width: 100%; } @@ -127,51 +160,64 @@ color: white; } -div.wizinfo { + +div.wizInfoBox { + display: inline-table; + height: 100%; background: black; + padding: 0.5em; + margin: 0.5em; + color: red; border: 1px solid white; - padding: 6px; - margin: 8px; - color: red; + border-radius: 0.5em; } -div.wizinfo table { - margin: 0px; - padding: 0px; +div.wizImage { + display: inline-block; + vertical-align: middle; + max-width: 28%; + padding: 0.5em; } -div.wizinfo * td.img { - text-align: center; +div.wizImage img { + width: 100%; + height: auto; + border-radius: 0.5em; } -div.wizinfo * td.info { - width: 60%; +div.wizInfo { + display: inline-block; + vertical-align: middle; + width: 68%; + padding: 0; } -.laenor { background: #955; } -.rothikgen { background: #595; } -.lucentium { background: #559; } -.desolathya { background: #599; } -.furnachia { background: #959; } -.renardy { background: #c70; } -.tormentas { background: #7a0; } -.hcbat { background: #444; } -.special { background: #a06; } -.all { background: #0af; } +.laenor { background: #955 !important; } +.rothikgen { background: #595 !important; } +.lucentium { background: #559 !important; } +.desolathya { background: #599 !important; } +.furnachia { background: #959 !important; } +.renardy { background: #c70 !important; } +.tormentas { background: #7a0 !important; } +.hcbat { background: #444 !important; } +.special { background: #a06 !important; } +.all { background: #0af !important; } .tooltip { position: absolute; display: none; min-width: 200px; + max-width: 30em; background-color: white; color: black; - padding: 5px; + padding: 0.5em; font-size: 0.9em; z-index: 11; - border: 1px solid gray; - border-radius: 8px; + border: 1px solid #ccc; + border-radius: 0.5em; + box-shadow: 6px 6px 6px #000; } .holder { display: block; color: #000; } @@ -187,10 +233,10 @@ #contents { position: absolute; - right: 1em; - left: 18em; + right: 0.25em; + left: 17em; background: #565; - border-radius: 15px; + border-radius: 1em; padding: 1em; } @@ -203,7 +249,7 @@ color: white; text-shadow: 2px 2px 2px #000; - border-radius: 8px; + border-radius: 0.25em; } #contents a { @@ -219,16 +265,15 @@ h2,h3 { padding: 0.5em; - border-radius: 8px; + border-radius: 0.25em; background: #343; color: white; text-shadow: 2px 2px 2px #000; } -#mainmenu, #extrabox { +#mainMenu, #extraBox { position: fixed; width: 15em; - min-width: 15em; padding: 0.2em; @@ -236,47 +281,45 @@ color: black; border: 6px solid #343; - border-radius: 15px; + border-radius: 1em; + + left: 0.25em; } -#extrabox { +#extraBox { z-index: 4; - left: 1em; bottom: 0.5em; display: inline-table; text-align: center; } -#extrabox:hover { +#extraBox:hover { z-index: 8; } -#extrabox a { +#extraBox a { display: inline-table; color: white; text-decoration: none; background: #454; padding: 0.4em; border: 1px solid #676; - border-radius: 0.3em; + border-radius: 0.25em; text-shadow: 1px 1px 1px #000; min-width: 1em; } -#extrabox a:hover { +#extraBox a:hover { color: black; background: #fff; text-shadow: none; } -#mainmenu { +#mainMenu { z-index: 5; - - left: 1em; - top: 1em; } -#mainmenu a.item { +#mainMenu a.menuItem { font-size: 1em; text-decoration: none; color: black; @@ -286,16 +329,17 @@ margin: 0.2em; padding: 0.5em; - border-radius: 8px; + border-radius: 0.25em; } -#mainmenu a.item:hover { +#mainMenu a.menuItem:hover { color: white; - background: #898; + background: #9a9; text-shadow: 2px 2px 2px #000; + transition: all 0.15s; } -#mainmenu h1, #extrabox h1 { +#mainMenu h1, #extraBox h1 { margin: 0px; padding-top: 0.5em; padding-bottom: 0.5em; @@ -305,7 +349,7 @@ text-shadow: 2px 2px 2px #000; } -#mainmenu h1 a { +#mainMenu h1 a { text-decoration: none; color: white; } @@ -317,6 +361,7 @@ padding-bottom: 2em; } + #contents a.gmapLink { text-shadow: 1px 1px 1px #000; font-size: 1.5em;
--- a/www/menu.inc.php Tue Apr 25 17:29:42 2017 +0300 +++ b/www/menu.inc.php Tue Apr 25 17:30:08 2017 +0300 @@ -1,14 +1,15 @@ -<div id="mainmenu"> +<div id="mainMenu"> <h1><a href="<?php echo $pageMapURL; ?>"><?php echo $pageTitle; ?></a></h1> - <a class="item" href="loc.php">All locations</a> - <a class="item" href="latest.php">Latest added locations</a> - <a class="item" href="level.php">Limited areas</a> - <a class="item" href="quests.php">Quests information</a> - <a class="item" href="loc.php?c">Player cities</a> - <a class="item" href="ss.php">Secret societies</a> - <a class="item" href="loc.php?c&n=limbo">Pcities in "limbo"</a> - <a class="item" href="info.php">List of Wizards</a> - <a class="item" href="faq.php">FAQ</a> + <a class="menuItem" href="loc.php">All locations</a> + <a class="menuItem" href="latest.php">Latest added locations</a> + <a class="menuItem" href="level.php">Limited areas</a> + <a class="menuItem" href="quests.php">Quests information</a> + <a class="menuItem" href="loc.php?c">Player cities</a> + <a class="menuItem" href="ss.php">Secret societies</a> + <a class="menuItem" href="loc.php?c&n=limbo">Pcities in "limbo"</a> + <a class="menuItem" href="info.php">List of Wizards</a> + <a class="menuItem" href="simple.php">Simple location list</a> + <a class="menuItem" href="faq.php">FAQ</a> <div class="batmud"><a href="http://www.bat.org/play"><img src="/luk/img/batmud.png" alt="BatMUD - 25 Years of Adventure" /></a></div> </div>
--- a/www/quests.php Tue Apr 25 17:29:42 2017 +0300 +++ b/www/quests.php Tue Apr 25 17:30:08 2017 +0300 @@ -26,7 +26,7 @@ "<td class=\"".$area["continent"]."\">". mpGetMapLink($area, !isset($continentList[$area["continent"]]) || $continentList[$area["continent"]][4]). "</td>". - ($hcbat ? "" : "<td>".$continentList[$area["continent"]][0]."</td>"); + ($hcbat ? "" : "<td><a href=\"loc.php?n=".$area["continent"]."\">".$continentList[$area["continent"]][0]."</a></td>"); } @@ -76,7 +76,7 @@ { $totalLQ = 0; echo - " <table class=\"loc quests\">\n". + " <table class=\"locTable quests\">\n". " <tr>\n". " <th>Level</th>\n". " <th>Quest name</th>\n". @@ -114,7 +114,7 @@ { $totalAQ = 0; echo - " <table class=\"loc quests\">\n". + " <table class=\"locTable quests\">\n". " <tr>\n". " <th>Quest name</th>\n". " <th>Location</th>\n".