{"id":2594,"date":"2022-02-17T20:22:46","date_gmt":"2022-02-18T01:22:46","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=2594"},"modified":"2022-10-14T17:07:10","modified_gmt":"2022-10-14T22:07:10","slug":"building-visually-appealing-web-applications","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2022\/02\/17\/building-visually-appealing-web-applications\/","title":{"rendered":"Building visually appealing web applications"},"content":{"rendered":"<p>When you build a public-facing application you need to make sure it looks sharp. In this article, we&#8217;ll show you a few ideas of how you can make PHPRunner and ASPRunner.NET projects look unique.<\/p>\n<h2>List page grid<\/h2>\n<p>Let&#8217;s start with the grid on the List page. As an example, we will be using a recently updated News template that comes with PHPRunner and ASPRunner.NET. We want to draw attention to the very first element, making it bigger than others. <\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_list.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_list-600x405.png\" alt=\"\" width=\"600\" height=\"405\" class=\"alignnone size-medium wp-image-2596\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_list-600x405.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_list-768x518.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_list-1024x691.png 1024w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_list.png 1318w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\n<!--more--><\/p>\n<p>Luckily, it is fairly easy to implement. Building a custom grid like this only involves a few lines of CSS code. More than that, there is a great <a href=\"https:\/\/gridbyexample.com\/examples\/\">Grid by example<\/a> website that provides all the required CSS code.<\/p>\n<p>1. In the Page Designer proceed to that List page and set <strong>grid type<\/strong> to &#8216;vertical-grid&#8217;.<\/p>\n<p>2. Under Editor->Custom CSS add the following CSS code. <\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"css\" name=\"mshighlighter\" >\r\n.r-record-body{\r\n    width:auto !important;\r\n    margin:0px !important;\r\n    padding:3px !important;\r\n    width:auto !important;\r\n}\r\n\r\n.r-record-body:first-child {\r\n    grid-column: 1 \/ 3;\r\n    grid-row: 1 \/ 3;\r\n}\r\n.r-grid > .r-fluid[data-location=\"grid\"] {\r\n    display: inline-grid;\r\n    grid-template-columns: repeat(4, 24%);\r\n    grid-template-rows: repeat(4, auto);\r\n    justify-content: center;\r\n    align-content: end;\r\n}<\/textarea><\/pre>\n<\/div>\n<p>This is it. If you now build and run your project, you will see a grid similar to the one on the screenshot above. <\/p>\n<h2>Quick filter menu with icons<\/h2>\n<p>Take a look at this menu that comes with the Classified template. This is basically a custom filter similar to one that you can see on the left side.<\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/menu_with_icons.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/menu_with_icons-600x293.png\" alt=\"\" width=\"600\" height=\"293\" class=\"alignnone size-medium wp-image-2639\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/menu_with_icons-600x293.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/menu_with_icons-768x375.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/menu_with_icons-1024x500.png 1024w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/menu_with_icons.png 1273w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Let&#8217;s see how you can do something similar in your own project.<\/p>\n<p>1. This menu is database-driven. Here is an example of the <em>clcategory<\/em> table that powers this menu in the Classified template. This is what kind of data it stores.<\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/category_table.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/category_table.png\" alt=\"\" width=\"547\" height=\"293\" class=\"alignnone size-full wp-image-2640\" \/><\/a><\/p>\n<p><em>Faicon<\/em> here is a field that holds the name of the icon from <a href=\"https:\/\/fontawesomeicons.com\/\">Font Awesome<\/a>. Don&#8217;t worry, you do not need to enter those names manually, we have built a special dialog that allows users to select an icon. We&#8217;ll talk about this later in this article. <\/p>\n<p>2. Once you have your categories data ready it is time to insert the menu. Proceed to the List page in the Page Designer and insert a new code snippet above the grid, as appears on the screenshot below. <\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/page_designer_list.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/page_designer_list-600x274.png\" alt=\"\" width=\"600\" height=\"274\" class=\"alignnone size-medium wp-image-2641\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/page_designer_list-600x274.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/page_designer_list-768x351.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/page_designer_list.png 839w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>3. Here is the code you need to use in that snippet<\/p>\n<p><strong>PHP code:<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >\r\n$cats_rs = DB::Select(\"clcategory\");\r\nwhile($cat = $cats_rs->fetchAssoc()){\r\n\t$cat_count_rs = DB::Select(\"clmain\",array(\"Category\" => $cat[\"CategoryName\"] ));\r\n\t$cat_count = $cat_count_rs->fetchAssoc();\r\n\tif( $cat_count )\r\n\t\techo \"<span class='category_item'><span class='fa fa-\".$cat[\"faicon\"].\"'><\/span><a href='\".GetTableLink(\"clmain\",\"list\").\"?page=list&#038;f=(Category~equals~\".rawurlencode($cat[\"CategoryName\"]).\")'>\".$cat[\"CategoryName\"].\"<\/a><\/span>\";\r\n}<\/textarea><\/pre>\n<\/div>\n<p><strong>C# code<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\ndynamic cat = XVar.Array(), cat_count = null, cat_count_rs = null, cats_rs = null;\r\ncats_rs = XVar.Clone(DB.Select(new XVar(\"clcategory\")));\r\nwhile(XVar.Pack(cat = XVar.Clone(cats_rs.fetchAssoc())))\r\n{\r\n\tcat_count_rs = XVar.Clone(DB.Select(new XVar(\"clmain\"), (XVar)(new XVar(\"Category\", cat[\"CategoryName\"]))));\r\n\tcat_count = XVar.Clone(cat_count_rs.fetchAssoc());\r\n\tif(XVar.Pack(cat_count))\r\n\t{\r\n\t\tMVCFunctions.Echo(MVCFunctions.Concat(\"<span class='category_item'><span class='fa fa-\", cat[\"faicon\"], \"'><\/span><a href='\", MVCFunctions.GetTableLink(new XVar(\"clmain\"), new XVar(\"list\")), \"?page=list&#038;f=(Category~equals~\", MVCFunctions.RawUrlEncode((XVar)(cat[\"CategoryName\"])), \")'>\", cat[\"CategoryName\"], \"<\/a><\/span>\"));\r\n}\r\n}<\/textarea><\/pre>\n<\/div>\n<p>Things you would need to change here:<br \/>\n<strong>clcategory<\/strong> &#8211; name of the table with categories<br \/>\n<strong>clmain<\/strong> &#8211; name of the main table<br \/>\n<strong>CategoryName<\/strong> &#8211; name of category field in categories table<br \/>\n<strong>Category<\/strong> &#8211; name of the category field in the main table<br \/>\n<strong>faicon<\/strong> &#8211; name of the field in categories table that stores icon name<\/p>\n<p>The purpose of this code is to display a list of categories with respective icons and make them hyperlinks pointing to all items in the selected categories. A sample link will look like this:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >\r\nclmain_list.php?page=list&f=(Category~equals~Jobs)<\/textarea><\/pre>\n<\/div>\n<p>4. Now we need to make it look pretty. For this purpose add the following CSS code<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"css\" name=\"mshighlighter\" >\r\n[data-itemid=\"category_list\"] {\r\n    display: flex !important;\r\n    gap: 3px;\r\n}\r\n\r\n[data-itemid=\"category_list\"] .category_item {\r\n    flex: auto;\r\n    text-align: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    padding: 10px 0;\r\n    background: rgba(255, 255, 255, 0.28);\r\n    border: none !important;\r\n    transition: .4s;\r\n    cursor: pointer;\r\n}\r\n\r\n[data-itemid=\"category_list\"] .category_item:hover {\r\n    background: white;\r\n}\r\n\r\n[data-itemid=\"category_list\"] .category_item .fa {\r\n    margin-bottom: 10px;\r\n    width: 20px;\r\n    height: 20px;\r\n    font-size: 20px;\r\n    color: white;\r\n}\r\n\r\n[data-itemid=\"category_list\"] .category_item a {\r\n    color: white;\r\n}\r\n\r\n[data-itemid=\"category_list\"] .category_item:hover a,\r\n[data-itemid=\"category_list\"] .category_item:hover .fa {\r\n    color: black;\r\n}<\/textarea><\/pre>\n<\/div>\n<h2>Customizing breadcrumbs<\/h2>\n<p>We will be using the breadcrumbs example as it appears on the View page in the News template. We want to display a home icon, category name, and a news title itself. <\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/breadcrumbs.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/breadcrumbs-600x362.png\" alt=\"\" width=\"600\" height=\"362\" class=\"alignnone size-medium wp-image-2646\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/breadcrumbs-600x362.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/breadcrumbs-768x464.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/breadcrumbs-1024x618.png 1024w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/breadcrumbs.png 1070w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>1. Enable breadcrumbs under Page Designer -> View page -> Options -> Misc<\/p>\n<p>2. Add the following code to View page: Before Display event.<\/p>\n<p><strong>PHP code:<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >\r\n$xt->assign( \"breadcrumbs\", true );\r\n$xt->assign( \"breadcrumb\", true );\r\n\r\n\/\/ link to 'home' \r\n$xt->assign(\"crumb_home_link\", GetTableLink(\"newsmain\",\"list\"));\r\n$breadcrumb = array();\r\n\r\n\/\/ link to category\r\n$breadcrumb[] = array(\"crumb_attrs\" => \"href='\".GetTableLink(\"newsmain\",\"list\").\"?f=(Category~equals~\".rawurlencode($values[\"Category\"]).\")'\", \"crumb_title_link\" => true,\"crumb_title\" => $values[\"Category\"]);\r\n\r\n\/\/ article name itself, no link\r\n$breadcrumb[] = array(\"crumb_attrs\" => \"\", \"crumb_title_span\" => true,\"crumb_title\" => $values[\"Title\"]);\r\n$xt->assign_loopsection(\"crumb\", $breadcrumb);<\/textarea><\/pre>\n<\/div>\n<p><strong>C# code:<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nxt.assign(new XVar(\"breadcrumbs\"), new XVar(true));\r\nxt.assign(new XVar(\"breadcrumb\"), new XVar(true));\r\n\r\n\/\/ link to 'home' \r\nxt.assign(new XVar(\"crumb_home_link\"), (XVar)(MVCFunctions.GetTableLink(new XVar(\"newsmain\"), new XVar(\"list\"))));\r\nbreadcrumb = XVar.Clone(XVar.Array());\r\n\r\n\/\/ link to category\r\nbreadcrumb.InitAndSetArrayItem(new XVar(\"crumb_attrs\", MVCFunctions.Concat(\"href='\", MVCFunctions.GetTableLink(new XVar(\"newsmain\"), new XVar(\"list\")), \"?f=(Category~equals~\", MVCFunctions.RawUrlEncode((XVar)(values[\"Category\"])), \")'\"), \"crumb_title_link\", true, \"crumb_title\", values[\"Category\"]), null);\r\n\r\n\/\/ article name itself, no link\r\nbreadcrumb.InitAndSetArrayItem(new XVar(\"crumb_attrs\", \"\", \"crumb_title_span\", true, \"crumb_title\", values[\"Title\"]), null);\r\nxt.assign_loopsection(new XVar(\"crumb\"), (XVar)(breadcrumb));<\/textarea><\/pre>\n<\/div>\n<p><!--\n\n\n<h2>Tell a friend\n\n<h2>\n\nThis is a useful feature that allows you to share the link to the current page with someone via email. \n--><\/p>\n<h2>Single record view on the List page<\/h2>\n<p>We have two tasks here. First, we want to use an image as a background of the whole record cell, while displaying the text over this image.  And second, we want this image to pop up, when we move our mouse over the cell. <\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_single_record.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_single_record-600x444.png\" alt=\"\" width=\"600\" height=\"444\" class=\"alignnone size-medium wp-image-2651\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_single_record-600x444.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_single_record.png 645w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>1. Set <strong>grid type<\/strong> to &#8216;vertical-grid&#8217;, set <strong>records per row<\/strong> to 4. This is how the grid itself is going to look. <\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_grid_page_designer.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_grid_page_designer-600x266.png\" alt=\"\" width=\"600\" height=\"266\" class=\"alignnone size-medium wp-image-2652\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_grid_page_designer-600x266.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_grid_page_designer-768x340.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/02\/news_grid_page_designer.png 851w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>2. Image will be only used as a background of the cell. To do so, we set &#8216;View as&#8217; type of the image field to &#8216;Custom&#8217; and use the following code. <\/p>\n<p><strong>PHP code<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >\r\n$img = my_json_decode($data[\"news_image\"]);  \r\n$value = \"<span style='background-image:url(\".$img[0][\"name\"].\")' class='list_image'><\/span>\";<\/textarea><\/pre>\n<\/div>\n<p><strong>C# code<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\ndynamic img = XVar.Array();\r\nimg = XVar.Clone(MVCFunctions.my_json_decode((XVar)(data[\"news_image\"])));\r\nvalue = XVar.Clone(MVCFunctions.Concat(\"<span style='background-image:url(\", img[0][\"name\"], \")' class='list_image'><\/span>\"));<\/textarea><\/pre>\n<\/div>\n<p>3. Now comes the CSS. This code goes to Editor -> Custom CSS area. <\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"css\" name=\"mshighlighter\" >\r\n.newsmain .list_image {\r\n    background-size: cover;\r\n    background-position: center center;\r\n    position: relative;\r\n    -webkit-transition: 1s;\r\n    -moz-transition: 1s;\r\n    transition: 1s;\r\n    -webkit-transform: scale(1);\r\n    -moz-transform: scale(1);\r\n    transform: scale(1);\r\n    -webkit-transform-origin: 50% 100% 0;\r\n    -moz-transform-origin: 50% 100% 0;\r\n    transform-origin: 50% 100% 0;\r\n}\r\n.newsmain .r-record-body .panel-body tbody tr:first-child {\r\n    display: block;\r\n    position: relative;\r\n    \/* change the height of the record if you need to *\/\r\n    height: 210px;\r\n}\r\n\/* making the first cell (image) cover the whole record area *\/\r\n.newsmain .r-record-body .panel-body tbody tr:first-child td{\r\n    width: 100%;\r\n    position: absolute;\r\n}\r\n.newsmain .r-record-body .panel-body tbody tr:first-child td:first-child * {\r\n    height: 210px;\r\n    display: inline-block;\r\n    width: 100%;\r\n    \/* this is necessary to make sure image stays inside cell boundaries when enlarged *\/\r\n    overflow: hidden !important;\r\n}\r\n\/* enlarging image when mouse is hovering the cell *\/\r\n.newsmain .r-record-body:hover .list_image{\r\n    -webkit-transform: scale(1.035);\r\n    -moz-transform: scale(1.035);\r\n    transform: scale(1.035);\r\n}<\/textarea><\/pre>\n<\/div>\n<p>4. You may have noticed that this CSS uses the prefix <strong>.newsmain<\/strong>. The idea is to apply this CSS to a single page only, the List page of the main News table. To achieve this, we also need to add the following code to &#8216;List page: Before Display&#8217; event.<\/p>\n<p><strong>PHP code:<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >\r\n$xt->assign(\"stylename\",\"newsmain\");<\/textarea><\/pre>\n<\/div>\n<p><strong>C# code:<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"js\" name=\"mshighlighter\" >\r\nxt.assign(\"stylename\", \"newsmain\");<\/textarea><\/pre>\n<\/div>\n<p>Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you build a public-facing application you need to make sure it looks sharp. In this article, we&#8217;ll show you a few ideas of how you can make PHPRunner and ASPRunner.NET projects look unique. List page grid Let&#8217;s start with the grid on the List page. As an example, we will be using a recently updated News template that comes with PHPRunner and ASPRunner.NET. We want to draw attention to the very first element, making it bigger than others.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,8],"tags":[],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2594"}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=2594"}],"version-history":[{"count":21,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2594\/revisions"}],"predecessor-version":[{"id":2835,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2594\/revisions\/2835"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=2594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=2594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=2594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}