bannerbannerbanner
полная версияPHP. Разработка модуля комментариев для сайта

Дмитрий Приходько
PHP. Разработка модуля комментариев для сайта

Полная версия

27. Форма добавления комментариев

Для добавления комментариев служит форма formaddsay.html.php

Листинг 43. form_addsay.html.php Путь: news/chat/say/ form_addsay.html.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="/chat/style.css" />

<title>Добавление</title>

</head>

<!– При нажатии кнопок формы идем на страницу сепарации переменных –>

<form action="/chat/say/separate_action.php" method="post" class="say">

<div>

<label for="saytext" class="say">Введите ваш комментарий:</label>

<textarea id="saytext" name="saytext" rows="5" cols="60" autofocus><?php if (isset($_SESSION['txt'])) {

echo htmlout($_SESSION['txt']);} ?></textarea>

</div>

<br />

<div class="">

<div class="">

<div class="says">

<input type="hidden" name="userid" value="Добавить">

<input type="hidden" name="pageid" value="<?php echo $pageid ?>">

<input type="hidden" name="sayid" value="<?php if (isset($sayid)) {

echo $sayid;

} ?>">

<input type="submit" name="action" value="Добавить">

<input type="submit" name="smileblock" value="Показать смайлы" style="">

<input type="submit" name="smileblock_close" value="Скрыть смайлы" style="">

</div>

<div class="notaddsay" id=""><a href="?">Отмена</a></div>

</div>

<br>

<hr>

<!– Вставляем лист доступных смайлов –>

<div class="smilesetdiv" id="">

<fieldset class="smileset" style="<?php if (isset($_SESSION['smileblock'])) {

echo $_SESSION['smileblock'];

} ?>">

<?php print_smile_set(); ?>

</fieldset>

</div>

</div>

<br />

</form>

</body>

</html>

Это HTML форма состоящая из следующих частей:

• Поле ввода комментариев тип textarea,autofocus.

• Кнопки «Добавить», «Показать смайлы», «Скрыть смайлы» тип input submit.

• Ссылка «Отмена», при нажатии обнуляет все значения в $_GET.

• Блок смайлов, который выводит доступный набор смайлов.

28. Обработка комментариев

Для обработки комментариев служит скрипт makeformaddsay.php

Листинг 44. makeformaddsay.php Путь: news/chat/say/ makeformaddsay.php

<?php

error_reporting(E_ALL);

if(session_id() == '') {session_start();}

unset($_SESSION['txt']);

if (isset($_POST['nosay'])) {

$_GET['addsay'] ='';

header("Location: ".$_SERVER["HTTP_REFERER"]);// Делаем редирект

exit();

}

/* Проверяем наличие текста в форме */

if (empty($_POST['saytext'])) {

header("Location: ".$_SERVER["HTTP_REFERER"]);// Делаем редирект

exit();

}

if (isset($_POST['action']) and $_POST['action'] == "Добавить") {

include_once $_SERVER['DOCUMENT_ROOT'].'/chat/dsn.php';

include_once $_SERVER['DOCUMENT_ROOT'] .'/chat/admin/clean.php';

/* Получаем id текущего пользователя */

if(isset($_SESSION['userid'])) {

$userid = $_SESSION['userid'];

}

/* заносим текст в базу */

try {

$sql = 'INSERT INTO say SET

saytext = :saytext,

userid = :userid,

page_id = :page_id,

saydate = :saydate';

$s = $dsn->prepare($sql);

$saytext = html($_POST['saytext']);

$saydate = time();

$page_id = $_POST['page_id'];

$s->bindValue(':saytext',$saytext);

$s->bindValue(':saydate',$saydate);

$s->bindValue(':userid',$userid);

$s->bindValue(':page_id',$page_id);

$s->execute();

}

catch (PDOException $e) {

      echo 'makeformaddsay ошибка вставки комментария';

      echo 'sdsd'.$page_id;

echo $e->getMessage();

echo $e->getLine();

exit();

}

header("Location: ".$_SERVER["HTTP_REFERER"]);// Делаем редирект

exit();

}

