Merge pull request #78 from derula/html-css-cleanup

HTML/CSS cleanup

public/assets/script.js

@@ -1,15 +1,15 @@
 $(() => {
+    $.fn.roundify = function () { return $(this).addClass('ui-widget-content ui-corner-all')};
     const defaultPortrait = '/assets/images/image_default.png';
     const wrap = (button) => {
-        $('#main').wrapInner('<form method="POST">');
+        $('main').wrapInner('<form method="POST">');
         $('.editable').each((i, e) => {
-            const prop = $(e).data('prop'), isText = $(e).is('._text');
+            const prop = $(e).data('prop'), isText = $(e).is('.text');
             const field = $(isText ? '<textarea>' : '<input>').attr({
                 id: 'property-' + prop.name,
-                class: 'ui-widget-content ui-corner-all',
                 name: prop.name,
                 maxlength: isText ? 50000 : 40,
-            });
+            }).roundify();
             let val = $(e).html();
             if (!isText) {
                 field.attr({type: prop.constraint || 'text'});
@@ -21,7 +21,7 @@ $(() => {
             field.val(val);
             $(e).html(field);
         });
-        $('textarea', '.editable._text').sceditor({
+        $('.editable.text').toggleClass('text _text').find('textarea').sceditor({
             style: '/assets/sceditor.min.css',
             emoticonsRoot: '/assets/images/',
             width: '100%',
@@ -49,18 +49,18 @@ $(() => {
     };
     const unwrap = (button) => {
         $('.portrait').siblings().remove().addBack().unwrap();
-        $('form', '#main').children().unwrap();
+        $('form', 'main').children().unwrap();
         $('> textarea', '.editable._text').each((i, e) => {
             const instance = $(e).sceditor('instance');
             instance.val($('<div>').html($.parseHTML(instance.val().substr(0, 50000))).html());
             instance.updateOriginal();
             instance.destroy();
-        });
+        }).parent().toggleClass('text _text');
         $('.editable').each((i, e) => {
             const prop = $(e).data('prop');
             const field = $('input, textarea', e);
             let val = field.val();
-            if (!$(e).is('._text')) {
+            if (!$(e).is('.text')) {
                 val = $('<div>').text(val).html();
             }
             field.replaceWith(val);
@@ -82,7 +82,7 @@ $(() => {
     const OK = Close;
     $('#edit').button({label: 'Change profile'}).click((e) => {
         e.preventDefault();
-        ($('#main').children().is('form') ? unwrap : wrap)($(e.target));
+        ($('main').children().is('form') ? unwrap : wrap)($(e.target));
     });
     $('#changePortrait').dialog({autoOpen: false, modal: true, buttons: {Apply, Close}});
     $('#changePW').dialog({
@@ -95,10 +95,10 @@ $(() => {
             .fail(() => {$('#pwChangeFailed').dialog('open')});
     });
     $('#pwChanged, #pwChangeFailed, #openLink').dialog({autoOpen: false, modal: true, buttons: {OK}});
-    $('.tabs').tabs();
+    $('.tabs').parent().tabs();
     $('button.link').button().click((e) => document.location = $(e.target).data('href'));
+    $('input').not('[type=submit]').roundify();
     $('input[type=submit]').button();
-    $('input[type=checkbox]').checkboxradio();
     $('input[type=password]').on('input', (e) => {
         const t = $(e.target), o = t.closest(':not(label, input)').find('[name=' + t.attr('name') + ']');
         if (o.length > 1) {
@@ -120,7 +120,7 @@ $(() => {
             const latest = data[0] ? data[0].tag_name : null;
             if (latest && latest != current) {
                 const elem =
-                    $('<aside>').text('Your SWLRP add-on is out of date.')
+                    $('<aside>').addClass('toast').text('Your SWLRP add-on is out of date.')
                     .append('Your version: ' + current + ', available:' + latest).append('<br>')
                     .append('Please consider downloading and installing the latest version.')
                 $('body').prepend(elem);

src/Views/Editor.php

@@ -32,10 +32,8 @@ protected function getDialogs(): string {
             'dialogs/editor', ['name' => $this->getProfile()['nick']]
         );
     }
-    protected function decorate(array $prop, string $type) {
-        $value = $prop['value'];
-        unset($prop['value'], $prop['title']);
-        $data = htmlspecialchars(json_encode(array_filter($prop)));
-        return "<div class=\"editable _$type\" data-prop=\"$data\">$value</div>";
+    protected function decorate(array $prop, string $type): string {
+        $attributes = ['data-prop' => json_encode(array_filter($prop))];
+        return $this->doDecorate($prop, "editable $type", $attributes);
     }
 }

src/Views/Profile.php

@@ -77,7 +77,15 @@ private function loadProfileData(array $data) {
             $prop['value'] = $value;
         }
     }
-    protected function decorate(array $prop, string $type) {
-        return $prop['value'];
+    protected function decorate(array $prop, string $type): string {
+        return $this->doDecorate($prop, $type);
+    }
+    protected function doDecorate(array $prop, string $class, array $attributes=[]): string {
+        $attributes += ['class' => $class, 'title' => $prop['title']];
+        foreach ($attributes as $key => &$value) {
+            $value = $key . '="' . htmlspecialchars($value) . '"';
+        }
+        $attributes = implode(' ', $attributes);
+        return "<div $attributes>$prop[value]</div>";
     }
 }

templates/dialogs/editor.php

@@ -2,9 +2,9 @@
     <form>
         Enter the fields below to change the password for <?=$name?>.<br />
         <input name="name" type="hidden" value="<?=$name?>" /><br />
-        <label>Old password: <input name="password" type="password" class="ui-widget-content ui-corner-all" /></label><br />
-        <label>New password: <input name="pwnew" type="password" class="ui-widget-content ui-corner-all" /></label><br />
-        <label>Repeat new password: <input name="pwnew" type="password" class="ui-widget-content ui-corner-all" /></label>
+        <label>Old password: <input name="password" type="password" /></label><br />
+        <label>New password: <input name="pwnew" type="password" /></label><br />
+        <label>Repeat new password: <input name="pwnew" type="password" /></label>
     </form>
 </dialog>
 <dialog id="pwChanged" title="Success">
@@ -19,6 +19,6 @@
     <label>
         Please enter the URL for your character portrait. Recommended size: 200x200.
         Images larger than this will be resized to fit.<br />
-        <input type="text" maxlength="255" class="ui-widget-content ui-corner-all" />
+        <input type="text" maxlength="255" />
     </label>
 </dialog>

templates/dialogs/profile.php

@@ -1,6 +1,6 @@
 <dialog id="openLink" title="You clicked a link!">
     You have clicked on the following link:<br />
-    <input type="text" class="ui-widget-content ui-corner-all" /><br />
+    <input type="text" /><br />
     It is recommended that you copy the link and open it in an external browser.<br />
     If you are sure you want to open it in this window instead, please click <a>here</a>.
 </dialog>

templates/error.php

@@ -1,11 +1,5 @@
-<div id="container" class="single_column">
-    <div class="wrapper">
-        <div class="column_one">
-            <div class="column_text">
-                <h2>An Error Occurred</h2>
-                <p>We aren't sure what happened.  Try whatever you were doing again.</p>
-                <p>If it still doesn't work, please submit a bug report with as many details as you can!</p>
-            </div>
-        </div>
-    </div>
-</div>
+<section>
+    <h2>An Error Occurred</h2>
+    <p>We aren't sure what happened.  Try whatever you were doing again.</p>
+    <p>If it still doesn't work, please submit a bug report with as many details as you can!</p>
+</section>

templates/error404.php

@@ -1,12 +1,5 @@
-<div id="container" class="single_column">
-    <div class="wrapper">
-        <div class="column_one">
-            <div class="column_text">
-                <h2>File Not Found!</h2>
-                <p>This mod tried to load something that doesn't exist. Please close and re-open your profile window to try again.</p>
-
-                <p>If this problem persists, please log a bug report!</p>
-            </div>
-        </div>
-    </div>
-</div>
+<section>
+    <h2>File Not Found!</h2>
+    <p>This mod tried to load something that doesn't exist. Please close and re-open your profile window to try again.</p>
+    <p>If this problem persists, please log a bug report!</p>
+</section>

templates/layout.php

@@ -12,5 +12,5 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sceditor/1.5.2/themes/monocons.min.css"
       integrity="sha256-6DjgI077lS1q2rG+PzkxbKV4tMrOkhNla9DD5NF1hy8=" crossorigin="anonymous" />
 <link rel="stylesheet" href="<?=$this->assetUrl('mod.css')?>" />
-<section id="main"><?=$content?></section>
+<main><?=$content?></main>
 <?=$dialogs?>

templates/login.php

@@ -1,16 +1,10 @@
-<div id="container" class="single_column">
-    <div class="wrapper">
-        <div class="column_one">
-            <div class="column_text">
-                <h2>Please Log In to Edit</h2>
-                <form action="?" method="POST">
-                    <label>Password: <input name="password" type="password" class="ui-widget-content ui-corner-all" /></label><br />
+<section>
+    <h2>Please Log In to Edit</h2>
+    <form action="?" method="POST">
+        <label>Password: <input name="password" type="password" /></label><br />
 <? foreach ($names as $key => $value): ?>
-                    <input type="hidden" name="<?=$key?>" value="<?=$value?>" />
+        <input type="hidden" name="<?=$key?>" value="<?=$value?>" />
 <? endforeach ?>
-                    <input type="submit" value="Log in" />
-                </form>
-            </div>
-        </div>
-    </div>
-</div>
+        <input type="submit" value="Log in" />
+    </form>
+</section>

templates/noprofile.php

@@ -1,19 +1,7 @@
-<div id="container" class="no_profile">
-    <div class="wrapper">
-        <div class="column_one">
-            <div class="column_text">
-                <h2><?=$name?></h2>
-                <p><?=$name?> doesn't have a profile yet!</p>
-                <p>Let them know this mod exists!</p>
-                <p>/tell <?=$name?> (( Hey! If you're a roleplayer, have you seen the SWLRP Roleplay Profile Add-On? <?=$serverUrl?> ))</p>
-            </div>
-        </div>
-        <div class="column_two">
-            <div class="column_text">
-                <div class="headshot">
-                    <img src="/assets/images/image_noprofile.png" />
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
+<aside><img src="/assets/images/image_noprofile.png" /></aside>
+<section>
+    <h2><?=$name?></h2>
+    <p><?=$name?> doesn't have a profile yet!</p>
+    <p>Let them know this mod exists!</p>
+    <p>/tell <?=$name?> (( Hey! If you're a roleplayer, have you seen the SWLRP Roleplay Profile Add-On? <?=$serverUrl?> ))</p>
+</section>

templates/notLoggedIn.php

@@ -1,14 +1,6 @@
-<div id="container" class="single_column">
-    <div class="wrapper">
-        <div class="column_one">
-            <div class="column_text">
-                <h2>Not Logged In</h2>
-                <p>You have attempted to perform an action that is only possible when logged in.</p>
-
-                <p>Please close and re-open your profile window to try again.</p>
-            </div>
-        </div>
-    </div>
-</div>
-
+<section>
+    <h2>Not Logged In</h2>
+    <p>You have attempted to perform an action that is only possible when logged in.</p>
 
+    <p>Please close and re-open your profile window to try again.</p>
+</section>

templates/profile.php

@@ -1,41 +1,30 @@
-<div id="container" <? if (static::EDIT_MODE_ENABLED === $this->getEditMode()): ?>class="editmode"<? endif ?>>
-    <div id="tabs" class="tabs">
-        <ul>
+<nav class="tabs">
+    <ul>
 <? foreach ($structure as $section): ?>
-            <li><a href="#tabs-<?=$section['name']?>"><?=$section['title']?></a></li>
+        <li><a href="#tab-<?=$section['name']?>"><?=$section['title']?></a></li>
 <? endforeach ?>
-        </ul>
+    </ul>
+</nav>
 <? foreach ($structure as $section): ?>
-        <div id="tabs-<?=$section['name']?>" class="wrapper">
-            <div class="column_one">
-                <div class="column_text">
-<? foreach ($section['texts'] as $prop): ?>
-                    <div>
-                        <h3><?=$prop['title']?></h3>
-                        <article><?=$this->decorate($prop, 'text')?></article>
-                    </div>
-<? endforeach ?>
-                </div>
-            </div>
-            <div class="column_two">
-                <div class="column_text">
-                    <div class="headshot">
-                        <img class="portrait" src="<?=$portrait ?: '/assets/images/image_default.png'?>" />
-                    </div>
+<div id="tab-<?=$section['name']?>" <? if (static::EDIT_MODE_DISABLED !== $this->getEditMode()): ?>class="editmode"<? endif ?>>
+<? if (!empty($section['properties'])): ?>
+    <aside>
+        <img class="portrait" src="<?=$portrait ?: '/assets/images/image_default.png'?>" />
 <? foreach ($section['properties'] as $prop): ?>
-                    <div class="field_title <?=$prop['name']?>"><?=$prop['title']?></div>
-                    <div class="field_content"><?=$this->decorate($prop, 'property')?></div>
+        <?=$this->decorate($prop, 'property')?>
 <? endforeach ?>
-                </div>
-            </div>
-        </div>
+    </aside>
+<? endif ?>
+    <section>
+<? foreach ($section['texts'] as $prop): ?>
+        <h3><?=$prop['title']?></h3>
+        <article><?=$this->decorate($prop, 'text')?></article>
+<? endforeach ?>
+    </section>
+</div>
 <? endforeach ?>
-    </div>
-    <div id="editbuttons">
 <? if (static::EDIT_MODE_ENABLED === $this->getEditMode()): ?>
-        <button id="edit"></button>
+<button id="edit"></button>
 <? elseif (static::EDIT_MODE_REQUESTED === $this->getEditMode()): ?>
-        <button class="link" data-href="/front/<?=htmlspecialchars($this->getRequestString())?>">Log in</a>
+<button id="edit" class="link" data-href="/front/<?=htmlspecialchars($this->getRequestString())?>">Log in</a>
 <? endif ?>
-    </div>
-</div>

templates/register.php

@@ -1,22 +1,16 @@
-<div id="container" class="single_column">
-    <div class="wrapper">
-        <div class="column_one">
-            <div class="column_text">
-                <h2>Register Your Password</h2>
-                <form action="?" method="POST">
-                    <p>
-                        Please choose a password to secure your profile.<br />
-                        You can leave this empty, but it is not recommended.<br />
-                        If you decide not to enter a password, anyone can edit your profile!
-                    </p>
-                    <label>Password: <input name="password" type="password" class="ui-widget-content ui-corner-all" /></label><br />
-                    <label>Repeat password: <input name="password" type="password" class="ui-widget-content ui-corner-all" /></label><br />
+<section>
+    <h2>Register Your Password</h2>
+    <form action="?" method="POST">
+        <p>
+            Please choose a password to secure your profile.<br />
+            You can leave this empty, but it is not recommended.<br />
+            If you decide not to enter a password, anyone can edit your profile!
+        </p>
+        <label>Password: <input name="password" type="password" /></label><br />
+        <label>Repeat password: <input name="password" type="password" /></label><br />
 <? foreach ($names as $key => $value): ?>
-                    <input type="hidden" name="<?=$key?>" value="<?=$value?>" />
+        <input type="hidden" name="<?=$key?>" value="<?=$value?>" />
 <? endforeach ?>
-                    <input type="submit" value="Set password" />
-                </form>
-            </div>
-        </div>
-    </div>
-</div>
+        <input type="submit" value="Set password" />
+    </form>
+</section>