How to indent replies that are the same type as comments - thymeleaf

I'm building this blog application using Java Spring Boot and Thymeleaf. I've created comment & reply feature, but I'm trying to show replies as children to comments (nested - indent). They are the same type: Comment. They work, as I can see the reply as a child of comment in the database, but in the view its shown as a new comment (even though, again, it is the child of a comment). How do I indent that reply:
<!DOCTYPE HTML>
<html lang= "en" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link th:href = "#{/styles/style.css}" rel="stylesheet">
<script type="text/javascript" th:src="#{/styles/javascript.js}" rel="script"></script>
<title>WriteUp :: POST</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<a th:href="#{/}">Home</a>
<div class="container">
<div class="screen">
<div class="screen__content">
<div class="card" style="width: 120%; height: 100%">
<a href="#" class="like-btn">
<svg class="like_icon" width="44" height="39" viewBox="0 0 44 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 2C6.925 2 2 6.925 2 13C2 24 15 34 22 36.326C29 34 42 24 42 13C42 6.925 37.075 2 31 2C27.28 2 23.99 3.847 22 6.674C20.9857
5.22921 19.6382 4.05009 18.0715 3.23649C16.5049 2.42289 14.7653 1.99875 13 2Z"/>
</svg>
</a>
<div class="card-body">
<ul sec:authorize="isAuthenticated()">
<li><a th:href="#{'/posts/' + ${post.id} + '/edit'}">Edit</a></li>
<li><a th:href="#{'/posts/' + ${post.id} + '/delete'}">Delete</a></li>
</ul>
<h2 class="card-title" th:text="${post.title}">Card title</h2>
<p class="card-text" th:text="'Written by: ' + ${post.account.getUserName()}"></p>
<p class="card-text" th:text="'Published on: ' + ${post.createdAt}"></p>
<p class="card-text" th:text="${post.body}">Body text</p>
<!-- Comment/Reply section start -->
<h2>Comments</h2>
<ul>
<li th:each="comment : ${post.comments}">
<p th:text="${comment.text}"></p>
<p th:text="${comment.createdAt}"></p>
<p th:text="${comment.author}"></p>
<form method="post" action="#" th:action="#{/comment/{commentId}/reply(commentId=${comment.id})}">
<input type="text" name="replyText" placeholder="Add a reply"/>
<button type="submit">Reply</button>
</form>
</li>
</ul>
</div>
<h2>Add a comment</h2>
<form method="post" action="#" th:action="#{/post/{postId}/comment(postId=${post.id})}">
<input type="text" name="commentText" placeholder="Add a comment">
<button type="submit">Comment</button>
</form>
<!-- Comment/Reply section end -->
</div>
</div>
</div>
</div>
</body>
</html>

Related

How to lower an element at the same position as a button?

Do you know how I can lower the title to the same position as the button? I would like to do this with bootstrap without using css.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="breadcrumb d-flex justify-content-between border-bottom pt-5 ">
<h3 class="text-center">Title </h3>
<button type="button" (click)="goBack()" class="btn btn-primary m-1">Back</button>
</div>
</div>
</body>
</html>

Add properties like
text align-self-center m-1 to h3 tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="breadcrumb d-flex justify-content-between border-bottom pt-5 ">
<h3 class="text-center text align-self-center m-1">Title </h3>
<button type="button" (click)="goBack()" class="btn btn-primary m-1">Back</button>
</div>
</div>
</body>
</html>

<h3 class="text-center">Title </h3>
Give this element position relative and give some top CSS as px as you need to position on there.

How to minify grails view html

The HTML spat out from a view has a lot of empty spaces and empty lines.
What and where do I need to type to make grails not to generate the empty spaces or empty lines?
Thanks!
Just for example. I have an empty domain. And then use generate-all to create all the controller and view. This is the HTML spat out from the index.gsp. If you use your mouse to highlight the HTML, you will see a lot of empty spaces.
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
NewGroovyClass List
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" type="image/x-ico" href="/assets/favicon.ico"/>
<link rel="stylesheet" href="/assets/bootstrap.css?compile=false" />
<link rel="stylesheet" href="/assets/grails.css?compile=false" />
<link rel="stylesheet" href="/assets/main.css?compile=false" />
<link rel="stylesheet" href="/assets/mobile.css?compile=false" />
<link rel="stylesheet" href="/assets/application.css?compile=false" />
<meta name="layout" content="main"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark navbar-static-top" role="navigation">
<a class="navbar-brand" href="/#"><img src="/assets/grails.svg" alt="Grails Logo"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" aria-expanded="false" style="height: 0.8px;" id="navbarContent">
<ul class="nav navbar-nav ml-auto">
</ul>
</div>
</nav>
Skip to content…
<div class="nav" role="navigation">
<ul>
<li><a class="home" href="/">Home</a></li>
<li>New NewGroovyClass</li>
</ul>
</div>
<div id="list-newGroovyClass" class="content scaffold-list" role="main">
<h1>NewGroovyClass List</h1>
<div class="pagination">
</div>
</div>
<div class="footer row" role="contentinfo">
<div class="col">
<a href="http://guides.grails.org" target="_blank">
<img src="/assets/advancedgrails.svg" alt="Grails Guides" class="float-left"/>
</a>
<strong class="centered">Grails Guides</strong>
<p>Building your first Grails app? Looking to add security, or create a Single-Page-App? Check out the Grails Guides for step-by-step tutorials.</p>
</div>
<div class="col">
<a href="http://docs.grails.org" target="_blank">
<img src="/assets/documentation.svg" alt="Grails Documentation" class="float-left"/>
</a>
<strong class="centered">Documentation</strong>
<p>Ready to dig in? You can find in-depth documentation for all the features of Grails in the User Guide.</p>
</div>
<div class="col">
<a href="https://grails-slack.cfapps.io" target="_blank">
<img src="/assets/slack.svg" alt="Grails Slack" class="float-left"/>
</a>
<strong class="centered">Join the Community</strong>
<p>Get feedback and share your experience with other Grails developers in the community Slack channel.</p>
</div>
</div>
<div id="spinner" class="spinner" style="display:none;">
Loading…
</div>
<script type="text/javascript" src="/assets/jquery-3.3.1.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/bootstrap.js?compile=false" ></script>
<script type="text/javascript" src="/assets/popper.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/application.js?compile=false" ></script>
</body>
</html>