header("Location: ".$_SERVER["HTTP_REFERER"]);// Делаем редирект

exit();

Скрипт также выполнен в отдельном файле во избежание проблем с сохранением $_POST в браузере. В нем проверяются данные отправленные из формы formaddsay.html.php «Добавить комментарии» и заносятся в БД.

29. Форма редактирования комментариев

Для редактирования комментариев служит форма form_editsay.html.php

Листинг 45. form_editsay.html.php Путь: news/chat/say/ form_editsay.html.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="<?= $_SERVER['HTTP_ORIGIN'].'/chat/style.css'; ?>"/>

</head>

<body>

<form action="" method="post" class="sayedit">

<div>

<label for="saytext" class="say"><h4>Редактировать комментарий:</h4></label>

       <hr>

<textarea id="saytext" name="saytext" rows="6" cols="80" maxlength="100" autofocus><?= $_POST['saytext'];?></textarea>

</div>

<br/>

       <div class="">

<div class="says">

<input type="hidden" name="sayid" value="<?= $_POST['textedit'];?>">

<input type="submit" name="sayedit" value="Редактировать">

      <input type="submit" name="actionnot" value="Отмена">

</div>

       <br><hr>

       <div class="smilesetdiv" id="">

             <fieldset class="smileset" style="">

                  <?php print_smile_set();?>

       </fieldset>

       </div>

</div>

<br/>

</form>

</body>

</html>

Это HTML форма в которой можно отредактировать комментарий. Состоит из:

• Поле редактирования textarea со значением по умолчанию равным $_POST['saytext'].

• Кнопок «Редактировать» и «Отмена».

• Набор для выбора доступных смайлов.

30. Скрипт редактирования комментариев

Для редактирования комментариев служит файл sayedit.php

Листинг 46. sayedit.php Путь: news/chat/say/ sayedit.php

<?php

error_reporting(E_ALL);

if(session_id() == '') {session_start();}

include_once $_SERVER['DOCUMENT_ROOT'] .'/chat/admin/clean.php';

include $_SERVER['DOCUMENT_ROOT'].'/chat/function/print_smile_set.php';

/* Сохраняем переменную идентефикатор поста */

if (isset($_POST['textedit']) and $_POST['textedit'] != ""){

$_SESSION['idsave']      = $_POST['textedit'];

} else {

$_POST['textedit'] = $_SESSION['idsave'];

}

/* Заносим в базу и делаем редирект */

if (isset($_POST['sayedit']) and $_POST['sayedit'] == "Редактировать") {

try {

include_once $_SERVER['DOCUMENT_ROOT'].'/chat/dsn.php';

$sql = 'UPDATE say SET saytext = :saytext WHERE id = :id';

$s = $dsn ->prepare($sql);

$s->bindValue(':saytext', $_POST['saytext']);

$s->bindValue(':id', $_POST['sayid']);

$res = $s->execute();

unset ($_SESSION['idsave']);

header("Location: /");

exit();

}

catch (PDOexeption $e) {

      echo $e->getMessage();

echo $e->getLine();

exit('error.html.php');

}

exit();

}

/* Контролируем нажатия кнопок */

if (isset($_POST['actionedit']) and $_POST['actionedit'] == "Редактировать") {

include $_SERVER['DOCUMENT_ROOT'].'/chat/say/form_editsay.html.php';

exit();

}

if (isset($_POST['smile'])) {

$_POST['saytext'] = $_POST['saytext'].$_POST['smile'];

include $_SERVER['DOCUMENT_ROOT'].'/chat/say/form_editsay.html.php';

}

if (isset($_POST['actionnot']) and $_POST['actionnot'] == "Отмена") {

header("Location: /");// Делаем редирект

exit();

}

