diff options
-rw-r--r-- | template/admin/html/auth.php | 20 | ||||
-rw-r--r-- | template/admin/html/database.php | 12 | ||||
-rw-r--r-- | template/admin/html/page/form.php | 60 | ||||
-rw-r--r-- | template/admin/html/post/form.php | 60 | ||||
-rw-r--r-- | template/admin/html/user/form.php | 72 | ||||
-rw-r--r-- | template/admin/rsrc/main.css | 60 | ||||
-rw-r--r-- | template/admin/rsrc/main.js | 135 |
7 files changed, 205 insertions, 214 deletions
diff --git a/template/admin/html/auth.php b/template/admin/html/auth.php index 0ab2d90..f5852c1 100644 --- a/template/admin/html/auth.php +++ b/template/admin/html/auth.php @@ -10,21 +10,21 @@ <form action="" method="POST"> <input type="hidden" name="token" value="<?=Application::getSecurityToken()?>" /> - <section class="flex"> - <section> + <div class="flex"> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-user-secret"></i></div> <div class="form-label-flex"><label for="form_username"><?=$Language->template('label_username')?></label></div> <div class="form-field-flex"><input id="form_username" name="username" value="<?=escapeHTML($FORM['DATA']['USERNAME'])?>" /></div> - </section> - </section> - <section class="flex"> - <section> + </div> + </div> + <div class="flex"> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-key"></i></div> <div class="form-label-flex"><label for="form_password"><?=$Language->template('label_password')?></label></div> <div class="form-field-flex"><input type="password" id="form_password" name="password" /></div> - </section> - </section> - <section class="flex flex-padding background"> + </div> + </div> + <div class="flex flex-padding background"> <input type="submit" name="auth" value="Auth" /> - </section> + </div> </form>
\ No newline at end of file diff --git a/template/admin/html/database.php b/template/admin/html/database.php index 3aad84e..8e69459 100644 --- a/template/admin/html/database.php +++ b/template/admin/html/database.php @@ -10,17 +10,17 @@ <form action="" method="POST"> <input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" /> - <section class="flex flex-padding"> + <div class="flex flex-padding"> <textarea id="content-editor" placeholder="<?=$Language->template('database_warning')?>" name="command"><?=escapeHTML($FORM['COMMAND'])?></textarea> - </section> + </div> <?php if($FORM['RESULT']): ?> - <section class="flex flex-padding background flex-direction-column"> + <div class="flex flex-padding background flex-direction-column"> <pre id="database-result"><?=escapeHTML($FORM['RESULT'])?></pre> - </section> + </div> <?php endif; ?> - <section class="flex flex-padding background"> + <div class="flex flex-padding background"> <input type="submit" name="execute" value="Execute" /> - </section> + </div> </form>
\ No newline at end of file diff --git a/template/admin/html/page/form.php b/template/admin/html/page/form.php index 4ab61ae..93c45fe 100644 --- a/template/admin/html/page/form.php +++ b/template/admin/html/page/form.php @@ -8,13 +8,13 @@ <input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" /> <?php if($FORM['TYPE'] !== 'DELETE'): ?> - <section class="flex flex-responsive"> - <section> + <div class="flex flex-responsive"> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-database"></i></div> <div class="form-label-flex"><label for="form_id">ID</label></div> <div class="form-field-flex"><input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="[AUTO_INCREMENT]" value="<?=escapeHTML($FORM['DATA']['ID'])?>" /></div> - </section> - <section> + </div> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-user"></i></div> <div class="form-label-flex"><label for="form_user"><?=$Language->template('label_user')?></label></div> <div class="form-field-flex"> @@ -24,46 +24,46 @@ <?php endforeach; ?> </select> </div> - </section> - </section> - <section class="flex flex-responsive"> - <section> + </div> + </div> + <div class="flex flex-responsive"> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-file-text-o"></i></div> <div class="form-label-flex"><label for="form_name"><?=$Language->template('label_name')?></label></div> <div class="form-field-flex"><input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" /></div> - </section> - <section> + </div> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-link"></i></div> <div class="form-label-flex"><label for="form_slug"><?=$Language->template('label_slug')?></label></div> <div class="form-field-flex"><input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" /></div> - </section> - </section> - <section class="flex flex-responsive"> - <section> + </div> + </div> + <div class="flex flex-responsive"> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-clock-o"></i></div> <div class="form-label-flex"><label for="form_time_insert"><?=$Language->template('label_insert')?></label></div> <div class="form-field-flex"><input id="form_time_insert" name="time_insert" placeholder="[YYYY-MM-DD HH:II:SS]" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" /></div> - </section> - <section> + </div> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-clock-o"></i></div> <div class="form-label-flex"><label for="form_time_update"><?=$Language->template('label_update')?></label></div> <div class="form-field-flex"><input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : '[CURRENT_TIMESTAMP]')?>" value="" /></div> - </section> - </section> - <section class="flex flex-padding"> + </div> + </div> + <div class="flex flex-padding"> <textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea> - </section> - <section class="flex flex-padding background flex-arguments"> + </div> + <div class="flex flex-padding background flex-arguments"> <input id="form_argv" name="argv" maxlength="100" placeholder="[ARGUMENT_FOO=one|ARGUMENT_BAR=two …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" /> - </section> - <section class="flex flex-padding background flex-emoticons"> + </div> + <div class="flex flex-padding background flex-emoticons"> <ul id="emoticon-list" class="button-list emoticons"> <?php foreach(getEmoticons() as $emoticon => $data):?> <li data-emoticon="<?=$emoticon?>" title="<?=$data[1]?>"><?=$data[0]?></li> <?php endforeach; ?> </ul> - </section> - <section class="flex flex-padding background"> + </div> + <div class="flex flex-padding background"> <ul id="markdown-list" class="button-list markdown"> <li data-markdown="bold" class="fa fa-bold" title="<?=$Language->template('markdown_bold')?>"></li> <li data-markdown="italic" class="fa fa-italic" title="<?=$Language->template('markdown_italic')?>"></li> @@ -75,14 +75,14 @@ <li data-markdown="list_ul" class="fa fa-list-ul" title="<?=$Language->template('markdown_list_ul')?>"></li> <li data-markdown="list_ol" class="fa fa-list-ol" title="<?=$Language->template('markdown_list_ol')?>"></li> </ul> - </section> + </div> <?php else: ?> - <section class="flex flex-padding background flex-direction-column"> + <div class="flex flex-padding background flex-direction-column"> <?=$HTML?> - </section> + </div> <?php endif; ?> - <section class="flex flex-padding background"> + <div class="flex flex-padding background"> <?php if($FORM['TYPE'] === 'INSERT'): ?> <input type="submit" name="insert" value="<?=$Language->text('insert')?>" /> <?php elseif($FORM['TYPE'] === 'UPDATE'): ?> @@ -90,5 +90,5 @@ <?php elseif($FORM['TYPE'] === 'DELETE'): ?> <input type="submit" name="delete" value="<?=$Language->text('delete')?>" id="delete-button" data-text="<?=$Language->template('sure')?>" /> <?php endif; ?> - </section> + </div> </form>
\ No newline at end of file diff --git a/template/admin/html/post/form.php b/template/admin/html/post/form.php index 3ad4376..14888aa 100644 --- a/template/admin/html/post/form.php +++ b/template/admin/html/post/form.php @@ -8,13 +8,13 @@ <input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" /> <?php if($FORM['TYPE'] !== 'DELETE'): ?> - <section class="flex flex-responsive"> - <section> + <div class="flex flex-responsive"> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-database"></i></div> <div class="form-label-flex"><label for="form_id">ID</label></div> <div class="form-field-flex"><input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="[AUTO_INCREMENT]" value="<?=escapeHTML($FORM['DATA']['ID'])?>" /></div> - </section> - <section> + </div> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-user"></i></div> <div class="form-label-flex"><label for="form_user"><?=$Language->template('label_user')?></label></div> <div class="form-field-flex"> @@ -24,46 +24,46 @@ <?php endforeach; ?> </select> </div> - </section> - </section> - <section class="flex flex-responsive"> - <section> + </div> + </div> + <div class="flex flex-responsive"> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-newspaper-o"></i></div> <div class="form-label-flex"><label for="form_name"><?=$Language->template('label_name')?></label></div> <div class="form-field-flex"><input id="form_name" name="name" value="<?=escapeHTML($FORM['DATA']['NAME'])?>" /></div> - </section> - <section> + </div> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-link"></i></div> <div class="form-label-flex"><label for="form_slug"><?=$Language->template('label_slug')?></label></div> <div class="form-field-flex"><input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" /></div> - </section> - </section> - <section class="flex flex-responsive"> - <section> + </div> + </div> + <div class="flex flex-responsive"> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-clock-o"></i></div> <div class="form-label-flex"><label for="form_time_insert"><?=$Language->template('label_insert')?></label></div> <div class="form-field-flex"><input id="form_time_insert" name="time_insert" placeholder="[YYYY-MM-DD HH:II:SS]" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" /></div> - </section> - <section> + </div> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-clock-o"></i></div> <div class="form-label-flex"><label for="form_time_update"><?=$Language->template('label_update')?></label></div> <div class="form-field-flex"><input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : '[CURRENT_TIMESTAMP]')?>" value="" /></div> - </section> - </section> - <section class="flex flex-padding"> + </div> + </div> + <div class="flex flex-padding"> <textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea> - </section> - <section class="flex flex-padding background flex-arguments"> + </div> + <div class="flex flex-padding background flex-arguments"> <input id="form_argv" name="argv" maxlength="100" placeholder="[ARGUMENT_FOO=one|ARGUMENT_BAR=two …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" /> - </section> - <section class="flex flex-padding background flex-emoticons"> + </div> + <div class="flex flex-padding background flex-emoticons"> <ul id="emoticon-list" class="button-list emoticons"> <?php foreach(getEmoticons() as $emoticon => $data):?> <li data-emoticon="<?=$emoticon?>" title="<?=$data[1]?>"><?=$data[0]?></li> <?php endforeach; ?> </ul> - </section> - <section class="flex flex-padding background"> + </div> + <div class="flex flex-padding background"> <ul id="markdown-list" class="button-list markdown"> <li data-markdown="bold" class="fa fa-bold" title="<?=$Language->template('markdown_bold')?>"></li> <li data-markdown="italic" class="fa fa-italic" title="<?=$Language->template('markdown_italic')?>"></li> @@ -75,14 +75,14 @@ <li data-markdown="list_ul" class="fa fa-list-ul" title="<?=$Language->template('markdown_list_ul')?>"></li> <li data-markdown="list_ol" class="fa fa-list-ol" title="<?=$Language->template('markdown_list_ol')?>"></li> </ul> - </section> + </div> <?php else: ?> - <section class="flex flex-padding background flex-direction-column"> + <div class="flex flex-padding background flex-direction-column"> <?=$HTML?> - </section> + </div> <?php endif; ?> - <section class="flex flex-padding background"> + <div class="flex flex-padding background"> <?php if($FORM['TYPE'] === 'INSERT'): ?> <input type="submit" name="insert" value="<?=$Language->text('insert')?>" /> <?php elseif($FORM['TYPE'] === 'UPDATE'): ?> @@ -90,5 +90,5 @@ <?php elseif($FORM['TYPE'] === 'DELETE'): ?> <input type="submit" name="delete" value="<?=$Language->text('delete')?>" id="delete-button" data-text="<?=$Language->template('sure')?>" /> <?php endif; ?> - </section> + </div> </form>
\ No newline at end of file diff --git a/template/admin/html/user/form.php b/template/admin/html/user/form.php index be8502c..a260ee0 100644 --- a/template/admin/html/user/form.php +++ b/template/admin/html/user/form.php @@ -8,68 +8,68 @@ <input type="hidden" name="token" value="<?=$FORM['TOKEN']?>" /> <?php if($FORM['TYPE'] !== 'DELETE'): ?> - <section class="flex flex-responsive"> - <section> + <div class="flex flex-responsive"> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-database"></i></div> <div class="form-label-flex"><label for="form_id">ID</label></div> <div class="form-field-flex"><input<?=($FORM['TYPE'] === 'UPDATE') ? ' disabled="disabled"' : '';?> id="form_id" name="id" type="number" placeholder="[AUTO_INCREMENT]" value="<?=escapeHTML($FORM['DATA']['ID'])?>" /></div> - </section> - <section> + </div> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-key"></i></div> <div class="form-label-flex"><label for="form_password"><?=$Language->template('label_password')?></label></div> <div class="form-field-flex"><input id="form_password" name="password" placeholder="[NO CHANGE]" value="<?=escapeHTML($FORM['DATA']['PASSWORD'])?>" type="password" /></div> - </section> - </section> - <section class="flex flex-responsive"> - <section> + </div> + </div> + <div class="flex flex-responsive"> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-user"></i></div> <div class="form-label-flex"><label for="form_fullname"><?=$Language->template('label_fullname')?></label></div> <div class="form-field-flex"><input id="form_fullname" name="fullname" value="<?=escapeHTML($FORM['DATA']['FULLNAME'])?>" /></div> - </section> - <section> + </div> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-envelope-o"></i></div> <div class="form-label-flex"><label for="form_mailaddr"><?=$Language->template('label_mailaddr')?></label></div> <div class="form-field-flex"><input id="form_mailaddr" name="mailaddr" value="<?=escapeHTML($FORM['DATA']['MAILADDR'])?>" /></div> - </section> - </section> - <section class="flex flex-responsive"> - <section> + </div> + </div> + <div class="flex flex-responsive"> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-user-secret"></i></div> <div class="form-label-flex"><label for="form_username"><?=$Language->template('label_username')?></label></div> <div class="form-field-flex"><input id="form_username" name="username" value="<?=escapeHTML($FORM['DATA']['USERNAME'])?>" /></div> - </section> - <section> + </div> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-link"></i></div> <div class="form-label-flex"><label for="form_slug"><?=$Language->template('label_slug')?></label></div> <div class="form-field-flex"><input id="form_slug" name="slug" value="<?=escapeHTML($FORM['DATA']['SLUG'])?>" /></div> - </section> - </section> - <section class="flex flex-responsive"> - <section> + </div> + </div> + <div class="flex flex-responsive"> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-clock-o"></i></div> <div class="form-label-flex"><label for="form_time_insert"><?=$Language->template('label_insert')?></label></div> <div class="form-field-flex"><input id="form_time_insert" name="time_insert" placeholder="[YYYY-MM-DD HH:II:SS]" value="<?=escapeHTML($FORM['DATA']['TIME_INSERT'])?>" /></div> - </section> - <section> + </div> + <div class="flex-item"> <div class="form-icon-flex"><i class="fa fa-clock-o"></i></div> <div class="form-label-flex"><label for="form_time_update"><?=$Language->template('label_update')?></label></div> <div class="form-field-flex"><input id="form_time_update" name="time_update" placeholder="<?=escapeHTML($FORM['DATA']['TIME_UPDATE'] ? $FORM['DATA']['TIME_UPDATE'] : '[CURRENT_TIMESTAMP]')?>" value="" /></div> - </section> - </section> - <section class="flex flex-padding"> + </div> + </div> + <div class="flex flex-padding"> <textarea id="content-editor" name="body" placeholder="[…]"><?=escapeHTML($FORM['DATA']['BODY'])?></textarea> - </section> - <section class="flex flex-padding background flex-arguments"> + </div> + <div class="flex flex-padding background flex-arguments"> <input id="form_argv" name="argv" maxlength="100" placeholder="[ARGUMENT_FOO=one|ARGUMENT_BAR=two …]" value="<?=escapeHTML($FORM['DATA']['ARGV'])?>" /> - </section> - <section class="flex flex-padding background flex-emoticons"> + </div> + <div class="flex flex-padding background flex-emoticons"> <ul id="emoticon-list" class="button-list emoticons"> <?php foreach(getEmoticons() as $emoticon => $data):?> <li data-emoticon="<?=$emoticon?>" title="<?=$data[1]?>"><?=$data[0]?></li> <?php endforeach; ?> </ul> - </section> - <section class="flex flex-padding background"> + </div> + <div class="flex flex-padding background"> <ul id="markdown-list" class="button-list markdown"> <li data-markdown="bold" class="fa fa-bold" title="<?=$Language->template('markdown_bold')?>"></li> <li data-markdown="italic" class="fa fa-italic" title="<?=$Language->template('markdown_italic')?>"></li> @@ -81,14 +81,14 @@ <li data-markdown="list_ul" class="fa fa-list-ul" title="<?=$Language->template('markdown_list_ul')?>"></li> <li data-markdown="list_ol" class="fa fa-list-ol" title="<?=$Language->template('markdown_list_ol')?>"></li> </ul> - </section> + </div> <?php else: ?> - <section class="flex flex-padding background flex-direction-column"> + <div class="flex flex-padding background flex-direction-column"> <?=$HTML?> - </section> + </div> <?php endif; ?> - <section class="flex flex-padding background"> + <div class="flex flex-padding background"> <?php if($FORM['TYPE'] === 'INSERT'): ?> <input type="submit" name="insert" value="<?=$Language->text('insert')?>" /> <?php elseif($FORM['TYPE'] === 'UPDATE'): ?> @@ -96,5 +96,5 @@ <?php elseif($FORM['TYPE'] === 'DELETE'): ?> <input type="submit" name="delete" value="<?=$Language->text('delete')?>" id="delete-button" data-text="<?=$Language->template('sure')?>" /> <?php endif; ?> - </section> + </div> </form>
\ No newline at end of file diff --git a/template/admin/rsrc/main.css b/template/admin/rsrc/main.css index aa13b22..ed79989 100644 --- a/template/admin/rsrc/main.css +++ b/template/admin/rsrc/main.css @@ -31,8 +31,8 @@ h5{font-size:0.55rem;}h6{font-size:0.50rem;} /* Document /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ html,body{margin:0;padding:0;} -main{padding:1rem;} -html{font-size:1.25rem;color:#333;background:url(background.png) fixed center #CCC;-webkit-hyphens:auto;hyphens:auto;} +main{padding:0.75rem;} +html{font-size:1.25rem;color:#333;background:url("background.png") fixed center #CCC;-webkit-hyphens:auto;hyphens:auto;} body{font-family:Ruda,sans-serif;font-size:0.7rem;line-height:1.2rem;} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @@ -54,9 +54,9 @@ body{font-family:Ruda,sans-serif;font-size:0.7rem;line-height:1.2rem;} #header-desc{font-size:0.6rem;font-weight:700;line-height:1rem;} #header-desc span{color:#CCC;} #header-logo{display:block;max-height:5rem;float:left;margin-right:0.5rem;} -.header-line{padding:0.5rem 1rem;overflow:hidden;} +.header-line{padding:0.5rem 0.75rem;overflow:hidden;} .header-line:first-child{background:#5E819F;position:sticky;top:0;} -.header-line:last-child{background:#EEE;border:0.05rem solid #AAA;border-left:none;border-right:none;padding:0.25rem 1rem;} +.header-line:last-child{background:#EEE;border:0.05rem solid #AAA;border-left:none;border-right:none;padding:0.25rem 0.75rem;} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ /* Footer @@ -85,11 +85,9 @@ body{font-family:Ruda,sans-serif;font-size:0.7rem;line-height:1.2rem;} #site-navi{clear:both;display:flex;box-sizing:border-box;justify-content:space-between;} #site-navi > div{display:flex;align-items:center;border:0.05rem solid #AAA;background:#EEE;} #site-navi > div > a{display:block;} -#site-navi > section{display:flex;overflow:hidden;align-items:center;} -#site-navi > section > div{border:0.05rem solid #AAA;background:#EEE;} #site-navi .disabled{pointer-events:none;color:#AAA;} -#site-navi .active a{background:#CCC !important;font-weight:600;pointer-events: none;} +#site-navi .active a{background:#CCC !important;font-weight:600;pointer-events:none;} #site-navi ol{list-style:none;margin:0;padding:0;} #site-navi li{float:left;display:inline-block;} @@ -111,13 +109,10 @@ img{border:none;max-width:100%;} #database-result{color:inherit;} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -/* Table elements +/* Tables /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -table{width:100%;margin:0 0 1rem;}td{vertical-align:middle;} -table,td{border-spacing:0;border-collapse:collapse;padding:0.5rem;border:0.05rem solid #000;} -thead,tr:nth-child(even){background:#EEE;} -thead > tr, th{font-weight:700;font-style:italic;} -thead > tr > td, th > td{text-align:center;} +table{width:100%;margin-bottom:1rem;}td{vertical-align:middle;} +table,td{padding:0.5rem;border:0.05rem solid #AAA;} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ /* Brackets @@ -138,8 +133,8 @@ a.brackets:before,a.brackets:after{color:#222;} .item-list-li{display:block;border:0.05rem solid #AAA;margin-bottom:1rem;clear:both;} .item-list-li > header, .item-list-li > footer{background:#EEE;overflow:hidden;} -.item-list-li > blockquote{margin:0;padding:1rem;font-family:inherit;} -.item-list-li > header{padding:0.5rem 1rem;border-bottom:0.05rem solid #AAA;position:sticky;top:0;} +.item-list-li > blockquote{margin:0;padding:0.75rem;font-family:inherit;} +.item-list-li > header{padding:0.5rem 0.75rem;border-bottom:0.05rem solid #AAA;position:sticky;top:0;} .item-list-li > footer{border-top:0.05rem solid #AAA;} .item-list-li > footer > ul{margin:0;padding:0;list-style:none;} .item-list-li > footer > ul > li{display:inline-block;float:left;} @@ -152,7 +147,7 @@ a.brackets:before,a.brackets:after{color:#222;} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ /* Argument list /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.arguments{list-style:none;margin:0;padding:0.25rem 1rem;background:#EEE;font-size:0.6rem;text-align:center;border-top:0.05rem solid #AAA;} +.arguments{list-style:none;margin:0;padding:0.25rem 0.75rem;background:#EEE;font-size:0.6rem;text-align:center;border-top:0.05rem solid #AAA;} .arguments > li{display:inline;} .arguments > li:before{content:"[";font-weight:700;margin-right:0.1rem;} .arguments > li:after{content:"]";font-weight:700;margin-left:0.1rem;} @@ -163,19 +158,18 @@ a.brackets:before,a.brackets:after{color:#222;} form{border:0.05rem solid #AAA;} .flex{display:flex;width:100%;justify-content:center;overflow:hidden;box-sizing:border-box;} -.flex + section{border-top:0.05rem solid #AAA;} -.flex > section {display:flex;box-sizing:padding-box;width:100%;} -.flex > section{border-right:0.05rem solid #AAA;} -.flex > section:last-child{border-right:none;} -.flex > section > div{display:flex;align-items:center;padding:0.5rem;box-sizing:border-box;} -.flex > section > div + div{border-left:0.05rem solid #AAA;} -.flex.flex-responsive > section{width:50%;} +.flex + .flex{border-top:0.05rem solid #AAA;} +.flex > .flex-item {display:flex;box-sizing:padding-box;width:100%;} +.flex > .flex-item{border-right:0.05rem solid #AAA;} +.flex > .flex-item:last-child{border-right:none;} +.flex > .flex-item > div{display:flex;align-items:center;padding:0.5rem;box-sizing:border-box;} +.flex > .flex-item > div + div{border-left:0.05rem solid #AAA;} +.flex.flex-responsive > .flex-item{width:50%;} .form-icon-flex{background:#DDD;width:10%;justify-content:center;} .form-label-flex{background:#DDD;width:30%;border-left:none !important;} .form-field-flex{width:60%;} -.fa + label{margin-left:0.25rem;} .background{background:#DDD;} .flex-padding{padding:0.5rem;} .flex-direction-column{flex-direction:column;} @@ -193,7 +187,7 @@ form{border:0.05rem solid #AAA;} /* Form elements /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ input,select,textarea{width:100%;box-sizing:padding-box;background:#EEE;color:#404040;font-family:inherit;font-size:0.7rem;padding:0.25rem;border:0.05rem solid #AAA;} -textarea{font-family:Kadwa,sans-serif;box-sizing:border-box;display:inline-block;resize:vertical;min-height:15rem;line-height:1.4rem;padding:0.75rem;} +textarea{font-family:Kadwa,sans-serif;box-sizing:border-box;display:inline-block;resize:vertical;min-height:15rem;line-height:1.3rem;padding:0.5rem;-webkit-hyphens:none;hyphens:none;} input[type="submit"]{text-transform:uppercase;} input:disabled{background:#DDD;color:#888;} input:disabled:hover{cursor:not-allowed;} @@ -208,33 +202,25 @@ label:after{content:":";} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ /* FontAwesome Icons /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.fa-rss:before{content:"\f09e"} .fa-bug:before{content:"\f188"} .fa-key:before{content:"\f084"} .fa-link:before{content:"\f0c1"} .fa-bold:before{content:"\f032"} .fa-code:before{content:"\f121"} -.fa-bars:before{content:"\f0c9"} .fa-user:before{content:"\f007"} -.fa-home:before{content:"\f015"} -.fa-plus:before{content:"\f067"} .fa-book:before{content:"\f02d"} .fa-italic:before{content:"\f033"} .fa-header:before{content:"\f1dc"} -.fa-search:before{content:"\f002"} .fa-trash-o:before{content:"\f014"} .fa-sign-in:before{content:"\f090"} .fa-clock-o:before{content:"\f017"} .fa-list-ul:before{content:"\f0ca"} .fa-list-ol:before{content:"\f0cb"} -.fa-smile-o:before{content:"\f118"} .fa-database:before{content:"\f1c0"} .fa-sign-out:before{content:"\f08b"} .fa-dashboard:before{content:"\f0e4"} .fa-picture-o:before{content:"\f03e"} .fa-envelope-o:before{content:"\f003"} -.fa-eyedropper:before{content:"\f1fb"} -.fa-rss-square:before{content:"\f143"} .fa-arrow-left:before{content:"\f060"} .fa-quote-right:before{content:"\f10e"} .fa-user-secret:before{content:"\f21b"} @@ -244,8 +230,6 @@ label:after{content:":";} .fa-external-link:before{content:"\f08e"} .fa-github-square:before{content:"\f092"} .fa-pencil-square-o:before{content:"\f044"} -.fa-question-circle:before{content:"\f059"} -.fa-pencil-square-o:before{content:"\f044"} .fa-exclamation-triangle:before{content:"\f071"} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @@ -260,15 +244,15 @@ label:after{content:":";} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @media only screen and (max-width:37.5rem) { .flex.flex-responsive{display:block;width:auto;} - .flex.flex-responsive > section {width:100%;} - .flex.flex-responsive > section + section{border-top:0.05rem solid #AAA;} + .flex.flex-responsive > .flex-item {width:100%;} + .flex.flex-responsive > .flex-item + .flex-item{border-top:0.05rem solid #AAA;} #main-navi{font-size:1rem;} #main-navi li span{display:none;} #main-navi li .fa{margin-right:0;} #main-navi a{padding:0.5rem;} - .flex-emoticons{display:none !important;} + .flex-emoticons{display:none;} } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ diff --git a/template/admin/rsrc/main.js b/template/admin/rsrc/main.js index a93b8be..f6f7884 100644 --- a/template/admin/rsrc/main.js +++ b/template/admin/rsrc/main.js @@ -7,10 +7,10 @@ var next = document.getElementById("next-site"); //============================================================================== // Handle arrow keys and change the location to the desired direction //============================================================================== -document.addEventListener("keyup", function(event) { - if(!event.ctrlKey && !event.shiftKey) { - (event.keyCode === 37 && prev) && (window.location.href = prev.getAttribute("href")); - (event.keyCode === 39 && next) && (window.location.href = next.getAttribute("href")); +document.addEventListener("keyup", function(e) { + if(!e.ctrlKey && !e.shiftKey) { + (e.keyCode === 37 && prev) && (window.location.href = prev.getAttribute("href")); + (e.keyCode === 39 && next) && (window.location.href = next.getAttribute("href")); } }, false); @@ -30,124 +30,131 @@ var markdownTags = { }; //============================================================================== +// Timeout function for delayed execution of code +//============================================================================== +function delayed(callback) { + window.setTimeout(callback, 20); +} + +//============================================================================== // Set caret position in editor //============================================================================== function setCaretPosition(position) { - window.setTimeout(function() { - document.getElementById("content-editor").focus(); - document.getElementById("content-editor").setSelectionRange(position, position); - }, 50); - + document.getElementById("content-editor").setSelectionRange(position, position); + document.getElementById("content-editor").focus(); } //============================================================================== -// Insert markdown around text in editor +// Insert emoticon after cursor in editor //============================================================================== -function markdownReplace(tagname) { - var element = document.activeElement; +function insertEmoticon(target, emoticon) { + var selectionStart = target.selectionStart; + var selectionEnd = target.selectionEnd; - if(element.nodeName === 'TEXTAREA') { - var selectionStart = element.selectionStart; - var selectionEnd = element.selectionEnd; + var content = target.value; + target.value = content.slice(0, selectionStart) + emoticon + content.slice(selectionEnd); - var selectedText = element.value.substring(selectionStart, selectionEnd); - - var content = element.value; - element.value = content.slice(0, selectionStart) + markdownTags[tagname][0] + selectedText + markdownTags[tagname][1] + content.slice(selectionEnd); - - setCaretPosition(selectionStart + markdownTags[tagname][0].length + selectedText.length + markdownTags[tagname][1].length); - } + delayed(function() { + setCaretPosition(selectionStart + emoticon.length); + }); } //============================================================================== -// Insert emoticon after cursor in editor +// Insert markdown around text in editor //============================================================================== -function emoticonReplace(emoticon) { - var element = document.activeElement; +function insertMarkdown(target, markdown) { + var selectionStart = target.selectionStart; + var selectionEnd = target.selectionEnd; - if(element.nodeName === 'TEXTAREA') { - var selectionStart = element.selectionStart; - var selectionEnd = element.selectionEnd; + var selectedText = target.value.substring(selectionStart, selectionEnd); - var content = element.value; - element.value = content.slice(0, selectionStart) + emoticon + content.slice(selectionEnd); + var content = target.value; + target.value = content.slice(0, selectionStart) + markdownTags[markdown][0] + selectedText + markdownTags[markdown][1] + content.slice(selectionEnd); - setCaretPosition(selectionStart + emoticon.length); - } + delayed(function() { + setCaretPosition(selectionStart + markdownTags[markdown][0].length + selectedText.length + markdownTags[markdown][1].length); + }); } //============================================================================== // Keep server-side session active if the user is writing a long text //============================================================================== -addEventListener("DOMContentLoaded", function() { - setInterval(function() { - var Request = new XMLHttpRequest(); - Request.open("HEAD", "", true); - Request.send(); - }, 300000); -}, false); +setInterval(function() { + var Request = new XMLHttpRequest(); + Request.open("HEAD", "", true); + Request.send(); +}, 300000); //============================================================================== -// Insert tab indent into editor if <tab> is pressed +// Confirmation message for delete button //============================================================================== -addEventListener("DOMContentLoaded", function() { +if(document.getElementById("delete-button")) { + document.getElementById("delete-button").onclick = function(e) { + return confirm(e.target.getAttribute('data-text')); + }; +} + +//============================================================================== +// Insert or remove tab indent in editor if [<shift>+]<tab> is pressed +//============================================================================== +(function() { if(document.getElementById("content-editor")) { var element = document.getElementById("content-editor"); element.addEventListener('keydown', function(e) { - if(e.keyCode === 9 && !e.ctrlKey && !e.shiftKey) { + if(e.keyCode === 9 && !e.ctrlKey) { var selectionStart = element.selectionStart; var selectionEnd = element.selectionEnd; var content = element.value; - element.value = content.substring(0, selectionStart) + "\t" + content.substring(selectionEnd); + if(e.shiftKey) { + if(content.substring(selectionStart, selectionStart -1) === "\t") { + element.value = content.substring(0, selectionStart - 1) + content.substring(selectionEnd); + setCaretPosition(selectionStart - 1); + } + } + + else { + element.value = content.substring(0, selectionStart) + "\t" + content.substring(selectionEnd); + setCaretPosition(selectionStart + 1); + } - setCaretPosition(selectionStart + 1); e.preventDefault(); } }, false); } -}, false); +})(); //============================================================================== -// Confirmation message for delete buttons +// Emoticon button list //============================================================================== -addEventListener("DOMContentLoaded", function() { - if(document.getElementById("delete-button")) { - document.getElementById("delete-button").onclick = function(e) { - return confirm(e.target.getAttribute('data-text')); - }; - } -}, false); - -//============================================================================== -// Emoticon listener -//============================================================================== -addEventListener("DOMContentLoaded", function() { +(function() { if(document.getElementById("emoticon-list")) { var list = document.getElementById("emoticon-list"); + var node = document.getElementById("content-editor"); var items = list.getElementsByTagName("li"); for(var i = 0; i < items.length; ++i) { items[i].onmousedown = function(e) { - emoticonReplace(e.target.getAttribute('data-emoticon')); + insertEmoticon(node, e.target.getAttribute('data-emoticon')); }; } } -}, false); +})(); //============================================================================== -// Markdown listener +// Markdown button list //============================================================================== -addEventListener("DOMContentLoaded", function() { +(function() { if(document.getElementById("markdown-list")) { var list = document.getElementById("markdown-list"); + var node = document.getElementById("content-editor"); var items = list.getElementsByTagName("li"); for(var i = 0; i < items.length; ++i) { items[i].onmousedown = function(e) { - markdownReplace(e.target.getAttribute('data-markdown')); + insertMarkdown(node, e.target.getAttribute('data-markdown')); }; } } -}, false);
\ No newline at end of file +})();
\ No newline at end of file |