thymeaf layout usage not functional

Hi I want to use a custom fragment in thymeleaf
I have a layout file which is not loaded by other hmtl files, main.html:
I want to use a custom fragment in thymeleaf
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SFJ - Egy sztori minden napra</title>
<link rel="stylesheet" href="../static/css/blog.css" th:href="#{/css/blog.css}"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Kezdőoldal</li>
<li class="">Sztorik</li>
<li class="">Bloggerek</li>
</ul>
<div class="navbar-text navbar-right">
Üdvözlünk <span sec:authentication="name">Anonymous </span>
<form sec:authorize="isAuthenticated()" id="frmlogout" th:action="#{/logout}" method="post" class="form-inline">
| Kijelentkezés
</form>
</div>
</div>
</div>
</nav>
<div layout:fragment="loginContent">
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<footer>
<p>San Franciscoból Jöttem - Az eredeti template összeállítója: http://therealdanvega.com</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" ></script>
</body>
</html>
I try to load it for example from login.html:
<!DOCTYPE html>
<html lang="en" layout:decorator="layouts/main">
<head>
<title>SFJ - Minden napra egy sztori</title>
</head>
<body>
<div layout:fragment="loginContent">
<form name="login" th:action="#{/login}" method="post" class="form-signin">
<h2 class="form-signin-heading">Kérlek jelentkezz be</h2>
<div id="err" th:if="${param.error}" class="alert alert-danger">Hibás felhasználói név és jelszó</div>
<div th:if="${param.logout}" class="alert alert-success">Sikeresen kijelentkeztél</div>
<label for="username" class="sr-only">Felhasználói név</label>
<input type="text" id="username" name="username" class="form-control" placeholder="Felhasználói név" required="true" />
<label for="password" class="sr-only">Jelszó</label>
<input type="password" id="password" name="password" class="form-control" placeholder="Jelszó" required="true" />
<div class="checkbox">
<label> <input id="remember-me" name="remember-me" type="checkbox" /> Emlékezz rám
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Bejelentkezés</button>
</form>
</div>
</body>
</html>
It doesn't not find the main.html, does not take into account...
It's loading only the content from login.html
Does anyone have any ideas why?

create a clickable table row using jquery mobile

I need a clickable "table" in my app.
The closest I have gotten is using listviewer and links in combination with grid.
The example below is what I need (a clickable tablerow and a separate button to the right).
My problem is that I cant line up the "body-columns" with the "header-titles" becuase the button in my "table body" offsets the grid.
http://jsfiddle.net/lokkin/p9M8p/3/
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<ul data-role="listview" data-split-icon="gear" data-inset="true">
<li data-role="list-divider">
<div class="ui-grid-d">
<div class="ui-block-a">TRK</div>
<div class="ui-block-b">STATUS</div>
<div class="ui-block-c">NR</div>
<div class="ui-block-d">PFIX</div>
<div class="ui-block-e">EHNR</div>
</div>
</li>
<li> <a href="#Select" class="ui-grid-d">
<div class="ui-block-a">
TRUCK1
</div>
<div class="ui-block-b">
123
</div>
<div class="ui-block-c">
ABC123
</div>
<div class="ui-block-d">
456
</div>
<div class="ui-block-e">
789
</div>
</a>
Details
</li>
</ul>
</div>
</body>
</html>

Just add right padding to the divider to match the listitems:
.ui-li-divider{
padding-right: 56px !important;
}
Updated FIDDLE

Sluggish refreshing of jQuery Mobile radio button?