В этом файле происходит обработка данных переданных из формы form_editsay.html.php. Контролируется нажатие кнопок «Редактировать», «Отмена» и вставки исмайлов. Производится обновление текста комментария и добавление обновленного текста в БД.

31. Создаем массив ответов на комментарии

Для этого используем скрипт list_reply.php

Листинг 47. list_reply.php Путь: news/chat/say/ list_reply.php

<?php

/* Формируем массив ответов на комментарии */

/* SELECT say.id, say.userid, say.saydate, say.saytext, users.login, users.img FROM say INNER JOIN users ON users.`id` = say.userid */

try {

$sql = 'SELECT reply.id, reply.userid, reply.replydate, reply.replyid, reply.replytext, users.login, users.img FROM reply INNER JOIN users ON users.id = reply.userid';

$stm = $dsn->query($sql);

} catch (PDOException $e) {

echo $e->getMessage();

echo $e->getLine();

exit();

}

foreach ($stm as $rows) {

$reply[] = array(

'id' => $rows['id'],

'replytext' => $rows['replytext'],

'userid' => $rows['userid'],

'replyid' => $rows['replyid'],

'img' => $rows['img'],

'login' => $rows['login'],

'replydate' => $rows['replydate'],

'userid' => $rows['userid']

);

}

 

Выбираем данные из таблицы reply, где id пользователя в таблице users совпадает со значением reply.userid. Т.е. выбираем ответы на комментарии для конкретного пользователя, соответствующие номеру комментария.

32. Обертка вывода ответов на комментарии

Для печати комментариев служит страница print_reply.html.php

Листинг 48. print_reply.html.php Путь: news/chat/say/ print_reply.html.php

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="/chat/style.css" />

</head>

<div class="wrap_reply_form" id="">

<?php

if (isset($reply)) {

foreach ($reply as $replylist) :

/* Активация кнопок */

if (userHasRole('admin')) {

$buttonactive = 'submit'; //если админ делаем активными все кнопки

} elseif ($replylist['userid'] == $userid) {

$buttonactive = 'submit'; //делаем активными кнопки для юзера

} else {

$buttonactive = 'hidden'; //отключаем кнопки

}

if ($post_id == $replylist['replyid']) {

$comment = $replylist['replytext'];

echo '<div class="block_reply">';      //делаем общий div для кнопки и ответа

include $_SERVER['DOCUMENT_ROOT'] . '/chat/say/form_reply.html';

include $_SERVER['DOCUMENT_ROOT'] . '/chat/say/reply_delete_button.html';

echo '</div>' . '</br>';

}

endforeach;

}

?>

</div> <!– .wrap_reply_form –>

</html>

В скрипте проверяем какие кнопки доступны для данного пользователя. Доступные выводим. Для ответов возможность редактирования не предусмотрена, поэтому только «Удалить». Эта кнопка доступна только автору ответа и администратору. Затем обрабатываем и печатаем ответ на комментарий, полученный из предыдущего скрипта list_reply.php.

33. Форма ответа на комментарий

Для вывода ответа на комментарий используем файл form_reply.html

Листинг 49. form_reply.html Путь: news/chat/say/ form_reply.html

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="/chat/style.css" />

</head>

<div class="reply_form">

<div class="topreply" id="">

<b><?= $replylist['login'] ?></b><span style="float:right;">

<?php $t = $replylist['replydate'];

echo date("d.m.Y", "$t");?>

</span>

</div>

<img src="<?='/chat/admin/users/'.$replylist['img']?>" class="avareply" align="left" />

<?php comment_to_smile($comment); ?>

</div>

Выводит логин пользователя, дату оставления ответа, аватар пользователя, текст ответа. Для span выводящего дату стили указаны непосредственно в файле, но можно присвоить класс при необходимости.

34. Страница ответов на комметарии

Выводим страницу с ответами на комментарии list_reply.html.php

