Beautiful Design App

Other option:

  • Tiles Layout
  • 3:2 Ratio
  • Tag becomes faux button

<pre><span><style>
.tile-image-area :nth-child(1) img {
height: 150px;
width: 150px;
border-radius: 50%;
margin: 10px;
}

[data-test="tile-item"] {
border: solid 1px #9ec1cc;
}

[data-test="app-tag-overlay"] {
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 5px;
font-size: 1rem;
padding: 10px;
text-transform: unset;
}
.tile-title {
position: absolute;
top: 10%;
right: 10px;
white-space: pre-wrap !important;
overflow: visible !important;
text-align: left !important;
width: 150px;
font-weight: 700 !important;
font-size: 1.3rem !important;
line-height: 1.5rem !important;
}

.tile-image-area {
height: 170px;
}
12 Likes

Beautiful.

1 Like

This is the view I am waiting for. This is the default view for singles/matrimonial sites. Wish Glide could make this view available. Then maybe we could all deliver some proper matrimonial/dating sites.

1 Like

Actually, this one is not bad at all; when it breaks, it does not affect anything around it, and the layout reverts to original.

Edit
Sorry, I was wrong: it affects only Glide generated images. Probably just on mine.

great UI

1 Like

Thank you @abirtanjinadnan!

It’s a very beautiful code.
Thank you @Robert_Petitto

I think it would be even better if Details could be specified with the same code as the title.

1 Like

Good call. Try this:

<pre><span><style>
.tile-image-area :nth-child(1) img {
height: 150px;
width: 150px;
border-radius: 50%;
margin: 10px;
}

[data-test="tile-item"] {
border: solid 1px #9ec1cc;
}

[data-test="app-tag-overlay"] {
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 5px;
font-size: 1rem;
padding: 10px;
text-transform: unset;
}
.tile-title {
white-space: pre-wrap !important;
overflow: visible !important;
font-weight: 700 !important;
font-size: 1.3rem !important;
line-height: 1.5rem !important;
}

.tile-subtitle {
white-space: pre-wrap !important;
overflow: visible !important;
font-weight: 700 !important;
font-size: 1rem !important;
line-height: 2rem !important;
}

.tile-text-container {
position: absolute;
top: 10%;
right: 10px;
white-space: pre-wrap !important;
overflow: visible !important;
text-align: left !important;
width: 150px;
}

.tile-image-area {
height: 170px;
}

3 Likes

Thank you @Robert_Petitto.
I tried it on the cake shop menu.

<pre><span>
<div class="background"></div>
<style>
.background {
position:fixed;
margin-top:0;
background:#FF9800;
width:100%;
height:100%;
top:5.5em;
right:0;
z-index:-1;
}
.tile-image-area :nth-child(1) img {
height: 130px;
width: 130px;
border-radius: 5%;
margin: 10px;
}
[data-test="tile-item"] {
border: solid 1px #fff;
background:#fff;
}
[data-test="app-tag-overlay"] {
position: absolute;
right: 113px;
bottom: 10px;
border-radius: 5px;
font-size: 1rem;
padding: 5px 10px 5px 10px;
text-transform: unset;
border: solid 1px #fff;
}
.tile-title {
white-space: pre-wrap !important;
overflow: visible !important;
font-weight: 700 !important;
font-size: 1rem !important;
line-height: 1.2rem !important;
}

.tile-subtitle {
white-space: pre-wrap !important;
overflow: visible !important;
font-size: 0.8rem !important;
line-height: 1rem !important;
color: #000 !important;
margin-top: 10px;
}

.tile-text-container {
position: absolute;
top: 10%;
right: 10px;
white-space: pre-wrap !important;
overflow: visible !important;
text-align: left !important;
width: 180px;
}
.tile-image-area {
height: 150px;
}

10 Likes

I’m going to try this.

That looks really cool!

2 Likes

I created a kiosk for the automotive industry. It works on a Kiosk location and customers that dont want to have physical contact with others due too Covid-19 can access it from there car as well as request a LYFT from the app (the dealership pays for LYFTs). Here’s some screenshots of the flow of the app. The app also houses the backend of the app that is used by employees who access the kiosk submissions as well as a custom chat for the employees. The chat doesn’t use any forms and filters by who they are talking to and the messages they shared. It also uses current vehicle mileage to determine the best services for the vehicle.







This is customer view

6 Likes

Here’s the employee side of the app:


Heres the chat. It required quite a few workarounds but it lists current chats you are in on the left, and on the right is the chat/person you selected, it lists most recent chats from top to bottom to avoid scrolling, you type the response at the top and click the button and it submits the response and notifies the person.

3 Likes

This chat is nothing like any of us have on here. it’s live and distinguishes the chats you are involved in and only yours without a form submission. It identifies the last message sent from the opposing user posts it in the left list.
Phone view


4 Likes

Using the code created by @Robert_Petitto
I tried to decorate the tile style view.
★ This is the table of contents page for staff introduction.
★ Limited to 2 rows.
★ The tag is a fake button.
★ The background cropped image is used.

<pre><span>
<div class="background"></div>
<style>
html { font-size: 14px; }
.background {
position:fixed;
margin-top:0;
background:#5498dc;
width:100%;
height:100%;
top:5.5em;
right:0;
z-index:-1;
}
.tile-image-area :nth-child(1) img {
height: 90%;
width: 90%; left: 5%;
margin-top: 0.2rem;
border-bottom: solid 1px #fff;
}
[data-test="tile-item"] {
border: solid 1px #fff;
}
[data-test="app-tag-overlay"] {
position: absolute;
left: 0.7rem;
bottom: 10px;
border-radius: 5px;
font-size: 1rem;
padding: 5px 10px 8px 10px;
text-transform: unset;
background:#000;
color: #fff;
}
.tile-title {
white-space: pre-wrap !important;
overflow: visible !important;
font-weight: 700 !important;
font-size: 1.5rem !important;
line-height: 1.4rem !important;
color: #fff !important;
}

.tile-subtitle {
white-space: pre-wrap !important;
overflow: visible !important;
font-size: 0.8rem !important;
line-height: 1rem !important;
color: #fff !important;
margin-top: 0.2rem;
}

.tile-text-container {
position: absolute;
top: 16.5rem;
left: 0.7rem;
white-space: pre-wrap !important;
overflow: visible !important;
text-align: left !important;
width: 80%;
}
.tile-image-area {
height: 24rem;
}

12 Likes

I have an onboarding app that after you select the position it lists all 30 days of training as well as the tests and videos are in the app, the app grades the tests and submits emails to managers with grades. You cannot move onto the next day of training until the previous is done and tests are passed. When you start the onboarding it timestamps the day so if an employee gets behind it notifies managers when they are anymore than 3 days behind.

2 Likes

Ok, last image for the messenger app, I realized I didnt have but 1 person listed so i added another user and created a 2nd chat instance.

4 Likes

@Drearystate Looking good :+1:

1 Like

Do you like Japanese kanji?

Vertical writing using <writing-mode: vertical-rl;> gives the following.
However, except in the Japanese environment, you need to upload Kanji as an image.

9 Likes

So, as I mentioned before I made a messenger app similar to the messenger part of the kiosk app I made a few days back. Here’s a quick video and just want to say up front, it’s not in any way intended to compete with Robert’s Messenger app, in fact its 2 completely different approaches to the app idea.
I hope you guys enjoy it and it will be listed as a free app :grin:

9 Likes

Amazing work @Drearystate. I can’t seem to find it on the template store :frowning:

1 Like