jQuery 1.7.1 and jQuery Mobile 1.1.0RC1
Hello, I have a JQM radio button on my site and am programmatically changing its value based on a condition I'm checking on pageshow. Everything works fine, but it isn't happening very "smoothly," by which I mean that it is very visible to the user when it changes i.e. it's in its original state for half a second or so and then switches. Maybe I'm being a little picky, but I'd like the switch to be transparent to the user. I'm still trying to understand the various JQM "page*" events and thought if I did it on pagebeforeshow or pagebeforecreate it would make that happen, but that is not the case.
I've tried to do a jsFiddle for it (my first time), it's happening pretty instantaneously there (maybe something to do with my selection of onDomReady in the options?) but should give you an idea of what I'm talking about ... on my site the selection is very obviously in the Off state for a moment when the page loads and then switches over to On. It's not really a big deal, I'm asking more to help my understanding of the various page* events.
http://jsfiddle.net/pdjeU/
More info:
The web app is basically a document browser, constructed like so: the index.html files contains a list of the documents, or rather a list of links to the TOCs of the available documents. Each of these TOCs contains links to the sections of the actual document.
The code is as follows ... It's probably riddled with bad style since I'm a beginner. The code for my radio button issue is in lines 30-39 of custom2.js and 23-28 of ch2-sec1.html. Also, note that the console.log($("link[href$='styleDay.css']").length); line of code in custom2.js prints out "2" when the stylesheet ends with styleDay.css, and I have no idea why (I expect it to be "1"). My main problem, though, is that there is a noticeable lag when browsing through the content files (e.g. ch2-sec1.html as shown below) and the code flips the radio button to "Day Mode" when the condition is true ... can't this be coded so that it's already flipped by the time the page becomes visible?
root/index.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="Style/styleNight.css" />
<link rel="stylesheet" type="text/css" href="Style/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile.simpledialog2.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b" id="main">
<div data-role="header">
<div style="float:left; width:20%">
<a id="openOptions" href="#" data-role="button" data-icon="gear">Settings</a>
</div>
<div style="float:left; width:60%; text-align:center; padding-top:5px">
<h2>DOCUMENT LIST</h2>
</div>
<div style="float:left; width:20%">
<a id="openSearch" href="#" data-role="button" data-icon="search" data-iconpos="right">Search</a>
</div>
</div>
<!-- /header -->
<div data-role="content" style="clear:both">
<div data-role="controlgroup">
Document 1
Document 2
Document 3
Document 4
Document 5
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</head>
root/doc1-toc.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="Style/ftidStyleNight.css"/>
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" style="position:relative">
<div style="float:left">Home</div>
<h1>Document 1 TOC</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 1</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 1 Section 1</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 2</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 2 Section 1</li>
<li>Chapter 2 Section 2</li>
<li>Chapter 2 Section 3</li>
<li>Chapter 2 Section 4</li>
</div>
</div>
</div>
</div>
</body>
</html>
root/HTML/ch2-sec1.html ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../Style/styleNight.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="../js/custom1.js"> </script>
<script type="text/javascript" src="../js/custom2.js"> </script>
</head>
<body>
<div data-role="page" id="doc1-ch2-sec1">
<div id="header" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<div id="optionsDiv">
<div style="float:left; width:25%; text-align:left">
Home
Previous
</div>
<div style="float:left; width:50%">
<div class="containing-element">
<fieldset data-role="controlgroup" data-type="horizontal" id="day-night">
<input type="radio" name="radio-choice-1" id="day" value="../Style/styleDay.css" data-theme="b"/>
<label for="day">Day Mode</label>
<input type="radio" name="radio-choice-1" id="night" value="../Style/styleNight.css" checked="checked" data-theme="b"/>
<label for="night">Night Mode</label>
</fieldset>
</div>
</div>
<div style="float:left; width:25%; text-align:right">
TOC
Next
</div>
</div>
</div>
<!-- Main content from legacy data source ->
</div>
</body>
</html>
root/JS/custom2.js ...
$("#main").live("pageinit",function(){
$('<div>').simpledialog2({
mode: 'blank',
animate:false,
top:10,
left:10,
themeDialog:'a',
headerText: false,
headerClose: false,
blankContent :
"<span>Active Checklists: </span><select name='slider' id='flip-b' data-role='slider' data-mini='true' data-theme='a'><option value='off'>Off</option><option value='on'>On</option></select>"+
"<a rel='close' data-role='button' data-theme='b' style='color:white' href='#'>Cancel</a>"
});
});
$(document).on('click', '#openSearch', function() {
$('<div>').simpledialog2({
mode: 'blank',
themeDialog:'a',
animate:false,
top:10,
left:'60%',
headerText: false,
headerClose: false,
blankContent :
"<input type='search' name='search' id='searc-basic' value='' placeholder='Under Construction ...' disabled='disabled' data-mini='true' data-theme='c' />"+
"<a rel='close' data-role='button' style='color:white' href='#' data-theme='b'>Cancel</a>"
});
});
});
$("div[data-role='page']").live("pageshow",function(){
console.log($("link[href$='styleDay.css']").length);
if ($("link[href$='styleDay.css']").length > 0){
$("#day").attr("checked",true).checkboxradio("refresh");
$("#night").removeAttr("checked").checkboxradio("refresh");
}
$("input[name='radio-choice-1']").on('change mousedown',function(event) {
$("link").attr("href",$("input[checked][name='radio-choice-1']").val());
});
});

Resources