Листинг 50. list_reply.html.php Путь: news/chat/say/ list_reply.html.php

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="/chat/style.css" />

</head>

<!– Обертка –>

<div class="wrapsayform" >

<?php

if (!empty($reply)) {

foreach ($reply as $replylist) :

?>

<div class="sayform" id="">

<div class="printcomment" id="">

<?php

if ($post_id == $replylist['replyid']) {

$comment = $replylist['replytext'];

comment_to_smile($comment);

echo '#' . $replylist['id'];

echo '#' . $replylist['replyid'] . $replylist['login'] . $replylist['img'];

/* Активация кнопок */

if (userHasRole('admin')) {

$buttonactive = 'submit'; //если админ делаем активными все кнопки

} elseif ($saylist['userid'] == $userid) {

$buttonactive = 'submit'; //делаем активными кнопки для юзера

} else {

$buttonactive = 'hidden'; //отключаем кнопки

} ?>

</div>

</div>

<div class="blocksayform" id="">

<div class="sayforms">

<form name="sayform" method="post" action="/chat/say/reset.php" class="logout">

<input type="hidden" name="pageid" id="" value=" <?php echo $pageid; ?>" />

<input type="hidden" name="deleteid" id="" value=" <?php echo $replylist['id']; ?>" />

<input type="<?= $buttonactive ?>" name="delete" id="" value="Удалить" />

</form>

</div>

<?php

}

endforeach;

}

?>

</div>

<div class="add_reply" id="">

<?php

if (isset($_SESSION['login'])) {

if (isset($_GET['reply']) and $_GET['reply'] == $post_id) {

include_once $_SERVER['DOCUMENT_ROOT'] . '/say/form_add_reply.html.php';

}

}

?>

</div>

</div>

</html>

На этой странице в цикле foreach – endforeach выводим все ответы на данный комментарий. Показываем кнопку «Удалить». Проверяем необходимость вставки формы для добавления ответа form_add_reply.html.php' на данный комментарий. Необходимость определяется наличием переменной $_GET['reply'].

35. Форма добавления ответов на комментарии

Для добавления ответов на комментарии служит форма form_add_reply.html.php

Листинг 51. form_add_reply.html.php Путь: news/chat/say/ form_add_reply.html.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="/chat/style.css" />

</style>

</head>

<form action="/chat//say/separate_action.php" method="post" class="say">

<fieldset class="chatfieldset">

<legend>Ответить на комментарий:</legend>

<textarea class="saytext" name="replytext" rows="5" cols="50" autofocus><?php if(isset($_SESSION['txt'])){

       echo htmlout($_SESSION['txt']);}?></textarea>

<br />

<div class="">

<div class="says">

<input type="hidden" name="userid" value="Добавить">

<input type="hidden" name="pageid" value="<?php echo $pageid ?>">

<input type="hidden" name="sayid" value="<?php if(isset($sayid)) {echo $sayid;} ?>">

<input type="hidden" name="deleteid" id="" value=" <?php echo $saylist['id'];?>" />

<input type="hidden" name="postid" id="" value=" <?php htmlout($post_id);?>" />

<input type="submit" name="action" value="Ответить">

<input type="submit" name="smileblock" value="Показать смайлы">

<input type="submit" name="smileblock_close" value="Скрыть смайлы">

</div>

<div class="notaddsay" id=""><a href="?" class="notaddsays">Отмена</a></div>

</div>

</fieldset>

<br>

<hr>

<div class="smilesetdiv">

<fieldset class="smileset" style="<?php if (isset($_SESSION['smileblock'])) {echo $_SESSION['smileblock'];} ?>">

<?php print_smile_set();?>

</fieldset>

</div>

<br />

</form>

</html>

Это HTML форма состоящая из следующих частей:

• Поле ввода комментариев тип textarea,autofocus.

• Кнопки «Добавить», «Показать смайлы», «Скрыть смайлы» тип input submit.

• Ссылка «Отмена», при нажатии обнуляет все значения в $_GET.

• Блок смайлов, который выводит доступный набор смайлов.

36. Обработчик добавления ответов

Для обработки ответов на комментарии служит файл make_reply.php

Листинг 52. make_reply.php Путь: news/chat/say/ make_reply.php

<?php

error_reporting(E_ALL);

if (session_id() == '') {

session_start();

}

unset($_SESSION['txt']);

if (isset($_POST['nosay'])) {

$_GET['reply'] = '';

exit();

}

/* Проверяем наличие текста в форме */

if (empty($_POST['replytext'])) {

header("Location: " . $_SERVER["HTTP_REFERER"]); // Делаем редирект

exit();

}

if (isset($_POST['action']) and $_POST['action'] == "Ответить") {

include_once $_SERVER['DOCUMENT_ROOT'] . '/chat/dsn.php';

include_once $_SERVER['DOCUMENT_ROOT'] . '/chat/admin/clean.php';

/* Получаем id текущего пользователя */

if (isset($_SESSION['userid'])) {

$userid = $_SESSION['userid'];

}

/* заносим текст в базу */

try {

$sql = 'INSERT INTO reply SET

replytext = :replytext,

userid = :userid,

replydate = :replydate,

replyid =:replyid';

$s = $dsn->prepare($sql);

$replytext = html($_POST['replytext']);

$replyid = $_POST['postid'];

$replydate = time();

$s->bindValue(':replytext', $replytext);

$s->bindValue(':replyid', $replyid);

$s->bindValue(':replydate', $replydate);

$s->bindValue(':userid', $userid);

$s->execute();

} catch (PDOException $e) {

echo 'Error adding данного пользователя';

echo $e->getMessage();

echo $e->getLine();

exit();

}

header("Location: " . $_SERVER["HTTP_REFERER"]); // Делаем редирект

exit();

}

header("Location: " . $_SERVER["HTTP_REFERER"]); // Делаем редирект

exit();

Здесь мы проверяем данные переданные формой form_add_reply.html.php, вставляем данные в БД и делаем редирект обратно.

37. Кнопка удаления ответов на комментарии

Для вывода кнопки удаления ответов на комментарии служит файл reply_delete_button.html

Листинг 53. reply_delete_button.html Путь: news/chat/say/ reply_delete_button.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="/chat/style.css" />

</head>

<div class="wrapreplyform">

<div class="idreplynum">

      <!– печатаем id комментария –>

      <span style=""><?php

echo '#'.$saylist['id'].' '.'^'.$replylist['id'];?></span>

</div>

<!– печатаем кнопку удалить –>

<div class="reply_delete_button">

      <form name="sayform" method="post" action="/chat/say/reply_delete.php" class="reply_delete_button">

            <input type="hidden" name="pageid" id="" value=" <?php echo $pageid;?>" />

            <input type="hidden" name="deleteid" id="" value=" <?php echo $replylist['id'];?>" />

            <input type="<?= $buttonactive ?>" name="reply_delete" id="" value="Удалить" />

      </form>

</div>

<?php if($buttonactive =='hidden'){echo '.';} ?>

<!– печатаем точку и не даем схлопнуться div –>

</div>

Здесь выводим на печать идентификаторы ответа: номер комментария и номер ответа, и кнопку «Удалить».

38. Удаление комментариев

Для удаления служит скрипт reset.php

Листинг 54. reset.php Путь: news/chat/say/ reset.php

<?php

if (isset($_POST['delete']) and $_POST['delete'] == 'Удалить') {

include $_SERVER['DOCUMENT_ROOT'] . '/chat/dsn.php';

try {

$sql = 'DELETE FROM say WHERE id = :id';

$s = $dsn->prepare($sql);

$saylist = $_POST['deleteid'];

$s->bindValue(':id', $saylist);

$s->execute();

} catch (pdoException $e) {

echo $e->getMessage();

echo $e->getLine();

exit();

}

}

header("Location:" . $_SERVER['HTTP_REFERER']);// Делаем редирект обратно

Удаляется запись из таблицы say c номером, совпадающим с номером комментария.

39. Удаление ответов на комментарии

Для удаления ответов на комментарии служит файл reply_delete.php

Листинг 55. reply_delete.php Путь: news/chat/say/ reply_delete.php

 

<?php

if (isset($_POST['reply_delete']) and $_POST['reply_delete'] == 'Удалить') {

include $_SERVER['DOCUMENT_ROOT'] . '/chat/dsn.php';

try {

$sql = 'DELETE FROM reply WHERE id = :id';

$s = $dsn->prepare($sql);

$del = $_POST['deleteid'];

$s->bindValue(':id', $del);

$s->execute();

} catch (pdoException $e) {

echo $e->getMessage();

echo $e->getLine();

exit();

}

}

header("Location:" . $_SERVER['HTTP_REFERER']);// Делаем редирект обратно

Удаляется запись из таблицы reply c номером, совпадающим с номером ответа.

40. Перенаправление смайлов

Для разделения смайлов служит файл smile_make.php

Листинг 56. smile_make.php Путь: news/chat/say/ smile_make.php

<?php

if(session_id() == '') {session_start();}

/* Проверяем куда пойдет смайл в комментарии или в ответы */

if (isset($_POST['saytext'])) {

      $_SESSION['txt'] = $_POST['saytext'].$_POST['smile'];

header("Location: ".$_SERVER["HTTP_REFERER"]);// Делаем редирект в комментарии

exit();

}

elseif (isset($_POST['replytext'])){

      $_SESSION['txt'] = $_POST['replytext'].$_POST['smile'];

header("Location: ".$_SERVER["HTTP_REFERER"]);// Делаем редирект в ответы

exit();

}

Смайлы предусмотрены и в комментариях и в ответах на них, поэтому в данном скрипте отрабатывается место вставки смала: в комментарий или в ответ. Проверка идет при вставке в файл separate_action.php.

41. Стили

CSS

Код отвечающий за отображение выводимых элементов находится в файле style.css

Листинг 57. style.css Путь: news/chat/style.css

/* body */

.chatbody {

background-color: #fef5e4;

max-width: 1366px;

width: auto;

background-image: url(/images/home/bg.jpg);

}

/* form */

.chatform {

margin: 0 auto;

max-width: fit-content;

box-sizing: border-box;

padding: 1.5%;

border-radius: 5px;

background: RGBA(255, 255, 255, 1);

–webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.45);

box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.45);

}

/* Блок авторизации */

.inputbutton {

display: flow-root;

float: none;

}

/* div-ы ссылок */

.ingress {

text-align: right;

float: left;

padding: 0px 10px;

text-transform: uppercase;

}

.ingressout {

padding: 0px 10px;

text-transform: uppercase;

float: none;

text-align: left;

}

.ingressloginout {

padding: 0px 10px;

text-transform: uppercase;

float: none;

text-align: left;

font-family: verdana;

font-size: smaller;

}

.logout {

padding: 0px 10px;

}

/* Ссылки Вход, Регистрация, На главную */

.aingress {

color:-web-link;

}

.aingress:hover {

color: red;

}

/* Вывод комментариев */

.sayavatar {

float: left;

width: 60px;

height: auto;

border: 1px solid lightgray;

border-radius: 10px;

margin-right: 15px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

}

.postnumber {

float: left;

margin-right: 50px;

color: brown;

}

.printcomment {

display: flow-root;

padding: 1px 15px 15px 15px;

}

.topprintcomment {

padding: 0 10px;

border-bottom: 1px solid #cacaca;

margin-left: 15px;

}

.reply_button {

float: left;

margin: 10px 20px 0px 10px;

}

.wrappersaybutton {

display: flow-root;

clear: both;

background-color: whitesmoke;

}

.says {

float: left;

padding-right: 10px;

}

.sayright {

display: inline-flex;

float: right;

}

.cabinets {

float: left;

}

.return {

text-align: right;

float: left;

padding: 0px 10px;

margin: 1%;

}

.areturns {

font-family: "Carrois Gothic", sans-serif;

color: #6b5344;

}

.areturns:hover {

color: #f25c05;

}

.adduser {

font-family: "Carrois Gothic", sans-serif;

color: #6b5344;

}

/* панель управления */

/* ссылки */

.apanel {

color: cadetblue;

}

.apreturn {

color: #6b5344;

}

.wrap_apanel {

margin: 0 auto;

width: fit-content;

}

/* Лист пользователей в админ разделе */

/* делаем сетку */

.ourwrapper {

display: flex;

flex-wrap: wrap;

display: grid;

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

grid-auto-rows: minmax(150px, auto);

grid-gap: 1em;

}

/* аватарка для админки */

.imgava {

width: 50px;

height: 50px;

padding-top: 5px;

float: left;

padding-right: 20px;

}

/* Страница статистики */

/* Форма статистики и поиска */

.stat {

background: none;

}

.statwrap {

float: none;

display: inline-block;

}

.statone {

float: left;

margin-left: 2%;

width: 30%;

}

.stattwo {

float: left;

width: 30%;

–webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.45);

box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.45);

padding: 10px 15px;

border-radius: 5px;

}

.statthree {

margin-left: 2%;

float: left;

–webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.45);

box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.45);

padding: 10px 15px;

border-radius: 5px;

}

#author {

float: right;

width: 140px;

}

#category {

float: right;

width: 140px;

}

.textsearch {

float: left;

}

.textsearch_button {

float: right;

}

/* Форма пользователя */

.formuser {

background: white;

display: flex;

align-items: center;

justify-content: center;

height: fit-content;

/* Flex Fallback */

margin-left: 5px;

margin-right: 5px;

flex: 1 1 200px;

padding: 4%;

border-radius: 8px;

}

.topuser {

border-bottom: 1px dashed #7e6d4c;

float: none;

}

.login_art {

margin: 0px;

font-weight: bold;

}

h3.vintage {

color: #f25c05;

border-bottom: 1px dashed #7e6d4c;

font-style: italic;

}

.number {

color: brown;

}

/* 2. Административный раздел */

/* 2.1 Подключение нового пользователя form.html.php */

.username {

padding: 2px;

float: none;

}

/* fieldset */

.usernames {

border: 1px solid lightgray;

}

/* поле ввода логина */

.inputs {

float: right;

}

/* заголовок формы */

.formname {

margin: 0;

}

.chatfieldset {

border: 1px solid lightgray;

}

/* заголовок создания админа */

.make_admin {

text-align: center;

color: brown;

}

/* addsay */

.addsayform {

margin: 0 auto;

max-width: fit-content;

box-sizing: border-box;

padding: 1.5%;

border-radius: 5px;

background: RGBA(255, 255, 255, 1);

–webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.45);

box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.45);

}

/* div кнопки добавить комментарии */

.addsay {

float: left;

margin: 0 10px;

}

/* ссылки показать скрыть комментарии */

.aopensays {

color: #6f6f6f;

}

.aopensays:hover {

color: #497270;

}

.aaddsays {

color: #6f6f6f;

}

.aaddsays:hover {

color: #53918e;

}

.areply {

color: #6b5344;

}

.areply:hover {

color: #53918e;

}

.notaddsays {

color: #6b5344;

}

.notaddsays:hover {

color: #f25c05;

}

/* из test */

/*.................Ответы................... */

.block_reply {

margin-left: 3%;

position: relative;

/* background:green; */

}

.wrap_reply_form {

position: relative;

/* background: orange; */

}

.reply_form {

/* border: 1px solid green; */

padding: 1%;

background: white;

float: none;

margin-right: 1%;

display: flow-root;

}

.reply_delete_button {

background: whitesmoke;

margin-right: 1%;

padding: 3px;

border-radius: 4px;

float: right;

}

.avareply {

margin: 3px 10px;

border-right: 1px solid #cacaca;

padding: 0 5px;

width: 40px;

height: auto;

}

.topreply {

padding: 2px 12px;

border-bottom: 1px solid #cacaca;

border-radius: 5px;

}

.wrapsayform {

position: relative;

border: 1px solid lightgray;

border-radius: 4px;

margin: 2% 0;

z-index: 0;

clear: both;

/* background:Градиент */

/* background: linear-gradient(45deg, #3e84bf 25%, transparent 25%, transparent 75%, #292929 75%),

linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%) 0.1875em 0.1875em,

radial-gradient(at 50% 0, #484847, #090909);

background-size: 0.375em 0.375em, 0.375em 0.375em, 100% 100%; */

/* В линейку */

/* background-color: #FFFFEF;

background-image:

linear-gradient(90deg, transparent 98px, #ED82AD 98px, #ED82AD 100px, transparent 100px),

linear-gradient(#eee 1px, transparent 0px),

linear-gradient(90deg, #eee 1px, transparent 0px);

background-size:100% 100%, 20px 20px, 20px 20px;

background-position: 0 0, -1px -1px, -1px 1px; */

}

.sayform {

background: white;

margin: 1%;

padding: 0;

border-radius: 5px;

border: 1px solid lightgray;

}

.topprintcomment {

padding: 0 10px;

border-bottom: 1px solid #cacaca;

margin-left: 15px;

}

.wrapreplyform {

display: flow-root;

background: whitesmoke;

margin-right: 1%;

}

.idreplynum {

float: left;

color: brown;

padding: 5px 15px;

}

h3.user {

margin: 0 1em 0 1em;

padding: 0 0 5px 0;

color: cadetblue;

font-weight: normal;

position: relative;

text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);

font-size: 24px;

line-height: 40px;

font-family: "Carrois Gothic", sans-serif;

border-bottom: 1px dashed cadetblue;

}

h4.user {

margin: 0 1em 0 1em;

padding: 0 0 5px 0;

color: cadetblue;

font-weight: normal;

position: relative;

text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);

font-size: 24px;

line-height: 40px;

font-family: "Carrois Gothic", sans-serif;

border-bottom: 1px dashed cadetblue;

}

h4.formname {

margin: 0 1em 0 1em;

padding: 0 0 5px 0;

color: cadetblue;

font-weight: normal;

position: relative;

text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);

font-size: 24px;

line-height: 40px;

font-family: "Carrois Gothic", sans-serif;

border-bottom: 1px dashed cadetblue;

}

h5.user {

margin: 0 1em 0 1em;

padding: 0 0 5px 0;

color: cadetblue;

font-weight: normal;

position: relative;

text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);

font-size: 24px;

line-height: 40px;

font-family: "Carrois Gothic", sans-serif;

border-bottom: 1px dashed cadetblue;

}

h1.user {

margin: 1em 1em 0.75em 1em;

padding: 0 0 5px 0;

color: #6b5344;

font-weight: normal;

position: relative;

text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);

font-size: 36px;

line-height: 40px;

font-family: "Carrois Gothic", sans-serif;

border-bottom: 1px dashed #7e6d4c;

}

h2.user {

margin: 1em 1em 0.75em 1em;

padding: 0 0 5px 0;

color: #6b5344;

font-weight: normal;

position: relative;

text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);

font-size: 36px;

line-height: 40px;

font-family: "Carrois Gothic", sans-serif;

border-bottom: 1px dashed #7e6d4c;

}

.addusers {

margin: 1%;

}

Стили в дальнейшем, можно настроить как угодно.

Рейтинг@Mail.ru